/* Client-requested refinements on top of the approved mockup design.
   Kept separate from the verbatim page stylesheets (variant-*.css). */

/* ---------------------------------------------------------------- icons
   The mockup's fax icon SVG ships without a stroke colour and renders
   invisible; paint every clinic-details icon consistently. */
.cinfo-ic svg{stroke:currentColor;}

/* ---------------------------------------------------------------- cards
   Service cards: the blue/white icon badges overlapping the photos are
   removed (client request); card text padding rebalanced to match. */
body .svc .ic{display:none;}
body .svc .bd{padding-top:26px;}

/* ------------------------------------------------- clinic details, organized
   Contact page "Clinic details": address and parking full width, the four
   short facts in a tidy two-column grid, tighter vertical rhythm. */
@media(min-width:700px){
  body .contact-grid div:has(> .cinfo-row){
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:36px;
    align-items:start;
  }
  body .contact-grid .cinfo-row{padding:16px 0;}
  body .contact-grid .cinfo-row:first-child,
  body .contact-grid .cinfo-row:last-child{grid-column:1 / -1;}
}

/* ------------------------------------------------- mobile action bar
   Call / Book buttons trimmed by ~30% so the bar takes less of the screen. */
@media(max-width:640px){
  .mbar{padding:7px 12px calc(7px + env(safe-area-inset-bottom));gap:8px;}
  .mbar .btn{min-height:34px;padding:6px 14px;font-size:14px;line-height:1.3;}
  .mbar .btn svg{width:15px;height:15px;}
  body{padding-bottom:56px;}
  .to-top{bottom:72px;}
}

/* ------------------------------------------------- mobile & tablet drawer
   The mockup drawer showed every sub-menu expanded at once; with 32 links
   that reads as one endless list. Sub-menus now collapse into accordions:
   tap a section to open it, one section open at a time. */
@media(max-width:1150px){
  nav.main{padding:8px 18px 28px;}
  nav.main > a,
  nav.main > a.nav-plain,
  nav.main .dd > button{
    border-bottom:1px solid var(--mist);
    border-radius:0;
    padding:15px 6px;
    font-weight:600;
  }
  nav.main .dd:last-of-type > button{border-bottom:1px solid var(--mist);}
  nav.main > a.hdr-call{border-bottom:none;margin-top:8px;}
  nav.main > a.nav-book{border-bottom:none;border-radius:6px;}
  nav.main .dd > button svg{transition:transform 200ms ease-out;}
  nav.main .dd.open > button svg{transform:rotate(180deg);}

  /* tapping a section focuses it, which used to re-trigger the desktop
     "centred fly-out" transform and shove the panel half off-screen */
  nav.main .dd .panel,
  nav.main .dd:hover .panel,
  nav.main .dd:focus-within .panel{
    position:static!important;
    transform:none!important;
    left:auto!important;
  }

  /* collapsed by default, open per-section (overrides the mockup's
     always-open flattening, which uses !important) */
  nav.main .dd .panel{display:none!important;}
  nav.main .dd.open .panel{display:block!important;margin:4px 0 10px 4px;padding:2px 0 2px 10px;}
  nav.main .dd.open .panel a{padding:11px 10px;}
  nav.main .dd.open .panel .h{display:block;padding:6px 10px 8px;}
}

/* ------------------------------------------------- careers: job descriptions */
.jd-list{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
details.jd{background:#fff;border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden;transition:box-shadow 180ms ease-out;}
details.jd[open]{box-shadow:var(--shadow-md);}
details.jd summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;}
details.jd summary::-webkit-details-marker{display:none;}
.jd-t b{display:block;font-family:'Lora',Georgia,serif;font-weight:500;font-size:19px;color:var(--deep-navy);line-height:1.3;}
.jd-t span{display:block;font-size:13px;color:var(--slate);margin-top:3px;}
.jd-i{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--paper);position:relative;transition:background 180ms ease-out;}
.jd-i::before,.jd-i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ray-blue);transform:translate(-50%,-50%);transition:transform 180ms ease-out;}
.jd-i::before{width:12px;height:2px;}
.jd-i::after{width:2px;height:12px;}
details.jd[open] .jd-i{background:var(--ray-blue);}
details.jd[open] .jd-i::before,details.jd[open] .jd-i::after{background:#fff;}
details.jd[open] .jd-i::after{transform:translate(-50%,-50%) rotate(90deg);}
.jd-b{padding:0 24px 24px;color:var(--slate);font-size:15px;line-height:1.7;}
.jd-b h4{font-family:'Public Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-navy);margin:18px 0 8px;}
.jd-b p{margin:0 0 12px;}
.jd-b ul{margin:0 0 12px;padding-left:20px;}
.jd-b li{margin:4px 0;}
.jd-apply{margin-top:18px;}

/* ------------------------------------------------- careers: application form */
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;}
.apply-copy h2{font-size:clamp(28px,3.4vw,38px);margin-top:14px;line-height:1.14;}
.apply-lede{margin-top:14px;font-size:16.5px;color:var(--slate);line-height:1.7;}
.apply-list{list-style:none;margin:18px 0 0;padding:0;}
.apply-list li{position:relative;padding:7px 0 7px 20px;font-size:14.5px;color:var(--ink);border-top:1px solid var(--mist);}
.apply-list li:first-child{border-top:none;}
.apply-list li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--gold);}
.apply-note{margin-top:18px;font-size:14px;color:var(--slate);}
.apply-note a{font-weight:600;}
.apply-form{background:#fff;border:1px solid var(--mist);border-radius:var(--r-card);padding:34px 32px;box-shadow:var(--shadow);}
.apply-h{font-size:22px;color:var(--deep-navy);margin-bottom:6px;}
.apply-p{font-size:14.5px;color:var(--slate);line-height:1.6;margin-bottom:22px;}
.apply-form .fld{margin-bottom:18px;}
.apply-form .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.apply-form .fld label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.apply-form .fld label .opt{font-weight:400;color:var(--slate);}
.apply-form .fld input,.apply-form .fld select,.apply-form .fld textarea{width:100%;font-family:'Public Sans',sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--mist);border-radius:var(--r-control);padding:12px 14px;transition:border-color 160ms ease-out,box-shadow 160ms ease-out;}
.apply-form .fld input::placeholder,.apply-form .fld textarea::placeholder{color:#9AA7B1;}
.apply-form .fld input:focus,.apply-form .fld select:focus,.apply-form .fld textarea:focus{outline:none;border-color:var(--ray-blue);box-shadow:0 0 0 3px rgba(3,99,169,.12);}
.apply-form .fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2356646F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;}
.apply-form .fld textarea{resize:vertical;min-height:120px;}
.apply-form .fld input[type=file]{padding:9px 12px;background:var(--paper);font-size:14px;}
.apply-form .form-note{margin-top:14px;font-size:12.5px;color:var(--slate);line-height:1.5;}
@media(max-width:900px){.apply-grid{grid-template-columns:1fr;gap:30px;}}
@media(max-width:560px){.apply-form{padding:24px 20px;}.apply-form .fld-row{grid-template-columns:1fr;gap:0;}}

/* ------------------------------------------------- online booking page */
.book-wrap{max-width:980px;margin:0 auto;}
.book-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.book-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px;}
.book-step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--mist);border-radius:var(--r-card);padding:18px;}
.book-n{width:36px;height:36px;border-radius:50%;background:var(--ray-blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px;flex:0 0 auto;}
.book-step b{display:block;font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;color:var(--ink);}
.book-step span{display:block;margin-top:3px;font-size:13.5px;color:var(--slate);line-height:1.5;}
.book-embed{border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-md);background:#fff;}
.book-embed iframe{width:100%;height:900px;border:0;display:block;}
.book-note{margin-top:16px;text-align:center;font-size:13.5px;color:var(--slate);}
@media(max-width:760px){.book-steps{grid-template-columns:1fr;}.book-embed iframe{height:760px;}.book-actions .btn{width:100%;}}

/* ------------------------------------------------- blog posts */
.post-hero .hero-inner{min-height:0;padding-top:48px;padding-bottom:64px;}
.post-hero h1{font-size:clamp(30px,3.6vw,44px);max-width:820px;}
.post-meta{font-size:15px;color:#B9D2E6;}
.post-body{padding-top:72px;}
.post-article{max-width:760px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--ink);}
.post-article > p:first-child{font-size:19px;color:var(--slate);}
.post-article p{margin:0 0 20px;}
.post-article h2{font-size:clamp(24px,2.6vw,30px);margin:40px 0 14px;line-height:1.2;}
.post-article h3{font-size:21px;margin:30px 0 10px;}
.post-article ul,.post-article ol{margin:0 0 22px;padding-left:24px;}
.post-article li{margin:8px 0;}
.post-article a{font-weight:600;text-decoration:underline;text-decoration-color:rgba(3,99,169,.35);text-underline-offset:3px;}
.post-article a:hover{text-decoration-color:var(--deep-navy);}
.post-article strong{color:var(--deep-navy);}
.post-foot{max-width:760px;margin:44px auto 0;padding-top:28px;border-top:1px solid var(--mist);display:flex;flex-direction:column;gap:18px;}
.post-disclaimer{font-size:14px;color:var(--slate);background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);padding:14px 18px;line-height:1.6;}
@media(max-width:640px){.post-article{font-size:16px;}.post-body{padding-top:48px;}}
.book-ready{background:var(--deep-navy);color:#fff;border-radius:var(--r-card);padding:26px 30px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.book-ready b{font-family:'Lora',Georgia,serif;font-weight:500;font-size:21px;color:#fff;flex:0 0 100%;}
.book-ready span{font-size:15px;color:#C7DCEA;line-height:1.7;}
.book-actions .btn{min-width:240px;}

/* Conditions list on service pages is reference copy, not navigation:
   the cards are <div>s now, so nothing about them should look clickable.
   The conditions hub page keeps its real links (still <a class="cond-link">). */
div.cond-link{cursor:default;}
div.cond-link:hover .cl-t b{color:var(--ink);}
body .elementor .elementor-widget.elementor-widget.elementor-widget div.cond-link:hover .cl-ic{border-color:var(--mist);box-shadow:none;}
div.cond-link:hover .cl-ic{border-color:var(--mist);box-shadow:none;}

/* "Advanced Technology" HILT feature on the home page (client copy, Sept 9). */
.advtech-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:stretch;}
.advtech-media{display:flex;}
.advtech-media img{width:100%;height:100%;min-height:440px;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow-lg);display:block;}
.advtech-copy h2{font-size:clamp(28px,3.5vw,40px);line-height:1.14;margin-top:16px;text-wrap:balance;}
.advtech-copy p{margin-top:16px;color:var(--slate);line-height:1.75;}
.advtech-copy .textlink{margin-top:22px;display:inline-flex;}
@media(max-width:900px){.advtech-grid{grid-template-columns:1fr;gap:26px;}.advtech-media{order:-1;}
  .advtech-media img{min-height:0;aspect-ratio:3/2;}}

/* Sept 9 client round: a bigger logo on desktop, and room for the new
   "Women's Health" nav item. The header phone chip goes (the client offered
   it) — the number still sits in the sticky address strip, the mobile action
   bar, the footer and the drawer. The header gets a wider container than the
   1200px body grid so the larger logo never squeezes the nav. */
@media(min-width:1151px){
  nav.main > a.hdr-call{display:none;}
  .brand{margin-right:auto;}
  .logo-img{height:46px;}
  nav.main > a,
  nav.main > a.nav-plain,
  nav.main .dd > button{padding:10px 6px;font-size:14px;}
  nav.main > a.nav-book{padding:11px 14px;font-size:14px;}
}
@media(min-width:1250px){
  .logo-img{height:50px;}
  nav.main > a,
  nav.main > a.nav-plain,
  nav.main .dd > button{padding:10px 8px;font-size:14.5px;}
  nav.main > a.nav-book{padding:11px 16px;font-size:14.5px;}
}
@media(min-width:1360px){
  header.site .wrap{max-width:1360px;}
  .logo-img{height:56px;}
  nav.main > a,
  nav.main > a.nav-plain,
  nav.main .dd > button{padding:10px 10px;font-size:15px;}
  nav.main > a.nav-book{padding:11px 18px;font-size:15px;}
}

/* Mobile hero: the client asked for the tagline on one line and the gold rule
   dropped. The size tracks the viewport so it stays on one line from ~234px up,
   and never grows past the 18px the design already used. */
@media(max-width:620px){
  .hero-kicker.tagline1::before{display:none;}
  .tagline2{white-space:nowrap;font-size:clamp(9px,calc(4.75vw - 2.1px),18px);}
}

/* Mobile: the about block's copy is centred, so its call to action follows it
   instead of hanging left under centred text. */
@media(max-width:640px){
  .about-copy .btnrow{justify-content:center;}
  .about-copy .lead2{text-align:center;}
}

/* ---------------------------------------------------------------------------
   Responsive QA pass (Sept 9): touch targets and label sizes on phones and
   tablets. Audited at 360/390/430/768/1024 — nothing overflowed, but a set of
   links sat well under a comfortable 44px tap height and a few labels under
   12px. The mobile action bar keeps its 34px buttons: the client asked for
   those to be shorter.
   ------------------------------------------------------------------------- */
@media(max-width:1150px){
  .crumb a{display:inline-block;padding:6px 2px;}
  .textlink{padding:9px 0;}
  .claims-call a,
  .cinfo-row a,
  .apply-note a,
  .head.center p a,
  .fcontact a,
  .foot-bot a,
  .post-disclaimer a{display:inline-block;padding:6px 0;}
  .mem .soc a,.fsoc a{width:42px;height:42px;}
  .cc-tag,.post .im .cat,.cause-tag,.ic-fine{font-size:12px;}
  .cform .fsubmit .fnote a{display:inline-block;padding:6px 0;}
  /* every inline "call us" link: the most-tapped thing on a clinic site */
  .maddr a,.ci-list a,.fx-call a,.callr a,.ic-call a{display:inline-block;padding:6px 0;}
  .foot-col h4{font-size:12.5px;}
  nav.main a.hdr-call .hc-tx span{font-size:12.5px;}
  .maddr,.maddr a{font-size:12.5px;}
}

/* ---------------------------------------------------------------------------
   Responsive Layout Fix Brief (Sept 9 2026)
   ------------------------------------------------------------------------- */

/* The side rails are declared sticky after the grid collapses, so below 860px
   they scrolled over the treatment steps. Return them to normal flow at every
   width where their grid is a single column. */
@media(max-width:860px){
  .expect-img,
  .faq-side .box,
  .icbc-card,
  .cond-side,
  .side{position:relative;top:auto;}
}

/* The floating back-to-top control has no collision handling, and on a phone
   the sticky Call/Book bar already covers that job. */
@media(max-width:640px){
  .to-top{display:none;}
  .maddr a{display:inline-block;white-space:nowrap;}
  .about-copy .btnrow{flex-direction:column;align-items:center;gap:16px;}
  .hero-kicker.tagline1{letter-spacing:.12em;font-size:12px;}
}

/* One-column footer: centre the brand, keep the contact rows a readable block
   with their icons still left-aligned, and stack the legal row. */
@media(max-width:520px){
  .foot-brand .fb,
  .foot-brand .fsoc{justify-content:center;}
  .foot-brand p{margin-inline:auto;}
  .foot-col{text-align:center;}
  .fcontact{margin-inline:auto;width:min(100%,340px);}
  .fcontact li{text-align:left;}
  .foot-bot{flex-direction:column;justify-content:center;text-align:center;gap:12px;}
}

/* iOS turns a bare number on the navy card into unreadable dark blue; these
   are explicit tel links now, so hold them white in every state. */
.faq-side .box .ph a,
.faq-side .box .ph2 a,
.faq-side .box .ph a:hover,
.faq-side .box .ph2 a:hover{color:#fff;text-decoration:none;}

/* A closed drawer must not hold focus or reach a screen reader. */
@media(max-width:1150px){
  nav.main{visibility:hidden;transition:transform 260ms ease-out,visibility 0s linear 260ms;}
  nav.main.open{visibility:visible;transition:transform 260ms ease-out,visibility 0s;}
}

/* 320px: the fixed action bar measured a hair wider than the viewport and
   produced a 1px horizontal scroll; pin it to the viewport box. The address
   strip also gets its padding back so the taller tap target does not turn it
   into a 70px band on small phones. */
@media(max-width:640px){
  .mbar{width:100%;max-width:100%;}
  .maddr{padding:3px 14px;}
}