/* =========================================================================
   leilaspoems — spoločný značkový systém
   Fonty: Bricolage Grotesque (display) + Atkinson Hyperlegible (text/UI)
   Paleta odvodená z hero.webp / brand ilustrácie
   ========================================================================= */

/* ---- FONTY (self-hosted, latin + latin-ext pre slovenčinu/češtinu) ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- ZNAČKOVÉ TOKENY ---- */
:root {
  /* Značkové spektrum (hero.webp): indigo -> violet -> magenta -> koral -> zlatá */
  --brand-indigo: #221a52;
  --brand-violet: #5b3fb0;
  --brand-magenta: #d1268d;
  --brand-coral:  #f2622e;
  --brand-gold:   #f6a723;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --maxw: 1080px;

  /* SVETLÁ TÉMA (default) — teplo-chladný neutrál, nie čistá šeď */
  --ground: #f5f3f7;
  --surface: #ffffff;
  --surface-2: #edeaf3;
  --border: #d9d5e4;
  --border-strong: #b9b2ce;
  --ink: #17131f;        /* hlavný text  — ~15:1 na ground */
  --ink-soft: #443c57;   /* sekundárny   — ~7:1 na ground */
  --muted: #5c5470;      /* popisky      — ~5:1 na ground */
  --link: #6a2b8f;       /* interaktívne — AA na svetlej ploche */
  --on-brand: #ffffff;   /* text na sýtej ploche */

  /* Kurzové akcenty (výseky značkového spektra). *-ink = AA text na svetlej ploche */
  --mastering: #0e7f96;        --mastering-ink: #0b6377;   /* chladný — cyan/tyrkys */
  --songwriting: #c02f7f;      --songwriting-ink: #a01f66; /* teplý — magenta */
  --report: #6b46c1;           --report-ink: #5a34b0;      /* most — violet */

  --shadow-sm: 0 2px 10px rgba(34, 26, 82, 0.07);
  --shadow-md: 0 14px 40px rgba(34, 26, 82, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #100d1c;
    --surface: #1a1630;
    --surface-2: #221d3c;
    --border: #322b4e;
    --border-strong: #48406a;
    --ink: #ece9f5;
    --ink-soft: #c3bcd8;
    --muted: #a49bc0;
    --link: #d9a7ff;
    --on-brand: #ffffff;
    --mastering: #3cc7db;   --mastering-ink: #6fd8e8;
    --songwriting: #f26bad; --songwriting-ink: #ff8cc2;
    --report: #b39dff;      --report-ink: #c7b6ff;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.5);
  }
}
/* Explicitné prepnutie témy (toggle na root elemente má prednosť pred media query) */
:root[data-theme="light"] {
  --ground: #f5f3f7; --surface: #ffffff; --surface-2: #edeaf3; --border: #d9d5e4; --border-strong: #b9b2ce;
  --ink: #17131f; --ink-soft: #443c57; --muted: #5c5470; --link: #6a2b8f;
  --mastering: #0e7f96; --mastering-ink: #0b6377; --songwriting: #c02f7f; --songwriting-ink: #a01f66; --report: #6b46c1; --report-ink: #5a34b0;
  --shadow-sm: 0 2px 10px rgba(34, 26, 82, 0.07); --shadow-md: 0 14px 40px rgba(34, 26, 82, 0.12);
}
:root[data-theme="dark"] {
  --ground: #100d1c; --surface: #1a1630; --surface-2: #221d3c; --border: #322b4e; --border-strong: #48406a;
  --ink: #ece9f5; --ink-soft: #c3bcd8; --muted: #a49bc0; --link: #d9a7ff;
  --mastering: #3cc7db; --mastering-ink: #6fd8e8; --songwriting: #f26bad; --songwriting-ink: #ff8cc2; --report: #b39dff; --report-ink: #c7b6ff;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4); --shadow-md: 0 16px 44px rgba(0,0,0,0.5);
}

/* ---- ZÁKLAD + PRÍSTUPNOSŤ ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--link); }

/* Počas prepínania témy vypni prechody — inak môžu farby „uviaznuť" v polovici animácie */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

/* Viditeľný focus pre klávesnicu (WCAG 2.4.7) */
:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; border-radius: 4px; }

/* Skip-link na obsah */
.skip-link {
  position: absolute; left: 12px; top: -50px; z-index: 200;
  background: var(--surface); color: var(--ink); border: 2px solid var(--brand-magenta);
  padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--body); font-weight: 700;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* =========================================================================
   ZDIEĽANÝ HERO — jeden komponent, per-kurz paleta.
   Rovnaký hero.webp „prefarbený" do palety kurzu cez background-blend-mode.
   Nastav --hero-a / --hero-b / --hero-dark1 / --hero-dark2 na .lp-hero.
   ========================================================================= */
.lp-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: clamp(40px, 6vw, 60px) 24px clamp(52px, 7vw, 72px);
  /* default = značkové spektrum (landing) */
  --hero-a: var(--brand-violet);
  --hero-b: var(--brand-magenta);
  --hero-dark1: #1a1444;
  --hero-dark2: #2c1e52;
  background:
    radial-gradient(ellipse 82% 62% at 50% 50%, rgba(0,0,0,0.34), transparent 72%),
    linear-gradient(180deg, var(--hero-dark1) 0%, var(--hero-dark2) 100%);
}
.lp-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%), url('hero.webp');
  background-size: cover; background-position: center;
  background-blend-mode: color;          /* prefarbí obrázok do hue palety kurzu */
  opacity: 0.5;
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero-inner { max-width: 780px; margin: 0 auto; }
.lp-hero-logo {
  width: clamp(120px, 18vw, 172px); height: auto; margin: 0 auto 24px; display: block;
  filter: invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.4));   /* čierne logo → svetlé na tmavom hero */
}
.lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  color: #fff; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 16px; padding: 6px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
}
/* Vodorovný pás nad hero: odkaz späť + prepínač témy */
.lp-topbar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lp-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 14px; font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.15s, color 0.15s;
}
.lp-back:hover { border-color: var(--border-strong); color: var(--ink); }

.lp-hero h1 {
  color: #fff; font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 6vw, 56px); line-height: 1.06; margin-bottom: 18px;
  text-shadow: 0 2px 22px rgba(10,6,30,0.5);
}
.lp-hero h1 .grad {
  background: linear-gradient(100deg, var(--hero-b) 0%, #ffd9a0 55%, var(--hero-a) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero p {
  color: #ece9f7; font-size: clamp(16px, 2.3vw, 20px);
  max-width: 580px; margin: 0 auto; line-height: 1.6;
  text-shadow: 0 1px 12px rgba(10,6,30,0.45);
}
/* Per-kurz palety hero */
.lp-hero.hero-mastering  { --hero-a:#0e7f96; --hero-b:#2fb6cf; --hero-dark1:#0a2e3a; --hero-dark2:#123f4d; }
.lp-hero.hero-songwriting{ --hero-a:#c02f7f; --hero-b:#f2622e; --hero-dark1:#2a1030; --hero-dark2:#3d1640; }
.lp-hero.hero-report     { --hero-a:#6b46c1; --hero-b:#f5a723; --hero-dark1:#1e1650; --hero-dark2:#2c2064; }

/* =========================================================================
   ZDIEĽANÁ PÄTA — rozšíriteľná (3 stĺpce → doplniteľné sociálne/FAQ/O nás).
   Sleduje tému (svetlá/tmavá cez tokeny).
   ========================================================================= */
.lp-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, var(--ground));
  padding: clamp(36px, 5vw, 52px) 24px 36px;
}
.lp-footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; align-items: start;
}
.lp-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.lp-footer-logo { display: flex; align-items: center; gap: 12px; }
.lp-footer-emblem { width: 38px; height: auto; aspect-ratio: 360 / 520; object-fit: contain; flex-shrink: 0; display: block; }
.lp-footer-name { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.lp-footer-tagline { color: var(--muted); font-size: 14px; font-style: italic; max-width: 30ch; }
.lp-footer-col h4 {
  font-family: var(--body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.lp-footer-col p { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; line-height: 1.6; }
.lp-footer-col a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.lp-footer-bottom {
  max-width: var(--maxw); margin: 28px auto 0; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--muted);
}
/* čierny emblem sa na tmavej téme invertuje */
:root[data-theme="dark"] .lp-footer-emblem { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-footer-emblem { filter: invert(1); } }
@media (max-width: 640px) {
  .lp-footer-inner { grid-template-columns: 1fr; gap: 26px; }
}

/* =========================================================================
   PREPÍNAČ TÉMY — zdieľaný vzhľad
   ========================================================================= */
.lp-theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 8px 14px; font-family: var(--body); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.lp-theme-toggle:hover { border-color: var(--border-strong); color: var(--ink); }
.lp-theme-toggle .moon { display: none; }
:root[data-theme="dark"] .lp-theme-toggle .sun { display: none; }
:root[data-theme="dark"] .lp-theme-toggle .moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .lp-theme-toggle .moon { display: inline; }
}