/* ============================================================
   Quiet Rebel™ — Sienna Warmth palette
   go.reneeshupe.com shared brand tokens
   ------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for colour on every go page.

   Injected into every HTML response by functions/_middleware.js,
   through the same HTMLRewriter that injects the GA4 tag. There
   is no build step and no per-page <link>, so a new page picks
   this up automatically.

   Token names and hexes are kept IDENTICAL to the WordPress
   child theme quiet-rebel-astra-child-test (style.css, v1.1.2),
   so the two sites cannot drift. If a colour changes there, it
   changes here, and nowhere else.

   THE ACCENT SPLIT. This palette has two warm accents doing
   different jobs, where the old one had a single accent doing
   both. Do not swap their jobs.

     --qr-accent  = action. Watermelon means "click me". Buttons
                    and links ONLY, never a large fill.
     --qr-sienna  = brand. Structural and calm. Eyebrows, rules,
                    borders, quote marks, decorative marks.
     --qr-teal    = large fills, the CTA band.

   Reference: Brand/Brand Assets/brand-standards.md
   Palette source: Offers/Your Quiet Edge/YQE-Brand-Palette-and-Type-Spec.md
   ============================================================ */

:root {
	/* ── Darks ─────────────────────────────────────────────── */
	--qr-brown:        #4E3326; /* Warm Brown — darkest colour, headings, dark bands */
	--qr-brown-lift:   #63432F; /* lifted warm brown — gradient tops, hover bands */
	--qr-brown-deep:   #3A251A; /* deepest warm brown — gradient bottoms */
	--qr-espresso:     #2C1A0E; /* unchanged from the old palette, still works */

	/* ── Lights ────────────────────────────────────────────── */
	--qr-fog:          #FAF2E7; /* Warm Ivory — page and light section background */
	--qr-fog-mid:      #F0E4D2; /* Warm Ivory Mid — secondary light sections */
	--qr-fog-tint:     #FBF6EE; /* faintest ivory — alternating rows */
	--qr-off-white:    #FDF9F2; /* card ground that still reads warm */
	--qr-white:        #ffffff;

	/* ── Action accent: buttons and links ONLY ─────────────── */
	--qr-accent:       #FF3D57; /* Watermelon */
	--qr-accent-dark:  #E62945; /* Watermelon Deep — hover / pressed / focus */
	--qr-accent-wash:  #FFE4E8; /* pale watermelon — pill and tag backgrounds */

	/* ── Brand accent: eyebrows, rules, borders, marks ─────── */
	--qr-sienna:       #B0512A; /* Burnt Sienna */
	--qr-sienna-dark:  #8E3F1F; /* Burnt Sienna hover / pressed */

	/* ── Teal: large fills and the CTA band ────────────────── */
	--qr-teal:         #2C8C82; /* Teal — CTA band fill */
	--qr-teal-ink:     #20685F; /* Teal Ink — teal that has to carry text */
	--qr-teal-deep:    #17504A; /* Teal Ink hover / pressed */
	--qr-teal-tint:    #E4F1EE; /* soft teal fill behind chips and tags */

	/* ── Accents that sit ON a dark band ───────────────────── */
	/* Light Teal is the one colour here that is NOT in the YQE
	   spec. The spec has no dark bands; these pages have many.
	   Aquamarine #7FFFD4 reads cold against warm brown, and the
	   spec's Teal only reaches 2.8:1 on it. #7FD9C9 is that teal
	   lightened to 6.9:1, so it stays in the family and stays
	   legible. */
	--qr-light-teal:   #7FD9C9;
	--qr-on-dark:      #F5E9DA; /* body copy on a warm brown band, 9.6:1 */
	--qr-on-dark-soft: #C9B7A6; /* secondary copy on a dark band, 5.9:1 */

	/* ── Text on light ─────────────────────────────────────── */
	--qr-body:         #5C4436; /* body copy, 8.1:1 on Warm Ivory */
	--qr-body-soft:    #6F564A; /* secondary copy, card excerpts */
	--qr-body-light:   #7A6152; /* meta, captions, fine print, 5.2:1 */

	/* ── Lines ─────────────────────────────────────────────── */
	--qr-border:       #E5D6C2; /* hairlines, card edges, dividers */
	--qr-border-soft:  #EFE3D3; /* the quieter divider */
}


/* ============================================================
   THE BRAND DIVIDER. Added 2026-09-17.

   Two overlapping circles on a line that fades out at both ends.
   Adapted from the Hyo Obsidian theme's <hr>, rebuilt in Sienna
   Warmth. Mirrors the "THE BRAND DIVIDER" section at the bottom
   of the reneeshupe.com child theme's style.css — keep the two
   in step, or the two properties stop matching.

   Colours: Burnt Sienna #B0512A + Teal #2C8C82, overlap Teal
   Deep #17504A. Deliberately NOT Watermelon, which means "click
   me" and is reserved for buttons and links.

   WHY THE LINE IS TWO HALVES AND NOT ONE LINE WITH A MASK
   The obvious build draws one full-width line and punches a hole
   in it with a background-coloured pseudo-element. That only
   works where the background colour is known, so it breaks the
   moment a divider sits on a white card or a Warm Brown band.
   Two halves that stop short of the circles need no mask, so one
   rule covers every ground on these pages.

   Working file, with the two alternate pairings that were
   considered: Brand/Brand Assets/quiet-rebel-divider.css
   ============================================================ */

:root {
	--qr-rule:       rgba(176, 81, 42, .34);
	--qr-rule-light: rgba(240, 228, 210, .42); /* on dark bands */
}

hr {
	border: 0;
	border-top: 0;
	background-color: transparent;
	opacity: 1;
	width: 100%;
	max-width: none;
	height: 30px;
	margin: 3.5rem auto;
	position: relative;
	overflow: visible;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 25 84 70'%3E%3Cdefs%3E%3CclipPath id='q'%3E%3Ccircle cx='44' cy='53' r='28'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='44' cy='53' r='28' fill='%23B0512A'/%3E%3Ccircle cx='72' cy='67' r='28' fill='%232C8C82'/%3E%3Cg clip-path='url(%23q)'%3E%3Ccircle cx='72' cy='67' r='28' fill='%2317504A'/%3E%3C/g%3E%3C/svg%3E");
}

/* the two line halves */
hr::before,
hr::after {
	content: "";
	position: absolute;
	top: 50%;
	height: 1px;
	width: calc(50% - 28px);
}
hr::before {
	left: 0;
	background-image: linear-gradient(to right, transparent, var(--qr-rule));
}
hr::after {
	right: 0;
	background-image: linear-gradient(to left, transparent, var(--qr-rule));
}

/* On a dark band: Ivory Mid + Light Teal, overlap Teal. Burnt
   Sienna only reaches 2.4:1 on Warm Brown, so the same two
   circles would be almost invisible there.

   .on-purple and .on-purple-mid are named here on purpose. They are
   what the go pages actually call their dark bands, and the class
   names are a leftover from the retired Deep Purple palette, so they
   lie the same way --qr-deep-purple does. Matching them means a
   divider dropped into a dark band is correct without anyone
   remembering to add .on-dark, which is the step that would get
   missed. Keep .on-dark too: it is the portable name, and the
   WordPress side uses it. */
hr.on-dark,
.on-dark hr,
.on-purple hr,
.on-purple-mid hr {
	--qr-rule: var(--qr-rule-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 25 84 70'%3E%3Cdefs%3E%3CclipPath id='q'%3E%3Ccircle cx='44' cy='53' r='28'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='44' cy='53' r='28' fill='%23F0E4D2'/%3E%3Ccircle cx='72' cy='67' r='28' fill='%237FD9C9'/%3E%3Cg clip-path='url(%23q)'%3E%3Ccircle cx='72' cy='67' r='28' fill='%232C8C82'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sizes. One number changes the mark; the half-widths follow it. */
hr.is-small { height: 22px; background-size: 22px 22px; margin-block: 2.25rem; }
hr.is-small::before, hr.is-small::after { width: calc(50% - 21px); }

hr.is-large { height: 42px; background-size: 42px 42px; margin-block: 4.5rem; }
hr.is-large::before, hr.is-large::after { width: calc(50% - 36px); }

@media (max-width: 600px) {
	hr { margin-block: 2.5rem; }
}