/* ============================================================
   INSIGHT CHIROPRACTIC — archive templates, 2026-09-13
   Treatments · Conditions · Who We Serve · Insights · Patients.
   Loaded AFTER insight.css, insight-hero.css and insight-contact.css.
   Nothing in those three files is changed. Every rule here is new and
   scoped to .archive-page, .c-intro--arc or .arc-*.

   CARLOS: one Beaver Builder archive template serves all five post types.
   The hero, the intro paragraph and the breadcrumb are the only things
   that change per type; the post loop, the booking panel and the tail
   are identical everywhere.
   ============================================================ */

/* same type contract as the Contact page, so interior pages read as one family */
.archive-page{font-family:var(--brand-text)}
.archive-page h1,.archive-page h2,.archive-page h3{font-family:var(--brand-display)}
.archive-page p,.archive-page .lede{font-family:var(--brand-text)}

/* ---- archive hero · the Contact Us photo intro, one notch shorter ---- */
/* 9/19 (Gary): the photo panel takes a bigger share of the row, so a cover-cropped
   frame shows more of itself at the same hero height. */
.c-intro--arc{grid-template-columns:minmax(0,43fr) minmax(0,57fr)}
.c-intro--arc .c-intro__copy{padding-top:clamp(34px,4vw,62px);padding-bottom:clamp(34px,4vw,62px)}
/* the photo is cover-cropped, so the only way to show more of a portrait frame is a
   taller slot. --arc-media-h lets one page zoom out without moving the others. */
.c-intro--arc .c-intro__media{min-height:var(--arc-media-h,clamp(300px,30vw,420px))}
/* --arc-crop is set per page on the section: a short, wide panel crops a
   portrait frame hard, so each photo names its own focal point. */
.c-intro--arc .c-intro__media img{object-position:var(--arc-crop,50% 38%)}
.c-intro--arc .eyebrow{font-family:var(--brand-text);font-size:14px;font-weight:600;
  letter-spacing:.2em;color:var(--gold);margin:0 0 14px}
.c-intro--arc h1{margin-bottom:12px}
/* No watermark in the archive hero. The mark sat behind the H1 and the lede and read
   as smudges at every opacity that was still visible. The brand mark stays where it
   has nothing behind it: the booking panel in the sidebar. */
@media (max-width:880px){
  .c-intro--arc .c-intro__copy{padding-top:clamp(30px,6vw,46px);padding-bottom:clamp(30px,6vw,46px)}
}
/* 9/19: the archive hero stayed two columns on phones. The one-column rule in
   insight-contact.css is `.c-intro` (0,1,0) and this file's `.c-intro--arc` column
   rule (0,2,0) outranked it at every width, so the photo forced a 680px document at
   375px. New rule, same breakpoint, matching specificity. */
@media (max-width:880px){
  .c-intro--arc{grid-template-columns:1fr}
  .c-intro--arc .c-intro__media{min-height:0}
}

/* 9/19 (Gary): every archive hero line is a quote from Dr. Cox. One pattern, one set of
   classes, used by Conditions, Who We Serve and Insights. The quote keeps the lede size
   and color of the plain subhead it replaced; the attribution sits under it in the
   eyebrow style, smaller than the quote, cream on the dark ground.
   CARLOS: BB text module, blockquote plus a cite line. No card, no rule, no mark. */
.c-intro--arc .arc-quote{margin:0;border:0;padding:0}
.c-intro--arc .arc-quote .lede{margin:0;text-wrap:pretty}
.c-intro--arc .arc-quote cite{font-style:normal}
.c-intro--arc .arc-quote__by{display:block;margin-top:14px;font-family:var(--brand-text);
  font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#E3D3B3}

/* ---- archive body · two thirds of copy, one third of booking ----
   Widths come from the grid. No ch measures on the intro block. */
.arc-section{padding-block:clamp(28px,3.2vw,44px) clamp(22px,2.4vw,36px)}
.arc-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(32px,4.2vw,72px);align-items:start}
.arc-main{min-width:0}
/* the archive intro reads at body size, not lede size (Gary, 9/13: too big) */
.arc-main>.lede{max-width:none;margin:0;font-size:16px;line-height:1.72}
@media (max-width:900px){.arc-body{grid-template-columns:1fr}}

/* the post loop, standing empty. Spacing and rhythm only. */
.arc-posts{display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,3vw,44px)}
.arc-post{display:flex;align-items:center;justify-content:center;min-height:188px;
  background:var(--paper);border:1px dashed var(--hairline-strong);border-radius:12px}
.arc-post span{font-family:var(--brand-text);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fineprint)}

/* ---- booking panel · the Contact Us panel, sized for the sidebar.
   Sticky on desktop, in flow under the posts on mobile. ---- */
.arc-side{min-width:0}
@media (min-width:901px){.arc-side{position:sticky;top:calc(var(--nav-h) + 20px)}}
.arc-book{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;
  /* same texture recipe as the footer and the interior hero: one image, one near-opaque scrim.
     --book-texture-scrim .93 keeps the composite within a point of flat ink. Do not go below .9. */
  --book-texture-scrim:.78;
  background-image:linear-gradient(180deg,
      rgba(20,17,13,calc(var(--book-texture-scrim) * 1.02)) 0%,
      rgba(20,17,13,var(--book-texture-scrim)) 62%,
      rgba(20,17,13,calc(var(--book-texture-scrim) * .93)) 100%),
    url("../img/hero-texture-ink-gold.jpg");
  background-size:cover,cover;
  background-position:center,var(--book-texture-pos,68% 42%);
  background-repeat:no-repeat,no-repeat}
.arc-book__mark{display:none}
.arc-book h2{font-size:clamp(20px,1.9vw,24px);line-height:1.22;margin:0 0 12px;max-width:none}
.arc-book p{font-size:15px;line-height:1.65;margin:0;max-width:none;text-wrap:pretty}
/* the availability line reads as a separate, faster beat under the explanation */
.arc-book__note{margin-top:14px !important;
  font-size:14px;letter-spacing:.01em;color:var(--cream)}
.arc-book .btn-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:26px}
/* actions: one gold CTA at button scale, the phone as a quiet link beneath it */
.arc-book__actions{margin-top:22px}
.arc-book a.arc-book__cta:not(.btn){display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 20px;border-radius:8px;background:var(--accent);color:#fff;
  font-family:var(--brand-text);font-weight:600;font-size:15px;letter-spacing:.02em;
  text-decoration:none;transition:background .18s ease,color .18s ease}
.arc-book a.arc-book__cta:not(.btn):hover{background:var(--cream);color:var(--ink)}
.arc-book__cta:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.arc-book__arrow{flex:none;transition:transform .18s ease}
.arc-book__cta:hover .arc-book__arrow{transform:translateX(4px)}
.arc-book .arc-book__call{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--brand-text);font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--cream);text-decoration:none;white-space:nowrap}
/* 9/19 (Gary): the call link is the lighter tan, not the gold. .booking a:not(.btn) in
   insight.css is more specific than the class alone, so this rule matches the same way. */
.booking.arc-book a.arc-book__call:not(.btn){color:var(--cream)}
.arc-book__call:hover{text-decoration:underline;text-underline-offset:4px}
.arc-book__call:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .arc-book__cta,.arc-book__arrow{transition:none}
  .arc-book__cta:hover .arc-book__arrow{transform:none}}
.arc-book .btn{justify-content:center;border-radius:8px;font-family:var(--brand-text);letter-spacing:.02em}
/* white label on the gold fill, sitewide standing instruction (Gary, 9/18). */
.arc-book .btn--gold{color:#fff}
.arc-book .btn--gold:hover{background:var(--cream);color:var(--ink)}


/* ============================================================
   HEADER · archive refinement, 9/13 (Gary: "really ugly on the archive pages").
   The approved anatomy stays: ink strip, white bar, the lockup, gold Book Now,
   Book Now visible at every width. What changes is the chrome.
     · The strip carried one stranded phone number on a near-black band. It now
       carries the NAP, address left and phone right, which is what a strip is for.
     · One hairline at the bottom instead of a hairline plus a drop shadow.
     · The Menu control was a second bordered button the same weight as Book Now.
       Demoted to a quiet 44px square, so the gold fill is the only filled thing.
     · Book Now takes the ink label on gold, 6.19:1, per decision 18, in Poppins.
     · Nav links get air and the current section stands in gold with a gold rule.
     · --nav-h is set to the header's real height, 100px, so the hero clears it
       exactly instead of guessing 116px.
   Scoped to .masthead--arc. No other page's header changes.
   CARLOS: this is the archive header. One BB template, five post types.
   ============================================================ */
/* 9/19 (Gary): the archive header now matches the Homepage exactly. Its own bar height,
   lockup size, nav sizing, Book Now shape and Menu control are gone; only the top-strip
   NAP chip and the current-page marker stay. --nav-h is the shared 116px. */
.masthead--arc .masthead__strip{border-bottom:0}
/* 9/19 (Gary): the address came out of the top strip. The phone is the only item left,
   so the row goes back to flush right like the non-archive pages. */
.masthead--arc .masthead__striprow{gap:20px}
.masthead--arc .masthead__nap{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .18s ease}
.masthead--arc .masthead__nap:hover{color:#fff}
.masthead--arc .masthead__nap svg{width:13px;height:13px;flex:none;color:var(--gold)}
.masthead--arc .masthead__striprow .tel-ic{color:var(--gold);opacity:1}

.masthead--arc nav.masthead__links a[aria-current="page"]{color:var(--gold-text);font-weight:600}
.masthead--arc nav.masthead__links a[aria-current="page"]::after{clip-path:inset(0 0 0 0);
  background-image:radial-gradient(circle at center,var(--gold-text) 1.5px,transparent 1.8px)}
@media (max-width:700px){
  .masthead--arc .masthead__striprow{justify-content:center}
}

/* ---- archive hero photo · Gary is placing the photographs. The panel holds the
   crop and the label until he does; --arc-crop applies once a photo is in. ---- */
.c-intro--arc .c-intro__media{display:grid;padding:clamp(16px,1.8vw,26px)}
.c-intro--arc .ph-hero{height:100%;min-height:clamp(260px,26vw,380px);
  align-content:center;gap:8px;padding:24px}


/* ============================================================
   SERVICES LIST · added 2026-09-18 (Gary). The Services archive main column:
   two taxonomy groups, one entry per service, hairline rules, one column.
   No cards, icons, images or Learn more links. New rules only; nothing above
   this block is changed.
   CARLOS: .svc-group is one taxonomy term, .svc is one post in the loop.
   ============================================================ */
.svc-list{margin-top:clamp(30px,3.4vw,46px)}
.svc-group+.svc-group{margin-top:clamp(40px,4.4vw,64px)}
/* 9/19 (Gary): the two taxonomy headings were plain ink and sat at the same weight as
   everything else. Now a gold bar, Cinzel tracked out, and a 2px ink rule closing the
   lockup so each group reads as a section start rather than another line of text.
   CARLOS: BB heading module with a separator above and below; the bar is the separator. */
.svc-group__h{position:relative;font-size:clamp(21px,2.2vw,27px);line-height:1.2;
  letter-spacing:.07em;margin:0 0 16px;padding-top:20px;max-width:none}
.svc-group__h::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;
  background:var(--gold-ochre)}
.svc-group__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}

/* 9/19 (Gary): the one-column stack read as a wall of black text. Two changes, no icons.
   1. The name moves into its own left column so the twenty-one names form a single
      vertical scan line, and only the name is ink. Descriptions drop to body.
   2. The KF sticky-step-list spotlight carries the energy the icon chips would have:
      the hovered or focused row fills ink, white name, white description.
   CARLOS: 2-column BB row per entry, 264px + fluid. The fill is a pseudo-element so it
   bleeds 20px past the text while the hairlines stay aligned to the rail. */
.svc{position:relative;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:8px 36px;padding:20px 0 22px;border-bottom:1px solid var(--hairline)}
.svc:last-child{border-bottom:0}
.svc::before{content:"";position:absolute;inset:0 -20px;background:var(--ink);
  opacity:0;transition:opacity .18s ease}
.svc>*{position:relative;z-index:1}
.svc h3{font-family:var(--brand-text);font-size:18px;font-weight:700;letter-spacing:0;
  line-height:1.32;margin:0;overflow-wrap:break-word}
.svc h3 a{color:var(--ink);text-decoration:none}
.svc p{margin:0;max-width:none;font-size:15.5px;line-height:1.7;color:var(--body);
  transition:color .18s ease}
.svc:hover::before,.svc:focus-within::before{opacity:1}
.svc:hover h3 a,.svc:focus-within h3 a{color:#fff}
.svc:hover p,.svc:focus-within p{color:rgba(255,255,255,.92)}
.svc h3 a:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.svc::before,.svc p{transition:none}}
.svc-note{margin:0;padding-top:20px;margin-top:clamp(26px,2.8vw,38px);
  border-top:1px solid var(--hairline);max-width:none;
  font-size:14.5px;line-height:1.68;color:var(--fineprint)}
@media (max-width:1040px){
  .svc{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px 28px}
}
@media (max-width:760px){
  .svc{grid-template-columns:1fr;gap:7px}
}
@media (max-width:520px){
  .svc h3{font-size:17px}
  .svc p{font-size:15px}
}

/* ---- Conditions · body-region list (9/19, Gary) ----
   Static content under the post loop. Same hairline rhythm as the Services list, but
   the heading sits above its line of conditions instead of beside it: the lines are too
   long for a 240px label column. No links, no icons, no card chrome.
   CARLOS: BB heading module plus a text module per region, separator between. */
.cond-regions__h{margin:clamp(30px,3.4vw,46px) 0 clamp(14px,1.6vw,20px);max-width:none}
.cond-regions{border-top:2px solid var(--ink)}
.cond-region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px 40px;
  padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--hairline)}
.cond-region:last-child{border-bottom:0}
.cond-region h3{font-family:var(--brand-text);font-size:18px;font-weight:700;letter-spacing:0;
  line-height:1.32;color:var(--ink);margin:0;overflow-wrap:break-word}
.cond-region p{margin:0;max-width:none;font-size:15.5px;line-height:1.7;color:var(--body);
  text-wrap:pretty;overflow-wrap:break-word}
@media (max-width:768px){
  .cond-region{grid-template-columns:1fr;gap:8px}
}
@media (max-width:520px){
  .cond-region h3{font-size:17px}
  .cond-region p{font-size:15px}
}

/* 9/19 (Gary): the gap under the region list before the reviews band was too big.
   Page-scoped so the other archive templates keep their spacing. */
.arc-section--tight{padding-bottom:clamp(8px,1vw,14px)}

/* 9/19 (Gary): Conditions only. The reviews band's own top padding stacked on the
   tightened main column and left a hole above REVIEWS. */
.reviews--tight{padding-top:clamp(26px,3vw,40px)}