/*
Theme Name: Wilco Arthritis Institute
Theme URI: https://skyway.media
Author: Skyway Media
Author URI: https://skyway.media
Description: Custom theme for Wilco Arthritis Institute, the concierge hip and knee practice of Dr. Stephen Engstrom. Built to Wilco Brand Guidelines v1.0: navy and maroon on white, Playfair Display and Montserrat. Activating the theme creates the site's pages. Practice details, the consultation form and photography are set in Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wilco
*/

/* Layout: a private house, not a clinic. White leads, navy structures, maroon punctuates (60/30/10).
   A narrow label column sits beside one wide reading column; space on the page argues for space in the schedule.
   Single light theme by design: this is the brand's own ground, per Wilco Brand Guidelines v1.0. */
:root{
  /* core palette */
  --navy:#263450; --maroon:#763234; --white:#FFFFFF; --ink:#040707;
  /* supporting tints */
  --mist:#EEF1F6; --slate:#59637C; --blush:#F4ECEC; --midnight:#101625;
  /* derived, digital only */
  --line:#DCE0E8; --line-strong:#C3C9D6; --on-dark-soft:#B9C2D6; --on-dark-line:rgba(255,255,255,.2);
  /* type */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",Arial,"Helvetica Neue",sans-serif;
  --h1:clamp(2.375rem,1.6rem + 2.6vw,3rem);      /* 38–48px */
  --h2:clamp(1.6875rem,1.4rem + 1vw,2rem);       /* 27–32px */
  --h3:1.3125rem;                                 /* 21px */
  --body:clamp(1.0625rem,1rem + .2vw,1.125rem);  /* 17–18px: a step up, for readers over fifty */
  --small:.9375rem;
  /* space */
  --gutter:clamp(20px,5vw,64px);
  --section:clamp(72px,9vw,128px);
  --max:1200px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--navy);font-family:var(--sans);font-size:var(--body);
  font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:12px;z-index:50;background:var(--navy);color:var(--white);padding:10px 16px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type roles ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--navy);text-wrap:balance}
h1{font-size:var(--h1);font-weight:600;line-height:1.14;letter-spacing:-.005em}
h2{font-size:var(--h2);font-weight:600;line-height:1.2}
h3{font-size:var(--h3);font-weight:500;line-height:1.35}
h1:focus{outline:none}
.label{display:block;font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--maroon);line-height:1.6}
.lede{font-size:clamp(1.125rem,1.05rem + .4vw,1.3125rem);line-height:1.6;max-width:36em}
.prose{display:flex;flex-direction:column;gap:1.35em;max-width:38em}
.prose p{text-wrap:pretty}
.muted{color:var(--slate)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:14px 28px;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.04em;text-decoration:none;
  background:var(--navy);color:var(--white);border:1px solid var(--navy);border-radius:0;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:var(--midnight);border-color:var(--midnight)}
.btn--quiet{background:transparent;color:var(--navy)}
.btn--quiet:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--light{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--light:hover{background:var(--mist);border-color:var(--mist);color:var(--navy)}
.more-link{display:inline-flex;align-items:baseline;gap:.5em;font-weight:600;font-size:.9375rem;letter-spacing:.02em;
  text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--maroon);align-self:flex-start}
.more-link::after{content:"\2192";transition:transform .2s ease}
.more-link:hover::after{transform:translateX(4px)}
.on-dark .more-link{border-bottom-color:var(--white)}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:block;flex:none;padding-block:18px}
.brand img{width:212px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a:not(.btn){font-size:.9375rem;font-weight:500;text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.nav a:not(.btn):hover{border-bottom-color:var(--line-strong)}
.nav a[aria-current="page"]:not(.btn){border-bottom-color:var(--maroon)}
.nav .btn{min-height:46px;padding:10px 22px}
.menu-btn{display:none;position:relative;flex:none;width:48px;height:48px;margin-right:-10px;padding:0;background:transparent;border:0;
  border-radius:0;color:var(--navy);cursor:pointer}
.menu-btn span{position:absolute;left:10px;right:10px;top:23px;height:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.menu-btn span:nth-child(1){transform:translateY(-8px)}
.menu-btn span:nth-child(3){transform:translateY(8px)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.menu-btn span{transition:none}}
@media (max-width:1000px){
  .menu-btn{display:block}
  .site-head .wrap{flex-wrap:wrap;min-height:76px}
  .brand img{width:184px}
  .js .nav{display:none}
  .nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:20px}
  .js .nav.is-open{display:flex}
  .nav a:not(.btn){padding-block:14px;border-bottom:1px solid var(--line);font-size:1rem}
  .nav a[aria-current="page"]:not(.btn){border-bottom-color:var(--maroon)}
  .nav .btn{margin-top:20px;min-height:52px}
}

/* ---------- pages ---------- */
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section--flush{padding-top:0}
.section + .section--ruled{border-top:1px solid var(--line)}
.bg-mist{background:var(--mist)}
.on-dark{background:var(--navy);color:var(--white)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}
.on-dark .label{color:var(--on-dark-soft)}
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > :nth-child(2){animation-delay:.08s}
  .hero-copy > :nth-child(3){animation-delay:.16s}
  .hero-copy > :nth-child(4){animation-delay:.24s}
  .hero-copy > :nth-child(5){animation-delay:.32s}
  .hero .photo{animation:page-in 1.1s ease .2s both}
}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* label column + reading column */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.split > *{min-width:0}
.split-body{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,5vw,80px)}
  .split > .label{padding-top:.55em}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,104px) var(--section)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:end}
.hero-grid > *{min-width:0}
.hero-copy{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,30px);align-items:flex-start}
.hero-copy h1{max-width:13em}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.visit-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;width:100%;margin-top:clamp(8px,2vw,28px);
  padding-top:22px;border-top:1px solid var(--line);font-size:var(--small);color:var(--slate)}
.visit-row b{font-weight:600;color:var(--navy)}
.visit-row li + li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--maroon);margin-right:22px;vertical-align:middle}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* ---------- photography slots ---------- */
.photo{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:100%;max-width:100%;
  background:var(--mist);padding:clamp(22px,3vw,34px);aspect-ratio:4/5}
.photo--wide{aspect-ratio:21/9}
.photo--portrait{aspect-ratio:3/4}
.photo-mark{width:56px;flex:none}
.photo figcaption{display:flex;flex-direction:column;gap:8px;font-size:.875rem;line-height:1.55;color:var(--slate);max-width:30em}
.photo figcaption .label{font-size:.6875rem;color:var(--navy)}
@media (max-width:899px){.photo,.photo--portrait{aspect-ratio:4/3}.photo--wide{aspect-ratio:16/10}}

/* ---------- "more time" ---------- */
.time{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
.time li{min-width:0;display:flex;flex-direction:column;gap:12px;padding-top:26px;border-top:1px solid var(--line-strong);position:relative}
.time li::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--maroon)}
.time em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.875rem,1.5rem + 1.2vw,2.375rem);line-height:1.1}
@media (min-width:760px){.time{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- quote band ---------- */
.quote{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.quote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.625rem,1.2rem + 1.9vw,2.5rem);line-height:1.3;max-width:20em;text-wrap:balance}
.quote footer{display:flex;align-items:center;gap:16px;font-size:var(--small);color:var(--on-dark-soft)}
.quote footer img{width:40px}

/* ---------- lists ---------- */
.rows{border-top:1px solid var(--line-strong)}
.rows > li{display:flex;flex-direction:column;gap:4px;padding-block:20px;border-bottom:1px solid var(--line)}
.rows h3{font-size:var(--h3)}
.rows .sub{font-size:var(--small);color:var(--slate)}
.rows--plain > li{font-size:1rem;padding-block:16px}
.facts{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-strong)}
.facts > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding-block:18px;border-bottom:1px solid var(--line);min-width:0}
.facts dt{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.facts dd{font-size:1rem}
@media (min-width:560px){.facts > div{grid-template-columns:9.5em minmax(0,1fr);gap:20px;align-items:baseline}}
.two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.two-col > *{min-width:0}
@media (min-width:900px){.two-col{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.two-col--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.stack{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,30px);align-items:flex-start}
.stack > .rows,.stack > .facts,.stack > .prose{width:100%}

/* visits */
.visits{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.visits li{background:var(--white);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:8px;min-width:0}
.visits p{font-size:var(--small);color:var(--slate)}
@media (min-width:760px){.visits{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* steps: a true sequence, so numbered */
.steps{counter-reset:step;border-top:1px solid var(--line-strong)}
.steps > li{counter-increment:step;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-block:28px;border-bottom:1px solid var(--line)}
.steps > li > *{min-width:0}
.steps h3::before{content:counter(step) ".";display:inline-block;min-width:1.6em;color:var(--maroon);font-weight:600}
.steps p{max-width:36em}
@media (min-width:760px){.steps > li{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:baseline}}

.callout{background:var(--blush);padding:clamp(24px,3.4vw,40px);max-width:38em;border-left:1px solid var(--maroon)}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.4;max-width:24em;
  padding-left:clamp(20px,3vw,32px);border-left:1px solid var(--maroon);text-wrap:balance}

/* page heads */
.page-head{background:var(--mist);padding-block:clamp(56px,8vw,112px)}
.page-head .wrap{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.page-head h1{max-width:16em}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:24px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:var(--h3);font-weight:500;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--sans);font-weight:300;font-size:1.75rem;line-height:1;color:var(--maroon);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{display:flex;flex-direction:column;gap:1.2em;padding-bottom:32px;max-width:38em}
.q-list{border-top:1px solid var(--line-strong)}
.q-list a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:22px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:var(--h3);font-weight:500;line-height:1.35;text-decoration:none}
.q-list a::after{content:"\2192";font-family:var(--sans);color:var(--maroon);flex:none;transition:transform .2s ease}
.q-list a:hover::after{transform:translateX(4px)}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field legend{font-size:.875rem;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--navy);background:var(--white);border:1px solid var(--line-strong);
  border-radius:0;padding:14px 16px;min-height:54px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
@media (min-width:640px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}.field--full{grid-column:1/-1}}
.form-status{grid-column:1/-1;background:var(--blush);border-left:1px solid var(--maroon);padding:18px 22px;font-size:1rem}

/* ---------- closing band + footer ---------- */
.closing .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end}
.closing .stack{gap:18px}
.closing p{max-width:34em;color:var(--on-dark-soft)}
@media (min-width:900px){.closing .wrap{grid-template-columns:minmax(0,8fr) auto}}
.site-foot{background:var(--midnight);color:var(--white);padding-block:clamp(56px,7vw,88px) 36px;font-size:var(--small)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.foot-grid > *{min-width:0}
.foot-brand{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.foot-brand img{width:216px}
.foot-brand p{color:var(--on-dark-soft);max-width:26em}
.site-foot h2{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:14px}
.site-foot li{padding-block:5px}
.site-foot a{text-decoration:none;border-bottom:1px solid transparent}
.site-foot a:hover{border-bottom-color:var(--on-dark-soft)}
.foot-base{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--on-dark-line);color:var(--on-dark-soft);font-size:.8125rem}
@media (min-width:800px){.foot-grid{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr)}}

/* ---------- WordPress ---------- */
[hidden]{display:none!important}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
@media (max-width:600px){.admin-bar .site-head{top:0}}
.faq details{scroll-margin-top:128px}
.photo--filled{display:block;padding:0;overflow:hidden}
.photo--filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-foot a[href^="tel:"],.site-foot a[href^="mailto:"]{border-bottom-color:var(--on-dark-line)}
.facts a{text-decoration:none;border-bottom:1px solid var(--maroon)}
.form-embed{min-width:0}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* editor content on pages and posts without their own template */
.entry h2{margin-top:.6em}
.entry h3{margin-top:.4em}
.entry a{text-decoration:none;border-bottom:1px solid var(--maroon)}
.entry ul,.entry ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry blockquote{font-family:var(--serif);font-style:italic;font-size:1.375rem;line-height:1.4;padding-left:24px;border-left:1px solid var(--maroon)}
.entry img{height:auto}
.entry-row{padding-block:28px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.entry-row h2 a{text-decoration:none}
.nav-links{display:flex;gap:18px;margin-top:40px;font-weight:600}

/* One-page site: anchor targets clear the header; room above the consult form. */
section[id]{scroll-margin-top:6rem}
#consult .split-body{max-width:46rem}