/* 1367 gyűjtőoldal – design tokenek (B változat)
 * Forrás: a Design vászon artboardjai + PTE Arculat design system.
 * Komponensben csak ezekre a változókra hivatkozz, hex értéket ne írj be.
 */

/* Betűk – a .woff2 fájlokat a PTE Arculat design systemből kell átkonvertálni ide: ../fonts/ */
@font-face { font-family: 'PTE Sans'; src: url('../fonts/PteSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PTE Sans'; src: url('../fonts/PteSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PTE Sans'; src: url('../fonts/PteSans-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PTE Serif'; src: url('../fonts/PteSerif-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Josefin Sans: helyben kiszolgálva (GDPR), 600 és 700 vastagság */
@font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Felület és szöveg */
  --paper: #ffffff;
  --paper-2: #f2f2f0;
  --ink: #1d1a21;
  --ink-2: #5c5b61;          /* 6,4:1 fehéren */
  --rule: #e2e2e2;

  /* 1367 arculat */
  --aubergine: #36313c;      /* fejléc, aktív szűrő, süti-sáv */
  --aubergine-2: #45404a;    /* egy fokkal világosabb felület a sötét sávban */
  --gold: #dba827;           /* aláhúzás, Gólyáknak blokk; rajta --ink */
  --sage: #6ea382;           /* csak díszpont */
  --sage-strong: #477a5d;    /* fő gomb, fehér szöveg 5,1:1 */
  --red-strong: #c4231b;     /* Hamarosan zár, Elmarad */
  --navy: #001451;
  --black: #030504;          /* lábléc */
  --on-dark: #f2f2f2;
  --on-dark-2: #b9b9bd;
  --rule-sotet: #4b4553;     /* elválasztó sötét felületen (--rule párja) */
  --on-color: #ffffff;
  --shadow: rgba(29, 26, 33, 0.14);
  /* Fátyol a képre írt szöveg alá. A tintából származik, 78%-on: a
   * legvilágosabb fotón is 9:1 fölötti kontrasztot ad fehér szöveggel,
   * tehát a kép tartalmától függetlenül olvasható marad. */
  --fatyol: rgba(16, 14, 19, 0.78);
  --fatyol-fel: rgba(16, 14, 19, 0.38);

  /* PTE mag */
  --pte-kek: #2d68c4;        /* linkek a cikkszövegben, fókuszkeret */
  --pte-fekete: #101820;     /* szlogen */

  /* PTE kari és egységszínek */
  --kar-ajk: #006272;
  --kar-aok: #06038d;
  --kar-btk: #9b2242;
  --kar-etk: #006298;
  --kar-gytk: #249e6b;
  --kar-ktk: #489fdf;
  --kar-kpvk: #f2a900;
  --kar-mk: #b9975b;
  --kar-mik: #7c878e;
  --kar-ttk: #008675;
  --egyseg-hszk-sotetkek: #232152;
  --egyseg-hszk-zold: #70bfa0;
  --egyseg-ehok-kek: #006bff; /* fehér szöveg 4,6:1 – ne világosítsd */

  /* Lapszínek (forrás → kari/egységszín) */
  --src-pb: var(--kar-btk);
  --src-iz: var(--kar-etk);
  --src-mi: var(--kar-ajk);
  --src-hszk: var(--egyseg-hszk-sotetkek);
  --src-ehok: var(--egyseg-ehok-kek);
  --src-1367: var(--aubergine);

  /* Betűcsaládok */
  --font-display: 'Josefin Sans', 'Century Gothic', sans-serif;
  --font-body: 'PTE Sans', 'Trebuchet MS', sans-serif;
  --font-serif: 'PTE Serif', Georgia, serif;

  /* Elrendezés */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --hit: 44px;
}

html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--sage-strong); }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--pte-kek); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); box-sizing: border-box; }

/* Képek alapállapota.
 *
 * A WordPress minden képre kiírja a `width` és `height` attribútumot. Ezek
 * prezentációs tippek, és a magasság ERŐSEBB, mint az `aspect-ratio`: a
 * `height="512"` miatt a kiemelt kártyák képei a megadott 4:3 helyett
 * 366×512-ben jelentek meg, és a kártya kétszer olyan magas lett, mint
 * amilyennek terveztük. A `height: auto` adja vissza a szót a CSS-nek —
 * ettől kezdve az `aspect-ratio` dönt, ahol megadjuk, és a natív arány,
 * ahol nem. A komponens-szabályok nagyobb specificitással felülírják. */
/* A `hidden` attribútum erősebb, mint bármelyik komponens display-e.
 *
 * A böngésző `[hidden] { display: none }` szabálya a legalacsonyabb
 * fajsúlyú, ezért egy `.valami { display: flex }` CSEND­BEN felülírja: az
 * elem rejtettnek van jelölve, mégis látszik. Pontosan ez történt az
 * egységszűrővel — a kiszűrt kártyák ott maradtak a képernyőn. Az
 * `!important` itt nem lustaság: a `hidden` szándéknyilatkozat, nem
 * stíluskérés. */
[hidden] { display: none !important; }

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

/* Lapminták (tarka csempék) */
.tile { background-position: center; background-size: cover; background-repeat: no-repeat; }
.pat-ehok { background-image: url('../svg/tarka-1367.svg'); }
.pat-iz   { background-image: url('../svg/tarka-egeszseg.svg'); }
.pat-mi   { background-image: url('../svg/tarka-kikapcs.svg'); }
.pat-pb   { background-image: url('../svg/tarka-merulj.svg'); }
.pat-hszk { background-image: url('../svg/tarka-mi.svg'); }
/* Az 1367 saját archívumának csempéje. A `tarka-1367.svg` színei (#36313C
 * aubergine + zöld) pont a ház színei — ez eleve az 1367 mintája. Jelenleg
 * a `pat-ehok` is ezt használja; a két csempét a LAPSZÍN különbözteti meg. */
.pat-1367 { background-image: url('../svg/tarka-1367.svg'); }

/* Menü */
.nav-link { white-space: nowrap; line-height: var(--hit); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 7px; }
.nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { text-decoration-thickness: 3px; }

/* Lábléc háttér */
.footer-art { background: url('../svg/varoskep-kozepe.svg') center bottom / max(1400px, 100%) auto no-repeat, url('../svg/mandala-masik.svg') right -140px bottom -120px / 420px auto no-repeat, var(--black); }
.cikkiro-bg { background: url('../svg/jelentkezz-hatter.svg') center / cover no-repeat; }