/* ============================================================
   STL Blocks — Design Tokens
   Single source of truth for colours, fonts, spacing, motion.
   Ported from handoff/new-web-landing-page/project/stl/colors_and_type.css
   The active theme already enqueues PT Sans + Roboto from Google Fonts,
   so we only declare font stacks here, not @font-face.
   ============================================================ */

:root {
	/* ----- CORE BRAND COLOURS (2017 / 2025 palette) ----- */
	--stl-red:        #E3051C;
	--stl-orange:     #F39200;
	--stl-navy:       #2A314D;
	--stl-burgundy:   #2A314D;       /* alias used by prototype */
	--stl-burgundy-deep: #1a2040;
	--stl-burgundy-warm: #3a4160;
	--stl-blue:       #6b8fd6;
	--stl-cream:      #ffd494;
	--stl-off-white:  #F6F7F8;

	/* Tints (used by stats / quote backgrounds) */
	--stl-orange-tint-1: #F4AC5B;
	--stl-orange-tint-3: #FFD494;
	--stl-red-tint-2:    #FB5B6C;
	--stl-navy-tint-1:   #6472AD;

	/* Neutrals */
	--stl-white:    #FFFFFF;
	--stl-grey-50:  #F6F7F8;
	--stl-grey-100: #EEF0F2;
	--stl-grey-200: #D9DCE1;
	--stl-grey-300: #BDC1CA;
	--stl-grey-400: #9BA0B1;
	--stl-grey-500: #5E6378;
	--stl-grey-700: #3A4160;
	--stl-grey-900: #2A314D;
	--stl-black:    #000000;

	/* Semantic — used by blocks */
	--stl-ink:        #2c2c2c;
	--stl-ink-soft:   #555;
	--stl-ink-muted:  #8a8a8a;
	--stl-hairline:       #ececec;
	--stl-hairline-soft:  #f0f0f0;

	/* Backgrounds shipped as palette presets in blocks */
	--stl-bg-paper:   #ffffff;
	--stl-bg-subtle:  #fafaf9;
	--stl-bg-tint:    #f7f1f2;   /* warm pink tint used on stats band */
	--stl-bg-inverse: var(--stl-burgundy);

	/* ----- TYPE FAMILIES (theme already loads webfonts) ----- */
	--stl-font-heading: "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--stl-font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;

	/* Block-level shorthand */
	--stl-font:         var(--stl-font-body);

	/* ----- TYPE SCALE ----- */
	--stl-fs-12: 0.75rem;
	--stl-fs-14: 0.875rem;
	--stl-fs-16: 1rem;
	--stl-fs-18: 1.125rem;
	--stl-fs-20: 1.25rem;
	--stl-fs-24: 1.5rem;
	--stl-fs-28: 1.75rem;
	--stl-fs-32: 2rem;
	--stl-fs-40: 2.5rem;
	--stl-fs-48: 3rem;
	--stl-fs-56: 3.5rem;
	--stl-fs-72: 4.5rem;

	--stl-lh-tight:  1.15;
	--stl-lh-snug:   1.3;
	--stl-lh-normal: 1.5;
	--stl-lh-loose:  1.65;

	/* Brand guidelines: PT Sans Bold @ 25pt tracking ≈ 0.04em */
	--stl-tracking-heading: 0.04em;
	--stl-tracking-caps:    0.16em;

	/* ----- SPACING (8px grid) ----- */
	--stl-space-1:  0.25rem;
	--stl-space-2:  0.5rem;
	--stl-space-3:  0.75rem;
	--stl-space-4:  1rem;
	--stl-space-5:  1.5rem;
	--stl-space-6:  2rem;
	--stl-space-7:  2.5rem;
	--stl-space-8:  3rem;
	--stl-space-9:  4rem;
	--stl-space-10: 5rem;
	--stl-space-12: 7.5rem;

	/* Section padding scale (used by every block's wrapper) */
	--stl-section-pad-none: 0;
	--stl-section-pad-sm:   1.5rem;
	--stl-section-pad-md:   2.5rem;
	--stl-section-pad-lg:   4rem;
	--stl-section-pad-xl:   6rem;

	/* ----- ELEVATION ----- */
	--stl-shadow-xs:    0 1px 2px rgba(42,49,77,0.06);
	--stl-shadow-sm:    0 2px 14px rgba(30,8,18,0.04);
	--stl-shadow-md:    0 6px 16px rgba(42,49,77,0.10);
	--stl-shadow-lg:    0 18px 44px rgba(30,8,18,0.11);
	--stl-shadow-xl:    0 22px 48px rgba(30,8,18,0.18);

	/* ----- MOTION ----- */
	--stl-ease:    cubic-bezier(.22,1,.36,1);
	--stl-dur-fast: 200ms;
	--stl-dur-base: 350ms;

	/* ----- LAYOUT ----- */
	--stl-container: 1280px;
	--stl-gutter:    44px;
}

/* ============================================================
   Utility classes — used inside every block.
   ============================================================ */
.stl-container {
	max-width: var(--stl-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--stl-gutter);
	padding-right: var(--stl-gutter);
}

.stl-eyebrow {
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: var(--stl-orange);
	margin: 0 0 0.875rem;
}

.stl-section-heading {
	font-family: var(--stl-font-heading);
	font-size: clamp(var(--stl-fs-28), 3.2vw, var(--stl-fs-40));
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: var(--stl-lh-tight);
	color: var(--stl-burgundy);
	margin: 0 0 0.875rem;
}

.stl-section-rule {
	width: 48px;
	height: 2px;
	background: var(--stl-orange);
	margin: 0 0 1.125rem;
	border: 0;
	display: block;
}

.stl-section-intro {
	font-family: var(--stl-font-body);
	font-size: var(--stl-fs-16);
	font-weight: 300;
	line-height: var(--stl-lh-loose);
	color: var(--stl-ink-soft);
	max-width: 640px;
	margin: 0;
}

/* CTA arrow link — shared across all "View all" / "Read more" / "Explore" links */
.stl-block .stl-link-arrow {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: var(--stl-burgundy) !important;
	text-decoration: none !important;
	border-bottom: 1.5px solid var(--stl-burgundy) !important;
	padding-bottom: 4px;
	background: none !important;
	transition: color var(--stl-dur-fast) var(--stl-ease),
	            border-color var(--stl-dur-fast) var(--stl-ease),
	            gap var(--stl-dur-fast) var(--stl-ease);
}
.stl-block .stl-link-arrow:hover {
	color: var(--stl-orange) !important;
	border-bottom-color: var(--stl-orange) !important;
	gap: 14px;
}
.stl-block .stl-link-arrow svg {
	flex-shrink: 0;
	stroke: currentColor;
}

/* Solid orange CTA button used by book-a-call and subscribers.
 * Hover: text stays white, background becomes the STL warm gradient
 * (red→orange) per brand guidelines. Heavy use of !important is to
 * defeat theme/Divi rules that aggressively colour <a:hover>. */
.stl-block .stl-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 13px 22px;
	font-family: var(--stl-font-heading);
	font-size: var(--stl-fs-12);
	font-weight: 700;
	letter-spacing: var(--stl-tracking-caps);
	text-transform: uppercase;
	color: #fff !important;
	background: var(--stl-orange) !important;
	background-image: none !important;
	border: 0 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform var(--stl-dur-fast) var(--stl-ease),
	            background var(--stl-dur-base) var(--stl-ease),
	            background-image var(--stl-dur-base) var(--stl-ease);
}
.stl-block .stl-btn:hover,
.stl-block .stl-btn:focus {
	color: #fff !important;
	transform: translateY(-1px);
	/* STL warm gradient: red → orange (135deg per brand book) */
	background: var(--stl-red) !important;
	background-image: linear-gradient(135deg, var(--stl-red) 0%, var(--stl-orange) 100%) !important;
}
.stl-block .stl-btn svg { stroke: currentColor; }
.stl-block .stl-btn--outline {
	background: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.92) !important;
}
.stl-block .stl-btn--outline:hover { background: rgba(255,255,255,0.08) !important; background-image: none !important; }

/* Section padding modifiers (shared API across all blocks).
 * !important so they always win over per-block padding declarations
 * AND any theme/Divi default section padding. */
.stl-block.stl-pt-none { padding-top: var(--stl-section-pad-none) !important; }
.stl-block.stl-pt-sm   { padding-top: var(--stl-section-pad-sm)   !important; }
.stl-block.stl-pt-md   { padding-top: var(--stl-section-pad-md)   !important; }
.stl-block.stl-pt-lg   { padding-top: var(--stl-section-pad-lg)   !important; }
.stl-block.stl-pt-xl   { padding-top: var(--stl-section-pad-xl)   !important; }
.stl-block.stl-pb-none { padding-bottom: var(--stl-section-pad-none) !important; }
.stl-block.stl-pb-sm   { padding-bottom: var(--stl-section-pad-sm)   !important; }
.stl-block.stl-pb-md   { padding-bottom: var(--stl-section-pad-md)   !important; }
.stl-block.stl-pb-lg   { padding-bottom: var(--stl-section-pad-lg)   !important; }
.stl-block.stl-pb-xl   { padding-bottom: var(--stl-section-pad-xl)   !important; }

/* ============================================================
 * Full-bleed support — when a block has alignfull, escape any
 * theme content container and span the full viewport width.
 * Mirrors the technique used by .stl-banner.
 * ============================================================ */
.stl-block.alignfull,
.alignfull > .stl-block,
.wp-block .stl-block.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ============================================================
 * Theme/Divi resets inside our blocks. The active theme adds
 * decorative h2/h3 underlines via ::after, ::before, AND
 * border-bottom rules. Strip them all inside STL blocks.
 * ============================================================ */
.stl-block h1,
.stl-block h2,
.stl-block h3,
.stl-block h4,
.stl-block h5 {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.stl-block h1::after,
.stl-block h2::after,
.stl-block h3::after,
.stl-block h4::after,
.stl-block h5::after,
.stl-block h1::before,
.stl-block h2::before,
.stl-block h3::before,
.stl-block h4::before,
.stl-block h5::before {
	display: none !important;
	content: none !important;
	background: none !important;
	border: 0 !important;
}

/* Reset theme list bullets inside our pillar/links lists */
.stl-block ul { list-style: none; padding: 0; margin: 0; }
.stl-block li { list-style: none; }
.stl-block li::before, .stl-block li::after { display: none !important; content: none !important; }

@media (max-width: 768px) {
	:root {
		--stl-gutter: 24px;
	}
}