/*
Theme Name: Hatter Entertainment
Theme URI: https://hatterentertainment.co.uk
Author: WWeb Design
Author URI: https://wwebdesign.co.uk
Description: Lean custom monochrome theme for Hatter Entertainment — a Stockport DJ & entertainment service. Code-registered ACF blocks, no page builder, no build step.
Version: 1.4.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: hatter
*/

/* ============================================================
   FONTS (self-hosted — assets/fonts/*.woff2)
   ============================================================ */
@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — monochrome, high-contrast (DARK scheme = default)
   ============================================================ */
:root {
  /* Base — neutral graphite (lifted off pure black so it never reads as a "black hole") */
  --hatter-bg:            #16161A;
  --hatter-bg-2:          #1D1D22;
  --hatter-surface:       #222227;
  --hatter-surface-2:     #2B2B31;
  --hatter-border:        #34343B;
  --hatter-border-strong: #4A4A53;

  /* Text — bone white */
  --hatter-text:          #F5F1EA;
  --hatter-text-muted:    #B4B0A8;
  --hatter-text-dim:      #85817A;

  /* "Accent" is monochrome. These token NAMES are kept so every block keeps working;
     they resolve to bone / silver / grey instead of neon. */
  --hatter-violet:        #D8D3C8;   /* icons, small marks, borders-on-hover */
  --hatter-violet-bright: #F5F1EA;   /* links (underlined) */
  --hatter-magenta:       #9C978C;   /* kickers / eyebrows (muted) */
  --hatter-indigo-deep:   #2A2A30;   /* neutral image-wash anchor */

  --hatter-grad:          linear-gradient(120deg, #FFFFFF 0%, #CFC9BC 100%);
  --hatter-glow-violet:   0 0 34px rgba(245,241,234,.10);
  --hatter-glow-magenta:  0 0 34px rgba(245,241,234,.10);

  /* Primary button (solid, high-contrast) */
  --hatter-btn-bg:        #F5F1EA;
  --hatter-btn-fg:        #17161A;

  /* Semantic */
  --hatter-ok:  #86C79E;  --hatter-err: #E0868F;

  /* Type */
  --hatter-font-display: "Sora", "Inter", system-ui, sans-serif;
  --hatter-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hatter-font-kicker:  "Inter", system-ui, sans-serif;

  /* Spacing — 8px scale */
  --hatter-s1: .5rem;  --hatter-s2: 1rem;   --hatter-s3: 1.5rem;
  --hatter-s4: 2rem;   --hatter-s5: 3rem;   --hatter-s6: 4rem;  --hatter-s7: 6rem;
  --hatter-section-y: clamp(4rem, 9vw, 8rem);

  /* Radius — sharp / gothic */
  --hatter-r-card: 0px;
  --hatter-r-ui:   4px;
  --hatter-r-img:  6px;

  /* Layout */
  --hatter-content-max: 1200px;
  --hatter-content-wide: 1400px;
  --hatter-gutter: clamp(1.25rem, 5vw, 3rem);
  --hatter-header-height: 76px;
}

/* ============================================================
   LIGHT scheme — every token-driven component flips to ink-on-bone.
   Applied to .hatter-invert AND to specific block sections so the page
   alternates dark / light bands (keeps it from feeling "too dark").
   These block types only appear where a light band is wanted (home + contact);
   the gallery page and the hero/marquee/trust/dj/gallery/cta bands stay dark.
   ============================================================ */
.hatter-invert,
.hatter-intro,
.hatter-packages,
.hatter-event-grid,
.hatter-testimonials,
.hatter-faq,
.hatter-contact {
  --hatter-bg:            #F1ECE3;
  --hatter-bg-2:          #E9E3D8;
  --hatter-surface:       #FFFFFF;
  --hatter-surface-2:     #F7F3EB;
  --hatter-border:        #DED8CB;
  --hatter-border-strong: #C0B8A8;

  --hatter-text:          #191721;
  --hatter-text-muted:    #565248;
  --hatter-text-dim:      #8A867B;

  --hatter-violet:        #2C2A26;
  --hatter-violet-bright: #191721;
  --hatter-magenta:       #7C776B;
  --hatter-indigo-deep:   #CFC8B9;

  --hatter-grad:          linear-gradient(120deg, #2C2A26 0%, #575249 100%);
  --hatter-glow-violet:   0 0 0 rgba(0,0,0,0);
  --hatter-glow-magenta:  0 0 0 rgba(0,0,0,0);

  --hatter-btn-bg:        #191721;
  --hatter-btn-fg:        #F5F1EA;

  background: var(--hatter-bg);
  color: var(--hatter-text);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--hatter-font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  color: var(--hatter-text);
  background-color: var(--hatter-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Subtle film grain — ties the mixed phone photos + flat panels together */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
a { color: var(--hatter-violet-bright); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { opacity: .78; }
ul, ol { list-style: none; padding: 0; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--hatter-font-display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--hatter-text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; }
h3 { font-size: clamp(1.375rem, 2vw, 1.8rem); font-weight: 600; }
h4 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }

/* Emphasised word (hero keyword etc.) — silver shimmer */
.hatter-grad-text {
  background: var(--hatter-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}

/* Kicker / eyebrow — refined wide-tracked caps */
.hatter-kicker {
  display: inline-block;
  font-family: var(--hatter-font-kicker);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hatter-magenta);
  line-height: 1;
}
.hatter-kicker--muted { color: var(--hatter-text-muted); }

.hatter-lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--hatter-text-muted); line-height: 1.6; }
.hatter-muted { color: var(--hatter-text-muted); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.hatter-container {
  width: 100%; max-width: var(--hatter-content-max);
  margin-inline: auto; padding-inline: var(--hatter-gutter);
}
.hatter-container--wide { max-width: var(--hatter-content-wide); }

.hatter-section { padding-block: var(--hatter-section-y); position: relative; }
.hatter-section--band { background: var(--hatter-bg-2); }
.hatter-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.hatter-sec-head { max-width: 46rem; margin-bottom: var(--hatter-s5); }
.hatter-sec-head--center { margin-inline: auto; text-align: center; }
.hatter-sec-head .hatter-kicker { margin-bottom: var(--hatter-s3); }
.hatter-sec-head h2 { margin-bottom: var(--hatter-s2); }

.hatter-rule { border: 0; height: 1px; background: var(--hatter-border); }

.hatter-card {
  background: var(--hatter-surface);
  border: 1px solid var(--hatter-border);
  border-radius: var(--hatter-r-card);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hatter-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 0.95em 1.6em;
  font-family: var(--hatter-font-kicker); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  border-radius: var(--hatter-r-ui); border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  will-change: transform;
}
.hatter-btn:hover { transform: translateY(-2px); }
.hatter-btn:active { transform: translateY(0); }

.hatter-btn--primary {
  color: var(--hatter-btn-fg);
  background: var(--hatter-btn-bg);
  border-color: var(--hatter-btn-bg);
}
.hatter-btn--primary:hover { color: var(--hatter-btn-fg); opacity: .88; transform: translateY(-2px); }

.hatter-btn--ghost {
  color: var(--hatter-text); background: transparent; border-color: var(--hatter-border-strong);
}
.hatter-btn--ghost:hover { color: var(--hatter-text); opacity: 1; border-color: var(--hatter-text); }

.hatter-btn--sm { padding: 0.72em 1.15em; font-size: 0.76rem; }

/* Text link with arrow */
.hatter-arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--hatter-font-kicker); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; font-size: .78rem; color: var(--hatter-text);
}
.hatter-arrow-link:hover { opacity: .75; }
.hatter-arrow-link span { transition: transform .2s ease; }
.hatter-arrow-link:hover span { transform: translateX(4px); }

/* ============================================================
   SUIT / MOTIF GLYPHS
   ============================================================ */
.hatter-suit { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; }
.hatter-divider {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: var(--hatter-text-dim); margin-block: var(--hatter-s5);
}
.hatter-divider::before, .hatter-divider::after {
  content: ""; height: 1px; flex: 1; max-width: 120px;
  background: linear-gradient(to var(--_d, right), transparent, var(--hatter-border-strong));
}
.hatter-divider::before { --_d: left; }
.hatter-divider .hatter-suit { width: 1.1rem; height: 1.1rem; color: var(--hatter-text); }

/* ============================================================
   IMAGE TREATMENT (neutral B&W-leaning; originals stay clean)
   ============================================================ */
/* Tier 1 — proof (gallery / faces): desaturate + unify, come alive on hover */
.hatter-img-proof { position: relative; overflow: hidden; border-radius: var(--hatter-r-img); background: var(--hatter-surface); }
.hatter-img-proof img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.45) contrast(1.06) brightness(.92);
  transition: filter .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.hatter-img-proof::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hatter-indigo-deep); mix-blend-mode: color; opacity: .25;
  transition: opacity .5s ease;
}
.hatter-img-proof::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--hatter-bg) 2%, transparent 55%);
}
.hatter-img-proof:hover img { filter: saturate(.9) contrast(1.02) brightness(1.02); transform: scale(1.04); }
.hatter-img-proof:hover::before { opacity: .08; }

/* Tier 2 — atmosphere (hero / bands): neutral duotone via SVG filter */
.hatter-img-duotone img { filter: url(#hatter-duotone) contrast(1.05); }

@media (prefers-reduced-motion: reduce) {
  .hatter-img-proof img { transition: none; }
  .hatter-img-proof:hover img { transform: none; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hatter-text); outline-offset: 2px; border-radius: 2px;
}
.hatter-on-media:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0,0,0,.6); }

.hatter-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hatter-skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-120%);
  top: 8px; z-index: 10000; background: var(--hatter-surface); color: var(--hatter-text);
  padding: .6em 1em; border: 1px solid var(--hatter-text); border-radius: var(--hatter-r-ui);
  transition: transform .2s ease;
}
.hatter-skip-link:focus { transform: translateX(-50%) translateY(0); color: var(--hatter-text); }

::selection { background: var(--hatter-text); color: var(--hatter-bg); }

/* ============================================================
   HELPERS
   ============================================================ */
.hatter-grid { display: grid; gap: var(--hatter-s4); }
@media (max-width: 640px) { :root { --hatter-header-height: 64px; } }