/* ==================================================================
 * iTech Valet — THE ARTICLE TEMPLATE  (single.php)
 *
 * Loaded on single posts only. See functions.php.
 *
 * !! EVERY PAGE ON THIS SITE IS CUSTOM, and this file is the ONE
 * exception alongside the card: it dresses 156 articles, so a value
 * changed here moves all of them at once. That is the point of it -
 * before this file the articles were dressed by 156 <style> blocks
 * shipped inside the posts, in twelve different shapes.
 *
 * ------------------------------------------------------------------
 * WHY THE THEME OWNS THE ARTICLE NOW
 * ------------------------------------------------------------------
 * Measured across all 156 on 2026-08-25, on staging, not sampled:
 *
 *   100 articles  scope their own CSS to a wrapper element the import
 *                 stripped (.itv-aeo-container, .article-wrap,
 *                 .itv-article and six more). All 100 stylesheets are
 *                 INERT - not one rule reaches an element.
 *    56 articles  declare bare `body`, `h1`, `h2`, `h3`, `p`, `a` and
 *                 `table` at the top level, scoped to nothing, so they
 *                 restyle the whole document - header nav and footer
 *                 included - and each of the 56 does it differently.
 *   156 of 156    carry ZERO class attributes in post_content.
 *
 * inc/article-hero.php drops those blocks. The values below are the
 * ones they were trying to apply, taken from the AEO sheet's own
 * declarations and from the live builder hero measured at 1280 - so
 * the articles look like what they were authored to look like, and
 * look like each other, which they never have.
 *
 * ASSET PATHS ARE ../../img/ - two levels, because this file sits in
 * assets/css/pages/. One level silently killed six homepage
 * backgrounds once; the bands rendered their fallback colours and
 * nothing errored.
 * ================================================================== */


/* ==================================================================
 * 01 BACKGROUND
 *
 * avc-hero.webp is byte-identical to live's article hero artwork -
 * checksummed against ai-visibility-check-hero-bg-scaled.webp on
 * 2026-08-25, e95fa78a1a65773a9803eae387837683 both sides. It is the
 * same picture /ai-visibility-check/ uses for its own hero, where the
 * established treatment is white type. See .avc-dark in
 * ai-visibility-check.css.
 *
 * The colour underneath is the artwork's own dark navy, so a slow
 * connection paints the band rather than flashing white type onto
 * white ground.
 * ================================================================== */

.bg-article-hero {
	background-color: #0a3a63;
	background-image: url("../../img/bg/avc-hero.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


/* ==================================================================
 * 02 THE HERO BAND
 *
 * Every number here was read off the live builder article at a 1280
 * viewport - itechvalet.com/chiropractic-entity-authority-guide/,
 * post 350, whose hero is the look Gerek asked for.
 *
 *   .fl-row-content-wrap   padding 20px, artwork cover/center
 *   .fl-row-content        max-width 1400  -> 1240 at 1280
 *   h1                     Bebas 70/70 white centred, margin 40 20 0
 *   .fl-col-content        #f2f2f2, radius 25px, margin-top 40
 *   the module inside it   margin 20px      -> 1200 at 1280
 *   the date               Lexend 22/31.9 w300 centred, margin 20px
 *
 * main.css already supplies the band: .section is padding 20px block
 * and inline, and .section--hero widens the container to 1400. So the
 * first two rows are the existing tokens rather than new numbers, and
 * they resolve to live's 1240 exactly.
 * ================================================================== */

/* THE INSET IS 20px AND IT IS THE MODULE'S, NOT THE CONTAINER'S.
   Live holds the title and the date 20px inside the 1240 content box
   with a margin on each module, which is why the card is 1240 wide and
   the copy inside it is 1200. Reading it as container padding instead
   would have made the card 1200 and the whole band 40px narrow. */
.article-hero { --art-inset: 20px; }

/* GRID, BECAUSE GRID ITEM MARGINS NEVER COLLAPSE - with each other or
   with the container. Beaver Builder wraps every module in its own div,
   so no two margins on the live page ever collapse and its measured
   values are all ADDED. Real siblings collapse them and the space
   measured off the original quietly disappears.

   Both containers need it. Built without, the card came out 708 tall
   against live's 748: the lede's own 20px margins escaped through a box
   with no padding of its own and the copy sat flush against the rounded
   corners. The band was 1040 against live's 1080 for the same reason at
   the outer level. Neither was visible as anything other than "a bit
   tight" - found by comparing band heights against the original, which
   is how both of the earlier ones were found too.

   The same fix /about/ and /ai-visibility-check/ use. See BUILD-PLAN.md,
   "Margin collapsing, solved once instead of per-band". */
.article-hero > .container,
.article-hero__card {
	display: grid;
	align-content: start;
}

/* Bebas 70 on a solid line, white, centred. main.css supplies neither -
   the article's own <h1> arrives with no theme class - so the family is
   named here.

   WHITE ON THE DARK ARTWORK, which is what live sets and what
   /ai-visibility-check/ already does on this same picture.

   46 is the phone value; it steps in section 05. Never a bare clamp for
   a font size - see BUILD-PLAN.md. */
.article-hero .article-hero__title {
	margin: 40px var(--art-inset) 0;
	font-family: var(--f-display);
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--c-white);
}

/* THE CARD IS THE DIRECT ANSWER, AND THE CARD IS LOAD-BEARING.
   Live paints `background: #f2f2f2; border-radius: 25px` on the column's
   content box at full band width - the same grey as --c-card-fill - and
   sets the copy inside it navy. It is what makes 22px navy body copy
   legible on a dark photograph.

   No padding of its own: the lede's 20px margin is what holds the text
   off the corners, exactly as live has it. */
.article-hero__card {
	margin-top: 40px;
	background: var(--c-card-fill);
	border-radius: 25px;
}

.article-hero__lede { margin: var(--art-inset); }

/* 22/31.9 is --t-lead over --lh-lead, which main.css measured off this
   very value on the homepage. Weight 400 rather than the 300 the AEO
   sheet asks for, because the live card is 400 and this is the live
   card. */
.article-hero__lede > * {
	margin: 0 0 10px;
	font-family: var(--f-body);
	font-size: var(--t-lead);
	font-weight: 400;
	line-height: var(--lh-lead);
	color: var(--c-navy);
}

.article-hero__lede > :last-child { margin-bottom: 0; }

.article-hero__lede strong,
.article-hero__lede b { font-weight: 700; }

/* WHITE AND SIMPLIFIED. Gerek's ask, and the one deliberate departure
   from live in this band: live sets the date amber (#fba702) on the
   builder five and orange italic (#dd6b00) on the other 151. Neither
   survives - it is white, upright, and the same 22/31.9 as the card.

   The byline sits on its own line under it rather than in its own
   block, so the two read as one caption instead of two stacked notes. */
.article-hero__meta {
	margin: var(--art-inset);
	font-family: var(--f-body);
	font-size: var(--t-lead);
	font-weight: 300;
	line-height: var(--lh-lead);
	text-align: center;
	color: var(--c-white);
}

.article-hero__byline { display: block; }


/* ==================================================================
 * 03 THE ARTICLE BODY
 *
 * The values the articles' own stylesheets declare, applied once. The
 * base rules are the PHONE values; section 05 steps them.
 *
 * NO READING MEASURE. .prose caps at 68ch and these articles are not
 * .prose: they carry tables that need the width, and their own sheets
 * set no max-width either. The container's 1200 is the measure, which
 * is what live gives them.
 * ================================================================== */

.article-body__inner {
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6;
	color: var(--c-navy);

	/* A BARE URL IN THE COPY WILL SCROLL THE WHOLE PAGE SIDEWAYS ON A
	   PHONE. One article prints one - case-study-how-one-chiropractor-
	   used-a-decision-framework-to-double-new-patient-calls carries
	   `https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6211221/` as text, 53
	   characters that cannot wrap - and the same fault was found on
	   /privacy-policy/ the same afternoon, where it pushed the document
	   100px past a 375 viewport and took the header and footer with it.

	   Kept here rather than on that one article because the articles are
	   written by a tool that cites sources, so the next one is a matter
	   of when. break-word only acts on a word that would otherwise
	   overflow; ordinary copy is untouched. */
	overflow-wrap: break-word;
}

/* ONE HUNDRED PIXELS TOP AND BOTTOM. Gerek, on both edges: the hero
   "is way too close, it's like 20 pixels at most", and the footer
   "it's too close to the bottom."

   Both were 20 - .section's own block padding - plus whatever margin
   the first or last element happened to carry. The article opened
   almost against the blue band and closed almost against the footer.

   THE FIRST AND LAST CHILD MARGINS ARE ZEROED AND THE WHOLE 100 IS PAID
   BY THE SECTION, rather than 20 + 80 or 60 + 40. The number in the
   file is then the gap on screen. Left to the children it would drift
   with whatever each article happens to open and close on - the first
   block is a Table of Contents on 156 of 156 now, but the last is a
   plain paragraph on some and a table or a figure on others, each with
   its own margin - and the next person would measure a distance that
   appears nowhere in the CSS. */
.article-body__inner > :first-child { margin-top: 0; }
.article-body__inner > :last-child { margin-bottom: 0; }

.section.article-body { padding-block: 100px; }

.article-body__inner p,
.article-body__inner li,
.article-body__inner td,
.article-body__inner th {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.article-body__inner p { margin: 0 0 20px; }

.article-body__inner ul,
.article-body__inner ol { margin: 0 0 20px; padding-left: var(--s-5); }

.article-body__inner li + li { margin-top: 8px; }

/* Bebas, and the two accent colours the articles use to separate their
   levels: h2 blue, h3 orange. Both are large display type, which is
   what lets them sit at --c-blue and --c-orange rather than the deep
   pair main.css keeps for small text. */
.article-body__inner h2,
.article-body__inner h3 {
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 1.1;
}

.article-body__inner h2 {
	margin: 80px 0 20px;
	font-size: 40px;
	color: var(--c-blue);
}

.article-body__inner h3 {
	margin: 40px 0 20px;
	font-size: 30px;
	color: var(--c-orange);
}

/* ------------------------------------------------------------------
   LINKS: NO UNDERLINE, BLUE, ORANGE ON HOVER - NOW THE SITE'S RULE
   ------------------------------------------------------------------
   Gerek, 2026-08-25: "there is no need to have every link in the table
   of contents be underlined. That's a horrible look... It should just
   be the blue color, and when it's hovered over, it goes orange, just
   like the rest of the site. Same with the links inside the articles."

   And on 2026-08-25, after the six page templates were built: "Make
   inline link styling consistent across the whole site, matching the
   articles."

   THE TWO RULES THAT SAT HERE ARE GONE, AND NOTHING IS LOST. What they
   said is now main.css section 02b, unchanged in effect and applied to
   every prose link on the site rather than to this template only. The
   article body needs no override at all: its links are in <p>, <li>,
   <td> and <figcaption>, all of which the site rule names, and its
   ground is white or the ToC panel where --c-link is 4.53:1 and 4.25:1
   against black copy at 4.64:1. Both bars clear.

   The AEO sheets set `a { color: #2494e0 !important }`, 3.29:1 on
   white; that rule leaves with the style blocks and is not reproduced.

   THE SPECIFICITY TRAP THIS BLOCK USED TO WARN ABOUT IS NOT GONE, it
   has moved: the site rule is (0,3,2) at rest and (0,4,2) on hover, and
   that is what now clears main.css's (0,3,1) navy hover. Anything in
   this file that wants to override a link has to beat (0,4,2) or set
   the tokens instead. The CTA below sets the tokens. */

/* ------------------------------------------------------------------
   THE CLOSING CALL TO ACTION
   ------------------------------------------------------------------
   Gerek: "make sure the CTA is actually bolded so it's very easy to
   see: hey, look here."

   THE WEIGHT IS ON THE LINK, NOT THE PARAGRAPH, and that is measured
   rather than tidy: on 121 of the 154 articles that have one the link
   IS the whole paragraph, but on the other 33 it is a phrase inside a
   closing sentence. Bolding the paragraph would set those 33 sentences
   entirely in bold and the call to action would stop standing out of
   its own line. inc/article-hero.php marks only the LAST link to the
   check page - there are 229 of them across the library, and bolding
   every mention would flatten the one that matters.

   700 at 22px clears WCAG's large-text bar on --c-link, so the site's
   own link colour is kept rather than reaching for --c-blue-deep.

   IT IS THE ONE LINK IN THE ARTICLE THAT KEEPS ITS UNDERLINE, AND IT
   SURVIVES THE SITE-WIDE CONSISTENCY PASS. Gerek, 2026-08-25: "the
   articles' closing CTA link is deliberately bold + 2px underline so
   the ask stands out. Does that survive? I think yes." Yes.

   IT IS AN EXCEPTION OF A DIFFERENT KIND FROM THE OTHERS, and that is
   why it survives. Every other exception on the site is forced by a
   measurement - a ground or a copy colour that --c-link cannot clear.
   This one is forced by nothing: it is the only DELIBERATE one, an
   emphasis the copy is asking for. It keeps the site's link colour, so
   it is not a second link style; it is the same link, louder. 700 at
   22px on --c-link measures 4.53:1 on the article ground, and at that
   size and weight the large-text floor is 3:1, so the emphasis costs no
   contrast.

   WRITTEN AS TOKENS, not as `text-decoration: underline`. The site rule
   in main.css 02b is (0,3,2) and a plain `.article-body__inner
   .article-cta__link` is (0,2,0) - it would lose, and the underline
   Gerek asked for would silently disappear. The tokens cannot lose:
   they are read by the rule itself. */
.article-body__inner .article-cta {
	--link-rule:                 underline;
	--link-rule-thickness:       2px;
	--link-rule-hover:           underline;
	--link-rule-hover-thickness: 2px;
}

.article-body__inner .article-cta__link {
	font-weight: 700;
	text-underline-offset: 3px;
}

/* Air above it, so the ask arrives as its own beat rather than as one
   more paragraph. Live's own article sheet put `margin-top: 60px` on
   .article-cta before the import stripped the class. */
.article-body__inner .article-cta { margin-top: 60px; }

/* The body illustrations arrive wrapped in a <figure> carrying ImageObject
   microdata. A bare <figure> has a 40px inline margin from the UA sheet,
   which insets every picture from copy that is flush - so it is zeroed
   here rather than left to look deliberate. */
.article-body__inner figure { margin: 0; }

.article-body__inner img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	border-radius: 15px;
	box-shadow: var(--shadow-card-hard);
}

/* Wide content must scroll inside itself rather than widening the page.
   The articles' own sheets did this with `display: block` on the table,
   which drops the element out of table layout and makes every column
   shrink to its content. A wrapper does the same job and keeps the
   table a table. */
.article-body__inner table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 20px 0;
	background: var(--c-white);
	-webkit-overflow-scrolling: touch;
}

.article-body__inner th,
.article-body__inner td {
	padding: 12px 16px;
	border: 1px solid var(--c-navy);
	text-align: left;
}

.article-body__inner thead { color: var(--c-navy); }
.article-body__inner th { font-weight: 700; }


/* ==================================================================
 * 04 TABLE OF CONTENTS
 *
 * 140 of the 156 have one. It was a `<div class="toc">` with a navy
 * header bar on live; the import stripped the class and left a stray
 * line and a bullet list. inc/article-hero.php puts the <nav> back.
 *
 * The collapse toggle is NOT rebuilt - live's needed a script, the dash
 * that operated it is dropped in the splitter, and a list this size
 * does not need hiding.
 *
 * EVERY SELECTOR HERE IS PREFIXED WITH .article-body__inner, AND THAT IS
 * LOAD-BEARING. Section 03 sets `.article-body__inner p { font-size:
 * inherit }` at specificity (0,1,1). A bare `.article-toc__title` is
 * (0,1,0) and LOSES, so the heading rendered at body size instead of 30
 * - measured 22px at 1280 before this prefix, with the rule sitting
 * right there in the file looking applied. The nested list and the
 * run-on paragraph lose the same fight for line-height.
 * ================================================================== */

.article-body__inner .article-toc {
	margin: 0 0 80px;
	background: #f5f8fb;
	border-radius: 6px;
	overflow: hidden;
}

.article-body__inner .article-toc__title {
	margin: 0;
	padding: 16px 24px;
	background: var(--c-navy);
	font-family: var(--f-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--c-white);
}

.article-body__inner .article-toc__list {
	margin: 0;
	padding: 24px;
	list-style: none;
}

.article-body__inner .article-toc__list ul {
	margin: 8px 0 0 20px;
	padding: 0;
	list-style: none;
}

.article-body__inner .article-toc__list li { margin-bottom: 12px; }
.article-body__inner .article-toc__list ul li { margin-bottom: 4px; font-size: 0.9em; }

/* THE RUN-ON SHAPE - 29 of the 156. The entries are not a list at all,
   they are one paragraph of links separated by <br>. The <br>s already
   put one entry per line, so this only needs the box's padding and the
   leading the list gets. */
.article-body__inner .article-toc__body {
	margin: 0;
	padding: 24px;
	line-height: 2;
}


/* ==================================================================
 * 05 THE STEPS
 *
 * TWO breakpoints - 600 and 993 - per THE RESPONSIVE MODEL in
 * BUILD-PLAN.md. Tablet reads as desktop, so the type takes its larger
 * value from 600 up.
 *
 * The ladder is the articles' OWN, read off the AEO stylesheet, which
 * steps at live's 768 and 992:
 *
 *            <=768   <=992   <=1199        here
 *   h1        46      60      70        46 / 60 / 70
 *   h2        40      40      50        40 /    / 50
 *   h3        30      30      36        30 /    / 36
 *   body      20      22      22        20 / 22 /
 *
 * The h1 keeps all three steps rather than jumping 46 to 70 the way
 * /learn/'s hero does: article titles run to sixty characters and a
 * 70px Bebas line at 600 wraps to four.
 * ================================================================== */

@media (min-width: 600px) {
	.article-hero .article-hero__title { font-size: 60px; }

	.article-body__inner { font-size: 22px; }
}

@media (min-width: 993px) {
	.article-hero .article-hero__title { font-size: 70px; }

	.article-body__inner h2 { font-size: 50px; }
	.article-body__inner h3 { font-size: 36px; }
	.article-body__inner .article-toc__title { font-size: 36px; }
}


/* ==================================================================
 * 06 MOTION
 *
 * Response-only, no loops. See the motion policy in BUILD-PLAN.md.
 * The hero has nothing that moves; the only transition on an article
 * is the link colour, which main.css already owns.
 * ================================================================== */