/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme for Twenty Twenty-Five with Coinsnap branding. Single consolidated stylesheet for the whole demo-store network.
Author: Coinsnap
Template: twentytwentyfive
Version: 2.0.0
Text Domain: twentytwentyfive-child
*/

/* ==========================================================================
   COINSNAP DEMO NETWORK - SINGLE STYLE GUIDE
   --------------------------------------------------------------------------
   This is the ONE stylesheet for all 21 demo sites. Page content must not
   carry inline CSS; everything visual is defined here or in theme.json.

   CONTENTS
     1. Design tokens
     2. Base / global typography
     3. Elements: links, buttons
     4. Components (cs-*)
     5. Branding: header / footer logo
     6. Responsive
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Semantic aliases over the theme.json presets, so component rules read
   clearly and there is exactly one place to change a value.
   ========================================================================== */

:root {
	/* Brand - sass/abstracts/variables/_colors.scss */
	--cs-blue:          var(--wp--preset--color--cs-blue,          #1A3B8B);  /* $primary   */
	--cs-blue-dark:     var(--wp--preset--color--cs-blue-dark,     #0e2460);  /* gradient   */
	--cs-orange:        var(--wp--preset--color--cs-orange,        #F7931A);  /* $secondary */
	--cs-accent:        var(--wp--preset--color--cs-accent,        #6193C9);  /* $accent    */
	--cs-amber:         var(--wp--preset--color--cs-amber,         #FFB347);
	--cs-steel:         var(--wp--preset--color--cs-steel,         #2C3E6B);
	--cs-dark:          var(--wp--preset--color--cs-dark,          #0F132A);  /* $dark      */

	/* Neutrals */
	--cs-heading:       #1A3B8B;
	--cs-text:          var(--wp--preset--color--cs-text,          #434D5A);
	--cs-text-muted:    var(--wp--preset--color--cs-text-muted,    #5A6A8A);
	--cs-gray-30:       var(--wp--preset--color--cs-gray-30,       #C7D2DF);
	--cs-gray-50:       var(--wp--preset--color--cs-gray-50,       #8B95A1);
	--cs-border:        var(--wp--preset--color--cs-border,        #E4EBF4);  /* $accent-20 */
	--cs-surface:       var(--wp--preset--color--cs-surface,       #F3F4F9);  /* $light     */
	--cs-surface-tint:  var(--wp--preset--color--cs-surface-tint,  #EDF2FC);  /* $zone-blue */
	--cs-zone-steel:    var(--wp--preset--color--cs-zone-steel,    #F0F3F8);
	--cs-white:         var(--wp--preset--color--cs-white,         #ffffff);

	/* Notice / callout */
	--cs-notice-bg:     var(--wp--preset--color--cs-notice-bg,     #fff7ed);
	--cs-notice-text:   var(--wp--preset--color--cs-notice-text,   #9a4f00);

	/* Type scale */
	--cs-fs-xs:         var(--wp--preset--font-size--cs-xs);
	--cs-fs-sm:         var(--wp--preset--font-size--cs-sm);
	--cs-fs-base:       var(--wp--preset--font-size--cs-base);
	--cs-fs-md:         var(--wp--preset--font-size--cs-md);
	--cs-fs-lg:         var(--wp--preset--font-size--cs-lg);
	--cs-fs-xl:         var(--wp--preset--font-size--cs-xl);
	--cs-fs-xxl:        var(--wp--preset--font-size--cs-xxl);
	--cs-fs-display:    var(--wp--preset--font-size--cs-display);

	/* Leading */
	--cs-leading-tight: 1.1;
	--cs-leading-snug:  1.2;
	--cs-leading-body:  1.5;

	/* Radius - control / card / button pill / badge pill */
	--cs-radius-control: 10px;
	--cs-radius-sm:      10px;
	--cs-radius-card:    20px;
	--cs-radius-pill:    30px;
	--cs-radius-badge:   50px;

	/* Weight */
	--cs-weight-normal:   400;
	--cs-weight-medium:   500;
	--cs-weight-semibold: 600;
	--cs-weight-bold:     700;
	--cs-weight-black:    800;

	/* Spacing / rhythm */
	--cs-section-y:     80px;
	--cs-section-y-sm:  60px;
	--cs-gutter:        16px;
	--cs-gap:           40px;
	--cs-content:       1090px;
	--cs-w-narrow:      900px;
	--cs-w-base:        1090px;
	--cs-w-wide:        1280px;

	/* Elevation - shadow base is always $dark, never pure black */
	--cs-shadow-card:   0 2px 8px rgba(15, 19, 42, 0.05);
	--cs-shadow-raised: 0 12px 24px rgba(15, 19, 42, 0.12);

	/* Brand gradients */
	--cs-gradient-blue: linear-gradient(135deg, #0e2460, #1A3B8B, #1a4fa0);

	--cs-transition:    220ms ease;
}


/* ==========================================================================
   2. BASE / GLOBAL TYPOGRAPHY
   ========================================================================== */

body {
	color: var(--cs-text);
	line-height: var(--cs-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	color: var(--cs-heading);
	font-weight: var(--cs-weight-bold);
	line-height: var(--cs-leading-tight);
	text-wrap: balance;
}

h3, h4, h5, h6 {
	line-height: var(--cs-leading-snug);
}

p {
	line-height: var(--cs-leading-body);
}

/* Long-form copy should not run to uncomfortable line lengths. */
p, li {
	text-wrap: pretty;
}

strong, b {
	font-weight: var(--cs-weight-semibold);
	color: var(--cs-heading);
}


/* ==========================================================================
   3. ELEMENTS
   ========================================================================== */

/* --- Links ------------------------------------------------------------- */

a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--cs-blue);
	text-decoration: none;
	transition: color var(--cs-transition);
}

a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
a:where(:not(.wp-element-button):not(.wp-block-button__link)):focus-visible {
	color: var(--cs-blue-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

:where(a):focus-visible {
	outline: 2px solid var(--cs-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Buttons ------------------------------------------------------------
   One button system for the whole network. Solid is the default; outline is
   the secondary. Both share identical geometry so rows line up exactly.
   ------------------------------------------------------------------------ */

.wp-block-button__link,
.wp-element-button,
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 160px;
	min-height: 48px;
	padding: 8px 24px;
	border-radius: var(--cs-radius-pill);
	border: 1px solid var(--cs-orange);
	background-color: var(--cs-orange);
	color: var(--cs-white);
	font-size: var(--cs-fs-sm);
	font-weight: var(--cs-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: transform var(--cs-transition), box-shadow var(--cs-transition),
	            border-color var(--cs-transition), background-color var(--cs-transition),
	            color var(--cs-transition);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.cs-btn:hover {
	background-color: var(--cs-white);
	border-color: var(--cs-orange);
	color: var(--cs-orange);
	box-shadow: var(--cs-shadow-raised);
	text-decoration: none;
}

.wp-block-button__link:active,
.wp-element-button:active,
.cs-btn:active {
	transform: translateY(1px);
}

/* --- Button variants ---------------------------------------------------
   Solid orange is the Coinsnap primary CTA; --accent is kept as an alias so
   older markup keeps working, and behaves identically. Every solid button
   inverts to white-on-orange on hover, so hover is consistent everywhere.

   Buttons must not carry WordPress preset colour classes: those are emitted
   with !important and would beat these hover rules.
   ---------------------------------------------------------------------- */

.cs-btn--primary,
.cs-btn--accent {
	background-color: var(--cs-orange);
	border-color: var(--cs-orange);
	color: var(--cs-white);
}

.cs-btn--primary:hover,
.cs-btn--accent:hover,
.cs-btn--primary:focus-visible,
.cs-btn--accent:focus-visible {
	background-color: var(--cs-white);
	border-color: var(--cs-orange);
	color: var(--cs-orange);
}

/* Blue pill - Coinsnap's `.button.secondary` */
.cs-btn--secondary {
	background-color: var(--cs-accent);
	border-color: var(--cs-accent);
	color: var(--cs-white);
}

.cs-btn--secondary:hover,
.cs-btn--secondary:focus-visible {
	background-color: var(--cs-white);
	border-color: var(--cs-accent);
	color: var(--cs-accent);
}

/* Outline / secondary CTA */
.wp-block-button.is-style-outline .wp-block-button__link,
.cs-btn--outline {
	background-color: transparent;
	border-color: var(--cs-accent);
	color: var(--cs-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.cs-btn--outline:hover,
.cs-btn--outline:focus-visible {
	background-color: var(--cs-accent);
	border-color: var(--cs-accent);
	color: var(--cs-white);
}

/* Outline sitting on a dark band */
.cs-section--dark .wp-block-button.is-style-outline .wp-block-button__link,
.cs-card--dark .wp-block-button.is-style-outline .wp-block-button__link,
.cs-btn--outline-invert {
	background-color: transparent;
	border-color: var(--cs-white);
	color: var(--cs-white);
}

.cs-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cs-card--dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cs-btn--outline-invert:hover,
.cs-btn--outline-invert:focus-visible {
	background-color: var(--cs-white);
	border-color: var(--cs-white);
	color: var(--cs-blue-dark);
}

.cs-btn--lg { padding: 16px 40px; }
.cs-btn--md { padding: 15px 34px; }

/* Button rows keep consistent spacing regardless of where they appear. */
.wp-block-buttons {
	gap: 16px;
}


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Section wrapper ---------------------------------------------------
   Every page band uses one vertical rhythm. The audit found 88/92/96px in
   the same visual role across sites; all three collapse to --cs-section-y.
   ---------------------------------------------------------------------- */

.cs-section {
	padding-top: var(--cs-section-y);
	padding-bottom: var(--cs-section-y);
	padding-left: var(--cs-gutter);
	padding-right: var(--cs-gutter);
}

.cs-section--tint { background-color: var(--cs-surface); }

.cs-section--dark {
	background: var(--cs-gradient-blue);
	color: var(--cs-white);
}

.cs-section--dark :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) { color: var(--cs-white); }
.cs-section--dark p { color: var(--cs-surface-tint); }

/* Container widths are normalized to three values (860 / 1080 / 1180px)
   on the blocks themselves - see --cs-w-* tokens above. */


/* --- Hero -------------------------------------------------------------- */

/* Pill badge. It must shrink-wrap its text, so it is a block with
   `width: fit-content` rather than inline-block - that way WordPress's
   alignment classes can still position it via auto margins. Using
   inline-block would make `has-text-align-center` centre only the text
   inside the pill, leaving the pill itself flush against the parent. */
.cs-eyebrow {
	display: block;
	width: fit-content;
	max-width: 100%;
	color: var(--cs-orange);
	background-color: rgba(247, 147, 26, 0.12);
	border-radius: var(--cs-radius-badge);
	padding: 5px 14px;
	font-size: 0.75rem;
	font-weight: var(--cs-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 20px;
}

.cs-eyebrow.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.cs-eyebrow.has-text-align-right {
	margin-left: auto;
	margin-right: 0;
}

.cs-lead {
	color: var(--cs-text);
	font-size: var(--cs-fs-base);
	line-height: var(--cs-leading-body);
	margin-bottom: 36px;
}

.cs-lead--secondary {
	color: var(--cs-text-muted);
	font-size: var(--cs-fs-sm);
}

.cs-fineprint {
	color: var(--cs-text-muted);
	font-size: var(--cs-fs-xs);
	line-height: var(--cs-leading-snug);
}

.cs-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}


/* --- Cards -------------------------------------------------------------
   One radius for every box on the network (--cs-radius-card), replacing the
   20/24px split, and two padding tiers replacing 28/34/36/38/40/42px.
   ---------------------------------------------------------------------- */

.cs-card {
	background-color: var(--cs-white);
	border-radius: var(--cs-radius-card);
	padding: 40px;
}

.cs-card--bordered {
	border: 2px solid var(--cs-white);
	box-shadow: var(--cs-shadow-card);
	transition: transform var(--cs-transition), box-shadow var(--cs-transition),
	            border-color var(--cs-transition);
}

.cs-card--bordered:hover {
	transform: translateY(-6px);
	box-shadow: var(--cs-shadow-raised);
	border-color: var(--cs-border);
}

.cs-card--step    { padding: 24px 24px 48px; }
.cs-card--feature { padding: 40px; }

.cs-card--dark {
	background: var(--cs-gradient-blue);
	color: var(--cs-white);
	border: 0;
	padding: 40px;
}

.cs-card--dark :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) { color: var(--cs-white); }
.cs-card--dark p { color: var(--cs-surface-tint); }

.cs-card :is(h2, h3, h4, .wp-block-heading) { margin-top: 0; }

.cs-step-number {
	color: var(--cs-orange);
	font-size: var(--cs-fs-xl);
	font-weight: var(--cs-weight-black);
	line-height: var(--cs-leading-tight);
	margin-bottom: 12px;
}

.cs-icon {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 12px;
}


/* --- Notice / callout --------------------------------------------------- */

.cs-notice {
	background-color: var(--cs-notice-bg);
	color: var(--cs-notice-text);
	border-radius: var(--cs-radius-sm);
	padding: 22px 24px;
	font-weight: var(--cs-weight-semibold);
	line-height: var(--cs-leading-snug);
}

.cs-notice a { color: inherit; text-decoration: underline; }


/* --- Button sizes ------------------------------------------------------
   The audit found 7 horizontal padding values (28/30/32/34/36/38/40px) for
   what are really two tiers. These are the two.
   ---------------------------------------------------------------------- */


/* --- Headings ----------------------------------------------------------
   Four heading roles replace the 9 hardcoded sizes found in production
   (64/48/46/44/38/36/32/30/28/25px).
   ---------------------------------------------------------------------- */

.cs-h { line-height: var(--cs-leading-snug); color: var(--cs-blue); }

/* h1 is orange and h2 is uppercase - both are Coinsnap brand rules. */
.cs-h--display {
	font-size: var(--cs-fs-display);
	font-weight: var(--cs-weight-semibold);
	line-height: var(--cs-leading-tight);
	color: var(--cs-blue);
	margin-bottom: 20px;
}

.cs-h--section {
	font-size: var(--cs-fs-xxl);
	font-weight: var(--cs-weight-black);
	line-height: var(--cs-leading-snug);
	text-transform: uppercase;
	margin-bottom: 20px;
}

.cs-h--sub  { font-size: var(--cs-fs-xl); font-weight: var(--cs-weight-semibold); margin-bottom: 20px; }
.cs-h--card { font-size: var(--cs-fs-lg); font-weight: var(--cs-weight-bold);     margin-bottom: 16px; }
.cs-h--sm   { font-size: var(--cs-fs-md); font-weight: var(--cs-weight-medium);   margin-bottom: 12px; }

.cs-page-title { margin-top: 0; margin-bottom: 0.75rem; line-height: var(--cs-leading-snug); }


/* --- Body copy ---------------------------------------------------------- */

.cs-body {
	color: var(--cs-text);
	font-size: var(--cs-fs-sm);
	line-height: var(--cs-leading-body);
}

.cs-body--muted { color: var(--cs-text-muted); }
.cs-body--lead  { font-size: var(--cs-fs-base); }


/* --- Lists -------------------------------------------------------------- */

.cs-list {
	color: var(--cs-text);
	font-size: var(--cs-fs-sm);
	line-height: var(--cs-leading-body);
}

.cs-list--steps { line-height: 2; }


/* --- Column grids ------------------------------------------------------
   Two gap tiers replace the 24/40/42/44 row and 24/72 column gaps.
   ---------------------------------------------------------------------- */

.cs-cols        { gap: var(--cs-gap); }
.cs-cols--split { row-gap: 44px; column-gap: 72px; }


/* --- Generic padded box (non-section) ----------------------------------- */

.cs-box { padding: 36px 32px; }


/* --- Button row spacing -------------------------------------------------- */

.cs-btn-row--spaced { margin-top: 16px; }


/* --- Column ratios -----------------------------------------------------
   Replaces per-page flex-basis values (60/58/52/48/42/40%) with three
   canonical splits defined once, here.
   ---------------------------------------------------------------------- */

.cs-col      { flex-grow: 0; }
.cs-col--60 { flex-basis: 60% !important; }
.cs-col--50 { flex-basis: 50% !important; }
.cs-col--40 { flex-basis: 40% !important; }

.cs-stack-gap { margin-bottom: var(--cs-section-y-sm); }


/* --- Site chrome: header / footer / main --------------------------------
   Moved out of parts/header.html, parts/footer.html and the templates so no
   theme markup carries inline CSS either.
   ---------------------------------------------------------------------- */

.cs-main {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.cs-site-header {
	background-color: var(--cs-white);
	padding: 20px 28px;
}

.cs-nav { font-size: var(--cs-fs-sm); font-weight: var(--cs-weight-semibold); }

.cs-site-footer {
	background-color: var(--cs-white);
	border-top: 1px solid var(--cs-border);
	padding: 56px 28px 36px;
}

.cs-footer-cols { row-gap: 36px; column-gap: 72px; }

.cs-footer-nav { font-size: var(--cs-fs-xs); gap: 18px; }

.cs-footer-sep {
	margin-top: 42px;
	margin-bottom: 24px;
	border: 0;
	border-top: 1px solid var(--cs-border);
	background-color: transparent;
}

.cs-footer-legal {
	color: var(--cs-text-muted);
	font-size: var(--cs-fs-xs);
	margin: 0;
}


/* --- Form controls -----------------------------------------------------
   Ported from Coinsnap's modern input treatment: 10px radius, 1.5px
   $gray-30 border, $zone-steel fill, $primary focus ring.
   ---------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea, .nf-form-cont input[type="text"], .nf-form-cont input[type="email"],
.nf-form-cont textarea, .nf-form-cont select {
	min-height: 42px;
	padding: 0 16px;
	border: 1.5px solid var(--cs-gray-30);
	border-radius: var(--cs-radius-control);
	background-color: var(--cs-zone-steel);
	color: var(--cs-dark);
	font-family: inherit;
	font-size: var(--cs-fs-sm);
	transition: border-color var(--cs-transition), background-color var(--cs-transition),
	            box-shadow var(--cs-transition);
}

textarea, .nf-form-cont textarea { padding: 12px 16px; line-height: var(--cs-leading-body); }

:is(input, select, textarea)::placeholder { color: var(--cs-gray-50); }

:is(input, select, textarea):focus {
	outline: none;
	border-color: var(--cs-blue);
	background-color: var(--cs-white);
	box-shadow: 0 0 0 3px rgba(26, 59, 139, 0.1);
}

.nf-form-cont .nf-field-label label {
	color: var(--cs-blue);
	font-weight: var(--cs-weight-semibold);
	font-size: var(--cs-fs-sm);
}


/* --- Cart pages --------------------------------------------------------- */

.cs-cart-heading { margin-bottom: 1rem; }


/* ==========================================================================
   5. BRANDING - header / footer logo
   ========================================================================== */

.coinsnap-site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.coinsnap-site-logo-slot {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.coinsnap-site-logo-slot--footer {
	margin-bottom: var(--wp--preset--spacing--40);
}

.coinsnap-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	opacity: 1;
	visibility: visible;
}

.coinsnap-site-logo--header .coinsnap-logo {
	width: 230px;
	max-width: 32vw;
}

.coinsnap-site-logo--footer .coinsnap-logo {
	width: 250px;
	max-width: 100%;
}

.coinsnap-footer-items {
	gap: 64px;
}

/* Demo pages: header sits directly above page content. */
html :where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

.wp-site-blocks > header + main,
.wp-site-blocks > main,
main.wp-block-group {
	margin-top: 0 !important;
	padding-top: 0;
}

body.page .wp-block-post-title:empty,
body.page .wp-block-post-title:has(+ .wp-block-spacer) {
	margin: 0 !important;
}


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {
	:root {
		--cs-section-y:    64px;
		--cs-section-y-sm: 48px;
	}

	.coinsnap-site-logo--header .coinsnap-logo {
		width: 190px;
		max-width: 55vw;
	}

	.coinsnap-footer-items {
		justify-content: flex-start !important;
		gap: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}