/*
Theme Name: SCA Custom
Theme URI: https://scacuortho.com/
Author: Santa Cruz Acupuncture Orthopedics & Sports Medicine Clinic
Description: Custom clinic theme derived from the approved 2026 redesign.
Version: 1.0.13
Text Domain: sca-custom
*/

:root{
  --ink:#173d42;
  --ink2:#24565a;
  --cream:#f5f2ea;
  --sand:#e7dfcf;
  --paper:#fbfaf6;
  --terracotta:#a95745;
  --coral:#c77461;
  --white:#fff;
  --muted:#667372;
  --line:rgba(23,61,66,.16);
  --shadow:0 18px 50px rgba(16,43,45,.12);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.eyebrow{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--terracotta)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.025em}
h1{font-size:clamp(2.7rem,5.2vw,5.15rem);line-height:.96;margin-bottom:22px}
h2{font-size:clamp(2.3rem,4.5vw,4.8rem);line-height:.96;margin-bottom:22px}
h3{font-size:1.55rem;line-height:1.05}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);color:#405351;max-width:650px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:.76rem;transition:.2s ease;cursor:pointer}
.btn-primary{background:var(--terracotta);color:white}
.btn-primary:hover{transform:translateY(-2px);background:#8e4638}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-light{background:white;color:var(--ink)}
.topbar{display:none}
header{position:absolute;top:36px;left:0;right:0;z-index:10;color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:18px}
.brand{display:block;width:min(36vw,400px);max-width:400px;line-height:0;flex:0 1 400px}
.brand .site-logo{display:block;width:100%;height:auto}
.navlinks{display:flex;align-items:center;gap:25px;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.navlinks a{color:#54595f;opacity:.92}
.navlinks a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
body:not(.home) .brand,
body:not(.home) .navlinks a:not(.btn){color:#fff}
.menu{display:none;background:transparent;border:0;color:white;font-size:1.8rem;padding:4px}
body.sca-light-hero .brand,body.sca-light-hero .navlinks a:not(.btn),body.sca-light-hero .menu{color:var(--ink)}
#mobileNav{position:fixed;inset:0;background:#173d42;color:white;z-index:60;padding:115px 28px 30px;display:none;overflow-y:auto}
#mobileNav.open{display:block}
.mobile-nav-close{position:absolute;top:42px;right:28px;border:0;background:transparent;color:#fff;font-size:2.7rem;line-height:1;padding:4px 10px;cursor:pointer}
body.nav-open{overflow:hidden}
.hero{min-height:min(900px,100svh);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#78949a}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,35,37,.08) 0%,rgba(12,35,37,.10) 42%,rgba(12,35,37,.68) 100%)}
.hero-photo{position:absolute;inset:0}
.hero-photo img{object-position:32% 55%}
.hero-content{position:relative;z-index:2;color:white;padding:125px 0 62px}
.hero-content .eyebrow{color:#f0c7b8}
.hero-copy{max-width:850px}
.hero-copy .lede{color:#f4f1e9;max-width:720px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.scroll-note{display:none}
.scroll-note i{display:block;width:42px;height:1px;background:white}
.section{padding:110px 0}
.section-tight{padding:80px 0}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:48px}
.section-head > div:last-child{max-width:560px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;overflow:hidden;border-radius:var(--radius);min-height:460px;background:#183f43;color:#fff;box-shadow:var(--shadow)}
.card-img{position:absolute;inset:0}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,28,30,.02),rgba(8,28,30,.84) 88%)}
.card-body{position:absolute;z-index:2;left:28px;right:28px;bottom:28px}
.card h3{font-size:2rem;margin-bottom:10px}
.card p{color:#edf0eb;margin-bottom:0}
.card .arrow{display:inline-block;margin-top:18px;font-weight:900}
.split{display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center}
.media{border-radius:var(--radius);overflow:hidden;min-height:600px;box-shadow:var(--shadow)}
.media img{object-position:center}
.kicker{color:var(--terracotta);font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.74rem;margin-bottom:18px}
.approach{background:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{padding:35px 25px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step-num{font-size:.72rem;font-weight:900;letter-spacing:.15em;color:var(--terracotta);margin-bottom:38px}
.step h3{font-size:1.7rem;margin-bottom:12px}
.step p{color:var(--muted);font-size:.94rem}
.band{background:var(--ink);color:white}
.band .lede{color:#dbe6e3}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--paper);padding:42px}
.service:nth-child(3),.service:nth-child(4){background:var(--cream)}
.service h3{margin-bottom:13px}
.service p{color:var(--muted);margin-bottom:0}
.conditions{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.condition-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px;border-top:1px solid var(--line)}
.condition-list div{padding:13px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.about{background:var(--cream)}
.lifestyle-showcase{background:#173d42;color:#fff}
.lifestyle-showcase .eyebrow{color:#e8aa91}
.lifestyle-showcase .lede{color:#d8e2df}
.activity-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:250px 250px;grid-auto-flow:dense;gap:18px}
.activity-photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:#284d51}
.activity-photo-tall{grid-row:span 2}
.activity-photo-wide{grid-column:span 2}
.activity-photo img{transition:transform .45s ease}
.activity-photo:hover img{transform:scale(1.025)}
.activity-photo:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(7,29,31,.76))}
.activity-photo figcaption{position:absolute;left:20px;right:20px;bottom:17px;z-index:1;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.about-photo{display:grid;grid-template-columns:1fr .62fr;gap:18px;min-height:620px}
.about-photo .portrait-main{border-radius:var(--radius);overflow:hidden}
.about-photo .portrait-small{border-radius:var(--radius);overflow:hidden;margin-top:100px;height:390px}
.about-copy p{color:#4d5c59}
.credentials{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 30px}
.credential{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.pricing{background:#e8e1d4}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.home-rate-grid{grid-template-columns:repeat(3,1fr)}
.pricing-group + .pricing-group{margin-top:76px}
.pricing-group > .lede{margin-bottom:28px}
.price{background:var(--paper);padding:42px;border-radius:var(--radius);border:1px solid var(--line)}
.price .amount{font-family:Georgia,serif;font-size:4rem;line-height:1;margin:14px 0}
.price p{color:var(--muted)}
.insurance{margin-top:25px;padding:22px 0;border-top:1px solid var(--line);font-size:.9rem;color:#52615f}
.newpatient{background:white}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline-item{padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.timeline-item strong{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--terracotta);margin-bottom:28px}
.timeline-item h3{font-size:1.35rem}
.timeline-item p{color:var(--muted);font-size:.93rem;margin-bottom:0}
.contact{background:var(--ink);color:white;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;right:-10%;top:-30%;width:55%;height:160%;background:rgba(255,255,255,.035);transform:rotate(12deg)}
.contact-grid{position:relative;display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}
.contact .lede{color:#d9e3e0}
.contact-info{border-top:1px solid rgba(255,255,255,.22);padding-top:20px}
.contact-info div{margin-bottom:22px}
.contact-label{display:block;color:#a8c1bd;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:800;margin-bottom:5px}
.contact-info a{text-decoration:underline;text-underline-offset:4px}
.footer{background:#102f32;color:#c6d3d0;padding:28px 0 95px;font-size:.78rem}
.footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer a{color:white}
.mobile-cta{display:none}
.page-view{display:none}.page-view.active{display:block}.page-view .page-hero{padding:145px 0 75px;background:var(--cream)}.page-view .page-hero h1{max-width:850px}.page-view .page-intro{max-width:760px}.page-view .page-image{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:420px}.page-view .page-image img{width:100%;height:100%;object-fit:cover}.page-view .back-link{display:inline-flex;gap:8px;margin-bottom:28px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.page-view .back-link:hover{text-decoration:underline;text-underline-offset:5px}.page-view .bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px;border-top:1px solid var(--line)}.page-view .bullets div{padding:13px 0;border-bottom:1px solid var(--line)}.page-view .notice{padding:24px;background:var(--cream);border-left:3px solid var(--terracotta);margin-top:30px}.page-view .quote{font-family:Georgia,serif;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.2;color:var(--ink);padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-view#page-approach .page-hero,.page-view#page-services .page-hero,.page-view#page-conditions .page-hero,.page-view#page-about .page-hero,.page-view#page-new-patients .page-hero,.page-view#page-contact .page-hero{color:#fff;background-color:#173d42;background-position:center;background-size:cover;background-repeat:no-repeat}
.page-view#page-approach .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.9),rgba(9,39,42,.42)),url('assets/coastal-cycling.webp');background-position:center 48%}
.page-view#page-services .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.9),rgba(9,39,42,.38)),url('assets/canyon-exploration.webp');background-position:center 56%}
.page-view#page-conditions .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.9),rgba(9,39,42,.36)),url('assets/coastal-hiking.webp');background-position:center 42%}
.page-view#page-about .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.9),rgba(9,39,42,.34)),url('assets/about-redwood-trail.webp');background-position:center 54%}
.page-view#page-new-patients .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.9),rgba(9,39,42,.34)),url('assets/mountain-road-cycling.webp');background-position:center 58%}
.page-view#page-contact .page-hero{background-image:linear-gradient(90deg,rgba(9,39,42,.88),rgba(9,39,42,.28)),url('assets/contact-mountain-biking.webp');background-position:center 52%}
.page-view#page-approach .page-hero .lede,.page-view#page-services .page-hero .lede,.page-view#page-conditions .page-hero .lede,.page-view#page-about .page-hero .lede,.page-view#page-new-patients .page-hero .lede,.page-view#page-contact .page-hero .lede{color:#eef4f2}
@media (max-width:900px){
  .navlinks{display:none}
  .menu{display:block}
  header{top:36px}
  .brand{width:min(72vw,330px);max-width:330px;flex-basis:330px}
  .cards,.steps,.timeline,.home-rate-grid{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.conditions,.contact-grid{grid-template-columns:1fr;gap:38px}
  .media{min-height:480px}
  .about-photo{min-height:520px}
  .activity-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,260px)}
  .activity-photo-tall,.activity-photo-wide{grid-row:auto;grid-column:auto}
}
@media (max-width:640px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .topbar{font-size:.62rem;line-height:1.35}
  .brand{width:min(68vw,280px);max-width:280px;flex-basis:280px}
  .hero{min-height:760px}
  .hero-content{padding:110px 0 42px}
  h1{font-size:clamp(2.65rem,11.5vw,3.7rem)}
  h2{font-size:clamp(2.35rem,11vw,3.5rem)}
  .section{padding:75px 0}
  .section-tight{padding:58px 0}
  .section-head{display:block;margin-bottom:34px}
  .activity-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,220px);gap:12px}
  .section-head > div:last-child{margin-top:20px}
  .cards,.steps,.service-grid,.price-grid,.timeline,.home-rate-grid{grid-template-columns:1fr}
  .card{min-height:410px}
  .steps{border-bottom:0}
  .step{border-right:0!important;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .condition-list{grid-template-columns:1fr}
  .about-photo{grid-template-columns:1fr .7fr;min-height:420px}
  .about-photo .portrait-small{margin-top:70px;height:260px}
  .price{padding:30px}
  .price .amount{font-size:3.2rem}
  .contact-grid{gap:25px}
  .footer-row{display:block}
  .footer-row div+div{margin-top:12px}
  .mobile-cta{position:fixed;display:grid;grid-template-columns:1fr 1fr;gap:8px;bottom:0;left:0;right:0;z-index:50;padding:8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));background:rgba(16,47,50,.96);backdrop-filter:blur(12px)}
  .mobile-cta .btn{min-height:48px;font-size:.68rem}
}


.specialty-card-link{display:block;color:inherit;text-decoration:none}.specialty-card-link:focus-visible{outline:2px solid #0b5b6b;outline-offset:4px}


/* Hash-route fallback for local/iPhone file viewing: keeps the three specialty links functional even if JavaScript is unavailable. */
.route-target{display:block;height:0;overflow:hidden;position:relative;top:-1px}
body:has(#orthopedic-acupuncture-page:target) #home-content,
body:has(#sports-medicine-page:target) #home-content,
body:has(#traditional-chinese-medicine-page:target) #home-content{display:none!important}
body:has(#orthopedic-acupuncture-page:target) #page-orthopedic-acupuncture,
body:has(#sports-medicine-page:target) #page-sports-medicine,
body:has(#traditional-chinese-medicine-page:target) #page-traditional-chinese-medicine{display:block!important}