/*
 * TE v4 – alapok: rétegsorrend, tokenek, betűtípusok, reset, alap tipográfia
 * author: Laszlo BLAHO – www.blaho.hu
 *
 * Rétegek: a reset és az alap tipográfia rétegben van (bármi felülírhatja),
 * a komponensek és a v3-ból örökölt tartalmi stílusok rétegen KÍVÜL maradnak,
 * így a harmadik féltől jövő (réteg nélküli) CSS-sel szemben is úgy viselkednek,
 * mint a v3-ban.
 */

@layer reset, base;

/* ==========================================================================
   Tokenek
   ========================================================================== */

:root {
   /* Színek – vesszős HSL-hármasok, a v3-mal azonos nevekkel (a TE Events és a
      sidebar-card is ezekre hivatkozik). Használat: hsl(var(--blue)), átlátszósággal
      hsla(var(--blue), .5). FIGYELEM: a perjeles "hsl(var(--blue) / .5)" forma a
      vesszős értékkel érvénytelen, a böngésző eldobja a deklarációt. */
   --white:        0,   0%, 100%;
   --blue:       220,  74%,  33%;
   --gold:        45, 100%,  42%;

   --orange:      18,  83%,  56%;
   --lightBlue:  202,  78%,  73%;
   --strawberry: 348,  79%,  55%;
   --purple:     276,  31%,  47%;
   --yellow:      51, 100%,  47%;
   --green:      144, 100%,  27%;
   --pink:       333,  83%,  84%;
   --turquoise:  186,  57%,  35%;
   --sand:        34,  93%,  72%;
   --tf100green:  63,  70%,  65%;

   --black:        0,   0%,   0%;
   --midGray:      0,   0%,  27%;
   --darkBlue:   220,  74%,  20%;

   /* v3-mal közös egyéb változók */
   --transition-time: 400ms;
   --border-radius: 6px;
   --default-padding: 30px;
   --gap: 24px;
   --gap-half: calc(var(--gap) / 2);
   --gap-half-negative: calc(var(--gap-half) * -1);

   /* v4 tokenek */
   --font-base: 'Kanit', 'kanitregular', Arial, Helvetica, sans-serif;

   --fs-xs: .75rem;      /* 12px */
   --fs-sm: .875rem;     /* 14px */
   --fs-md: 1rem;        /* 16px */
   --fs-lg: 1.25rem;     /* 20px */
   --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
   --fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
   --fs-display: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

   --tracking-caps: .12em;

   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
   --space-7: 48px;
   --space-8: 64px;

   --container-max: 1344px;
   --container-pad: clamp(16px, 3vw, 36px);

   --radius-sm: 4px;
   --radius: var(--border-radius);
   --radius-lg: 12px;

   --topbar-h: 40px;
   --masthead-h: 100px;

   --shadow-card: 0 1px 2px hsla(var(--darkBlue), .06), 0 8px 24px hsla(var(--darkBlue), .08);

   /* Töréspontok (CSS-változóban nem használhatók, csak dokumentációnak):
      sm 576px · md 768px · lg 1040px · xl 1344px */
}

/* ==========================================================================
   Betűtípusok – Kanit (alap), Unbounded (TF100, örökölt)
   ========================================================================== */

/* A v3 családnevei: az örökölt tartalmi CSS ezekre hivatkozik */
@font-face {
   font-family: 'kanitregular';
   src: url('../fonts/kanit-regular-webfont.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'kanitmedium';
   src: url('../fonts/kanit-medium-webfont.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'kanitbold';
   src: url('../fonts/kanit-bold-webfont.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

/* v4: egy család, valódi vastagságokkal – ugyanazokat a fájlokat használja */
@font-face {
   font-family: 'Kanit';
   src: url('../fonts/kanit-regular-webfont.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Kanit';
   src: url('../fonts/kanit-medium-webfont.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Kanit';
   src: url('../fonts/kanit-bold-webfont.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Unbounded-Regular';
   src: url('../fonts/Unbounded-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Unbounded-Bold';
   src: url('../fonts/Unbounded-Bold.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

/* ==========================================================================
   Reset (a v3 resetjével egyező viselkedés, hogy a régi tartalom ne változzon)
   ========================================================================== */

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

   body {
      min-height: 100vh;
      text-rendering: optimizeSpeed;
      line-height: 1.3;
   }

   h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
   }

   ul {
      list-style: none;
   }

   img, svg, video {
      max-width: 100%;
   }

   img {
      height: auto;
   }

   /* Csak a v4 keretelemeiben – a cikktartalomban a v3 böngésző-alapértelmezése marad */
   :where(.te-header, .te-footer, .te-nav, .te-search) button {
      font: inherit;
      color: inherit;
   }
}

/* ==========================================================================
   Alap tipográfia (16px × 1.25^n; a v3 skálája 1.3^n volt)
   ========================================================================== */

@layer base {
   html {
      font-family: var(--font-base);
      font-weight: 400;
      -webkit-text-size-adjust: 100%;
      scroll-padding-top: calc(var(--masthead-h) + var(--space-4));
   }

   body {
      font-size: 16px;
      color: hsl(var(--midGray));
      background-color: hsl(var(--white));
      hyphens: auto;
      position: relative;
   }

   html[lang^="en"] body {
      hyphens: none;
   }

   p {
      font-size: 16px;
   }

   /* alpha40: kisebb címsorskála (16px × 1.25^n; eddig a v3 szerint 1.3^n: 20,8 / 27 / 35,2 / 45,7 px),
      a hero kisebb címéhez igazítva */
   h4 { font-size: 20px; }
   h3 { font-size: 25px; }
   h2 { font-size: 31.25px; }
   h1 { font-size: 39px; }

   a {
      color: hsl(var(--blue));
   }

   :focus-visible {
      outline: 2px solid hsl(var(--gold));
      outline-offset: 2px;
   }
}

/* ==========================================================================
   Segédosztályok
   ========================================================================== */

.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.te-skip-link {
   position: absolute;
   top: var(--space-2);
   left: var(--space-2);
   z-index: 1000;
   padding: var(--space-2) var(--space-4);
   background: hsl(var(--gold));
   color: hsl(var(--darkBlue));
   font-weight: 700;
   border-radius: var(--radius);
   transform: translateY(-200%);

   &:focus {
      transform: none;
   }
}

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