/* =========================================================================
   BRAND LAYER — Elizabeth Reed Aden (author site)

   Compiled from vctokens.py measurements of the live site (3 Aug 2026) plus the
   client's own Picostrap SCSS variables (read out of theme_mods_altpico), then
   corrected by hand. Every value traces to a measurement on the rendered
   original; see brand-starter.css in the site working dir for the raw data and
   the CHECK flags. Refine against gate 2 (vcaudit) and gate 3.5 (page height).

   Identity in one line: warm CREAM paper (#faf7f0), GOLD primary (#a87523) and
   deep MAROON secondary (#8e111d), near-black-brown headings, korolev-compressed
   display type UPPERCASE over a light nobel body. Fonts enqueued in functions.php
   (Adobe Typekit gux3qjy: nobel / korolev-compressed / questa-grande).

   THE MAPPING THAT IS EASY TO GET BACKWARDS: in the original, Bootstrap
   --primary is the GOLD and --secondary is the MAROON. So content classes
   `bg-primary`/`btn-primary` render GOLD and `bg-secondary`/`btn-secondary`
   render MAROON. The site's maroon CTA buttons are `.btn-secondary`, not
   `.btn-primary`. Keep this or every band flips colour.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */

:root {
	/* --- Raw palette (named for the brand, not its use) ----------------- */
	--brand-cream:      #faf7f0;   /* paper / light alternating section (bg-light) */
	--brand-gold:       #a87523;   /* PRIMARY: bg-primary bands, gold accents  */
	--brand-gold-hover: #9b7b35;   /* link hover (measured theme mod)          */
	--brand-maroon:     #8e111d;   /* SECONDARY: bg-secondary bands, links, CTA */
	--brand-ink:        #121212;   /* body text (296 nodes)                    */
	--brand-heading:    #160e03;   /* near-black brown: h2/h3 outside heroes   */
	--brand-grey:       #535b60;   /* muted / secondary text, and the NAV      */
	--brand-bg:         #ffffff;   /* body background (SCSSvar_body-bg)        */
	--brand-on-dark:    #faf7f0;   /* text on gold/maroon bands (measured)     */

	/* --- Bootstrap theme colours (hex AND -rgb; utilities read -rgb).
	   Straight from the client's Picostrap SCSS vars — this is what the
	   content's bg / text / btn utility classes resolve to. ------------- */
	--bs-primary:            #a87523;   /* GOLD  */
	--bs-primary-rgb:        168, 117, 35;
	--bs-secondary:          #8e111d;   /* MAROON */
	--bs-secondary-rgb:      142, 17, 29;
	--bs-success:            #538b6f;
	--bs-success-rgb:        83, 139, 111;
	--bs-info:               #d5dce1;
	--bs-info-rgb:           213, 220, 225;
	--bs-warning:            #cc7e4b;
	--bs-warning-rgb:        204, 126, 75;
	--bs-danger:             #d83624;
	--bs-danger-rgb:         216, 54, 36;
	--bs-light:              #faf7f0;   /* CREAM */
	--bs-light-rgb:          250, 247, 240;
	--bs-dark:               #160e03;
	--bs-dark-rgb:           22, 14, 3;

	/* --- "subtle" family — independent of --bs-primary ----------------- */
	--bs-primary-text-emphasis:   #6a4a16;
	--bs-primary-bg-subtle:       #f6ecdb;
	--bs-primary-border-subtle:   #e4cfa7;
	--bs-secondary-text-emphasis: #5a0b13;
	--bs-secondary-bg-subtle:     #f4dcde;
	--bs-secondary-border-subtle: #dfa8ad;

	/* --- Typography (stacks only; kit enqueued in functions.php).
	   Sizes are px on purpose: the original's root is 18px, so every heading
	   is a clean multiple of 18 and px removes all rem-root ambiguity. ---- */
	--bs-body-font-family: nobel, system-ui, sans-serif;
	--bs-body-font-size:   18px;          /* measured */
	--bs-body-font-weight: 300;           /* nobel Light — measured mode      */
	--bs-body-line-height: 1.5;           /* 27px / 18px                      */
	--bs-body-color:       #121212;
	--bs-body-color-rgb:   18, 18, 18;
	--bs-body-bg:          #ffffff;
	--bs-heading-color:    #160e03;

	--co-font-heading:  korolev-compressed, sans-serif;   /* display / nav    */
	--co-font-serif:    "questa-grande", Georgia, serif;  /* serif accent     */

	/* --- Links --- */
	--bs-link-color:       #8e111d;
	--bs-link-color-rgb:   142, 17, 29;
	--bs-link-hover-color: #9b7b35;

	/* --- Shape: the CTA buttons are pill-rounded (measured radius ~24px),
	   not square. --------------------------------------------------------- */
	--bs-border-radius:     24px;
	--bs-border-radius-sm:  24px;
	--bs-border-radius-lg:  28px;

	/* --- Section rhythm. bg-sm/md/lg/xl/xxl are the original's section
	   padding scale (measured bg-xl 100/100, bg-sm 25/25). The converter
	   emits each section's own bg-* class plus any per-instance override. -- */
	--alt-space-xl: 100px;
	--alt-space-lg: 75px;
	--alt-space-md: 50px;
	--alt-space-sm: 25px;
}

/* Container: the original measured 1170px, not Bootstrap's 1140/1320. */
@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1170px;
	}
}

/* -------------------------------------------------------------------------
   2. TYPOGRAPHY
   ---------------------------------------------------------------------- */

body {
	font-family: nobel, system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #121212;
}

/* Paragraphs run at ~1.5 here (measured 27.18px on 18px) — NOT the loosened 1.8
   O'Keefe used. Reproduce what renders. */
p { line-height: 1.51; letter-spacing: .25px; margin-bottom: 18px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: korolev-compressed, sans-serif;
	color: var(--brand-heading);
	font-weight: 500;
	letter-spacing: normal;
	margin-top: 0;
	margin-bottom: 9px;
}

/* Measured sizes (px; root is 18px). Headings keep the face's natural case —
   the inner-page banner h1 renders mixed-case on the original (measured
   text-transform:none at gate 2). Where a heading looks all-caps (e.g. a home
   hero) that comes from the content or a text-uppercase class, not a blanket
   h1 rule — vctokens flagged the "uppercase" mode as only 43% consistent. */
h1, .h1 { font-size: 45px;   line-height: 1.2; }                             /* 45/54  */
h2, .h2 { font-size: 36px;   line-height: 1.2; }                             /* 36/43.2 */
h3, .h3 { font-size: 31.5px; line-height: 1.2; }                             /* 31.5/37.8 */
h4, .h4 { font-size: 27px;   line-height: 1.2; }                             /* 27/32.4 */
h5, .h5 { font-size: 22.5px; line-height: 1.2; font-weight: 400; }           /* 22.5/27 */

/* H1 lives in the hero (white via .text-white / hero rule there); its colour
   outside a hero is the heading ink above. */

/* -------------------------------------------------------------------------
   3. LINKS
   ---------------------------------------------------------------------- */

a { color: var(--brand-maroon); text-decoration: none; }
a:hover, a:focus { color: var(--brand-gold-hover); text-decoration: underline; }

/* -------------------------------------------------------------------------
   4. BUTTONS — pill-rounded, uppercase, bold. GOLD primary, MAROON secondary.
   The original's most-used CTA is the maroon one (.btn-secondary here).
   ---------------------------------------------------------------------- */

.btn {
	font-weight: 700;
	font-size: 12px;               /* measured on the maroon CTA (the dominant button) */
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 11px 16px;
	border-radius: 24px;
}

.btn-primary {                      /* GOLD */
	--bs-btn-color:                 #fff;
	--bs-btn-bg:                    #a87523;
	--bs-btn-border-color:          #a87523;
	--bs-btn-hover-color:           #fff;
	--bs-btn-hover-bg:              #916219;
	--bs-btn-hover-border-color:    #86591a;
	--bs-btn-active-color:          #fff;
	--bs-btn-active-bg:             #86591a;
	--bs-btn-active-border-color:   #86591a;
	--bs-btn-disabled-color:        #fff;
	--bs-btn-disabled-bg:           #a87523;
	--bs-btn-disabled-border-color: #a87523;
	--bs-btn-focus-shadow-rgb:      168, 117, 35;
}

.btn-secondary {                    /* MAROON — the site's primary CTA */
	--bs-btn-color:                 #fff;
	--bs-btn-bg:                    #8e111d;
	--bs-btn-border-color:          #8e111d;
	--bs-btn-hover-color:           #fff;
	--bs-btn-hover-bg:              #740e18;
	--bs-btn-hover-border-color:    #6b0d16;
	--bs-btn-active-color:          #fff;
	--bs-btn-active-bg:             #6b0d16;
	--bs-btn-active-border-color:   #6b0d16;
	--bs-btn-disabled-color:        #fff;
	--bs-btn-disabled-bg:           #8e111d;
	--bs-btn-disabled-border-color: #8e111d;
	--bs-btn-focus-shadow-rgb:      142, 17, 29;
}

/* Gold OUTLINE variant seen on a couple of pages (vc_btn3-style-outline). */
.btn-outline-primary {
	--bs-btn-color:              #a87523;
	--bs-btn-border-color:       #a87523;
	--bs-btn-hover-color:        #fff;
	--bs-btn-hover-bg:           #a87523;
	--bs-btn-hover-border-color: #a87523;
	--bs-btn-active-color:       #fff;
	--bs-btn-active-bg:          #a87523;
	--bs-btn-active-border-color:#a87523;
}

/* -------------------------------------------------------------------------
   5. SECTION BACKGROUNDS + VERTICAL PADDING SCALE
   The content styles sections with raw Bootstrap utilities on the vc_section
   el_class (bg-primary / bg-secondary / bg-light) plus a size class
   (bg-sm/md/lg/xl). The colours resolve via the --bs-* vars above; the size
   classes are custom and defined here.
   ---------------------------------------------------------------------- */

/* Section vertical padding (symmetric base; measured bg-xl 100, bg-sm 25).
   Per-instance deviations ride on inline css=/margin utilities the converter
   preserves — do NOT bake those in here. */
.bg-sm  { padding-top: 25px;  padding-bottom: 25px; }
.bg-md  { padding-top: 50px;  padding-bottom: 50px; }
.bg-lg  { padding-top: 75px;  padding-bottom: 75px; }
.bg-xl  { padding-top: 100px; padding-bottom: 100px; }
.bg-xxl { padding-top: 150px; padding-bottom: 150px; }

/* Column padding. WP Bakery columns carried 32.5px of horizontal padding a side
   (17.5px on .wpb_column + 15px on .vc_column-inner), where Bootstrap's .col has
   only 12px. That 20.5px/side made every text column ~41px too wide, so
   paragraphs wrapped to fewer lines and every text-heavy page ran short (gate
   3.5). Reproduce the WP Bakery column box: no negative gutter, 32.5px a side.
   Fix once, fixes every page. */
/* Zero BOTH gutters. The x-gutter reproduces WP Bakery's column padding (below);
   the y-gutter matters because the converter tags every row `gy-4`, which puts a
   -24px margin-top on the row — harmless mid-page, but on a section's FIRST row it
   pulls the whole section up under the header (the hero overlapped the nav, and
   every banner sat too close to it). Section spacing is the bg-*/css= padding, not
   the grid gutter, so zeroing gutter-y costs nothing. */
.alt-row .row { --bs-gutter-x: 0; }
/* Zero the y-gutter ONLY on a section's first row — that -24px margin-top is what
   pulled the section under the header. Keep it on later/nested rows so wrapping
   card grids (the news list) still get vertical spacing between their rows. */
.alt-row > .container > .row:first-child { --bs-gutter-y: 0; }
.alt-row .row > [class*="col-"] { padding-left: 32.5px; padding-right: 32.5px; }

/* On gold (primary) and maroon (secondary) bands the type goes light. The
   original pairs these with `text-light`, but assert it so a band is never
   dark-on-dark if a text-light class is dropped in conversion. */
.bg-primary, .bg-secondary { color: var(--brand-on-dark); }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5,
.bg-primary p, .bg-primary li, .bg-primary a,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4,
.bg-secondary h5, .bg-secondary p, .bg-secondary li, .bg-secondary a {
	color: var(--brand-on-dark);
}

/* Parent section-library vocabulary (hand-built library sections use these). */
.alt-section-white     { background-color: #ffffff; }
.alt-section-light     { background-color: var(--brand-cream); }
.alt-section-primary   { background-color: var(--brand-gold);   color: #fff; }
.alt-section-secondary { background-color: var(--brand-maroon); color: #fff; }
.alt-sec-sm  { padding-top: 25px;  padding-bottom: 25px; }
.alt-sec-md  { padding-top: 50px;  padding-bottom: 50px; }
.alt-sec-lg  { padding-top: 75px;  padding-bottom: 75px; }
.alt-sec-xl  { padding-top: 100px; padding-bottom: 100px; }
.alt-sec-xxl { padding-top: 150px; padding-bottom: 150px; }

/* Every WP Bakery content element carried `margin-bottom: 35px`
   (.wpb_content_element), load-bearing vertical rhythm — dropping it leaves the
   rebuild short by 35px per block, accumulating down the page (RETHEME §5a).
   Keep it on EVERY text block including the last in a column. */
.alt-text-block { margin-bottom: 35px; }
.alt-text-block > :last-child { margin-bottom: 0; }

/* Grid images reproduce the .wpb_single_image 35px bottom margin only where it
   does NOT collapse — i.e. the image is alone in its column (convert.py's
   img_grid). Everywhere else the original's wrapper measures the bare image. */
.alt-image-block { margin-bottom: 35px; }

/* vc_empty_space — the per-instance height comes across as an inline style; the
   parent ships the 32px base, this only adds float-clearing. */
.alt-spacer { clear: both; }

/* vc_separator. Neutral rule to start — verify the exact colour at gate 2. */
.alt-rule { margin: 0 0 35px; border: 0; border-top: 1px solid #e6e1d6; opacity: 1; }

/* Image-only hero collapse-guard (RETHEME image-only-hero trap). */
.alt-hero-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	min-height: 240px;
	display: flex;
	align-items: center;
}
.alt-hero-banner::before { content: ""; position: absolute; inset: 0; background: rgba(20,16,8,.35); }
.alt-hero-banner > .container { position: relative; z-index: 1; }
.alt-hero-banner .alt-text-block { margin-bottom: 0; }
.alt-hero-banner h1, .alt-hero-banner h2, .alt-hero-banner p,
.alt-hero-banner .h1, .alt-hero-banner .h2 { color: #ffffff; }

/* -------------------------------------------------------------------------
   6. HEADER — CENTRED masthead: logo on top, transparent navbar below.
   (The original is NOT logo-left; .logo-container centres a large wordmark and
   the .navbar sits under it, full width, transparent.)
   ---------------------------------------------------------------------- */

/* Breathing room below the nav before the first content section (the original
   sits the banner flush against the nav; Lindsey wants space). */
.alt-site-header { background-color: transparent; padding-bottom: 20px; }

/* Centre the logo block and give the wordmark its measured height. era-logo-ab
   is vector, so the 2.3x upscale stays crisp. */
.alt-site-header .logo-container,
.alt-site-header .custom-logo-link { text-align: center; }
.alt-site-header .custom-logo {
	height: 140px;
	width: auto;
	max-width: 700px;
}

/* Navbar: transparent, no vertical padding (matches py-0), items centred. */
.alt-site-header .navbar { background-color: transparent; padding-top: 0; padding-bottom: 0; }
/* The original nav spans nearly full width and never wraps (flex-wrap:nowrap on
   the ul, white-space:nowrap on the links). Constrained to the 1170 container
   the 8 links compressed and their labels wrapped to two lines. */
.alt-site-header .navbar-nav { margin-left: auto; margin-right: auto; flex-wrap: nowrap; }
.alt-site-header .navbar-nav .nav-item { flex: 0 0 auto; }

/* Nav type — MEASURED: korolev-compressed 19.8px / 600 / uppercase / 1px /
   grey #535b60, hover maroon. All five matter; it's on every page. */
.alt-site-header .navbar-nav .nav-link {
	font-family: korolev-compressed, sans-serif;
	font-size: 19.8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #535b60;
	padding: 0 24px;
	margin-top: 19.8px;   /* measured: the original spaces the nav below the logo */
	text-align: center;
	white-space: nowrap;  /* labels stay on one line, like the original */
}
.alt-site-header .navbar-nav .nav-link:hover,
.alt-site-header .navbar-nav .nav-link:focus,
.alt-site-header .navbar-nav .nav-link.active { color: var(--brand-maroon); }

/* Keep the global body-copy a:hover off the chrome. */
.alt-site-header a:hover, .alt-site-header a:focus { text-decoration: none; }

/* -------------------------------------------------------------------------
   7. FOOTER — a GOLD band (bg-primary), centred: social icon row + copyright.
   (The original renders picostrap_footer_text inside div.wrapper.py-3 at
   bg #a87523 with cream text, nobel 18px. NOT a dark multi-column footer.)
   ---------------------------------------------------------------------- */

.alt-site-footer {
	background-color: var(--brand-gold);
	color: var(--brand-on-dark);
	font-family: nobel, system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
}
.alt-site-footer .container { max-width: 1170px; }
/* :not(.btn) so the maroon Substack CTA keeps its own white text. */
.alt-site-footer a:not(.btn) { color: var(--brand-on-dark); text-decoration: none; }
.alt-site-footer a:not(.btn):hover, .alt-site-footer a:not(.btn):focus { color: #ffffff; text-decoration: none; }

/* Upper band — "Subscribe to Betsy's Tidbits". White text on the gold, a
   korolev heading, the intro at 1.1em, and the maroon Substack CTA. This was a
   footer WIDGET on the original (#wrapper-footer-widgets), on every page — it is
   reproduced in the footer partial so the chrome matches. Measured 3 Aug. */
.alt-site-footer .alt-footer-subscribe { padding-top: 54px; padding-bottom: 0; color: #fff; }
.alt-site-footer .alt-footer-subscribe h4 {
	font-family: korolev-compressed, sans-serif;
	font-size: 27px; font-weight: 500; color: #fff; margin-bottom: .5rem;
}
.alt-site-footer .alt-footer-subscribe p { font-size: 1.1em; color: #fff; margin-bottom: 0; }
.alt-site-footer .alt-footer-subscribe .btn { margin-top: 1.5rem; }

/* Lower band — social icons + copyright (picostrap_footer_text). */
.alt-site-footer .alt-footer-social { padding-top: 18px; padding-bottom: 18px; }
.alt-site-footer .alt-social { font-size: 30px; margin-bottom: .25rem; }
.alt-site-footer .alt-social a { padding: 0 .5rem; }
.alt-site-footer .alt-copyright { margin-bottom: 0; }