/**
 * Base reset.
 *
 * Loaded FIRST, before every other stylesheet, so that everything downstream
 * can assume it.
 *
 * This file exists because of a regression found while removing Avada: the
 * footer rendered 1344px wide instead of 1280px (max-width 1280 + 2×32px
 * padding), because `.cc-footer-grid` had computed `box-sizing: content-box`.
 * It had always been border-box before — not from any rule in this project's
 * own CSS, but from Avada's generated stylesheet, which set border-box
 * globally. Roughly half the site's own components happen to declare
 * box-sizing themselves and were fine; the other half were silently relying
 * on Avada for it.
 *
 * That is exactly the class of hidden dependency this migration is meant to
 * remove: an inherited global whose absence shows up as a layout bug three
 * files away from anything you edited. Declaring it here makes it ours and
 * explicit.
 *
 * Keep this file minimal. It is not a place for design decisions — those go
 * in main.css. Anything added here silently affects every element on the
 * site, including plugin markup (WooCommerce, CF7, PMPro) that this project
 * does not own.
 */

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

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

body {
	margin: 0;
}

/*
 * The page must never scroll horizontally. Note this hides overflow rather
 * than preventing it — a component that overflows still overflows, it just
 * gets clipped silently. Use docs/migration/baseline.sh to detect that class
 * of bug; a screenshot will not show it.
 */
body {
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* Accessible skip link: present for keyboard users, out of the way otherwise. */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #13EBDE;
	color: #000;
	font-weight: 700;
}

.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
}

/**
 * Base typography.
 *
 * Avada's generated stylesheet set the site's global type, and removing it
 * dropped `body` to the browser default — Times New Roman at 16px with
 * `line-height: normal`. Every `.cc-*` component declares its own font, so the
 * homepage still looked broadly right; everything that inherits (legal pages,
 * PMPro account pages, plugin output, and every line-height on the site) did
 * not.
 *
 * The metrics below are Avada's exact values — 18px / 27px — so inherited line
 * boxes keep the heights they had.
 *
 * The family is a deliberate, visible change. Avada declared
 * `Lexend, "MS Sans Serif", Geneva, sans-serif`, but Lexend was never actually
 * loaded: no @font-face, no Google Fonts request, no file in wp-content. It
 * always fell through to the generic system sans-serif. Rather than copy a
 * dead font reference into a new theme, this uses Inter — which the site does
 * load, and which every redesigned page already sets on itself. Legacy pages
 * therefore render in Inter rather than the system sans; same size, same line
 * height, slightly different letterforms.
 */
body {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 27px;
	color: #1E1E1E;
	background: #1E1E1E;
}

/**
 * Global heading scale.
 *
 * These values are lifted verbatim from what Avada's generated stylesheet
 * computed on this site (measured, not guessed). They matter more than they
 * look: several `.cc-*` components override a heading's font-size but not its
 * line-height, and were silently relying on Avada's fixed px line-height to
 * space them. Dropping it collapsed `.cc-service h2` from a 216px box to 54px
 * — 44px glyphs in a 27px line box, i.e. overlapping lines.
 *
 * Hence fixed px line-heights rather than the unitless ratios that would
 * normally be better here: a unitless value would inherit down and change
 * every one of those overriding components. Converting them is a tidy-up for
 * after the migration, one component at a time, not during it.
 *
 * Font family: as with body text, Avada named "Lexend Exa" but never loaded
 * it — no @font-face, no font request. Inter is what the site actually has.
 *
 * NOTE — these are plain, single-element selectors on purpose. Avada applied
 * the same declarations in a way that beat far more specific rules (a
 * documented, repeatedly-rediscovered bug on this project: `.cc-product-testdata
 * h2 { color: #fff }` lost to it and rendered heading text the exact colour of
 * its own dark background, i.e. invisible). Because these load first and carry
 * no !important, any component rule in main.css now wins normally. Several
 * !important declarations in main.css exist only to fight the old behaviour
 * and can be removed during the CSS consolidation pass.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
}

h1 { font-size: 100px; line-height: 125px; font-weight: 700; letter-spacing: -0.5px; color: #13EBDE; }
h2 { font-size: 60px;  line-height: 72px;  font-weight: 700; letter-spacing: -0.3px; color: #2B2B2B; }
h3 { font-size: 35px;  line-height: 42px;  font-weight: 500; color: #2B2B2B; }
h4 { font-size: 20px;  line-height: 28px;  font-weight: 500; color: #1E1E1E; }
h5 { font-size: 26px;  line-height: 32px;  font-weight: 900; letter-spacing: -0.2px; color: #1E1E1E; }
h6 { font-size: 16px;  line-height: 22px;  font-weight: 400; letter-spacing: 0.25px; color: #1E1E1E; }

/**
 * Link reset.
 *
 * Avada set this globally. Without it every link the site's own CSS does not
 * explicitly style came back underlined — most visibly the "Neueste Beiträge"
 * list in the blog sidebar, on three page types at once.
 *
 * Underlines are restored deliberately inside long-form prose (legal pages),
 * where they are the correct affordance; see .cc-page-content in main.css.
 */
a {
	text-decoration: none;
	color: inherit;
}

/*
 * The screen-reader-text convention, used by searchform.php and by core
 * widgets. Avada provided it; without it the "Suche nach:" label rendered as
 * visible text above the search box.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}