/* ILIT Society theme: additions on top of the approved design sheets (home.css, pages.css).
   Everything here is either a WordPress necessity or a variant a block setting can switch on. */

/* ---------- WordPress necessities ---------- */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 8px; top: 8px; z-index: 100; padding: 12px 18px; background: var(--gold); color: var(--navy); font-weight: 700; }
.nav a[aria-current="page"] { color: var(--white); }
.plain-page { padding: 64px 40px; max-width: 860px; }
.plain-page h1 { margin: 0 0 24px; font-size: 40px; line-height: 1.12; letter-spacing: -0.028em; }
.plain-page .entry { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.plain-page .entry h2 { margin: 36px 0 12px; font-size: 26px; color: var(--ink); }
.plain-page .entry a { text-decoration: underline; text-underline-offset: 3px; }
img.alignright { float: right; margin: 0 0 16px 24px; }
img.alignleft { float: left; margin: 0 24px 16px 0; }
img.aligncenter { display: block; margin: 0 auto; }

/* Block wrappers: the section blocks are direct children of .site-frame, like the design's markup. */
.hero .col-r img, .treatment .col-l img, .feature .col-l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .col-l { flex-basis: 720px; position: relative; min-height: 550px; }
.feature .col-r { padding: 72px 40px 64px 48px; }
.feature h2 { margin: 22px 0 22px; font-size: 40px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; }
.feature p.body { margin: 0 0 40px; font-size: 16.5px; line-height: 1.66; color: var(--ink-soft); max-width: 52ch; }
.treatment p.body { margin: 0 0 40px; font-size: 16.5px; line-height: 1.66; color: var(--ink-soft); max-width: 52ch; }
.treatment .col-r > .btn, .feature .col-r > .btn { margin-top: 28px; }

/* ---------- variants switched on by block settings ---------- */
.hero.no-arc { clip-path: none; }
.hero.image-left, .treatment.image-right, .feature.image-right { flex-direction: row-reverse; }
.eyebrow-plain .eyebrow { text-transform: none; letter-spacing: 0; }
.band { padding: 64px 40px; }
.band.split { padding: 0; }
.split.ratio-1-1 > * { flex: 1 1 0; }
.split.ratio-1-2 > :first-child { flex: 1 1 0; }  .split.ratio-1-2 > :last-child { flex: 2 1 0; }
.split.ratio-2-1 > :first-child { flex: 2 1 0; }  .split.ratio-2-1 > :last-child { flex: 1 1 0; }
.faq-block h2 { margin: 0 0 6px; font-size: 40px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; }
.legal h4 { margin-top: 0; }
.searchbar .select { position: relative; }
.searchbar .select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.allergen-tiles + .proof { margin-top: 28px; }

/* A section block with a WordPress background colour keeps its padding. */
.has-background.band { padding: 64px 40px; }

@media (max-width: 759px) {
	.hero.image-left, .treatment.image-right, .feature.image-right { flex-direction: column; }
	.feature .col-l { min-height: 380px; }
	.feature .col-r { padding: 48px 24px; }
	.plain-page { padding: 40px 24px; }
}

/* ---------- full-bleed bands (2026-09-25) ----------
   The content stays on the 1440px frame; the header, the blue "learn" band and the two
   navy bands at the bottom paint their background out to the screen edges. Each band gets
   a pseudo-element far wider than any screen, in the band's own colour; the body clips the
   horizontal overflow (the frame no longer does, which would clip the bleed too).
   Revert: git checkout boxy-v1 -- theme/ilit-society/assets/css/theme.css */
body { overflow-x: hidden; }
.site-frame { overflow: visible; }
.header, .learn, .legal, .footer { position: relative; isolation: isolate; }
.header::before, .learn::before, .legal::before, .footer::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -4000px; right: -4000px;
	background: inherit; z-index: -1; pointer-events: none;
}
.footer::before { box-shadow: inset 0 1px 0 var(--navy-line); }
.footer { border-top: 0; }

/* ---------- phone header (2026-09-25) ----------
   At 375px the brand and the "Find a practitioner" button together were 400px wide, so the
   button ran off the edge. Everything shrinks a step and the pin icon goes. */
@media (max-width: 759px) {
	.header { height: 64px; padding: 0 16px; gap: 12px; }
	.brand { gap: 10px; }
	.brand .mark { width: 30px; height: 32px; }
	.brand-name b { font-size: 16px; }
	.nav { gap: 0; }
	.nav .btn-sm { height: 40px; padding: 0 14px; font-size: 13px; gap: 6px; white-space: nowrap; }
	.nav .btn-sm svg { display: none; }
}

/* ---------- apply band (2026-09-25) ----------
   "Are you a practitioner?" above the information band. Copy left, photo right; the photo
   sits on a gold offset frame. Tones set the band colour; the band bleeds like the others. */
.apply { position: relative; isolation: isolate; padding: 88px 40px; background: var(--cream); }
.apply::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4000px; right: -4000px; background: inherit; z-index: -1; pointer-events: none; }
.apply.tone-white { background: var(--white); }
.apply.tone-blue { background: var(--blue); }
.apply.tone-navy { background: var(--navy); color: var(--white); }
.apply .inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.apply.image-left .inner { direction: rtl; }  .apply.image-left .inner > * { direction: ltr; }
.apply h2 { margin: 18px 0 18px; font-size: 44px; line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; max-width: 16ch; }
.apply .lede { margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.apply.tone-navy .lede, .apply.tone-navy .points li, .apply.tone-navy .fine { color: #C5D0E3; }
.apply.tone-navy h2 { color: var(--white); }
.apply .points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.apply .points li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.apply .points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.apply .points li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 4px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.apply .actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.apply .actions .btn { height: 56px; padding: 0 32px; font-size: 16px; }
.apply .actions > a:not(.btn) { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; color: var(--gold-text); }
.apply.tone-navy .actions > a:not(.btn) { color: var(--gold-soft); }
.apply .fine { margin: 22px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-faint); max-width: 56ch; }
.apply .visual { position: relative; }
.apply .visual::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 6px; background: var(--gold); opacity: 0.85; z-index: -1; }
.apply.tone-navy .visual::before { opacity: 1; }
.apply .visual img { display: block; width: 100%; height: 100%; min-height: 420px; max-height: 520px; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px rgba(27, 42, 74, 0.16); }
@media (max-width: 759px) {
	.apply { padding: 56px 24px; }
	.apply .inner { grid-template-columns: 1fr; gap: 44px; }
	.apply h2 { font-size: 34px; }
	.apply .visual { margin-right: 22px; }
	.apply .visual img { min-height: 300px; }
}

/* A button whose colours come from its block settings (inline style) still gets a hover. */
.btn[style]:hover { filter: brightness(1.15); }

/* ---------- finder popup (2026-09-25) ----------
   The home page's search band, as a dialog. Lives outside .site-frame so the zoom does
   not apply; sized in plain pixels. */
.finder-modal { width: min(760px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 44px 48px 36px; border: 0; border-radius: 8px; background: var(--white); color: var(--ink); font-family: var(--font); box-shadow: 0 30px 80px rgba(22, 35, 63, 0.35); }
.finder-modal::backdrop { background: rgba(22, 35, 63, 0.62); backdrop-filter: blur(2px); }
.finder-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 8px 8px 0 0; background: var(--gold); }
.finder-close-form { position: absolute; top: 16px; right: 16px; margin: 0; }
.finder-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.finder-close:hover { background: var(--cream-tile); }
.finder-modal .eyebrow { margin: 0 0 12px; }
.finder-modal h2 { margin: 0 0 12px; font-size: 34px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; max-width: 16ch; }
.finder-modal .finder-text { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.finder-modal .popular { margin-top: 18px; }
.finder-modal .finder-fine { margin: 26px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }
.finder-modal .searchbar .select { position: relative; }
.finder-modal .searchbar .select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (max-width: 759px) {
	.finder-modal { padding: 36px 20px 28px; }
	.finder-modal h2 { font-size: 26px; }
}

/* ---------- footer tweaks (2026-09-25) ----------
   Bigger mark (40px, set in footer.php), text up ~20%, grey text white; gold headings unchanged.
   Revert: git checkout footer-before-tweaks -- theme/ilit-society/footer.php theme/ilit-society/assets/css/theme.css */
.footer { color: var(--white); }
.footer .brand-name b { font-size: 19px; }
.footer .copy { font-size: 14.5px; color: var(--white); }
.footer nav a { font-size: 16px; color: var(--white); }
.footer nav a:hover { color: var(--gold-soft); }
.footer nav { gap: 96px; }
.footer nav div { gap: 12px; }