/* ============================================================================
   bootstrap-theme.css - design-token reteg a Bootstrap 5.3-hoz
   (Bootstrap migracio -> ujdesign, 2026-07)

   Betoltesi sorrend: bootstrap.min.css -> reboot-compat.css -> EZ A FAJL ->
   style.css. Az ujdesign alap-tokenjei (szinek, Montserrat, meretskala,
   lekerekites) itt elnek; az uj komponensek ezekbol a valtozokbol
   epitkeznek, a regi komponensek felulirasai a style.css-bol bomlanak le
   komponensenkent.

   A --site-* valtozok szandekosan mark a-fuggetlenek (nincs gs- prefix):
   az elkeszult design mas brandekhez is atvezetheto, ott csak az ertekek
   cserelodnek.
   ============================================================================ */

:root {
    /* Ujdesign szinpaletta (design-brief, 2026-07-13) */
    --site-color-primary: #339fdb;  /* GS kek - linkek, gombok, rovatcimkek */
    --site-color-primary-hover: #2b87ba;   /* hover-arnyalat (BS-keplet: 15% fekete) */
    --site-color-primary-active: #297faf;  /* active-arnyalat (20% fekete) */
    --site-color-text: #343434;     /* szovegek alapszine */
    --site-color-box-bg: #7f7f7f;   /* dobozok szurke hattere */
    --site-color-label: #c4c4c4;    /* aprobb szoveges jelolesek */
    --site-color-slate: #344f5e;    /* sotet palakek - infodoboz-cimsav (kiemelt cikk terv, user jovahagyta 2026-07-14) */

    /* Meretskala (desktop): alap / kisebb cim / kiemelt cim / fokusz cikkcim */
    --site-fs-base: 14px;
    --site-fs-title: 18px;
    --site-fs-featured: 28px;
    --site-fs-focus: 38px;

    /* Tipografia es torzs */
    --bs-body-font-family: 'Montserrat', sans-serif;
    --bs-body-font-size: var(--site-fs-base);
    --bs-body-color: var(--site-color-text);
    --bs-body-bg: #ffffff;          /* ami fehernek tunik, az sima feher */

    /* Linkek: sotet alap, GS kek hover (a konkret a{} szabalyokat a
       style.css adja, ezek a Bootstrap-komponensekhez kellenek) */
    --bs-link-color-rgb: 52, 52, 52;
    --bs-link-hover-color-rgb: 51, 159, 219;

    --bs-primary: #339fdb;
    --bs-primary-rgb: 51, 159, 219;

    /* Az ujdesign lekerekitett: kepek/kartyak ~8px, a gombok pill alakuak
       (utobbit a .rounded-pill utility adja majd a markupban) */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
}

/* ----------------------------------------------------------------------------
   PCW brand-szkop: a /pcwplus oldalon es a pcw rovat oldalain a header.html
   szerveroldalon body.pcw classt ad (a kontextus az URL-bol dol el, ezert
   lap-cache-biztos). Itt csak a marka-tokenek fordulnak at a PCW-pirosra
   (a logo-pcw.svg szine); minden tokenbol epitkezo szabaly magatol atszinez,
   kulon PCW-szabaly csak a regi beegetett szineknel kell.
   ---------------------------------------------------------------------------- */
body.pcw {
    --site-color-primary: #ff0020;         /* a PCW-logo pirosa (gsplus.hu, 2026-10-16) */
    --site-color-primary-hover: #d9001b;   /* BS-keplet: 15% fekete */
    --site-color-primary-active: #cc001a;  /* 20% fekete */
    --bs-link-hover-color-rgb: 255, 0, 32;
    --bs-primary: #ff0020;
    --bs-primary-rgb: 255, 0, 32;
}

/* ----------------------------------------------------------------------------
   Kontener-geometria a 3. fazishoz (grid-migracio).
   A regi .gs-container: 750/970/1170px TARTALMI szelesseg + 15-15px padding
   (content-box). A Bootstrap .container border-box, ezert a max-width a
   paddinggal EGYUTT ertendo: tartalom + 30px. Igy a tartalmi terulet
   pixelre azonos marad a regivel.
   768px alatt a regi kontener fluid volt -> az sm (576px) meretet kioltjuk.
   ---------------------------------------------------------------------------- */
.container {
    --bs-gutter-x: 30px; /* 15-15px oldalpadding, mint a regi kontenerben */
}
@media (min-width: 576px) {
    .container { max-width: none; }
}
@media (min-width: 768px) {
    .container { max-width: 780px; }   /* 750px tartalom + 30px */
}
@media (min-width: 992px) {
    .container { max-width: 1000px; }  /* 970px tartalom + 30px */
}
@media (min-width: 1200px) {
    .container { max-width: 1200px; }  /* 1170px tartalom + 30px */
}
@media (min-width: 1400px) {
    .container { max-width: 1200px; }  /* a Bootstrap xxl (1320px) kioltasa */
}

/* A regi .gs-row -15px margokkal dolgozott -> 30px gutter */
.row {
    --bs-gutter-x: 30px;
}

/* ----------------------------------------------------------------------------
   Szekcio-grid: a hasab-terkozt mar NEM a boxok belso
   paddingja adja (az kivezetve, a dobozok flush-ok), hanem egyseges 20px
   gutter a szekcio-sorokon. A Bootstrap-matek miatt a tartalom-el nem
   valtozik: container 15px + row -10px + col +10px = 15px = a header
   tartalmi ele. (A 3b fazisban 0 volt, mert akkor a .box 10px belso
   paddingja adta a terkozt.) */
.section-wrapper.row {
    --bs-gutter-x: 20px;
}

/* ----------------------------------------------------------------------------
   Gombok. A Bootstrap 5.3-ban a .btn-* osztalyok szinei forditasi idoben
   rogzulnek, a :root --bs-primary NEM szinezi at oket - ezert itt a
   --bs-btn-* valtozokat allitjuk, a marka-tokenekbol (igy a body.pcw
   token-flip a gombokat is atszinezi). A hover/active arnyalatok a
   Bootstrap sajat keplete szerintiek (15% / 20% fekete). A style.css
   button[type="submit"] regi #007ab5-os szabalya meg el es specifikusabb -
   az a regi formok koreben bomlik le. */
.btn-primary {
    --bs-btn-bg: var(--site-color-primary);
    --bs-btn-border-color: var(--site-color-primary);
    --bs-btn-hover-bg: var(--site-color-primary-hover);
    --bs-btn-hover-border-color: var(--site-color-primary-hover);
    --bs-btn-active-bg: var(--site-color-primary-active);
    --bs-btn-active-border-color: var(--site-color-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Minden gomb egyseges: pill, felkover, verzal - mint a
   fejlec CTA-ja. Meret-skala: alap .btn = fejlec-gomb merete; .btn-lg = nagy
   gombok (Hozzaszolasok, Tovabb(iak), 18+ jovahagyas). A regi .button
   osztaly a style.css-ben kompatibilitasi retegkent el tovabb (DB-tartalom
   es core-generalt markup hasznalhatja meg). */
.btn {
    --bs-btn-border-radius: 50rem;
    --bs-btn-font-weight: 700;
    text-transform: uppercase;
}
.btn-lg {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 2.25rem;
}
/* Masodlagos gomb: halvany szurke, sotet felirat (pl. Regisztracio) */
.btn-secondary {
    --bs-btn-bg: #ededed;
    --bs-btn-border-color: #ededed;
    --bs-btn-color: #343434;
    --bs-btn-hover-bg: #dcdcdc;
    --bs-btn-hover-border-color: #dcdcdc;
    --bs-btn-hover-color: #343434;
    --bs-btn-active-bg: #d0d0d0;
    --bs-btn-active-border-color: #d0d0d0;
    --bs-btn-active-color: #343434;
    --bs-btn-focus-shadow-rgb: 196, 196, 196;
}
.btn .icon svg {
    margin: 0 0 -5px 0;
}

/* Alertek / uzenetdobozok: minden success/error uzenet
   egyseges Bootstrap alert (site _messages.html-felulriras, auth-message,
   cikkbeli hirlevel-uzenet). Radius 1.5rem: egysoros uzenetnel geometriailag
   pill-hatast ad (mint a gombok), tobbsorosnal lekerekitett kartya marad.
   Szinek: telitett szoveg vilagos hatteren (kontraszt kb. 7:1), az info a
   GS-kekbol kepzett arnyalat. A regi .ok/.notok a style.css-ben
   kompatibilitasi retegkent el tovabb (DB-tartalom hordozhatja). */
.alert {
    --bs-alert-border-radius: 1.5rem;
    --bs-alert-padding-x: 1.5rem;
    --bs-alert-padding-y: 1rem;
}
.alert ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.alert li + li {
    margin-top: 0.5rem;
}
/* Az uzenetekben sima <a> linkek vannak (pl. mailto) - a varians sajat
   szinet kapjak, felkoveren, hogy a szinezett hatteren is olvashatoak
   legyenek */
.alert a {
    color: var(--bs-alert-link-color);
    font-weight: 700;
}
.alert-success {
    --bs-alert-color: #1d6b32;
    --bs-alert-bg: #e8f6ec;
    --bs-alert-border-color: #cdead6;
    --bs-alert-link-color: #145225;
}
.alert-danger {
    --bs-alert-color: #992727;
    --bs-alert-bg: #fdecec;
    --bs-alert-border-color: #f3cccc;
    --bs-alert-link-color: #7a1f1f;
}
.alert-info {
    --bs-alert-color: #1c6c9c;
    --bs-alert-bg: #e7f4fb;
    --bs-alert-border-color: #c6e4f5;
    --bs-alert-link-color: #14536f;
}