/**
 * Base — Reset, CSS custom properties, typography, and global styles.
 *
 * @package WEO
 */

/* ═══════════════════════════════════════════
   CSS Reset
   ═══════════════════════════════════════════ */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-height) + var(--space-md));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Admin bar shifts the fixed nav down — extend the anchor-scroll offset to match. */
.admin-bar {
	scroll-padding-top: calc(var(--nav-height) + 32px + var(--space-md));
}

@media (max-width: 782px) {
	.admin-bar {
		scroll-padding-top: calc(var(--nav-height) + 46px + var(--space-md));
	}
}

body {
	overflow-x: hidden;
	min-height: 100vh;
	line-height: 1.6;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--text-dark);
	background-color: var(--midnight);
}

body.single-tribe_events main#content {
	background-color: var(--white);
}

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

img {
	height: auto;
}

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

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

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

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset {
	border: none;
}

/* Remove default search input appearance */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ═══════════════════════════════════════════
   Custom Properties — Design Tokens
   ═══════════════════════════════════════════ */

:root {
	/* ─── Base colours ─── */
	--midnight:    #0E0A18;
	--dark:        #1A1028;
	--charcoal:    #2A2040;
	--surface:     #F7F5FA;
	--white:       #FFFFFF;
	--muted:       #E8E4F0;
	--subtle:      #A89CC8;
	--text-dark:   #1A1028;
	--text-mid:    #6A6080;

	/* ─── Accent (default: magenta) ─── */
	--accent:       #E040A0;
	--accent-hover: #C83890;
	--accent-light: rgba(224, 64, 160, 0.15);

	/* ─── Audience accents ─── */
	--cyan:          #40B8E0;
	--cyan-light:    rgba(64, 184, 224, 0.15);
	--gold:          #F0C840;
	--gold-light:    rgba(240, 200, 64, 0.15);
	--emerald:       #50C878;
	--emerald-light: rgba(80, 200, 120, 0.15);
	--violet:        #A070F0;
	--violet-light:  rgba(160, 112, 240, 0.15);
	--violet-hover:  #8850D8;
	--coral:         #F07050;
	--coral-light:   rgba(240, 112, 80, 0.15);

	/* ─── Neutral chip (generic filter pills, e.g. category) ─── */
	--slate:         #5A5273;
	--slate-light:   rgba(90, 82, 115, 0.15);

	/* ─── Semantic ─── */
	--success:  #30B870;
	--error:    #E85040;
	--warning:  #F0A830;

	/* ─── Typography ─── */
	--font-display: 'Sora', sans-serif;
	--font-body:    'DM Sans', sans-serif;

	/* Heading scale — applied via h1–h6 only, no per-component overrides */
	--text-hero: clamp(2.5rem, 5vw, 3.5rem); /* h1: 40–56px */
	--text-h2:   clamp(1.75rem, 3.5vw, 2.375rem); /* h2: 28–38px */
	--text-h3:   1.375rem;  /* h3: 22px */
	--text-h4:   1.125rem;  /* h4: 18px */

	/* Body text scale — only 4 sizes allowed for body elements */
	--text-xs:   0.625rem;  /* 10px — fine-print only */
	--text-s:    0.875rem;  /* 14px — small/meta */
	--text-body: 1rem;      /* 16px — DEFAULT, vast majority of body text */
	--text-m:    1.25rem;   /* 20px — emphasis/lead */

	/* Aliases retained for backwards compatibility */
	--text-small: var(--text-s);

	/* ─── Spacing (4px base) ─── */
	--space-xs:  0.25rem;
	--space-sm:  0.5rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	/* ─── Border radius ─── */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-full: 9999px;

	/* ─── Shadows ─── */
	--shadow-sm:   0 2px 8px rgba(14, 10, 24, 0.06);
	--shadow-md:   0 4px 20px rgba(14, 10, 24, 0.08);
	--shadow-lg:   0 12px 40px rgba(14, 10, 24, 0.12);
	--shadow-accent: 0 4px 20px rgba(224, 64, 160, 0.3);

	/* ─── Transitions ─── */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s var(--ease-out-expo);
	--transition-slow: 0.8s var(--ease-out-expo);

	/* ─── Z-index scale ─── */
	--z-base:    1;
	--z-overlay: 10;
	--z-nav:     100;
	--z-modal:   200;

	/* ─── Layout ─── */
	--nav-height:          76px;
}

/* ═══════════════════════════════════════════
   Audience Accent Overrides
   ═══════════════════════════════════════════ */

[data-audience="lgbtq"] {
	--accent:       #e04040;
	--accent-hover: #C83890;
	--accent-light: rgba(224, 64, 160, 0.15);
}

[data-audience="all-together"] {
	--accent:       #40B8E0;
	--accent-hover: #2898B8;
	--accent-light: rgba(64, 184, 224, 0.15);
}

[data-audience="matinee"] {
	--accent:       #F0C840;
	--accent-hover: #D4A820;
	--accent-light: rgba(240, 200, 64, 0.15);
}

[data-audience="women"] {
	--accent:       #50C878;
	--accent-hover: #38A860;
	--accent-light: rgba(80, 200, 120, 0.15);
}

[data-audience="premium"] {
	--accent:       #A070F0;
	--accent-hover: #8850D8;
	--accent-light: rgba(160, 112, 240, 0.15);
}

[data-audience="christmas"] {
	--accent:       #F07050;
	--accent-hover: #D05838;
	--accent-light: rgba(240, 112, 80, 0.15);
}

[data-audience="movies"] {
	--accent:       #60A0F0;
	--accent-hover: #4880D0;
	--accent-light: rgba(96, 160, 240, 0.15);
}

/* ═══════════════════════════════════════════
   Typography — Base Elements
   ═══════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--text-dark);
}

h1 {
	font-size: var(--text-hero);
	font-weight: 800;
	line-height: 1.08;
}

h2 {
	font-size: var(--text-h2);
	font-weight: 800;
}

h3 {
	font-size: var(--text-h3);
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--text-h4);
	font-weight: 600;
}

h5 {
	font-size: var(--text-body);
	font-weight: 600;
}

h6 {
	font-size: var(--text-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

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

p:last-child {
	margin-bottom: 0;
}

/*
 * Global convention: <strong> inside WYSIWYG headings
 * renders as accent-coloured text, not heavier weight.
 */
h1 strong,
h2 strong,
h3 strong,
h4 strong {
	color: var(--accent);
	font-weight: inherit;
}

/* ─── Links ─── */

a:not([class]) {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

a:not([class]):hover {
	color: var(--accent-hover);
}

/* ─── Selection ─── */

::selection {
	background: rgba(224, 64, 160, 0.35);
	color: var(--white);
}

/* ─── Overline pattern ─── */

.overline,
pre {
	font-family: var(--font-display);
	font-size: var(--text-m);
	font-weight: 700;
	color: var(--accent);
}

/* ─── Body text sizes — 4 sizes only ─── */

.text-xs {
	font-size: var(--text-xs);
}

.text-s,
.text-small {
	font-size: var(--text-s);
}

.text-m {
	font-size: var(--text-m);
}

p strong em {
	font-weight: 600;
	color: var(--accent);
	font-family: var(--font-display);
	font-style: normal;
}

/* ═══════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════ */

/* Screen reader only — visually hidden, accessible to assistive tech */
.sr-only,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ═══════════════════════════════════════════
   Dark Context — Text Colour Inheritance
   ═══════════════════════════════════════════ */

.dark-context,
.section--dark,
.section--midnight,
.section--charcoal {
	color: var(--muted);
}

.dark-context h1,
.dark-context h2,
.dark-context h3,
.dark-context h4,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--midnight h1,
.section--midnight h2,
.section--midnight h3,
.section--midnight h4,
.section--charcoal h1,
.section--charcoal h2,
.section--charcoal h3,
.section--charcoal h4 {
	color: var(--white);
}

.dark-context .overline,
.section--dark .overline,
.section--midnight .overline,
.section--charcoal .overline {
	color: var(--accent);
}

.dark-context p,
.section--dark p,
.section--midnight p,
.section--charcoal p {
	color: var(--subtle);
}