/*
Theme Name: Somalisk Kulturfestival
Theme URI: https://www.somaliskkulturfestival.se
Author: MH Studio
Author URI: https://www.somaliskkulturfestival.se
Description: Custom theme for Somalisk Kulturfestival. Translates the festival's campaign identity — deep Somali blue, heritage orange, oversized condensed type, documentary photography and Somali proverb texture — into a working festival website. Consumes all content from the SKF Core plugin.
Version: 0.1.7
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: somalisk-kulturfestival
Tags: festival, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   This file holds tokens, reset, base typography and layout primitives.
   Components live in assets/css/components.css.

   CONTENTS
   1. Tokens
   2. Reset and base
   3. Typography
   4. Layout primitives
   5. Accessibility utilities
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root,
.editor-styles-wrapper {

	/* --- Brand colour ------------------------------------------------------- */
	--skf-blue:        #062389;
	--skf-orange:      #ef731b;
	--skf-cream:       #eeeded;
	--skf-white:       #ffffff;
	--skf-black:       #111111;

	--skf-text-muted:  #6d6d6d;
	--skf-border-dark: rgba(17, 17, 17, 0.16);
	--skf-border-light: rgba(255, 255, 255, 0.22);

	/*
	 * Two derived tones, for depth only. Not new brand colours:
	 * blue-deep grounds the footer beneath blue sections, blue-lift draws
	 * proverb texture and pattern strokes that must sit just above the blue.
	 */
	--skf-blue-deep:   #04186b;
	--skf-blue-lift:   #0b2ea8;

	/* Muted text on a blue ground, where --skf-text-muted would vanish. */
	--skf-cream-muted: rgba(238, 237, 237, 0.72);

	/* --- Typefaces ---------------------------------------------------------- */
	--font-display: "Bebas Neue", "Oswald", Impact, "Haettenschweiler", sans-serif;
	--font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* --- Display scale ------------------------------------------------------ */
	--skf-size-display: clamp(5rem, 13vw, 13rem);
	--skf-size-h1:      clamp(4rem, 9vw, 9rem);
	--skf-size-h2:      clamp(3rem, 6vw, 6.5rem);
	--skf-size-h3:      clamp(2rem, 3vw, 3.5rem);
	--skf-size-h4:      clamp(1.5rem, 2.2vw, 2.25rem);

	/* --- Body scale --------------------------------------------------------- */
	--skf-size-lead:  clamp(1.125rem, 1.5vw, 1.375rem);
	--skf-size-body:  1.0625rem;
	--skf-size-small: 0.9375rem;
	--skf-size-label: 0.75rem;

	/* --- Line height -------------------------------------------------------- */
	/*
	 * Display leading.
	 *
	 * Bebas Neue sets caps at roughly 0.73em, but the ring on Å and the
	 * dots on Ä and Ö reach about 0.9em above the baseline. Any leading
	 * below that puts the diacritic of one line into the baseline of the
	 * line above, which is what was happening on Swedish headings such as
	 * FESTIVALEN FINNS PÅ FLERA PLATSER.
	 *
	 * These values clear the diacritics with a little room to spare while
	 * staying far tighter than a normal 1.2, so the type keeps its
	 * compact editorial set.
	 */
	--skf-leading-display: 0.94;
	--skf-leading-h1:      0.95;
	--skf-leading-h2:      0.98;
	--skf-leading-h3:      1.02;

	/* Digits carry no diacritics, so numerals may stay tight. */
	--skf-leading-numeric: 0.8;
	--skf-leading-body:    1.65;
	--skf-leading-snug:    1.35;

	/* --- Tracking ----------------------------------------------------------- */
	--skf-track-display: -0.025em;
	--skf-track-label:   0.2em;
	--skf-track-nav:     0.08em;

	/* --- Weight ------------------------------------------------------------- */
	--skf-weight-body:   400;
	--skf-weight-medium: 500;
	--skf-weight-bold:   700;

	/* --- Spacing ------------------------------------------------------------ */
	--space-xs:  8px;
	--space-sm:  16px;
	--space-md:  24px;
	--space-lg:  40px;
	--space-xl:  64px;
	--space-2xl: 96px;
	--space-3xl: 144px;

	/*
	 * Section rhythm scales down on small screens rather than compressing
	 * every value, so mobile keeps its breathing room.
	 */
	--skf-section-y:       clamp(var(--space-xl), 10vw, var(--space-3xl));
	--skf-section-y-tight: clamp(var(--space-lg), 6vw, var(--space-2xl));

	/* --- Layout ------------------------------------------------------------- */
	--skf-container: 1440px;
	--skf-content:   1200px;
	--skf-reading:   760px;

	/*
	 * Breakpoints.
	 *
	 * These match Elementor's own device switcher, so a width the editor
	 * previews as "tablet" is a width the theme also treats as tablet.
	 * Every component follows these three and introduces none of its own.
	 *
	 *   mobile   max-width:  767px
	 *   tablet   max-width: 1024px
	 *   wide     min-width: 1440px
	 *
	 * Media queries cannot read custom properties, so the values are
	 * written literally throughout and recorded here as the single source
	 * of truth. Changing one means changing them all.
	 */
	--skf-bp-mobile: 767px;
	--skf-bp-tablet: 1024px;
	--skf-bp-wide:   1440px;
	--skf-gutter:    clamp(20px, 5vw, 64px);
	--skf-header-h:  clamp(64px, 8vw, 88px);


	/* --- Breakpoints ---------------------------------------------------------
	 *
	 * One scale for the whole site. Components must use these values and no
	 * others, so the theme and a widget never disagree about whether a given
	 * width is desktop or tablet.
	 *
	 *   1440  wide     oversized type and asymmetric compositions relax
	 *   1200  desktop  the navigation collapses to the menu button here
	 *   1024  tablet   multi-column layouts become single column
	 *    768  mobile   schedule indents drop, grids stack
	 *    560  small    display type steps down again
	 *
	 * Custom properties cannot be used inside a media query, so these are
	 * documented here and written literally at each breakpoint.
	 * -------------------------------------------------------------------- */
	--skf-bp-wide: 1440px;
	--skf-bp-desktop: 1200px;
	--skf-bp-tablet: 1024px;
	--skf-bp-mobile: 768px;
	--skf-bp-small: 560px;

	/* --- Shape -------------------------------------------------------------- */
	--radius-small:  4px;
	--radius-medium: 8px;

	/* --- Motion ------------------------------------------------------------- */
	--skf-ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
	--skf-duration:   240ms;
	--skf-duration-s: 140ms;

	/* --- Texture ------------------------------------------------------------ */
	--skf-texture-opacity: 0.12;
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	background-color: var(--skf-blue-deep);
	max-width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	/* Sticky header must not cover an anchor target. */
	scroll-padding-top: calc(var(--skf-header-h) + var(--space-md));
}

body {
	margin: 0;
	width: 100%;
	min-height: 100vh;
	max-width: 100%;
	background-color: var(--skf-cream);
	color: var(--skf-black);
	font-family: var(--font-body);
	font-size: var(--skf-size-body);
	font-weight: var(--skf-weight-body);
	line-height: var(--skf-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Oversized display type crops deliberately; it must never scroll the page. */
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

figure { margin: 0; }

ul, ol { padding-inline-start: 1.2em; }

button { font: inherit; }

::selection {
	background-color: var(--skf-orange);
	color: var(--skf-black);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4,
.skf-display,
.skf-h1, .skf-h2, .skf-h3, .skf-h4 {
	font-family: var(--font-display);
	font-weight: 400;              /* Bebas Neue ships a single weight. */
	text-transform: uppercase;
	letter-spacing: var(--skf-track-display);
	margin: 0;
	/* Bebas sits high in its box; trim the gap under stacked lines. */
	text-wrap: balance;
}

.skf-display {
	font-size: var(--skf-size-display);
	line-height: var(--skf-leading-display);
}

h1, .skf-h1 {
	font-size: var(--skf-size-h1);
	line-height: var(--skf-leading-h1);
}

h2, .skf-h2 {
	font-size: var(--skf-size-h2);
	line-height: var(--skf-leading-h2);
}

h3, .skf-h3 {
	font-size: var(--skf-size-h3);
	line-height: var(--skf-leading-h3);
}

h4, .skf-h4 {
	font-size: var(--skf-size-h4);
	line-height: 1;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* Body copy never uses the condensed face. */
.skf-lead {
	font-family: var(--font-body);
	font-size: var(--skf-size-lead);
	line-height: var(--skf-leading-snug);
	font-weight: var(--skf-weight-medium);
	letter-spacing: 0;
	text-transform: none;
	max-width: 46ch;
}

.skf-small { font-size: var(--skf-size-small); }

/* SAVE THE DATE / WORKSHOP / MEDVERKANDE */
.skf-label {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--skf-size-label);
	font-weight: var(--skf-weight-bold);
	letter-spacing: var(--skf-track-label);
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0;
}

.skf-label--orange { color: var(--skf-orange); }
.skf-label--blue   { color: var(--skf-blue); }
.skf-label--cream  { color: var(--skf-cream); }
.skf-label--muted  { color: var(--skf-text-muted); }

/* Reading column for long-form text. */
.skf-prose {
	max-width: var(--skf-reading);
	font-size: var(--skf-size-lead);
	line-height: var(--skf-leading-body);
}

.skf-prose > * + * { margin-top: var(--space-md); }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--skf-duration-s) var(--skf-ease);
}

a:hover { color: var(--skf-orange); }


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.skf-container {
	width: 100%;
	max-width: var(--skf-container);
	margin-inline: auto;
	padding-inline: var(--skf-gutter);
}

.skf-container--content { max-width: var(--skf-content); }
.skf-container--reading { max-width: var(--skf-reading); }
.skf-container--bleed   { max-width: none; padding-inline: 0; }

.skf-section { padding-block: var(--skf-section-y); }
.skf-section--tight { padding-block: var(--skf-section-y-tight); }
.skf-section--flush-top { padding-block-start: 0; }
.skf-section--flush-bottom { padding-block-end: 0; }

/* --- Colour environments ------------------------------------------------- */

.skf-env--blue {
	background-color: var(--skf-blue);
	color: var(--skf-cream);
}

.skf-env--blue-deep {
	background-color: var(--skf-blue-deep);
	color: var(--skf-cream);
}

.skf-env--cream {
	background-color: var(--skf-cream);
	color: var(--skf-black);
}

.skf-env--white {
	background-color: var(--skf-white);
	color: var(--skf-black);
}

.skf-env--orange {
	background-color: var(--skf-orange);
	color: var(--skf-black);
}

.skf-env--black {
	background-color: var(--skf-black);
	color: var(--skf-cream);
}

.skf-env--blue h1, .skf-env--blue h2, .skf-env--blue h3, .skf-env--blue h4,
.skf-env--blue-deep h1, .skf-env--blue-deep h2, .skf-env--blue-deep h3, .skf-env--blue-deep h4,
.skf-env--black h1, .skf-env--black h2, .skf-env--black h3, .skf-env--black h4 {
	color: var(--skf-white);
}

.skf-env--cream h1, .skf-env--cream h2, .skf-env--cream h3, .skf-env--cream h4,
.skf-env--white h1, .skf-env--white h2, .skf-env--white h3, .skf-env--white h4,
.skf-env--orange h1, .skf-env--orange h2, .skf-env--orange h3, .skf-env--orange h4 {
	color: var(--skf-blue);
}

.skf-accent { color: var(--skf-orange); }

/* --- Grid ---------------------------------------------------------------- */

.skf-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 1024px) {
	.skf-grid { grid-template-columns: repeat(6, 1fr); }
}

.skf-stack > * + * { margin-top: var(--space-md); }
.skf-stack--lg > * + * { margin-top: var(--space-lg); }

/* A stacking context for anything hosting texture behind content. */
.skf-layered {
	position: relative;
	isolation: isolate;
}

.skf-clip { overflow: hidden; }


/* ==========================================================================
   5. ACCESSIBILITY UTILITIES
   ========================================================================== */

.skf-skip-link {
	position: absolute;
	left: var(--space-sm);
	top: -100px;
	z-index: 999;
	padding: 12px 20px;
	background-color: var(--skf-orange);
	color: var(--skf-black);
	font-size: var(--skf-size-label);
	font-weight: var(--skf-weight-bold);
	letter-spacing: var(--skf-track-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: top var(--skf-duration-s) var(--skf-ease);
}

.skf-skip-link:focus {
	top: var(--space-sm);
	color: var(--skf-black);
}

:focus-visible {
	outline: 3px solid var(--skf-orange);
	outline-offset: 3px;
}

.skf-env--orange :focus-visible { outline-color: var(--skf-blue); }

.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;
}

.skf-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* WordPress core classes still needed on a classic theme. */
.alignleft   { float: left;  margin: 0 var(--space-md) var(--space-sm) 0; }
.alignright  { float: right; margin: 0 0 var(--space-sm) var(--space-md); }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption-text,
.wp-element-caption {
	font-size: var(--skf-size-small);
	color: var(--skf-text-muted);
	margin-top: var(--space-xs);
}