/**
 * Digital Academy — global styles
 *
 * Most styling is driven by theme.json. This file holds the shared "terminal /
 * brutalist" utilities reused across many patterns (mono eyebrows, hard
 * offset-shadow cards, button + nav behaviour). Pattern-specific CSS lives
 * next to each pattern file and is pulled in via the @import block below.
 *
 * NOTE: @import rules must stay at the very top of the file (CSS spec).
 *
 * @package digitalacademy
 */

/* -- co-located component styles ------------------------------------------ */
@import '../../parts/header.css';
@import '../../parts/footer.css';
@import '../../patterns/feature-split.css';
@import '../../patterns/faq-accordion.css';
@import '../../patterns/callout-card.css';
@import '../../patterns/da-form.css';
@import '../../patterns/two-column-promo.css';
@import '../../patterns/lesson-nav-bar.css';
@import '../../patterns/contact-form.css';
@import '../../templates/single-lesson.css';
@import 'course-progress.css';
@import 'icons.css';

/* ---------------------------------------------------------------------------
 * Anchor links — jumping to a section on the same page.
 *
 * scroll-margin clears the fixed .retro-pill-header, which sits 24px from the
 * top and would otherwise cover the very heading you jumped to.
 *
 * The smooth scroll is deliberately behind prefers-reduced-motion, and that
 * guard is load-bearing beyond taste: assets/js/gravity-forms-scroll.js passes
 * behavior:'auto' to mean "jump instantly" for reduced-motion visitors, and
 * 'auto' defers to this property. Setting it unconditionally would quietly turn
 * that instant jump back into an animation.
 * ------------------------------------------------------------------------- */
:target {
	scroll-margin-top: 8rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* -- design tokens -------------------------------------------------------- */
:root {
	--da-shadow-dark: var(--wp--preset--color--dark);
	--da-shadow-light: var(--wp--preset--color--light-intense);
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	main {
		flex-grow: 1;
	}
}
/* ---------------------------------------------------------------------------
 * Flush full-bleed sections. The root block-gap puts margin-block-start: 1.5rem
 * on every top-level block (header, main, footer). When a block leads with a
 * full-width section, drop that margin so the section hugs what's above it
 * (header / previous section) instead of showing a strip of page background.
 *
 * Covers both layouts: the homepage, where main's first child IS the .alignfull
 * section, and the page templates, where it sits inside core/post-content.
 * ------------------------------------------------------------------------- */
.wp-site-blocks > *:has(> .alignfull:first-child),
.wp-site-blocks > *:has(> .wp-block-post-content > .alignfull:first-child) {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Edge-to-edge sections with constrained content. Drop `.da-fullbleed-content`
 * on any full-bleed block (one that carries an edge-to-edge background, e.g. an
 * .alignfull group) to cap its inner content at 900px and center it, while the
 * block itself stays full width. Targets direct children so the background
 * still spans the viewport.
 * ------------------------------------------------------------------------- */
.da-fullbleed-content > * {
	max-width: 900px;
	margin-inline: auto;
}

/* A direct child set to "Full width" carries .alignfull, which WordPress's
 * layout CSS exempts from any content cap (max-width: none) and gives breakout
 * margins. The wrapper itself is the full-bleed element, so re-assert the cap
 * here. The two-class specificity (.da-fullbleed-content > .alignfull) beats
 * WP's single-class layout rule regardless of stylesheet order. */
.da-fullbleed-content > .alignfull {
	max-width: 900px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * DA Responsive Grid
 *
 * Add the class 'da-responsive-grid' to any grid pattern block to make it
 * single-column on mobile. Also fixes a browser bug where container-type:
 * inline-size causes phantom height on mobile.
 *
 * Usage: Block settings → Advanced → Additional CSS Class(es)
 *        → type: da-responsive-grid
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.da-responsive-grid {
		grid-template-columns: 1fr !important;
		container-type: normal !important;
	}
}

/* ---------------------------------------------------------------------------
 * Modals — generic overlay engine (see assets/js/modal.js). Styling is keyed on
 * classes, not IDs, so any number of modals reuse it. A modal is a
 * `.da-modal-overlay` (backdrop, hidden by default) wrapping a `.da-modal`
 * (the panel); the engine toggles `.is-open` to show it.
 * ------------------------------------------------------------------------- */
.da-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.da-modal-overlay.is-open {
	display: flex;
}

.da-modal {
	background: #fdf6ec;
	max-width: 520px;
	width: 100%;
	padding: 32px;
	position: relative;
	border-radius: 13px;
	margin: auto;
}

.da-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Eyebrow / kicker labels — mono, uppercase, tracked out. The leading ">" or
 * "//" is written into the content itself, terminal-prompt style.
 * ------------------------------------------------------------------------- */
.da-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
}

/* Display headings — large, tight version of the mono heading voice. Font
 * family is inherited from the heading default (mono) set in theme.json. */
.da-display {
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* The recurring ↗ glyph from the lesson callouts. */
.da-arrow {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--primary);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Cards — hard 1px border on a bordered group block. `.da-card--invert` is for
 * cards on dark backgrounds.
 * ------------------------------------------------------------------------- */
.da-card a:where(.wp-block-button__link) {
	text-decoration: none;
}

/* Card variant — a 1px bordered panel. The border colour and background stay on
 * the block (they vary per card); the variant just supplies the consistent
 * `1px solid` border + medium interior padding */
.wp-block-group.is-style-card,
.wp-block-columns.is-style-card,
.wp-block-column.is-style-card {
	border-width: 1px;
	border-style: solid;
	padding: var(--wp--preset--spacing--medium);
}

/* ---------------------------------------------------------------------------
 * Buttons — nudge + hard shadow on hover to match the card language.
 * ------------------------------------------------------------------------- */
.wp-block-button__link {
	transition:
		transform 0.12s ease,
		box-shadow 0.12s ease,
		background-color 0.12s ease;
	letter-spacing: 0.04em;
}

.wp-block-button__link:hover {
	box-shadow: 3px 3px 0 0 rgba(22, 19, 20, 0.35);
}

.is-style-outline > .wp-block-button__link:hover {
	box-shadow: 3px 3px 0 0 currentColor;
}

/* Ghost button — white fill with a hairline border in the text colour (the
 * "Download PDF" style). Text/border colour come from the block; the border
 * colour defaults to currentColor, so it tracks the text unless the block sets
 * its own. Replaces the per-button background:#fff + border-width:1px overrides. */
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: #fff;
	border-width: 1px;
	border-style: solid;
}

/* Decorative badge buttons (e.g. the course-card number, the lesson-header
 * eyebrow) aren't actions, so suppress the hover lift the generic button rule
 * applies. */
.da-badge > .wp-block-button__link:hover {
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Navigation — mono + tracked to match the terminal voice.
 * ------------------------------------------------------------------------- */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	letter-spacing: 0.04em;
}