/* MAGMA — the theme's own rules.
 *
 * Everything else in assets/css/ comes from the design system or is extracted
 * from the reference documents and must not be hand-edited. This file is ours.
 */

/* The `hidden` attribute has to win.
 *
 * The design system's components carry their layout as inline styles — that is
 * deliberate, because tokens/responsive.css overrides them per breakpoint with
 * !important. But an inline `display:grid` also outranks the user-agent rule
 * that `hidden` relies on, so every dialog, notice and tab panel rendered
 * visible: all five dialogs stacked on top of each other on first load.
 *
 * One rule fixes every occurrence, and keeps `hidden` usable as the single
 * source of truth for "not shown" across the theme. */
[hidden] {
	display: none !important;
}

/* The masthead stays on screen.
 *
 * Everything for this was already built and none of it was reachable: nav.js
 * sets data-compact past 24px of scroll, chrome.css draws the compact 68px band
 * and shrinks the logo into it, and the reading-progress hairline updates on
 * every scroll event. But the masthead was never positioned, so the band scrolled
 * away with the page and the compact state only ever applied off-screen.
 *
 * sticky rather than fixed, deliberately: a sticky element keeps its space in the
 * flow, which is what the hero's `min-height:calc(100svh - 88px)` is measured
 * against. Going fixed would pull the header out of the flow and leave the hero
 * 88px too tall on every page.
 *
 * z-index sits below the drawer (90), the dialogs (95) and the notices (79-80),
 * so nothing the reader opens ends up underneath it.
 */
[data-chrome="masthead"] {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Underlines sit closer to the text.
 *
 * The design system sets the offset in eight places at between 3px and 6px, which on
 * a heading that wraps reads as a rule floating under the line rather than an
 * underline — worst on the legal pages, where the active clause is both large and
 * two lines deep. One value everywhere instead.
 *
 * Declared here rather than edited into the design system's files: those are ported
 * verbatim from the package and hand-editing them loses that guarantee. `!important`
 * only because the rules being corrected use it themselves.
 */
:where(a, [data-editor-region] a):not(.magma-btn) {
	text-underline-offset: 2px !important;
}

/* In the masthead the underline belongs to the label, not to the link around it.
 *
 * chrome.css draws the flame rule on [data-nav] [data-label]; base.css also
 * underlines any anchor on hover. Both fired, so a hovered or current item showed
 * two rules a couple of pixels apart — visible as a doubled underline once the
 * offsets above brought them close together. The anchor's own decoration is
 * suppressed and the label keeps the design system's 6px, which is the rule the
 * reference draws. */
[data-magma="utility-nav"] a[data-nav],
[data-magma="utility-nav"] a[data-nav]:hover,
[data-magma="drawer"] a[data-nav-m],
[data-magma="drawer"] a[data-nav-m]:hover {
	text-decoration: none !important;
}

/* Scoped to the masthead and the drawer. The 6px rule is drawn for a single-line
 * menu item; anywhere a link wraps, a rule that far below the baseline lands on the
 * next line's glyphs and reads as a strike-through. */
[data-magma="utility-nav"] [data-label],
[data-magma="drawer"] [data-label] {
	text-underline-offset: 6px !important;
}

/* The contents list never draws a rule — the reference gives its links
 * text-decoration:none, and its titles wrap to three lines. The clause being read
 * is marked by a flame rule in the margin instead, which is exactly what
 * privacy-policy.dc.html does and why: fourteen wrapped, all-caps titles in a 288
 * column have nowhere to put an underline.
 *
 * The type is the reference's own too — 13px on 1.45 rather than the navigation
 * token's flat leading, which made the wrapped lines collide. */
[data-magma="legal-toc"] a,
[data-magma="legal-toc"] a:hover,
[data-magma="legal-toc"] a[aria-current] {
	text-decoration: none !important;
}

[data-toc] a {
	font: 500 13px/1.45 var(--font-core) !important;
	letter-spacing: 0.015em;
	padding-left: 12px;
	border-left: 2px solid transparent;
	color: var(--magma-grey-500);
	transition: color 180ms var(--ease-standard), border-color 180ms var(--ease-standard);
}
[data-toc] a:hover {
	color: var(--magma-flame-3);
	border-left-color: var(--magma-grey-300);
}
[data-magma="legal-toc"] a[aria-current="true"] {
	color: #100C0B !important;
	border-left-color: var(--magma-flame-3);
	text-decoration-line: none !important;
}
[data-toc] { gap: 10px !important; }
[data-toc] > span { padding-left: 12px; }

/* The clause the trail lands on must clear the sticky masthead. */
section[id] { scroll-margin-top: 84px; }

@media (max-width: 1024px) {
	[data-magma="legal-toc"] { position: static !important; width: 100% !important; }
	[data-legal-layout] { flex-direction: column !important; }
}

/* The GCR mark is a link, and the reference draws it without a rule — its label is
 * two lines set with white-space:pre-line, so an underline lands well below the
 * second one. The footer's blanket hover rule uses !important and overrode the
 * template's own text-decoration:none, so it appeared anyway. */
footer a[data-badge-link],
footer a[data-badge-plate],
footer a[data-badge-link]:not([data-variant]):not(.magma-pressable):hover,
footer a[data-badge-plate]:not([data-variant]):not(.magma-pressable):hover {
	text-decoration: none !important;
	color: inherit !important;
}

/* The skip link, hidden until it is focused.
 *
 * header.php marks it `screen-reader-text`, which is WordPress's convention — but
 * the convention is only a name: the rules come from the theme's own stylesheet,
 * and ours carries the theme header and nothing else. So the class did nothing and
 * "Skip to content" sat visible above the masthead on every page.
 *
 * Hidden with the clip technique rather than display:none, because a skip link
 * that is not in the accessibility tree cannot be reached by the keyboard — which
 * would remove the only reason it exists.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Intro copy is a section, not a legal document.
 *
 * rhythm.css holds every [data-editor-region] paragraph to the 736 reading measure,
 * which is right for the legal pages it was written for — they carry the client's own
 * HTML with no classes to hook. Intro copy shares the attribute, so it inherits the
 * link and list treatment, but the reference sets its paragraphs at the full band with
 * margin:0 and spaces them with the section's gap. Both of those are restored here,
 * scoped to the section so nothing legal is touched. */
/* Both spellings: a section of its own carries data-section, the same thing inside a
 * band carries data-part. Scoping to one of them only meant the rule stopped applying
 * the moment the section became a part. */
[data-section="intro-copy"] [data-editor-region] > p,
[data-section="intro-copy"] [data-editor-region] > ul,
[data-section="intro-copy"] [data-editor-region] > ol,
[data-part="intro-copy"] [data-editor-region] > p,
[data-part="intro-copy"] [data-editor-region] > ul,
[data-part="intro-copy"] [data-editor-region] > ol {
	max-width: none;
	margin: 0;
}

/* A statement is the exception: the reference holds it to 936 rather than to the
 * reading measure. The step above it belongs to the part, not to the paragraph —
 * the band already lays its parts out on --rhythm-row and the part's own `top`
 * varies it, so a second step here simply doubled the one the band had spent. */
[data-editor-region][data-emphasis="headline"] > p {
	max-width: 936px;
}


/* The closing CTA is a band, not a plate — the same treatment as the umbrella.
 *
 * rhythm.css normalises every ink surface to a 12px plate on the 1280 band, which is
 * right for cards inside a section. The page's closing panel is the section: ink from
 * edge to edge, square corners, the rail carried as its own padding. */
[data-r="panel"][data-surface="dark"] {
	max-width: none !important;
	border-radius: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-inline: var(--layout-rail) !important;
}

.screen-reader-text:focus {
	z-index: 100;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip-path: none;
	background: var(--magma-white);
	box-shadow: var(--shadow-card-lg);
	border-radius: var(--radius-md);
	font: var(--type-nav);
	text-transform: uppercase;
	color: var(--magma-ink);
	text-decoration: none;
}


/* ── Bank as a Service: the interactions the reference keeps in the page ──────
 *
 * bank-as-a-service.dc.html carries a <style> block of its own on top of the
 * design system's stylesheets, and these five rules live in it. They are page
 * furniture rather than page content, so they belong here rather than in any one
 * template — and until they were copied across, the selected tab in the interface
 * panel looked exactly like the three that were not selected. */
section[id] { scroll-margin-top: 96px; }

[data-card="offer"] { transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-card="offer"]:hover { background: #EDEAE4; }

[data-screen-frame] {
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-screen-frame]:hover {
	transform: translateY(-2px) scale(1.004);
	box-shadow: 8px 24px 40px rgba(25, 22, 6, 0.24);
}

[data-screen-tab] { transition: color 180ms var(--ease-standard); }
[data-screen-tab]:hover { color: var(--magma-flame-3) !important; }
[data-screen-tab][aria-selected="true"] {
	color: #EFEEEC !important;
	text-decoration: underline 2px var(--magma-flame-3) !important;
	text-underline-offset: 6px;
}

/* The chain reads left to right on a desktop and top to bottom on a phone, with
 * the arrows turned to match; the problem/solution pair becomes one column. */
@media (max-width: 900px) {
	[data-r="chain"] {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	[data-r="chain"] [data-chain-arrow] { transform: rotate(90deg); }
	[data-r="ps"] { grid-template-columns: 1fr !important; }
}


/* The menu's rule belongs to the word, never to the button.
 *
 * interactions.css underlines any button inside the utility nav on hover, at
 * (0,2,1). chrome.css takes it back off [data-nav] at (0,2,0) — one point short,
 * so the button won. On an inline-flex button that draws a separate rule under
 * every inline box it holds: the label got one, and the dropdown caret got a
 * second, short one of its own beside it.
 *
 * The label span keeps its own underline, which is the one the design asks for. */
[data-magma] [data-nav],
[data-magma] [data-nav]:hover,
[data-magma] [data-nav]:focus-visible,
[data-magma] [data-nav]:active,
[data-magma] [data-nav][aria-current="true"],
[data-magma] [data-nav][data-current="true"] {
	text-decoration: none !important;
}


/* ── The Video guide's cards, from guide.dc.html's own <style> ───────────
 *
 * The scrim deepens and the glass button grows under the pointer. Without these
 * the card is inert: the poster is the whole card, so there is nothing else for a
 * hover to move. */
[data-card="video"] [data-scrim] { transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-card="video"]:hover [data-scrim] { background: rgba(16, 12, 11, 0.28); }
[data-card="video"] [data-play] {
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
		background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-card="video"]:hover [data-play] {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(255, 255, 255, 0.34);
}
[data-card="video"]:focus-visible { outline: 2px solid var(--magma-flame-3); outline-offset: 3px; }

@media (max-width: 768px) {
	[data-r="videos"] { grid-template-columns: 1fr !important; }
}


/* The scam warning's first sentence carries the warning; the second is the legal
 * declaration behind it. The client asked for the first set bold, so it is set here
 * rather than in the option's text — the field stays plain prose, and an editor who
 * rewrites the notice does not have to know any HTML to keep the emphasis.
 *
 * --fw-semibold, not the browser's 700: the type system tops out at 600 for body
 * copy and 700 renders as a different, heavier face than anything else on the page. */
[data-magma="warning"] [data-editor-region] > p:first-child,
[data-magma="warning"] > div > p:first-child {
	font-weight: var(--fw-semibold);
	color: var(--magma-ink);
}


/* A long URL in body copy has no break point, so it sets the column's minimum
   width and everything else stretches to match. On the Privacy Policy that made
   the clause column 457px inside a 375px phone; the overhang was hidden by the
   body's overflow-x:clip rather than wrapped, so the right-hand end of those
   lines was simply cut off. Predates the type change — found while raising the
   reading size, fixed here because it is the same element.

   `anywhere` rather than `break-word`: it also lets the long word shrink the
   column's intrinsic minimum, which is what stops the stretch in the first place. */
[data-editor-region] {
	overflow-wrap: anywhere;
}


/* The map under the hero.
 *
 * The client asked for the top fade gone and the plate quieter. The fade is gone
 * in hero.php, where a square frame now clips the tilted plate. The quieting is
 * here, as one number: 1 is the design's own weight; the client picked 0.35,
 * the faintest of the three that were reviewed. Changing it is this line.
 *
 * It sits on the frame rather than the plate because mg-open animates the plate's
 * opacity to 1 on arrival and would overwrite a value set there. */
:root {
	--magma-hero-map-opacity: 0.35;
}