/**
 * Base: reset, element typography, links, focus, accessibility helpers.
 *
 * Element defaults only – no components. Components arrive in later phases
 * as blocks (blocks/{name}/style.css) built from the approved Figma designs.
 *
 * @package GagaMuller
 */

/* ---------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body {
	margin: 0;
	min-height: 100dvh;
	background-color: var(--gm-surface);
	color: var(--gm-text);
	font-family: var(--gm-font-body);
	font-size: var(--gm-text-body);
	font-weight: var(--gm-weight-regular);
	line-height: var(--gm-leading-body);
	text-align: left; /* Brand: always left-aligned (§10). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
 * Headings – Averta PE Bold, Title Case (editorial), never ALL CAPS.
 * ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--gm-space-16);
	font-family: var(--gm-font-heading);
	font-weight: var(--gm-weight-bold);
	letter-spacing: var(--gm-tracking-heading);
	text-transform: none;
	text-wrap: balance;
}

h1 { font-size: var(--gm-text-h1); line-height: var(--gm-leading-h1); }
h2 { font-size: var(--gm-text-h2); line-height: var(--gm-leading-h2); }
h3 { font-size: var(--gm-text-h3); line-height: var(--gm-leading-h3); }
h4 { font-size: var(--gm-text-h4); line-height: var(--gm-leading-h4); }
h5,
h6 { font-size: var(--gm-text-body-md); line-height: var(--gm-leading-body-md); }

/* ---------------------------------------------------------------------
 * Text
 * ------------------------------------------------------------------ */

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
	margin: 0 0 var(--gm-space-24);
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: var(--gm-weight-black); /* Avenir Black for emphasis (§11). */
}

small {
	font-size: var(--gm-text-sm);
}

ul,
ol {
	padding-left: 1.25em;
}

hr {
	height: 1px;
	margin: var(--gm-space-32) 0;
	border: 0;
	background: var(--gm-border);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--gm-space-12) var(--gm-space-16);
	border-bottom: 1px solid var(--gm-border);
	text-align: left;
	vertical-align: top;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
}

/* Key phrase highlighted in purple (Brand §10; Figma section headings). */
.gm-highlight {
	color: var(--gm-highlight);
}

::selection {
	background: var(--gm-color-purple);
	color: var(--gm-color-white);
}

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

a {
	color: var(--gm-accent);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--gm-duration) var(--gm-ease);
}

a:hover {
	color: var(--gm-accent-hover);
}

/* ---------------------------------------------------------------------
 * Focus – visible for keyboard users (WCAG 2.4.7 / 2.4.11)
 * ------------------------------------------------------------------ */

:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: var(--gm-focus-offset);
}

/* ---------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: var(--gm-space-8);
	left: var(--gm-space-8);
	z-index: var(--gm-z-skip-link);
}

.skip-link:focus {
	clip: auto !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--gm-space-12) var(--gm-space-24);
	overflow: visible;
	white-space: normal;
	background: var(--gm-color-black);
	color: var(--gm-color-white);
	outline-color: var(--gm-color-light-purple);
}

/* ---------------------------------------------------------------------
 * WordPress core classes
 * ------------------------------------------------------------------ */

.alignleft {
	float: left;
	margin: 0 var(--gm-space-24) var(--gm-space-16) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--gm-space-16) var(--gm-space-24);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption,
figcaption,
.wp-element-caption {
	max-width: 100%;
	margin-top: var(--gm-space-8);
	font-size: var(--gm-text-sm);
	color: var(--gm-text-secondary);
}

/* ---------------------------------------------------------------------
 * Surfaces – remap semantic tokens per background (Figma: white,
 * #f5f5f7 sections, #101010 header/footer).
 * ------------------------------------------------------------------ */

.gm-surface--light {
	background-color: var(--gm-color-white);
	color: var(--gm-text);
}

.gm-surface--subtle {
	background-color: var(--gm-color-surface-subtle);
	color: var(--gm-text);
}

.gm-surface--inverse {
	--gm-text: var(--gm-color-white);
	--gm-text-secondary: var(--gm-color-on-dark-muted);
	--gm-text-tertiary: var(--gm-color-on-dark-subtle);
	--gm-accent: var(--gm-color-light-purple);   /* Purple on black is 2.8:1 – fails. */
	--gm-accent-hover: var(--gm-color-white);
	--gm-highlight: var(--gm-color-light-purple); /* Figma: light purple highlight on dark hero. */
	--gm-border: var(--gm-color-nav-pill-border);
	--gm-focus-color: var(--gm-focus-color-on-dark);
	background-color: var(--gm-color-black);
	color: var(--gm-text);
}

/* A background chosen per section (page builder "Background") wins over
 * the layout's own default background colour. */
.gm-section.gm-surface--light {
	background-color: var(--gm-color-white);
}

.gm-section.gm-surface--subtle {
	background-color: var(--gm-color-surface-subtle);
}

.gm-section.gm-surface--inverse {
	background-color: var(--gm-color-black);
}

/* ---------------------------------------------------------------------
 * Icons – Phosphor, Regular weight (Brand §14). Sized by font-size.
 * ------------------------------------------------------------------ */

.gm-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	fill: currentColor;
}

/* ---------------------------------------------------------------------
 * Type roles – decouple the VISUAL size from the semantic heading level,
 * so blocks keep a logical heading order (h1 → h2 → h3) while matching
 * the Figma role. Example: <h2 class="gm-type-h3">.
 * ------------------------------------------------------------------ */

.gm-type-display,
.gm-type-h1,
.gm-type-h1-article,
.gm-type-h2,
.gm-type-h3,
.gm-type-h4,
.gm-type-lead,
.gm-type-stat,
.gm-type-eyebrow {
	font-family: var(--gm-font-heading);
	font-weight: var(--gm-weight-bold);
	text-transform: none;
}

.gm-type-display    { font-size: var(--gm-text-display);    line-height: var(--gm-leading-display); }
.gm-type-h1         { font-size: var(--gm-text-h1);         line-height: var(--gm-leading-h1); }
.gm-type-h1-article { font-size: var(--gm-text-h1-article); line-height: var(--gm-leading-h1-article); }
.gm-type-h2         { font-size: var(--gm-text-h2);         line-height: var(--gm-leading-h2); }
.gm-type-h3         { font-size: var(--gm-text-h3);         line-height: var(--gm-leading-h3); }
.gm-type-h4         { font-size: var(--gm-text-h4);         line-height: var(--gm-leading-h4); }
.gm-type-lead       { font-size: var(--gm-text-lead);       line-height: var(--gm-leading-lead); }
.gm-type-stat       { font-size: var(--gm-text-stat);       line-height: var(--gm-leading-stat); }
.gm-type-eyebrow    { font-size: var(--gm-text-eyebrow);    line-height: var(--gm-leading-eyebrow); }

.gm-type-intro      { font-size: var(--gm-text-intro);   line-height: var(--gm-leading-intro); }
.gm-type-intro-hero { font-size: var(--gm-text-intro);   line-height: var(--gm-leading-intro-hero); }
.gm-type-body-lg    { font-size: var(--gm-text-body-lg); line-height: var(--gm-leading-body-lg); }
.gm-type-body-md    { font-size: var(--gm-text-body-md); line-height: var(--gm-leading-body-md); }
.gm-type-body       { font-size: var(--gm-text-body);    line-height: var(--gm-leading-body); }
.gm-type-sm         { font-size: var(--gm-text-sm);      line-height: normal; }
.gm-type-legal      { font-size: var(--gm-text-legal);   line-height: normal; }
.gm-type-caption    { font-size: var(--gm-text-caption); line-height: normal; }