/* =============================================================
   Layout wrappers  —  Layer 3 of 4
   Depends on: tokens.css
   Consumed by: all pages (sitewide) — promoted from home-page-only when TOC skin was added

   Purpose: generic structural patterns — containers, section
   padding, grids. Nothing page-specific lives here.
   ============================================================= */


/* ─── Container ──────────────────────────────────────────────── */

/*
 * Max-width container used inside full-bleed sections.
 * Max-width is 1280px (--max-w-screen-xl); note Astra's default is 1200px.
 * Hardcoded via token — avoids relying on --wp--custom--ast-container-width
 * which is only set when the Astra Builder is active.
 * padding-inline uses clamp: narrow on small screens, wide on large — no breakpoint needed.
 */
.container {
	max-width: var(--max-w-screen-xl);
	margin-inline: auto;
	padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}


/* ─── Section ────────────────────────────────────────────────── */

/* Section with standard vertical padding */
.section {
	padding-block: var(--space-20);
}


/* ─── Layout helpers ─────────────────────────────────────────── */

/* Vertical stack with consistent gap */
.stack {
	display: grid;
	gap: var(--space-4);
}


/* ─── Component primitives ──────────────────────────────────── */

/* ─── Large primitives: cards ─────────----──────────────────── */

/* Base card — token-driven visual treatment */
.card,
.card-dark {
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
}

/* Light card — light surface with standard colored text */
.card {
	background: var(--color-surface-extra-light);
	color: var(--color-text);
}

/* Dark card — gradient surface with matching light text */
.card-dark {
	background: var(--gradient-downward);
	color: var(--color-text-extra-light);
}

/* ─── Smaller primitives: buttons ────────────────────────────── */

.btn,
.btn-sm {
	align-items: center;
	text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn-sm:hover,
.btn-sm:focus {
	background-image: none;
	/* Prevent the styled underline (background-image) on hover/focus — only wanted for in-text links */
}

.btn {
	display: inline-flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-pill);
	font-size: var(--button-font-size);
	border: 2px solid transparent;
	box-shadow: var(--btn-shadow-strong);
	transition: transform 0.3s ease-out, background-color 0.2s ease, box-shadow 0.2s ease;
	line-height: var(--lineheight-tight);
}

/* Replicates the original "animation-float" effect: 0.3s ease-out, -8px lift */
.btn:hover {
	transform: translateY(-8px);
}

.btn:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

.btn svg {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
}

.btn-sm svg {
	width: 1.125rem;
	height: 1.125rem;
}

.btn-accent {
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text);
}

.btn-accent:hover {
	color: var(--button-primary-text);
}

.btn-light {
	background-color: var(--button-secondary-bg);
	color: var(--button-secondary-text);
	box-shadow: var(--btn-shadow-soft);
}

/* Small variant used in split sections */
.btn-sm {
	padding: var(--space-2) var(--space-6);
	font-size: var(--button-font-size-sm);
	box-shadow: var(--btn-shadow-soft);
}

/* Post prev/next navigation — add breathing room before the author box */
.entry-content .previous,
.entry-content .next {
	margin-bottom: var(--space-8);
}

/* Shared button row layout — used by hero and callout */
.btn-row {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 640px) {

	/* On mobile all buttons go full-width and centre their content */
	.btn {
		justify-content: center;
		width: 100%;
		max-width: 300px;
	}

	.btn-row {
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}
}


/* ─── Decorators: rules ──────────────────────────────────────── */

/* 100px / 1px / centered — color only differs */
.rule-primary,
.rule-muted {
	width: 100px;
	height: 1px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	border: none;
}

.rule-primary {
	background-color: var(--color-primary);
}

.rule-muted {
	background-color: var(--color-border-neutral);
}


/* ─── Decorators: eyebrow text ───────────────────────────────── */

/* Small inline label that sits above a heading — reusable across sections */
.eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-title);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3) !important;
	color: inherit !important;
	/* Astra's .entry-content p overrides margin eg on CTA box — !important enforces our value */
}

/* ─── Component: cta-box ────────────────────────────────────── */

/*
/* CTA box — content composition only: inner grid, text column, action column.
 * Visual surface and shell come from .card-dark.
 * Typical usage:
 *   <div class="card-dark cta-box">
 *
 * Desktop (>768px): text column left, button column right (side by side).
 * Tablet / mobile (≤768px):  text full-width, buttons in a two-column row.
 * The mobile breakpoint matches the sitewide --bp-mobile: 768px (Tailwind sm).
 */
.cta-box {
	padding: var(--space-6) var(--space-8);
	/* Need to overwrite manually as we cannot properly clamp based on element size (only works with viewport width, which is not the goal though) */
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
}

/* Two-column grid: text (wider) | actions column.
 * Actions column uses a fixed width so the microcopy can wrap freely
 * without the `auto` sizing expanding the column to fit a single long line.
 * align-items: center vertically centers the button column relative to the text. */
.cta-box-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--space-8);
	align-items: center;
}

.cta-box-text {
	display: flex;
	flex-direction: column;
}

.cta-box-desc {
	font-size: var(--text-lg);
	line-height: var(--lineheight-text-lg);
	color: inherit;
	margin: 0 !important;
	/* Last item in text column — no bottom margin needed */
}

.cta-box-fine {
	font-size: var(--text-sm);
	color: inherit;
	text-align: center;
	margin: var(--space-2) 0 0 !important;
	/* Sits below buttons in the actions column; top margin creates small gap from btn shadow */
}

/* Button column: stretch buttons to fill the column width. */
.cta-box-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cta-box-actions .btn {
	white-space: nowrap;
}

/* Tablet and mobile: collapse to single column; buttons switch to two-column row */
@media (max-width: 768px) {
	.cta-box {
		padding: var(--space-4) var(--space-5) var(--space-5);
	}

	.cta-box-fine {
		display: none;
	}

	.cta-box-inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.cta-box-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
		min-width: 0;
		padding-top: 0;
	}

	/* Make buttons full width already at tablet size */
	/* TODO(chore): Change this to using btn-sm (instead of using same parameters) - code will be slightly more DRY */
	.cta-box-actions .btn {
		padding: var(--space-2) var(--space-6);
		font-size: var(--button-font-size-sm);
		box-shadow: var(--btn-shadow-soft);
		width: 100%;
		justify-content: center;
	}
}


/* ─── Third-party component skin: LuckyWP TOC ───────────────── */

/*
 * Styles LuckyWP TOC to match shared system primitives:
 * - container uses card tokens
 * - title mirrors .eyebrow (uppercase variant for TOC only)
 * - link hierarchy follows system text/link roles
 *
 * Kept in layout.css because this is a shared third-party component skin,
 * not page-specific styling.
 */

/* Container */
.lwptoc_i {
	background: var(--color-surface-extra-light, #fbfdfc) !important;
	border: 1px solid var(--card-border, #cbcfcd) !important;
	border-radius: var(--card-radius, 16px) !important;
	box-shadow: var(--card-shadow) !important;
	padding: var(--card-padding) !important;
}

/* Header: mirrors .eyebrow — uppercase applied here only, not on .eyebrow globally */
.lwptoc_title {
	font-size: var(--text-xs, 0.75rem) !important;
	font-weight: var(--weight-title, 700) !important;
	color: var(--color-text-secondary, #05757b) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* Gap below header — plugin sets margin-bottom: 6px on .lwptoc_header; bump one step */
.lwptoc_header {
	margin-bottom: var(--space-3, 12px) !important;
}

/* Top-level links — main text color, bold, 2 steps up from eyebrow (--text-xs) */
.lwptoc_i a {
	color: var(--color-text, #194144) !important;
	font-weight: var(--weight-title, 700) !important;
	font-size: var(--text-base, clamp(0.95rem, 0.25vw + 0.9rem, 1.05rem)) !important;
}

/* Nested links — muted, body weight, tighter line height */
.lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_item a {
	color: var(--color-text-muted, #7c8481) !important;
	font-weight: var(--weight-body, 400) !important;
	line-height: 1.3 !important;
}

/* Hover / focus — primary color with animated underline. */
.lwptoc_i a:hover,
.lwptoc_i a:focus-visible {
	color: var(--color-text-link-hover, #05757b) !important;
	background-size: 100% 2px !important;
}

/* Sub-item hover — needed to beat sub-item color rule */
.lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_item a:hover,
.lwptoc_itemWrap .lwptoc_itemWrap .lwptoc_item a:focus {
	color: var(--color-text-link-hover, #05757b) !important;
}

/* Spacing — top-level sections: larger gap above each.
 * .lwptoc_items is a div; OL sits one level deeper as .lwptoc_itemWrap. */
.lwptoc_items>.lwptoc_itemWrap>.lwptoc_item {
	margin-top: 1.75em !important;
}

.lwptoc_items>.lwptoc_itemWrap>.lwptoc_item:first-child {
	margin-top: 0 !important;
}

/* Spacing + indent — nested list: tight gap from parent link (1 → 1.1 feels connected), stepped indent */
.lwptoc_itemWrap .lwptoc_itemWrap {
	margin-top: 0.2em !important;
	margin-left: 0 !important;
	padding-left: 1.5em !important;
}

/* Spacing — between sub-items: small */
.lwptoc_itemWrap .lwptoc_itemWrap>.lwptoc_item {
	margin-top: 0.3em !important;
}

.lwptoc_itemWrap .lwptoc_itemWrap>.lwptoc_item:first-child {
	margin-top: 0 !important;
}