/* Hangzó kiadványok – a Hagyományok Háza arculati kézikönyve szerinti minták.
   Csak az arculati színek: elsődleges #ffffff #29232f #e52623,
   másodlagos #e3e6f2 #b8b4af #27529e #e6ddbb #232a52 #7bc9db #cab7cb #84bd95.
   Betűk: Lexend (címek), Inter (szöveg). Minták: html[data-minta="feher|piros|kek"]. */

@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/lexend-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/lexend-latin-ext-wght-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext-wght-normal.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; }

:root[data-minta] {
  --hh-feher: #ffffff; --hh-fekete: #29232f; --hh-piros: #e52623;
  --hh-halvanykek: #e3e6f2; --hh-szurke: #b8b4af; --hh-kek: #27529e; --hh-homok: #e6ddbb;
  --hh-sotetkek: #232a52; --hh-turkiz: #7bc9db; --hh-lila: #cab7cb; --hh-zold: #84bd95;

  --indigo: var(--hh-sotetkek);
  --indigo-mely: var(--hh-fekete);
  --indigo-vilagos: var(--hh-kek);
  --mosott: var(--hh-halvanykek);
  --papir: var(--hh-feher);
  --lap: var(--hh-feher);
  --tinta: var(--hh-fekete);
  --halvany: rgb(41 35 47 / .72);        /* a sötét szín áttetszően */
  --vonal: var(--hh-szurke);
  --piros: var(--hh-piros);
  --piros-sotet: var(--hh-fekete);
  --fokusz: var(--hh-kek);
  --lemez-szoveg: var(--hh-fekete);

  --serif: "Inter", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --cim: "Lexend", "Inter", system-ui, sans-serif;

  /* fejléc (a mintánként felülírva) */
  --fejlec-hatter: var(--hh-feher); --fejlec-szoveg: var(--hh-fekete); --fejlec-jel: var(--hh-piros);
  --fejlec-vonal: var(--hh-szurke);
  --menu-hatter: var(--hh-feher); --menu-szoveg: var(--hh-fekete); --menu-jelolo: var(--hh-piros);
  --menu-vonal: var(--hh-szurke);
  --nyito-hatter: var(--hh-halvanykek); --nyito-szoveg: var(--hh-fekete); --nyito-cim: var(--hh-kek);
  --lablec-hatter: var(--hh-sotetkek);
}
:root[data-minta="piros"] {
  --fejlec-hatter: var(--hh-piros); --fejlec-szoveg: var(--hh-feher); --fejlec-jel: var(--hh-feher);
  --fejlec-vonal: var(--hh-piros);
  --menu-hatter: var(--hh-fekete); --menu-szoveg: var(--hh-feher); --menu-jelolo: var(--hh-piros);
  --menu-vonal: transparent;
  --nyito-hatter: var(--hh-halvanykek); --nyito-szoveg: var(--hh-fekete); --nyito-cim: var(--hh-fekete);
  --lablec-hatter: var(--hh-fekete);
}
:root[data-minta="kek"] {
  --fejlec-hatter: var(--hh-sotetkek); --fejlec-szoveg: var(--hh-feher); --fejlec-jel: var(--hh-feher);
  --fejlec-vonal: var(--hh-sotetkek);
  --menu-hatter: var(--hh-kek); --menu-szoveg: var(--hh-feher); --menu-jelolo: var(--hh-feher);
  --menu-vonal: transparent;
  --nyito-hatter: var(--hh-sotetkek); --nyito-szoveg: var(--hh-halvanykek); --nyito-cim: var(--hh-feher);
  --lablec-hatter: var(--hh-fekete);
}

/* sötét mód: sötét alap, halványkék szöveg, türkiz linkek */
@media (prefers-color-scheme: dark) {
  :root[data-minta]:not([data-theme="light"]) {
    --papir: var(--hh-fekete); --lap: var(--hh-sotetkek); --mosott: var(--hh-sotetkek);
    --tinta: var(--hh-halvanykek); --halvany: var(--hh-szurke); --vonal: rgb(184 180 175 / .35);
    --indigo-vilagos: var(--hh-turkiz); --fokusz: var(--hh-turkiz); --piros-sotet: var(--hh-sotetkek);
    --fejlec-hatter: var(--hh-sotetkek); --fejlec-szoveg: var(--hh-feher); --fejlec-jel: var(--hh-piros); --fejlec-vonal: var(--hh-sotetkek);
    --menu-hatter: var(--hh-fekete); --menu-szoveg: var(--hh-halvanykek); --menu-jelolo: var(--hh-piros); --menu-vonal: transparent;
    --nyito-hatter: var(--hh-sotetkek); --nyito-szoveg: var(--hh-halvanykek); --nyito-cim: var(--hh-feher);
    --lablec-hatter: var(--hh-sotetkek);
    color-scheme: dark;
  }
}
:root[data-minta][data-theme="dark"] {
  --papir: var(--hh-fekete); --lap: var(--hh-sotetkek); --mosott: var(--hh-sotetkek);
  --tinta: var(--hh-halvanykek); --halvany: var(--hh-szurke); --vonal: rgb(184 180 175 / .35);
  --indigo-vilagos: var(--hh-turkiz); --fokusz: var(--hh-turkiz); --piros-sotet: var(--hh-sotetkek);
  --fejlec-hatter: var(--hh-sotetkek); --fejlec-szoveg: var(--hh-feher); --fejlec-jel: var(--hh-piros); --fejlec-vonal: var(--hh-sotetkek);
  --menu-hatter: var(--hh-fekete); --menu-szoveg: var(--hh-halvanykek); --menu-jelolo: var(--hh-piros); --menu-vonal: transparent;
  --nyito-hatter: var(--hh-sotetkek); --nyito-szoveg: var(--hh-halvanykek); --nyito-cim: var(--hh-feher);
  --lablec-hatter: var(--hh-sotetkek);
  color-scheme: dark;
}

[data-minta] body { font: 400 1rem/1.6 var(--sans); }
[data-minta] h1, [data-minta] h2, [data-minta] h3, [data-minta] .nyito-cim, [data-minta] .logo-cim { font-family: var(--cim); letter-spacing: 0; }
[data-minta] h1 { font-weight: 700; }
[data-minta] h2, [data-minta] h3 { font-weight: 500; }
[data-minta] h1, [data-minta] .betucsoportok h2 { color: var(--indigo-vilagos); }

/* fejléc: minta nélküli, homogén háttér */
[data-minta] .fejlec { background: var(--fejlec-hatter); background-image: none; color: var(--fejlec-szoveg); border-bottom: 1px solid var(--fejlec-vonal); }
[data-minta] .logo, [data-minta] .logo:hover { background: none; box-shadow: none; color: var(--fejlec-szoveg); padding: 0; }
[data-minta] .logo-jel { color: var(--fejlec-jel); width: 2.6rem; }
[data-minta] .logo-cim { font-weight: 700; font-size: 1.4rem; }
[data-minta] .logo-al { font: 400 .85rem/1.35 var(--sans); font-style: normal; opacity: 1; }
[data-minta] .fejlec-kereso { box-shadow: none; border: 1px solid var(--hh-szurke); border-radius: 4px; }
[data-minta="piros"] .fejlec-kereso, [data-minta="kek"] .fejlec-kereso { border-color: transparent; }
[data-minta] .fejlec-kereso input { color: var(--hh-fekete); background: var(--hh-feher); }
[data-minta] .fejlec-kereso button { background: var(--hh-piros); color: var(--hh-feher); }
[data-minta="piros"] .fejlec-kereso button { background: var(--hh-fekete); }
[data-minta] .fejlec-kereso button:hover { background: var(--hh-fekete); }
[data-minta="piros"] .fejlec-kereso button:hover { background: var(--hh-kek); }
[data-minta] .menugomb { color: var(--fejlec-szoveg); border-color: currentColor; }

[data-minta] .fomenu { background: var(--menu-hatter); border-top: 1px solid var(--menu-vonal); }
[data-minta] .fomenu a { color: var(--menu-szoveg); font-weight: 500; }
[data-minta] .fomenu a:hover { color: var(--menu-szoveg); border-bottom-color: var(--hh-szurke); }
[data-minta] .fomenu a[aria-current="page"] { color: var(--menu-szoveg); border-bottom-color: var(--menu-jelolo); }

/* kezdőlap */
[data-minta] .nyito { --nyito-bg: var(--nyito-hatter); color: var(--nyito-szoveg); }
[data-minta] .nyito-cim { color: var(--nyito-cim); font-weight: 700; }
[data-minta] .nyito-al { color: var(--nyito-szoveg); }
[data-minta] .nagy-kereso { border: 1px solid var(--hh-szurke); border-radius: 4px; }
[data-minta] .nagy-kereso input { color: var(--hh-fekete); background: var(--hh-feher); }
[data-minta] .nagy-kereso button:hover { background: var(--piros-sotet); }

/* gombok, vezérlők */
[data-minta] .gomb, [data-minta] .szuro-sor button, [data-minta] .kereso-sor, [data-minta] .nagy-kereso,
[data-minta] input, [data-minta] select, [data-minta] textarea { border-radius: 4px; }
[data-minta] .gomb-fo:hover, [data-minta] .lj-fo:hover { background: var(--piros-sotet); border-color: var(--piros-sotet); }
[data-minta] .szuro-sor button, [data-minta] .kereso-sor button { background: var(--hh-kek); border-color: var(--hh-kek); }
[data-minta] .kereso-sor { border-color: var(--hh-kek); }
[data-minta] .betusor span[aria-current], [data-minta] .lapozo span[aria-current] { background: var(--hh-kek); border-color: var(--hh-kek); }
[data-minta] .vers { border-left-color: var(--hh-piros); }
[data-minta] .uzenet { background: var(--hh-zold); color: var(--hh-fekete); }
[data-minta] .uzenet-hiba { background: var(--hh-lila); color: var(--hh-fekete); }
[data-minta] .jelzo { background: var(--hh-homok); color: var(--hh-fekete); }

/* rajzolt hanglemez: sötét barázdák, pasztell címkék sötét felirattal */
[data-minta] .lemez { background:
    radial-gradient(circle, transparent 0 31%, rgb(255 255 255 / .06) 31.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #29232f 0 1.6px, #232a52 1.6px 3.2px);
  box-shadow: inset 0 0 0 2px #29232f; }
[data-minta] .lemez-cimke { color: var(--lemez-szoveg); box-shadow: 0 0 0 3px rgb(41 35 47 / .35); }
[data-minta] .lemez-cimke::after { background: #29232f; }
[data-minta] .lemez { --cimke: var(--hh-homok); }
[data-minta] .lemez-1 { --cimke: var(--hh-piros); } [data-minta] .lemez-1 .lemez-cimke { color: var(--hh-feher); }
[data-minta] .lemez-2 { --cimke: var(--hh-turkiz); }
[data-minta] .lemez-3 { --cimke: var(--hh-zold); }
[data-minta] .lemez-4 { --cimke: var(--hh-lila); }

/* lejátszó, lábléc */
[data-minta] .lejatszo { background: var(--hh-fekete); }
[data-minta] .lablec { background: var(--lablec-hatter); color: var(--hh-halvanykek); border-top: 0; }
[data-minta] .lablec a, [data-minta] .lablec .linkgomb { color: var(--hh-feher); }
[data-minta] .lablec a:hover, [data-minta] .lablec .linkgomb:hover { color: var(--hh-turkiz); }
[data-minta] .lablec-belso { align-items: center; padding-top: 2rem; padding-bottom: 2rem; flex-wrap: nowrap; }
[data-minta] .lablec-belso > p { flex: 1 1 auto; }
[data-minta] .lablec-nev strong { font-weight: 600; color: var(--hh-feher); }
@media (max-width: 719px) { [data-minta] .lablec-belso { flex-wrap: wrap; } }
.hh-logo { display: block; flex: none; line-height: 0; }
.hh-logo img { width: 120px; height: auto; }