/*
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.0
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{font-family:Georgia,serif;font-size:1.18rem;line-height:1.02;max-width:230px}
.brand span{display:block;font-family:inherit;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;margin-top:7px;opacity:.86}
.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}
.menu{display:none;background:transparent;border:0;color:white;font-size:1.8rem;padding:4px}
.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:center 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)}
.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}
.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)}
@media (max-width:900px){
  .navlinks{display:none}
  .menu{display:block}
  header{top:36px}
  .cards,.steps,.timeline{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}
}
@media (max-width:640px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .topbar{font-size:.62rem;line-height:1.35}
  .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}
  .section-head > div:last-child{margin-top:20px}
  .cards,.steps,.service-grid,.price-grid,.timeline{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}