/* tmj-symptoms.css — the Symptoms page's additions to the two-pane index.
   Enqueued centrally so page builds never touch inc/enqueue.php.

   WHY THIS FILE EXISTS
   --------------------
   /symptoms/ reuses the /technology/ two-pane shell wholesale: .tech-shell,
   .tech-index, .tech-pane, .tech-entry are all styled by tmj-technology.css and
   are NOT redeclared here. Only two things differ, and both live below:

     1. The sticky prereq has to be re-scoped. tmj-technology.css hard-codes the
        overflow-x:clip fix to .page-id-8844; the same fix is needed here or the
        left index scrolls away instead of pinning (tokens.css sets
        overflow-x:hidden on html+body, which makes both scroll containers and
        silently kills position:sticky on a descendant).

     2. Every symptom entry ends in a "Learn More" button, which Technology has
        no equivalent of -- its entries are terminal, these ones are doorways to
        25 real pages at /symptom/<slug>/.

   Scoped under .sym-shell throughout so nothing here can reach the Technology
   page. Hard corners, same as the shell it sits in.
   ========================================================================== */

/* Sticky prereq — see tmj-technology.css for the full measurement note. Two
   selectors because either html OR body being a scroll container is enough to
   break sticky, and :has() is the only way to reach <html> from a page-scoped
   rule. Where :has() is unsupported the index simply scrolls with the page. */
/* SUPERSEDED 2026-09-24: body is overflow-x:clip site-wide now (tmj-modules.css);
   the page-scoped rule keyed on a LIVE page ID absent from this build. */

/* Entries are taller than Technology's (name + blurb + button), so they need
   more air between them than .tech-entry's 1.75rem or the buttons visually
   bind to the next entry's name. */
.sym-shell .sym-entry + .sym-entry { margin-top: 2.25rem; }

/* ---------------------------------------------------------------- Learn More

   Deliberately a quiet outlined control, not a filled CTA: there are 25 of them
   on one page and the page already ends in the real call to action. It borrows
   .btn-primary's uppercase/letter-spaced language at a smaller size so it reads
   as the same family without competing. */
.sym-shell .sym-entry__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	padding: 0.5rem 1rem;
	border: 1px solid #cfe0dd;
	font-family: "Libre Franklin", sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mid);
	background: transparent;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* .tech-entry__text a paints descendant links green-underlined; the button is a
   sibling, not a descendant, so it is unaffected -- but info-content.dark's
   generic anchor colour is not, hence the explicit colour above and here. */
.sym-shell .sym-entry__more:hover,
.sym-shell .sym-entry__more:focus-visible {
	background: var(--dark);
	border-color: var(--dark);
	color: #fff;
}

.sym-shell .sym-entry__more:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Stroked arrow, matching .quiz-link svg — the path is a line path, so filling
   it renders a sliver. */
.sym-shell .sym-entry__more svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.sym-shell .sym-entry__more:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.sym-shell .sym-entry__more,
	.sym-shell .sym-entry__more svg { transition: none; }
	.sym-shell .sym-entry__more:hover svg { transform: none; }
}

/* ==========================================================================
   Symptom PAGES (/symptom/<slug>/) — template-symptom.php

   The frame (hero, trust bar, .ac-post-layout two columns) is the blog's and is
   already styled by tmj-blog.css; the body components (.info-title,
   .info-features, .ac-accordion) are the theme's and are already styled too.
   What follows is only what the join between them needs.
   ========================================================================== */

/* Sticky prereq is not needed here (no sticky index), but the body IS the blog
   main column, so it inherits tmj-blog.css's bare-element typography. The
   ACF prose arrives as bare <p>/<ul>/<blockquote>, which is exactly that
   contract — .sym-prose exists to scope the few overrides below, not to restyle. */
.sym-body .sym-prose > :first-child { margin-top: 0; }
.sym-body .sym-prose > :last-child { margin-bottom: 0; }

/* The section infographics are portrait-ish and 400–1300px wide. Left as-is they
   blow past the text column on desktop and dwarf the copy.
   NOTE: this rule does NOT reset `float`, so the image is still floated right by
   .tmj-content-img in tmj-components.css — which means the left margin is a
   GUTTER, not decoration. The earlier `margin: 0 0 2rem` zeroed it and the body
   copy ran flush into the artwork (the infographics have their own labels near
   their left edge, so it read as text colliding with the illustration). Keep the
   2rem left margin whenever this floats.
   `width: 46%` rather than 100%: between 980px and 1100px the article column is
   only ~600px, and a fixed 26rem image plus the gutter left a ~150px measure.
   The percentage keeps the text column at least as wide as the image at every
   size; 26rem still caps it on the widest layout. */
.sym-body .tmj-content-img {
	display: block;
	width: 46%;
	max-width: 26rem;
	height: auto;
	margin: 0.35rem 0 2rem 2rem;
}

/* .info-features is a 2-up grid built for a dark panel elsewhere on the site;
   inside the white blog column the cards need their own breathing room and a
   single column on narrow screens. */
.sym-body .info-features { margin-bottom: 2.5rem; }

@media (max-width: 767px) {
	.sym-body .info-features { grid-template-columns: 1fr; }

	/* Phone: tmj-components.css unfloats .tmj-content-img here, so the gutter and
	   the percentage width both have to go with it — this selector (0-2-0) outranks
	   that media rule (0-1-0) and would otherwise keep a 46%-wide indented image. */
	.sym-body .tmj-content-img {
		width: 100%;
		max-width: 26rem;
		margin: 0 0 1.5rem;
	}
}

/* menieres-disease is the one symptom whose "when to seek" cards carry their own
   image (see ac_symptom_features_html). Capped so a 429px asset cannot set the
   height of its grid row. */
.sym-body .sym-feature__img {
	display: block;
	width: 100%;
	max-width: 7rem;
	height: auto;
	margin: 0 0 0.625rem;
}

/* The mid-page CTA — a quiet band inside the article, not a full dark section:
   the page already ends in the footer's real call to action. */
.sym-body .sym-cta {
	margin: 2.5rem 0;
	padding: 1.75rem;
	background: var(--cream);
	border-left: 3px solid var(--accent);
}

.sym-body .sym-cta > :first-child { margin-top: 0; }

.sym-body .sym-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 1.25rem 0 0;
}

/* .btn-secondary is written for dark sections (--text-light on green); on this
   white band it would be near-invisible. */
.sym-body .sym-cta__buttons .btn-secondary { color: var(--mid); }
.sym-body .sym-cta__buttons .btn-secondary::after { background: var(--mid); }
.sym-body .sym-cta__buttons .btn-secondary:hover { color: var(--dark); }

/* Blockquotes come through the ACF prose with a <footer> citation. */
.sym-body blockquote {
	margin: 1.75rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--accent);
	font-style: italic;
}

.sym-body blockquote footer,
.sym-body blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--text-muted-dark);
}

/* Body images that arrive inside the ACF prose (a couple of symptoms embed one)
   must not overflow the column. */
.sym-body .sym-prose img {
	max-width: 100%;
	height: auto;
}

/* --- Anchor offset under the fixed header ---------------------------------
   The header is position:fixed at 86px (--nav-height, 70px below 1199px), so a
   plain #hash jump puts the target's top at viewport 0 — behind the header.
   Measured on /symptoms/#tmj: 86px of the group heading was covered.

   Applies to both anchor kinds: .tech-group carries the per-condition ids the
   header nav deep-links (/symptoms/#tmj, #sleep-apnea) and .tech-entry carries
   the per-symptom ids the left index pane links. +1rem so the heading clears the
   header rather than touching it. */
.tech-group[id],
.tech-entry[id] {
	scroll-margin-top: calc(var(--nav-height, 86px) + 1rem);
}

@media (max-width: 1199px) {
	.tech-group[id],
	.tech-entry[id] {
		scroll-margin-top: calc(70px + 1rem);
	}
}