/*
 * The Crypto Secret — site chrome (Story 1.3).
 *
 * The header, the topic ticker, the footer and the mobile overlay. Every
 * value here comes from an artboard:
 *
 *   Main.dc.html:88-110    home ticker + nav
 *   Main.dc.html:535-544   footer
 *   FAQ.dc.html:40-47      the inner variant (20px 40px, border-bottom)
 *   HomeMobile.dc.html:41-44,178-188   mobile header and 2-column footer
 *
 * THIS SHEET CONSUMES, IT DOES NOT RE-AUTHOR. The ticker is an instance of
 * story 1.2's marquee (.tcs-marquee__view / __track / __dup) — the animation,
 * the 28s duration, the pause-on-hover and the reduced-motion collapse all
 * live in css/motion.css and are not repeated here. Re-declaring them would
 * fork the marquee into two implementations that drift.
 *
 * NO RAW VALUES WHERE A TOKEN EXISTS. Colours, radii, tap minimum, section
 * padding and every duration are var(--tcs-*). The literal px that remain are
 * chrome geometry the artboards fix and tokens.md never names — the 18px/40px
 * header padding, the 44px nav gap, the 26px link gap. Those are documented
 * inline against the board that draws them.
 */

/* ===========================================================================
 * 0. THE CHROME'S OWN GROUND
 *
 * GeneratePress paints its own header, footer and body background. header.php
 * and footer.php replace the MARKUP but the parent's stylesheet is still on
 * the page, so its .site-header / .site-footer rules would sit under ours if
 * those elements existed. They no longer do — but the body ground does, and
 * without it the cream page ends at the last section and the browser paints
 * white below the fold on a short page.
 * ========================================================================= */

body {
	background: var(--tcs-cream);
	color: var(--tcs-black);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-body);
	line-height: var(--tcs-lh-body);
	/*
	 * SHORT PAGES FILL THE VIEWPORT. The login card, the 404 and the
	 * declined page are all shorter than a 1080px-tall window; without this
	 * the footer ended two thirds of the way down and the body ground ran on
	 * beneath it as a bare cream strip (2026-09-03). Body is a column, the
	 * GeneratePress page shell grows, the footer is pushed to the bottom
	 * edge. Fixed and absolute children (overlay, sticky buy bar) are
	 * unaffected by a flex parent.
	 */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

body > #page {
	flex: 1 0 auto;
	width: 100%;
}

/*
 * The skip link GeneratePress hooks onto generate_before_header. It is the
 * first focusable thing on every page and it must be VISIBLE when focused.
 * The parent's own rule handles the reveal; all it needs from here is a
 * z-index above the sticky header, which the parent gave it relative to a
 * .site-header that no longer exists.
 */
a.skip-link:focus {
	z-index: 100;
}

/* ===========================================================================
 * 2. HEADER  —  Main.dc.html:97-110 (home), FAQ.dc.html:40-47 (inner)
 * ========================================================================= */

.tcs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px var(--tcs-section-x); /* Main.dc.html:97 — 18px 40px */
	background: var(--tcs-cream);
	/*
	 * STICKY, ON EVERY PAGE (mobile/inner-page pass, 2026-09-05). The header
	 * used to be position: relative and simply scrolled away — on a phone the
	 * brand and the menu were gone after one flick, and a reader three
	 * screens into a policy page had no way back or to the menu without
	 * scrolling to the top. It now pins to the viewport top. z-index sits
	 * above every band and the hero's stage (hero.css caps at 4), below the
	 * sticky buy bar (80), the nav overlay (90) and the skip link (100).
	 */
	position: sticky;
	top: 0;
	z-index: 50;
	transition:
		box-shadow var(--tcs-dur-btn-hover, 200ms) ease,
		background-color var(--tcs-dur-btn-hover, 200ms) ease,
		padding var(--tcs-dur-btn-hover, 200ms) ease;
}

/*
 * The scrolled state js/header.js sets once the page has moved. At the top of
 * the page the header is flat on the cream ground exactly as the artboards
 * draw it; once content passes underneath it picks up a translucent tint,
 * a blur and a hairline shadow so the pinned bar reads as a bar rather than
 * as content that stopped moving. --inner already carries a border-bottom;
 * the shadow below sits on top of it without doubling the line.
 */
.tcs-header.is-stuck {
	background: color-mix(in srgb, var(--tcs-cream) 86%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 1px 0 var(--tcs-border), 0 12px 32px -20px color-mix(in srgb, var(--tcs-black) 35%, transparent);
}

.tcs-header--home.is-stuck {
	padding-top: 12px;
	padding-bottom: 12px;
}

/*
 * The inner variant: 20px 40px and a hairline rule underneath
 * (FAQ.dc.html:40). The border is what separates the header from a page that
 * has no hero band to do it.
 */
.tcs-header--inner {
	padding: 20px var(--tcs-section-x);
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-header__left {
	display: flex;
	align-items: center;
	gap: 44px; /* Main.dc.html:98 — between the brand and the nav links */
	min-width: 0;
}

.tcs-header__brand {
	display: flex;
	align-items: center;
	gap: 9px; /* Main.dc.html:99 */
	color: inherit;
	text-decoration: none;
	flex: 0 0 auto;
}

.tcs-mark {
	display: block;
	width: auto; /* the height attribute is the rendered height; the crop's own ratio sets the width */
	flex: 0 0 auto;
}

.tcs-header__brand-name {
	font-size: 16px; /* Main.dc.html:100 */
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.02em;
}

.tcs-header__nav {
	display: flex;
	align-items: center;
	gap: 26px; /* Main.dc.html:102 */
}

.tcs-header__nav a {
	font-size: 14px; /* Main.dc.html:103-105 */
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body);
	text-decoration: none;
	/*
	 * The 44px tap minimum is met by the padded flex box rather than by the
	 * font, so the link is a real target without the row growing: the header
	 * is 18px+lineheight+18px tall either way.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
}

.tcs-header__nav a:hover,
.tcs-header__nav a:focus-visible {
	color: var(--tcs-black);
}

.tcs-header__right {
	display: flex;
	align-items: center;
	gap: 14px; /* Main.dc.html:108 */
}

/*
 * PRICE. Main.dc.html:109 — the struck anchor, an orange arrow, the live
 * price. epic-1-context.md is explicit that the price must NEVER be hidden,
 * so there is no rule anywhere in this sheet that display:none's it at any
 * width; at mobile it moves into the overlay, where it is still rendered.
 *
 * The figures are hardcoded from the design (spec: "not wired to WooCommerce
 * until epic 3"). They are NOT a cart total and there is no $0.00 path: with
 * no data source there is nothing that can resolve to zero.
 */
.tcs-price {
	font-size: 14px;
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body);
	white-space: nowrap;
}

.tcs-price__was {
	text-decoration: line-through;
}

.tcs-price__arrow {
	color: var(--tcs-orange);
}

.tcs-price__now {
	color: var(--tcs-black);
	font-weight: var(--tcs-fw-semibold);
}

/*
 * The header CTA. .tcs-btn / .tcs-btn--dark carry the hover, the lift and the
 * shimmer from motion.css; only the header's own size is set here
 * (Main.dc.html:110 — 11px 20px, 14px, radius 6).
 */
.tcs-header__cta {
	font-size: 14px;
	font-weight: var(--tcs-fw-semibold);
	padding: 11px 20px;
	border-radius: var(--tcs-radius-sm);
	white-space: nowrap;
}

/*
 * A design-QA finding: Checkout.dc.html:42 verbatim on desktop — lock icon,
 * 15x15, 8px gap, 13.5px label, --tcs-muted. Reuses `currentColor` on the
 * SVG stroke so one color declaration covers both the icon and the text.
 * CheckoutMobile.dc.html:42 drops the icon and shortens the label to
 * "Secure" at 12.5px — two spans in the markup, toggled here rather than in
 * PHP, the same pattern the ticker/price/CTA already use at this file's
 * 768px breakpoint.
 */
.tcs-header__secure {
	align-items: center;
	gap: 8px;
	color: var(--tcs-muted);
	white-space: nowrap;
}

.tcs-header__secure--desktop {
	display: flex;
	font-size: 13.5px;
}

.tcs-header__secure--mobile {
	display: none;
	font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
 * 2b. HAMBURGER  —  HomeMobile.dc.html:43
 *
 * NO-JS CONTRACT, and it is structural rather than careful: the button is
 * display:none by default and becomes visible only under .tcs-nav-ready, a class
 * js/nav.js sets on <html> as its first statement. So a blocked, failed or
 * disabled script leaves no hamburger at all — and the footer's six links stay
 * reachable, which is the fallback. The inverse (visible by default, hidden by
 * JS) ships a button that does nothing whenever the script does not run.
 * ------------------------------------------------------------------------- */

.tcs-burger {
	display: none;
	/* 44x44 exactly (HomeMobile.dc.html:43), and it is the flex box that
	 * guarantees it, not the 22px icon inside. */
	width: var(--tcs-tap-min);
	height: var(--tcs-tap-min);
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--tcs-radius-sm);
	color: var(--tcs-black);
	cursor: pointer;
}

.tcs-burger svg {
	display: block;
	pointer-events: none; /* so event.target is always the button */
}

/* ---------------------------------------------------------------------------
 * 2c. HEADER AT MOBILE  —  HomeMobile.dc.html:41-44
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.tcs-header {
		padding: 16px var(--tcs-section-x-mobile); /* HomeMobile.dc.html:41 */
	}

	.tcs-header--inner {
		padding: 16px var(--tcs-section-x-mobile);
	}
	.tcs-header.is-stuck {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tcs-header__brand {
		gap: 8px; /* HomeMobile.dc.html:42 */
		/*
		 * The 44px tap floor (Story 4.5's sweep caught the brand link at
		 * 26px tall). The row is already taller than the link, so this
		 * only grows the tappable area — the lockup itself does not move.
		 */
		min-height: var(--tcs-tap-min);
	}

	.tcs-header__brand .tcs-mark {
		height: 32px; /* the 40px desktop lockup, scaled for the 390px header */
	}

	.tcs-header__brand-name {
		font-size: 14.5px; /* HomeMobile.dc.html:42 */
	}

	.tcs-header__secure--desktop {
		display: none;
	}

	.tcs-header__secure--mobile {
		display: flex;
	}

	/*
	 * The desktop nav links and the CTA move into the overlay. They are not
	 * deleted — header.php renders them inside the overlay too, so both stay
	 * present in the DOM and reachable once the overlay is.
	 */
	.tcs-header__nav,
	.tcs-header__cta {
		display: none;
	}

	.tcs-nav-ready .tcs-burger {
		display: flex;
	}

	/*
	 * THE PRICE IS THE ONE ELEMENT epic-1-context.md's "the price must never
	 * be hidden" makes non-negotiable, so it is NOT in the unconditional
	 * mobile-hide rule above (code-review fix, 2026-09-04): without this
	 * carve-out it moved into the overlay same as the nav/CTA, but the
	 * overlay only becomes reachable once JS sets .tcs-nav-ready on <html>
	 * (js/nav.js) — with JS blocked, disabled or failing to parse, the
	 * burger never appears and the price had no path to the screen at all.
	 * It now stays visible in the header by default and is hidden only once
	 * .tcs-nav-ready confirms the overlay's own copy has taken over, so it
	 * is never duplicated on screen and never absent.
	 */
	.tcs-nav-ready .tcs-header__right .tcs-price {
		display: none;
	}

	/*
	 * WITHOUT JS AT MOBILE the burger stays hidden, so the header's right
	 * side carries only the price and the nav links live only in the
	 * footer. Keeping the CTA visible too would be a second primary action
	 * competing with the hero's.
	 */
}

/* ===========================================================================
 * 3. MOBILE OVERLAY
 *
 * No artboard draws it (spec, Design Notes: a decision taken because the
 * documents were silent). Full-screen on the black ground carrying the nav
 * links, the price with its struck anchor, and the CTA.
 *
 * hidden, not display:none-by-class. header.php ships the overlay with the
 * `hidden` attribute, so with no CSS at all — and with no JS at all — it is
 * out of the layout AND out of the accessibility tree. A class-only hide
 * leaves its links in the tab order behind the page.
 * ========================================================================= */

.tcs-overlay[hidden] {
	display: none;
}

.tcs-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px var(--tcs-section-x-mobile) 32px;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	overflow-y: auto;
	/*
	 * -webkit-overflow-scrolling and overscroll-behavior keep a scroll inside
	 * the overlay from chaining to the page underneath, which is what makes
	 * the trapped state feel trapped rather than merely focus-trapped.
	 */
	overscroll-behavior: contain;
}

.tcs-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tcs-overlay__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tcs-cream);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.02em;
}

.tcs-overlay__close {
	width: var(--tcs-tap-min);
	height: var(--tcs-tap-min);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: var(--tcs-border-width) solid var(--tcs-border-dark);
	border-radius: var(--tcs-radius-sm);
	color: var(--tcs-cream);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
}

.tcs-overlay__nav {
	display: flex;
	flex-direction: column;
	margin-top: 24px;
}

.tcs-overlay__nav a {
	display: flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	padding: 14px 2px;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border-dark);
	color: var(--tcs-cream);
	text-decoration: none;
	font-size: 22px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.025em;
}

.tcs-overlay__foot {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

/*
 * The price on the black ground. --tcs-body (#55524B) is the cream-ground
 * body colour and lands near 2.4:1 here, so the dark-body token is used
 * instead — the same contrast rule that governs every band.
 */
.tcs-overlay .tcs-price {
	color: var(--tcs-body-dark);
	font-size: 15px;
}

.tcs-overlay .tcs-price__now {
	color: var(--tcs-cream);
}

.tcs-overlay__cta {
	font-size: 16px;
	font-weight: var(--tcs-fw-semibold);
	padding: 15px 26px;
	border-radius: var(--tcs-radius);
	align-self: stretch;
	text-align: center;
}

/*
 * The overlay is a mobile affordance. If the viewport is resized past the
 * breakpoint while it is open, hide it rather than leave a full-screen black
 * panel over a desktop layout — js/nav.js also closes it on that transition,
 * and this is the belt to that braces.
 */
@media (min-width: 769px) {
	.tcs-overlay {
		display: none;
	}
}

/* ===========================================================================
 * 4. FOOTER  —  Main.dc.html:535-544 (desktop), HomeMobile.dc.html:178-188
 *
 * NO COPYRIGHT LINE. The old site's carried `Ctmprocess` — a different
 * company's name — and the artboards deliberately have none. Nothing in this
 * sheet or in footer.php renders one.
 *
 * NO CART, NO TOTAL, NO $0.00. There is no element here that could hold one.
 * ========================================================================= */

.tcs-footer {
	background: var(--tcs-black);
	color: var(--tcs-muted);
	padding: var(--tcs-section-x); /* Main.dc.html:536 — 40px all round */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.tcs-footer__brand {
	display: flex;
	align-items: center;
	gap: 9px; /* Main.dc.html:537 */
	color: var(--tcs-muted);
	text-decoration: none;
	font-size: 13.5px; /* Main.dc.html:539 */
	flex: 0 0 auto;
}

.tcs-footer__links {
	display: flex;
	gap: 28px; /* Main.dc.html:541 */
	flex-wrap: wrap;
}

.tcs-footer__links a {
	font-size: 13.5px; /* Main.dc.html:542 */
	color: var(--tcs-muted);
	text-decoration: none;
	/*
	 * 44px even at desktop. The artboard's links are bare text, but the tap
	 * minimum is a floor, not a mobile-only rule, and a padded box costs the
	 * desktop footer nothing: the row is already 44px tall from the mark.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
}

.tcs-footer__links a:hover,
.tcs-footer__links a:focus-visible {
	color: var(--tcs-cream);
}

/*
 * The disclaimer. --tcs-dim (#6E6A62) at BOTH widths.
 *
 * DELIBERATE DEVIATION FROM HomeMobile.dc.html:187, which sets #55524B here.
 * EXPERIENCE.md:158 says body copy on dark must never use #55524B because it
 * fails contrast there, and the mobile board is the only place in fifteen
 * boards that does it — the desktop footer two boards over uses #6E6A62 for
 * the same sentence. Treated as an artboard slip rather than a design intent,
 * and noted in the spec's Design Notes.
 */
.tcs-footer__disclaimer {
	font-size: 12.5px; /* Main.dc.html:544 */
	color: var(--tcs-dim);
	max-width: 380px;
	text-align: right;
	line-height: 1.5;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 4b. FOOTER AT MOBILE  —  HomeMobile.dc.html:179-188
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.tcs-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px; /* HomeMobile.dc.html:179 */
		/*
		 * 96px of bottom clearance. HomeMobile.dc.html:179 reserves it for the
		 * sticky buy bar; without it that bar covers the footer's legal text,
		 * which epic-1-context.md forbids outright. (Story 4.1's footer rewrite
		 * tightened this to 40px before the bar existed in its line of work —
		 * with the bar now real, the merge measured the disclaimer's bottom
		 * edge 38px UNDER the bar at document end, so the reservation is
		 * restored.)
		 */
		padding: 32px var(--tcs-section-x-mobile) 96px;
	}

	.tcs-footer__brand {
		font-size: 13px;
		/*
		 * The 44px tap floor (Story 4.5's sweep caught the footer brand
		 * link at 22px tall). Already flex + align-items:center above, so
		 * this only grows the tappable area.
		 */
		min-height: var(--tcs-tap-min);
	}

	.tcs-footer__links {
		/*
		 * repeat(2, minmax(0, 1fr)), never a bare 1fr: a bare 1fr refuses to
		 * shrink below its content and a long label then overflows the row.
		 */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px; /* HomeMobile.dc.html:181 */
		width: 100%;
	}

	.tcs-footer__links a {
		font-size: 13px;
		/*
		 * flex + min-height, exactly as the artboard writes it
		 * (HomeMobile.dc.html:182-186). The grid cell is only as tall as its
		 * content otherwise, and a 13px line is 18px — well under the minimum.
		 */
		display: flex;
		min-height: var(--tcs-tap-min);
	}

	.tcs-footer__disclaimer {
		font-size: 12px; /* HomeMobile.dc.html:188 */
		max-width: none;
		text-align: left;
		line-height: 1.55;
	}
}

/* ===========================================================================
 * 5. FOCUS
 *
 * Every interactive element in the chrome gets a visible focus ring, and
 * nothing here ever writes `outline: none` without a replacement.
 * :focus-visible rather than :focus so a mouse click does not ring the button
 * — but a plain :focus fallback follows, because a browser without
 * :focus-visible support must not end up with NO indicator at all.
 * ========================================================================= */

.tcs-header a:focus,
.tcs-header button:focus,
.tcs-footer a:focus,
.tcs-overlay a:focus,
.tcs-overlay button:focus {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

.tcs-header a:focus:not(:focus-visible),
.tcs-header button:focus:not(:focus-visible),
.tcs-footer a:focus:not(:focus-visible),
.tcs-overlay a:focus:not(:focus-visible),
.tcs-overlay button:focus:not(:focus-visible) {
	outline: none;
}

.tcs-header a:focus-visible,
.tcs-header button:focus-visible,
.tcs-footer a:focus-visible,
.tcs-overlay a:focus-visible,
.tcs-overlay button:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/* ===========================================================================
 * 6. WHAT THE PARENT THEME NO LONGER OWNS
 *
 * header.php and footer.php stop calling generate_construct_header() and
 * generate_construct_footer(), so .site-header and .site-footer are never
 * emitted. GeneratePress's stylesheet still ships their rules, and a plugin
 * or a customizer setting can re-introduce either element — at which point the
 * page would grow a second header above ours. Neutralise them here so that
 * failure renders as nothing rather than as a duplicate nav.
 * ========================================================================= */

.site-header,
.site-info,
.site-footer .inside-site-info {
	display: none;
}

/* ===========================================================================
 * SITE-WIDE NOTICE BASE (2026-09-05). woocommerce/notices/{success,notice,
 * error}.php are theme overrides that add .tcs-notice + an inline SVG icon;
 * they render on the account pages AND on checkout, so the parts every page
 * needs live here. account.css layers the card treatment on top.
 * ========================================================================= */
.tcs-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.tcs-notice__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.tcs-notice__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -3px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.tcs-notice__icon svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.tcs-notice--success .tcs-notice__icon { color: var(--tcs-green); }
.tcs-notice--info .tcs-notice__icon    { color: var(--tcs-amber); }
.tcs-notice--error .tcs-notice__icon   { color: var(--tcs-error); }

.tcs-notice__text {
	flex: 1 1 auto;
	min-width: 0;
}

.tcs-notice::before,
.tcs-notice .tcs-notice__item::before {
	content: none !important;
}

/* Tablet widths (783-1100px): the desktop "Secure checkout" label collided
 * with the price and CTA (seen at 820px, 2026-09-05). It is a reassurance,
 * not a control, so it yields to the price. */
@media (max-width: 1100px) and (min-width: 769px) {
	.tcs-header__secure--desktop {
		display: none;
	}
	.tcs-header__left {
		gap: 28px;
	}
}