/* ============================================================
   global.css - rasmussmedstrup.dk
   Shared resets, root variables, and base utilities.
   ============================================================ */

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

:root {
	--font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Draft 1 (Noir): Cormorant Garant */
	--font-d1-serif: 'Cormorant Garant', Georgia, serif;
	--font-d1-sans:  'Inter', -apple-system, sans-serif;

	/* Draft 2 (Index): Space Grotesk */
	--font-d2-head:  'Space Grotesk', 'Inter', sans-serif;
	--font-d2-body:  'Inter', -apple-system, sans-serif;

	/* Draft 3 (Color): Lora + Nunito Sans */
	--font-d3-serif: 'Lora', Georgia, serif;
	--font-d3-sans:  'Nunito Sans', 'Inter', sans-serif;

	--max-width:     1360px;
	--content-pad:   clamp(1.25rem, 4vw, 4.5rem);
	--header-h:      68px;

	/* Brand palette - varm brun/beige gennemgående på sitet */
	--color-primary:       #8A6547;          /* primær brun (knapper, links, accents) */
	--color-primary-dark:  #6E4F37;          /* hover */
	--color-primary-soft:  #C8A58B;          /* lys brun supplement */
	--color-on-primary:    #FFFFFF;

	--color-deep-brown:    #4A3220;          /* tilbagevendende brand-band */
	--color-on-deep:       #F2E4CF;          /* cremefarvet tekst på deep brown */

	--color-cream:         #F5EDDF;          /* primær lys sektionsbaggrund */
	--color-warm-beige:    #DEC5A5;          /* warm band */
	--color-medium-beige:  #E6D2B6;          /* medium beige */
	--color-panel:         #FDF8EB;          /* lyst panel/kort */

	--color-ink:           #3A261B;          /* primær tekst */
	--color-ink-soft:      #6E4F3C;          /* sekundær tekst */
	--color-muted:         #A88E77;          /* dempet meta */
	--color-border:        rgba(58,38,27,0.12);

	/* ---- Type scale (centralt styret) ----
	   Brug --fs-* og --lh-* i template-CSS i stedet for hardcodede sizes.
	   Skala er pragmatisk forhøjet: brødtekst 1.125rem, content 1.25rem,
	   headings responsive via clamp. */
	--fs-tiny:        0.75rem;                       /* 12px - eyebrow chips */
	--fs-small:       0.875rem;                      /* 14px - meta, dato, footer-links */
	--fs-base:        1rem;                          /* 16px - buttons, form labels */
	--fs-body:        1.125rem;                      /* 18px - global brødtekst */
	--fs-lede:        1.1875rem;                     /* 19px - hero/intro ledes */
	--fs-content:     1.25rem;                       /* 20px - artikelindhold/long-form */
	--fs-card-title:  1.4rem;                        /* 22.4px - card titler */
	--fs-button:      1rem;                          /* 16px */
	--fs-eyebrow:     0.7rem;                        /* 11.2px - sektion-eyebrows */
	--fs-meta:        0.9rem;                        /* 14.4px - meta strips */

	--fs-h1:          clamp(2.4rem, 5vw, 4rem);
	--fs-h2:          clamp(1.9rem, 3vw, 2.75rem);
	--fs-h3:          clamp(1.5rem, 2vw, 2rem);
	--fs-h4:          clamp(1.25rem, 1.5vw, 1.5rem);
	--fs-h5:          1.15rem;
	--fs-h6:          1rem;

	--lh-tight:       1.2;
	--lh-snug:        1.45;
	--lh-body:        1.7;
	--lh-content:     1.75;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Sticky footer pattern ----
   Sikrer at footer altid når viewportens bund når sider er kortere
   end viewporten. Uden dette vil body's cream-baggrund (sat per
   template-CSS) propagere til html-canvas'et og vises som en
   beige stribe under den mørke footer. */
body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: #1A1A1A;
	background: #FFFFFF;
	overflow-x: hidden;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

#page.site {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.site-main {
	flex: 1 0 auto;
}

.site-footer {
	flex-shrink: 0;
}

body.fp-draft-3 {
	background: #FAF6EF;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font: inherit;
}

input, textarea, select {
	font: inherit;
}

/* ---- Accessibility utilities ---- */
.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: #111;
	color: #FFF;
	font-size: 0.8rem;
	border-radius: 4px;
}

.skip-link:focus {
	left: 1rem;
}