/* 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//. 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 from a page-scoped rule. Where :has() is unsupported the index simply scrolls with the page. */ html:has(body.page-id-1090638), body.page-id-1090638 { overflow-x: clip; } /* 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. Overridden into a grid gap on desktop, below. */ .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; } } /* NOTE ON ORDER: this block sits AFTER the Learn More component above, and has to. It overrides that component's `margin-top` with `auto`, and both selectors are 0-2-0 — so whichever is written last wins. With the card block above the component (where it was first written) the buttons kept their 14px top margin and simply followed the copy, which is the misalignment this was meant to fix. */ /* ------------------------------------------------------------- 3-up cards Client 2026-09-11: "make each one a little card, three per row, so it's not just two sentences taking up an entire line." These entries ARE short — a name, two sentences and a Learn More — and stacked full-bleed in a ~900px pane each one used a whole row to say very little, so 25 of them ran for several screens of mostly empty right-hand margin. Three to a row is about 300px per card, which is the width those two sentences want. The grid goes on .tech-group, not on a new wrapper: the groups ("TMJ Disorder", "Sleep & Breathing", ...) are the real sections of this index and each must keep its own heading, so the label spans the full row and the entries below it flow into the columns. That means no markup change at all — inc/symptoms-index.php is shared with /technology/, which wants the stacked list it already has, and this file's rule is that nothing here may reach that page. Cards are the mist tint rather than an outline: the section behind them is white (.s--light), so a hairline would be the only thing separating card from ground and 25 hairlines read as a table. Hard corners, like everything else here. */ @media (min-width: 900px) { .sym-shell .tech-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .sym-shell .tech-group__label { grid-column: 1 / -1; } /* The stacked-list spacing is the grid's job now. */ .sym-shell .sym-entry + .sym-entry { margin-top: 0; } .sym-shell .sym-entry { display: flex; flex-direction: column; background: var(--mist, #f1f6f5); padding: 1.5rem 1.4rem 1.4rem; /* .tech-entry's 2px transparent left border is the :target indicator; keep it (an anchored symptom still highlights) but drop the extra padding it was offsetting, since the card supplies its own. */ padding-left: calc(1.4rem - 2px); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .sym-shell .sym-entry:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21, 59, 55, 0.10); } /* Pins every Learn More to its card's floor, so a row of cards whose blurbs run to different lengths still lines its buttons up. */ .sym-shell .sym-entry__more { margin-top: auto; } /* Reached through .tech-pane.info-content.dark to match the 0-4-1 rule in tmj-technology.css that sets `margin: 0` on this element — a bare `.sym-shell .tech-entry__text` (0-2-0) loses to it, which left the copy sitting flush against the button on any card whose text fills its height. */ .sym-shell .tech-pane.info-content.dark .tech-entry__text { margin-bottom: 1.35rem; } } /* Two up in the band where the pane is too narrow for three ~300px columns but still too wide for one. */ @media (min-width: 900px) and (max-width: 1200px) { .sym-shell .tech-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== Symptom PAGES (/symptom//) — 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. ========================================================================== */ /* PROSE RHYTHM. The ACF prose arrives as bare

/

, sometimes wrapped in a
, once with an

+
    ("Evidence Snapshot"). An earlier note here said it inherited tmj-blog.css's body typography -- it does not: those rules are scoped to `.single-post .et_pb_post_content`, and the reset leaves every block at margin 0. So consecutive paragraphs touched on all 25 symptom pages, and the snapshot heading sat glued to the text above and the accordion below (client, 2026-10-07: "symptoms pages look weird at times"). Blockquotes keep their own 28px margins (they collapse with these). */ .sym-body .sym-prose p, .sym-body .sym-prose ul, .sym-body .sym-prose ol { margin: 0 0 1.1em; } .sym-body .sym-prose ul, .sym-body .sym-prose ol { padding-left: 1.25em; } .sym-body .sym-prose li + li { margin-top: 0.35em; } .sym-body .sym-prose h3 { margin: 1.6em 0 0.5em; } .sym-body .sym-prose > :first-child, .sym-body .sym-prose > :first-child > :first-child { margin-top: 0; } .sym-body .sym-prose > :last-child, .sym-body .sym-prose > :last-child > :last-child { margin-bottom: 0; } /* The FAQ intro block is followed directly by the accordion. */ .sym-body .sym-prose + .ac-accordion { margin-top: 2rem; } /* 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: #f1f6f5; 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