/* =====================================================================
   SZÁNTÓ BRIGITTA – ASZTROZÓFIA | HÍRLEVÉL OLDAL (newsletter.css)
   V1 stílus: éji égbolt + arany csillagfény
   ---------------------------------------------------------------------
   A style.css UTÁN töltődik, annak :root változóit használja
   (--primary-*, --secondary-*, --gradient-night, --gradient-gold stb.).
   Saját színértéket csak ott tartalmaz, ahol a hibaüzenetek kontrasztja
   megkívánja.

   1. Közös segédosztályok (a hírlevél markupja használja)
   2. Navigáció – 9 menüpont + CTA egy sorban
   3. Oldalhős
   4. Bevezető + előnyök
   5. Kártyák
   6. Mezők, checkbox, hibaüzenetek
   7. Gombok
   8. Lábléc kiegészítés
   9. Reszponzív
   ===================================================================== */

/* 1. --------------------- KÖZÖS SEGÉDOSZTÁLYOK --------------------- */
.skip-link {
    position: absolute; left: 16px; top: -60px;
    background: var(--primary-color); color: #fff;
    padding: 10px 18px; border-radius: 50px; z-index: 2000;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 14px;
}
.eyebrow::before,
.eyebrow.justify-content-center::after {
    content: '';
    width: 24px; height: 1px;
    background: currentColor;
    opacity: .7;
}

.text-terra { color: var(--secondary-color) !important; }

/* Dekoratív fénygömbök (a markup .blob elemei) */
.blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* 2. --------------------------- NAVIGÁCIÓ --------------------------- */
.navbar .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .navbar .nav-link { font-size: .88rem; padding: 6px 7px !important; margin: 0; }
    .navbar .nav-link::after { left: 7px; right: 7px; }
    .navbar-brand { font-size: 1.35rem; }
    .navbar .btn-terra { padding: 11px 20px; font-size: .9rem; }
}
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background: rgba(251, 250, 247, .98);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-md);
        padding: 20px;
        margin-top: 12px;
        box-shadow: var(--shadow-card);
    }
    .navbar .nav-link::after { display: none; }
}

/* 3. ----------------------------- OLDALHŐS -------------------------- */
.page-hero {
    position: relative;
    background: var(--gradient-night);
    color: var(--text-light);
    text-align: center;
    overflow: hidden;
}
.page-hero::before {
    /* csillagmező – azonos a nyitólap hero-jával */
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 35%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 82% 64%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.2px 1.2px at 90% 30%, rgba(227,199,133,.9), transparent),
        radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.6), transparent);
    animation: nl-twinkle 6s ease-in-out infinite alternate;
}
@keyframes nl-twinkle { from { opacity: .55; } to { opacity: 1; } }

.page-hero .blob-1 {
    width: 420px; height: 420px;
    top: -170px; right: -110px;
    background: radial-gradient(circle, rgba(201,162,75,.30) 0%, transparent 70%);
}
.page-hero .blob-2 {
    width: 340px; height: 340px;
    bottom: -170px; left: -90px;
    background: radial-gradient(circle, rgba(124,107,176,.32) 0%, transparent 70%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 {
    color: #fff;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
}
.page-hero h1 .accent { color: var(--secondary-light); font-style: italic; }

.page-hero .breadcrumb { justify-content: center; font-size: .9rem; margin-bottom: 0; }
.page-hero .breadcrumb a { color: rgba(244,241,234,.75); }
.page-hero .breadcrumb a:hover { color: var(--secondary-light); }
.page-hero .breadcrumb-item.active { color: var(--secondary-light); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(244,241,234,.45); }

/* 4. ---------------------- BEVEZETŐ + ELŐNYÖK ----------------------- */
#hirlevel h2 { color: var(--primary-color); }

.news-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 576px) { .news-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-perks li {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    font-weight: 500;
    color: var(--primary-color);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.news-perks li:hover { border-color: rgba(201,162,75,.55); box-shadow: var(--shadow-card); }
.news-perks .bi {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--gradient-night);
    color: var(--secondary-light);
    font-size: 1.05rem;
}

/* 5. ------------------------------ KÁRTYÁK -------------------------- */
.news-card {
    position: relative;
    height: 100%;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 52px);
    overflow: hidden;
}
/* Feliratkozás – éji kártya (a markup .news-card--warm osztálya) */
.news-card--warm {
    background: var(--gradient-night);
    color: var(--text-light);
    box-shadow: var(--shadow-soft);
}
.news-card--warm::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.3px 1.3px at 22% 18%, rgba(255,255,255,.65), transparent),
        radial-gradient(1px 1px at 78% 72%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.3px 1.3px at 60% 40%, rgba(227,199,133,.8), transparent),
        radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,.5), transparent);
    pointer-events: none;
}
.news-card .blob-card {
    width: 300px; height: 300px;
    top: -120px; right: -100px;
    background: radial-gradient(circle, rgba(201,162,75,.28) 0%, transparent 70%);
}
/* Leiratkozás – világos kártya */
.news-card--light {
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}

.news-card__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
.news-card__icon {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.6rem;
    margin-bottom: 22px;
}
.news-card--warm .news-card__icon {
    background: rgba(201,162,75,.16);
    border: 1px solid rgba(227,199,133,.4);
    color: var(--secondary-light);
}
.news-card--light .news-card__icon {
    background: var(--gradient-night);
    color: var(--secondary-light);
}

.news-card h2 { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.5rem); margin-bottom: 10px; }
#hirlevel .news-card--warm h2 { color: #fff; }
.news-card--warm .news-card__lead { color: rgba(244,241,234,.82); }
.news-card__note { font-size: .84rem; margin: 20px 0 0; }
.news-card--warm .news-card__note { color: rgba(244,241,234,.65); }

/* 6. --------------------- MEZŐK, CHECKBOX, HIBÁK -------------------- */
.field { margin-bottom: 18px; }
.field__label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .2px;
    margin-bottom: 7px;
    color: var(--primary-color);
}
.news-card--warm .field__label { color: var(--text-light); }
.field__req { color: var(--secondary-color); }
.news-card--warm .field__req { color: var(--secondary-light); }

.field__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 13px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-soft);
    background: var(--bg-body);
    color: var(--text-dark);
    scroll-margin-top: 140px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field__input::placeholder { color: #8d93a5; }
.field__input:focus-visible {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(201,162,75,.22);
}
.news-card--warm .field__input {
    background: rgba(255,255,255,.07);
    border-color: rgba(244,241,234,.22);
    color: #fff;
}
.news-card--warm .field__input::placeholder { color: rgba(244,241,234,.5); }
.news-card--warm .field__input:focus-visible {
    background: rgba(255,255,255,.11);
    border-color: var(--secondary-light);
    box-shadow: 0 0 0 4px rgba(227,199,133,.2);
}

.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 4px; }
.check__input {
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0;
    width: 22px; height: 22px; margin-top: 2px;
    border-radius: 6px;
    border: 1.5px solid var(--primary-color);
    background: transparent;
    cursor: pointer;
    display: grid; place-items: center;
    scroll-margin-top: 140px;
    transition: background .2s ease, border-color .2s ease;
}
.news-card--warm .check__input { border-color: rgba(227,199,133,.7); }
.check__input:checked { background: var(--gradient-gold); border-color: var(--secondary-color); }
.check__input:checked::after {
    content: '';
    width: 6px; height: 11px;
    border: solid var(--primary-dark);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.check__input:focus-visible { outline: 2px solid var(--secondary-light); outline-offset: 3px; }
.check__label { font-size: .9rem; line-height: 1.55; cursor: pointer; }
.news-card--warm .check__label { color: rgba(244,241,234,.88); }
.news-card--warm .check__label a { color: var(--secondary-light); text-decoration: underline; text-underline-offset: 3px; }
.news-card--warm .check__label a:hover { color: #fff; }

.field__error {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 600;
    margin: 8px 0 0;
    color: #a03221;                       /* fehér háttéren ~6:1 */
}
.field__error::before { content: '\F33A'; font-family: 'bootstrap-icons'; font-weight: 400; }
.news-card--warm .field__error {
    color: var(--primary-dark);
    background: var(--secondary-light);  /* arany pirula az éji kártyán */
    border-radius: 50px;
    padding: 4px 12px;
}
.field__error[hidden] { display: none !important; }
.field__error--block { margin-top: 4px; margin-bottom: 8px; }

.field__input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
.news-card--warm .field__input.is-invalid { border-color: var(--secondary-light); box-shadow: 0 0 0 3px rgba(227,199,133,.3); }
.check__input.is-invalid { border-color: var(--secondary-light); box-shadow: 0 0 0 3px rgba(227,199,133,.3); }

/* 7. ------------------------------- GOMBOK -------------------------- */
/* A markup osztálynevei (btn-terra, btn-on-warm, btn-ghost) a v1 gombjait kapják */
.btn-terra,
.btn-on-warm {
    background: var(--gradient-gold);
    color: var(--primary-dark);
    border: none;
    box-shadow: 0 10px 28px rgba(201,162,75,.35);
}
.btn-terra:hover, .btn-terra:focus-visible,
.btn-on-warm:hover, .btn-on-warm:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(201,162,75,.45);
    color: var(--primary-dark);
    background: var(--gradient-gold);
}
.btn-ghost {
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--primary-color); color: #fff; }

.news-card__btn { margin-top: 10px; align-self: flex-start; }

/* 8. --------------------------- LÁBLÉC KIEG. ------------------------ */
.site-footer .navbar-brand { color: #fff !important; }
.site-footer h2.h5 { color: #fff; font-family: var(--font-heading); }

/* 9. ----------------------------- RESZPONZÍV ------------------------ */
@media (max-width: 575.98px) {
    .news-card__btn { width: 100%; }
    .news-card { border-radius: var(--radius-md); }
    .eyebrow.justify-content-center::before,
    .eyebrow.justify-content-center::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .page-hero::before { animation: none; }
}