/*
Theme Name: Headache Express
Theme URI: https://headache.express/
Description: Twenty Twenty-Five child theme for Headache Express. Brand tokens live in theme.json; this file carries only what theme.json cannot express.
Author: Headache Express
Template: twentytwentyfive
Version: 1.1.0
Text Domain: headache-express
*/

/* ── Brand logo lockup ──────────────────────────────────────────────
   The lockup SVG uses LIVE TEXT in Archivo, so it must be inlined rather
   than referenced with <img src>, which would not inherit the page font. */
.hx-lockup { display: inline-flex; align-items: center; text-decoration: none; }
.hx-lockup-svg { display: block; width: 210px; height: auto; }
@media (max-width: 600px) { .hx-lockup-svg { width: 168px; } }

/* ── Kickers and labels ─────────────────────────────────────────────
   Brand spec: 11-12px, 700, uppercase, tracking 0.12em.

   ⚠️ NO text-transform. Standing house rule: CSS never transforms author text.
   A CSS-uppercased address is still "4477 Woodson Rd" in the DOM, and some screen
   readers spell transformed strings out letter by letter. Where the brand wants
   caps, the copy is AUTHORED in caps in the block markup instead.
   ⚠️ Cortex Gray #9A948E is 3.00:1 on paper and 2.68:1 on ground — it FAILS
   AA for text at any size. The brand package nominates it for "labels and
   secondary type"; that would ship inaccessible labels. Muted #6E6A66 is the
   same family at 5.36:1 and is used for text instead. Cortex Gray is retained
   for rules, borders and the brain in the mark, where contrast rules do not
   apply (logos are exempt from WCAG 1.4.3). */
.hx-kicker {
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 0.6875rem;
}

/* Source note under a cited claim. */
.source-note {
	color: var(--wp--preset--color--muted);
	border-left: 3px solid var(--wp--preset--color--border);
	padding-left: 1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Medically-reviewed byline sits directly under the H1. */
.medical-review-byline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 2rem;
}

/* FAQ disclosure blocks */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.85rem 0;
}
.wp-block-details summary { cursor: pointer; font-weight: 700; }

.skip-link:focus { outline: 3px solid var(--wp--preset--color--primary); }

/* Evidence-strength tag on a treatment section.
   Express Orange is a SHAPE colour (3.22:1 on paper) so it is used as a field
   with ink on top — 5.16:1 — never as type on paper. */
.evidence-tag {
	display: inline-block;
	background: var(--wp--preset--color--express);
	color: var(--wp--preset--color--ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.2rem 0.65rem;
	border-radius: 3px;
}

/* Treatment cards */
.treatment-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
}
.treatment-card img { display: block; width: 100%; height: auto; }

/* Body copy: flush left, never justified — brand spec. */
.wp-block-post-content p { text-align: left; }

/* Google Maps embed on /contact/. Lazy-loaded so it does not cost anything on
   first paint, and titled so it is announced properly to screen readers. */
.hx-map {
	margin: 1.5rem 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
}
.hx-map iframe { display: block; width: 100%; }

/* ── Sticky header ──────────────────────────────────────────────────
   The whole header pins, not just the contact bar: the nav is how people move
   between conditions and treatments, and on a site read mid-attack scrolling
   back to the top is a real cost.

   ⚠️ The admin bar is position:fixed, so a sticky header at top:0 slides
   underneath it for logged-in editors. Offset by its height at both breakpoints. */
.hx-sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--paper);
}
.admin-bar .hx-sticky-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hx-sticky-header { top: 46px; } }

/* ── Header row: logo · actions · hamburger ─────────────────────────
   One band, one row. The top bar was removed at the owner's request, so this
   is the entire header and it stays short enough to pin without eating the
   viewport. */
.hx-headrow { width: 100%; gap: 1rem; }
.hx-actions { gap: 0.5rem; align-items: center; }

.hx-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border-radius: 4px;
	padding: 0.5rem 0.9rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	border: 2px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hx-btn-ico svg { width: 1.05em; height: 1.05em; display: block; }
.hx-btn-short { display: none; }

/* Primary — Express Orange field with INK type. White on #D97440 is 3.22:1 and
   fails; ink is 5.16:1. Same pairing as the hero CTA. */
.hx-btn--primary {
	background: var(--wp--preset--color--express);
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--express);
}
.hx-btn--primary:hover, .hx-btn--primary:focus-visible {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff !important;
}

/* Ghost — ink on paper, 16.6:1. */
.hx-btn--ghost {
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--border);
	background: transparent;
}
.hx-btn--ghost:hover, .hx-btn--ghost:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary) !important;
}
.hx-btn:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Progressive shortening rather than wrapping: the header must stay one row. */
@media (max-width: 1000px) {
	.hx-btn-label { display: none; }
	.hx-btn-short { display: inline; }
	.hx-lockup-svg { width: 180px; }
}
@media (max-width: 720px) {
	.hx-btn--ghost .hx-btn-short { display: none; }
	.hx-btn { padding: 0.5rem 0.7rem; }
	.hx-lockup-svg { width: 150px; }
	.hx-actions { gap: 0.3rem; }
}
@media (max-width: 480px) {
	.hx-btn--primary .hx-btn-short { display: none; }
	.hx-lockup-svg { width: 132px; }
}

/* ── Hamburger ──────────────────────────────────────────────────────
   overlayMenu is "always", so the logo and the toggle sit on one row at every
   width. That is what keeps the sticky header to a single compact band — with
   the nav inline it wrapped onto a second row and the pinned header ate a third
   of a phone viewport. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	padding: 0.35rem;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Overlay panel: ink ground, generous tap targets, submenus always open so the
   whole map is visible in one pass rather than behind another tap. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.5rem 0;
	font-size: 1.15rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	padding-left: 0.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1rem;
	opacity: 0.92;
}

/* ── Kajabi contact form ────────────────────────────────────────────
   Form 2149700975, duplicated from the legacy painmd form so it inherits a
   blank headline and a "Submit" button instead of Kajabi's stock
   "JOIN THE NEWSLETTER" / "Subscribe" chrome. Notifications go to seva@padda.com
   and mileth3_8@yahoo.com.

   The embed bakes painmd's #a04d50 into its own <style> with !important, so beat
   it on specificity: class + id + class outranks id + class. */
.hx-kajabi-form { margin: 1.5rem 0; }
.hx-kajabi-form #kajabi-form .kajabi-form__btn {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 4px;
	padding: 0.85rem 1.6rem;
	font-weight: 700;
}
.hx-kajabi-form #kajabi-form .kajabi-form__btn:hover,
.hx-kajabi-form #kajabi-form .kajabi-form__btn:focus {
	background: #7E2E0E;
	border-color: #7E2E0E;
}
.hx-kajabi-form .kajabi-form__form-item input,
.hx-kajabi-form .kajabi-form__form-item textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.7rem;
	width: 100%;
}

/* About-page portrait. WordPress stacks wp-block-columns below ~782px, at which
   point a 34% image column becomes full width — the page then opens with a
   head-height portrait and pushes the bio off the first screen. Cap it. */
/* ⚠️ Must be a RELATIVE cap side-by-side. An absolute one (300px) was wider than
   the 34% column it lives in (211px at 1280), so the image overflowed 89px and
   slid underneath the text column — flex items overflow visually without pushing
   their siblings, so it read as the text covering the photo. Only cap absolutely
   once the columns have stacked and the image owns the full width. */
.wp-block-image.hx-portrait img { max-width: 100%; height: auto; }
@media (max-width: 781px) {
	.wp-block-image.hx-portrait { text-align: center; }
	.wp-block-image.hx-portrait img { max-width: 220px; }
}

/* ── Button symbology: ONE icon per action, everywhere ──────────────
   STANDING RULE for this site. Three actions, three fixed icons, and the same
   .hx-btn markup wherever a CTA appears — header, hero, contact page, in-page.
   Never a bare text button next to an iconed one.

     speech bubble  → Book / text us      (sms:+13148865902)
     handset        → Call                (tel:+13144647162)
     envelope       → Contact / message   (/contact/)

   Variant for dark grounds (the hero cover). Ghost-on-dark needs white, not ink;
   ink-on-dark is unreadable and was the defect this variant exists to prevent. */
.hx-btn--on-dark {
	color: #fff !important;
	border-color: rgba(255,255,255,0.55);
	background: transparent;
}
.hx-btn--on-dark:hover, .hx-btn--on-dark:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--ink) !important;
	border-color: #fff;
}
/* CTA rows outside the header get a little more presence than the compact
   header buttons, but the same icons and the same shape. */
.hx-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
/* Centred variant for the hero, where the heading and lead above it are centred.
   Left-aligned buttons under centred text read as a layout mistake. */
.hx-cta--center { justify-content: center; }
.hx-cta .hx-btn { padding: 0.8rem 1.4rem; font-size: 1rem; }
.hx-cta .hx-btn-short { display: none !important; }
.hx-cta .hx-btn-label { display: inline !important; }