/*
Theme Name: OHS Child
Description: Standalone theme for Optimal Hearing Solutions
Version: 1.2.0
*/
/* v1.2.0: focus-visible keyboard a11y states; font var fallback stacks + --poppins;
   FCP-safe keyframes (no opacity/visibility). */

:root{--navy:#304054;--slate:#456188;--charcoal:#1E1F21;--off-white:#F3F4F2;--lato:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--montserrat:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--poppins:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--montserrat);font-weight:400;color:var(--charcoal);background:var(--off-white);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--lato);text-transform:uppercase;letter-spacing:2px;color:var(--charcoal);font-weight:700}
p{margin-bottom:1.2rem}
a{color:var(--navy);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--slate)}
a:focus-visible,button:focus-visible,.btn:focus-visible,.cta-button:focus-visible,.hero-cta:focus-visible,.btn-navy:focus-visible{outline:3px solid var(--slate);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
button,.btn{background:var(--navy);color:#fff;border:none;padding:12px 24px;cursor:pointer;font-family:var(--lato);text-transform:uppercase;letter-spacing:1px;transition:background .3s ease}
button:hover,.btn:hover{background:var(--slate)}
img{max-width:100%;height:auto;display:block}

/* Temp Splash Page Footer detail */
.footer-credential{background:#304054;padding:1.5rem 0;text-align:center}
.credential{color:#F3F4F2;font-family:var(--montserrat);font-size:.875rem;font-weight:400;letter-spacing:.5px;margin:0}
.credential strong{color:#fff;text-transform:uppercase;letter-spacing:1px}
.credential .sep{margin:0 .75rem;opacity:.5}
/* end footer detail */

/* ============ HOME DRAFT ============ */
/* NO opacity, NO visibility in any keyframe. opacity:0 = no contentful paint = NO_FCP. */
@keyframes fadeInUpCenter{from{transform:translateY(24px)}to{transform:translateY(0)}}
@keyframes fadeInUpArrow{from{transform:translateX(-50%) translateY(24px)}to{transform:translateX(-50%) translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}

.skip-link{position:absolute;top:0;left:0;background:var(--navy);color:#fff;padding:.5rem 1rem;z-index:9999;transform:translateY(calc(-100% - 10px));transition:transform .3s;text-decoration:none}
.skip-link:focus{transform:translateY(0)}

.hero{background:linear-gradient(rgba(30,31,33,.4),rgba(48,64,84,.4)),url('https://optimalhearingsolutions.ca/wp-content/uploads/2026/05/hearing-clinic-salmon-arm-bc-hero-6.webp') center/cover no-repeat;padding:0;text-align:center;color:#fff;min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.hero-content{display:flex;flex-direction:column;align-items:center}
.hero-logo{max-width:520px;width:90%;margin:0 auto;filter:drop-shadow(0 4px 20px rgba(0,0,0,.4));animation:fadeInUpCenter .8s ease-out .1s both}
.hero h1{font-size:clamp(2rem,5vw,2.8rem);color:#fff;margin-bottom:1.5rem;text-shadow:1px 1px 4px rgba(0,0,0,.4)}
.hero-cta{display:inline-block;background:#fff;color:var(--navy);padding:1.2rem 3rem;font-family:var(--lato);text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:1rem;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease;text-decoration:none;margin-top:4.5rem;animation:fadeInUpCenter .8s ease-out .45s both}
.hero-cta:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 6px 30px rgba(0,0,0,.4)}
.scroll-arrow{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);animation:fadeInUpArrow .6s ease-out .8s both,bounce 2s infinite 1.4s}

.services-section{padding:8rem 2rem;background:var(--off-white)}
.services-heading{text-align:center;margin-bottom:3rem;font-size:2.5rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1200px;margin:0 auto}
.service-card{background:#fff;border:3px solid var(--navy);padding:2rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.service-card:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.service-card h2{margin-bottom:1rem;font-size:clamp(1.2rem,4vw,1.5rem)}
.service-card p{font-size:clamp(.9rem,3vw,1rem);line-height:1.6;margin-bottom:0}

.about-section{padding:5rem 2rem;background:#fff}
.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1.6fr;gap:4rem;align-items:center}
.about-image{position:relative;max-width:1000px}
.about-image img{border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.15)}
.about-heading{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1.5rem}
.about-content p{font-size:1.1rem;line-height:1.8;margin-bottom:1.2rem;color:var(--charcoal)}
.btn-navy{display:inline-block;background:var(--navy);color:#fff;padding:1rem 2rem;font-family:var(--lato);text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:4px;transition:background .3s ease;text-decoration:none}
.btn-navy:hover{background:var(--slate)}
.site-logo-icon{display:none}

@media(max-width:968px){
  .about-grid{grid-template-columns:1fr!important;gap:2rem!important}
  .about-image{max-width:400px;margin:0 auto}
}
@media(max-width:768px){
  .hero-cta{padding:1rem 2rem;font-size:.9rem;letter-spacing:1px}
  .top-bar{font-size:.75rem;padding:.4rem 0}
  .services-section{padding:3rem 1.5rem!important}
  .scroll-arrow svg{width:40px;height:40px}
  .about-section{padding:3rem 1.5rem!important}
  .about-heading{text-align:center}
  .about-content p{font-size:1rem!important}
}
@media(max-width:480px){
  .hero-cta{padding:.9rem 1.5rem;font-size:.85rem;width:90%;max-width:280px}
  .top-bar a{font-size:.7rem}
  .services-section{padding:2.5rem 1rem!important}
  .service-card{padding:1.5rem!important}
  .about-section{padding:2.5rem 1rem!important}
  .about-image{max-width:300px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-tagline{font-family:var(--montserrat);font-style:italic;font-weight:400;font-size:clamp(1rem,2.5vw,1.35rem);color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.4);margin-bottom:2rem;letter-spacing:.5px}
.site-footer{background:var(--navy);color:#fff;padding:6rem 2rem 2rem}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-divider{border:0;border-top:2px solid rgba(255,255,255,.4);margin:0 auto 3rem;width:140%;max-width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-bottom:3rem;text-align:center}
@media(max-width:768px){.footer-columns{grid-template-columns:1fr;gap:2rem}}
.footer-col h3{font-family:var(--lato);text-transform:uppercase;letter-spacing:2px;font-size:1rem;color:#fff;margin-bottom:1rem}
.footer-col p{line-height:1.8;margin:0}
.footer-col a{color:#fff;text-decoration:underline;transition:color .3s ease}
.footer-col a:hover{color:var(--off-white)}
.footer-bottom{text-align:center;padding-top:2rem;font-size:.9rem;color:rgba(255,255,255,.85)}