/* ==========================================================================
   Boliann — frontend ráncfelvarrás / harmonizálás (2026-07)
   Utolsóként töltődik be (index.php), így felülírja a téma alap-CSS-ét.
   Cél: a Rólunk/Webshop hero és a tipográfia illeszkedjen a főoldal
   új landing stílusához (sofia_pro + arany #e0c893).
   ========================================================================== */

/* --- Aloldali hero (banner-wrapper) a főoldal heró érzetéhez igazítva --- */
.banner-wrapper.has_background img {
    min-height: 360px;
}
.banner-wrapper.has_background::after {
    /* finom bézs tónus a kép alá, ha rövidebb lenne a viewportnál */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(248,242,231,0) 60%, rgba(244,234,214,.35) 100%);
    pointer-events: none;
}

/* --- Oldalcím: nem csupa nagybetű, nagyobb, súlyosabb (mint a home) --- */
.page-title {
    font-size: 46px;
    line-height: 1.08;
    text-transform: none;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bo-navy);
    padding-bottom: 18px;
}
.page-title::before {
    width: 56px;
    height: 3px;
    background-color: var(--bo-champagne);
}

/* --- Footer social ikonok (Facebook + TikTok) egységes megjelenés --- */
.colaque-socials .socials-list {
    display: flex;
    gap: 12px;
    align-items: center;
}
.colaque-socials .socials-list li { margin: 0; }
.colaque-socials .socials-list a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* !important: a téma display:block-ot erőltet, ami elrontja a középre igazítást */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--bo-line);
    color: var(--bo-navy);
    transition: .18s;
    font-size: 17px;
}
.colaque-socials .socials-list a i,
.colaque-socials .socials-list a svg {
    display: block;
    line-height: 1;
}
.colaque-socials .socials-list a:hover {
    background: var(--bo-navy);
    border-color: var(--bo-navy);
    color: var(--bo-champagne-lt);
}

@media (max-width: 768px) {
    .page-title { font-size: 30px; }
    .banner-wrapper.has_background img { min-height: 260px; }
}

/* ==========================================================================
   BOLIANN fejléc (2026-07 arculati spec)
   Paletta: navy #1131BB, champagne #D8B86B, világos champagne #F6EEDC.
   Navigáció a site alap betűjével (sofia_pro), ~76px magas, dísz nélkül.
   ========================================================================== */
:root {
    /* --- BoLiAnn egységes színrendszer (2026-07) ---
       Sötétkék = elsődleges márkaszín (CTA, aktív elem, cím, hangsúly).
       Világosabb kék (--bo-iconblue) KIZÁRÓLAG ikonokban/illusztrációkban.
       Pezsgő = finom kiemelés (vonalak, apró díszítés) + gombfelirat.
       Törzsszöveg = sötétszürke (nem teljes fekete). Háttér = törtfehér/pezsgő. */
    --bo-navy: #0F2E5D;          /* elsődleges sötétkék */
    --bo-navy-dark: #0A2044;     /* hover-sötétedés */
    --bo-iconblue: #1131BB;      /* csak ikonokban/illusztrációkban */
    --bo-champagne: #D8B86B;     /* finom pezsgő kiemelés (vonalak, díszítés) */
    --bo-champagne-lt: #EAD6A4;  /* világos pezsgő gombfelirat (AA sötétkéken) */
    --bo-bg: #F6EEDC;            /* fejléc/pezsgő alap */
    --bo-bg-soft: #FAF6EE;       /* lágy törtfehér szekció-háttér */
    --bo-surface: #FFFFFF;       /* kártya/felület */
    --bo-text: #2B2A28;          /* törzsszöveg — sötétszürke, nem fekete */
    --bo-text-soft: #5C574E;     /* másodlagos szöveg */
    --bo-line: #E7DFCD;          /* elválasztó vonalak (meleg semleges) */
    --bo-radius: 4px;            /* egységes gomb-lekerekítés */
    /* fejléc navigáció betűje = a site alap betűje (sofia_pro), hogy egyezzen a többi oldalrésszel */
    --bo-navfont: 'sofia_pro', sans-serif;
}

/* ==========================================================================
   Egységes CTA gombrendszer — az EGÉSZ oldalon (hero, blokkok, aloldalak).
   Sötétkék háttér, világos pezsgő felirat (nem fehér), keret nélkül,
   egységes forma/méret/tipográfia, mondatformátumú felirat, finom hover.
   ========================================================================== */
.bo-btn,
.home-btn, .home-btn-primary, .home-btn-ghost,
.hero1-btn, .hero1-btn-primary, .hero1-btn-secondary,
.ws-btn, .ws-btn-primary, .ws-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'sofia_pro', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    padding: 16px 32px;
    border-radius: var(--bo-radius);
    border: 0;
    cursor: pointer;
    background: var(--bo-navy);
    color: var(--bo-champagne-lt);
    transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.bo-btn:hover,
.home-btn:hover, .home-btn-primary:hover, .home-btn-ghost:hover,
.hero1-btn:hover, .hero1-btn-primary:hover, .hero1-btn-secondary:hover,
.ws-btn:hover, .ws-btn-primary:hover, .ws-btn-ghost:hover {
    background: var(--bo-navy-dark);
    color: var(--bo-champagne-lt);
    box-shadow: 0 8px 22px rgba(15, 46, 93, .22);
    transform: translateY(-2px);
}

/* --- Fejléc alap: champagne háttér, se keret, se árnyék --- */
.boliann-header {
    background: var(--bo-bg);
    border-bottom: 0;
}
.boliann-header .header-position {
    background: var(--bo-bg);
    padding: 0;
}
/* görgetéskor rögzülő fejléc: maradjon champagne, árnyék nélkül */
.boliann-header .header-position.fixed {
    background-color: var(--bo-bg);
    box-shadow: none;
}

/* --- Elrendezés: logó balra, menü középen, Fiókom jobbra --- */
.boliann-header .header-middle-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 76px;
}
.boliann-header .header-logo {
    flex: 0 0 auto;
    padding: 0;
}
.boliann-header .header-logo img {
    max-height: 40px;
    width: auto;
    display: block;
    /* a logó PNG fehér hátterét beolvasztja a champagne fejlécbe */
    mix-blend-mode: multiply;
}
.boliann-header .box-header-nav {
    flex: 1 1 auto;
    text-align: center;
}
.boliann-header .header-control {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Menü: egy sor, nagy térköz, sötétszürke alap, aktív navy --- */
.boliann-header .main-menu {
    display: inline-flex;
    align-items: center;
    gap: 38px;
    margin: 0;
    white-space: nowrap;
}
.boliann-header .main-menu > .menu-item {
    margin: 0;
    padding: 0;
}
.boliann-header .box-header-nav .main-menu > .menu-item > a {
    font-family: var(--bo-navfont);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.3;
    color: var(--bo-text);
    padding: 8px 0 6px;
    position: relative;
}
/* vékony navy aláhúzás hoverre és aktív menüponton */
.boliann-header .box-header-nav .main-menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--bo-navy);
    opacity: 0;
    transition: opacity .18s ease;
}
.boliann-header .box-header-nav .main-menu .menu-item:hover > a {
    color: var(--bo-navy);
}
.boliann-header .box-header-nav .main-menu > .menu-item:hover > a::after,
.boliann-header .box-header-nav .main-menu > .menu-item.active > a::after {
    opacity: 1;
}
.boliann-header .box-header-nav .main-menu > .menu-item.active > a {
    color: var(--bo-navy);
}

/* --- Fiókom: komód badge (navy kör + arany komód) + felirat (navy), nem gomb --- */
.boliann-account {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bo-navfont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--bo-navy);
}
.boliann-account .boliann-account-ic {
    display: block;
    line-height: 0;
}
.boliann-account .boliann-account-ic svg {
    /* kör alakú badge: négyzetes, fix méret */
    width: 34px;
    height: 34px;
    display: block;
}
.boliann-account .boliann-account-label {
    position: relative;
    padding: 2px 0;
}
.boliann-account .boliann-account-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--bo-navy);
    opacity: 0;
    transition: opacity .18s ease;
}
/* hover: navy aláhúzás jelenik meg (a badge ikon fix színű, nem változik) */
.boliann-account:hover .boliann-account-label::after {
    opacity: 1;
}

/* --- Szűkebb desktop: kisebb térköz, hogy egy sorban maradjon --- */
@media (min-width: 1025px) and (max-width: 1280px) {
    .boliann-header .main-menu { gap: 24px; }
    .boliann-header .box-header-nav .main-menu > .menu-item > a { font-size: 15px; }
}

/* --- Mobil fejléc: hamburger + logó + Fiókom --- */
@media (max-width: 1024px) {
    .boliann-header {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .boliann-header .header-mobile .header-logo img {
        max-height: 36px;
        width: auto;
        display: inline-block;
    }
    .boliann-header .block-menu-bar .menu-bar {
        color: var(--bo-navy);
    }
    .boliann-header .block-menu-bar .menu-bar span {
        border-bottom-width: 2px;
    }
    .boliann-header .block-menu-bar .menu-bar:hover span {
        background-color: transparent;
        border-color: var(--bo-champagne);
    }
}
@media (max-width: 480px) {
    /* nagyon kis kijelzőn csak a komód ikon marad */
    .header-mobile .boliann-account .boliann-account-label { display: none; }
}

/* --- Off-canvas mobilmenü a fejléc arculatával --- */
.colaque-menu-clone-wrap,
.colaque-menu-clone-wrap .colaque-menu-panel {
    background-color: var(--bo-bg);
}
.colaque-menu-panels-actions-wrap {
    border-bottom: 1px solid rgba(216, 184, 107, .45);
}
.colaque-menu-panel > ul > li {
    border-bottom: 1px solid rgba(216, 184, 107, .35);
}
.colaque-menu-panel > ul > li > a {
    font-family: var(--bo-navfont);
    font-size: 17px;
}
.colaque-menu-panel > ul > li > a:not(:hover) {
    color: var(--bo-text);
}
.colaque-menu-panel > ul > li:hover > a,
.colaque-menu-panel > ul > li.active > a {
    color: var(--bo-navy);
}

/* ==========================================================================
   BOLIANN footer (2026-07) — prémium, 4 egyforma oszlop, egységes rendszer.
   Törtfehér/pezsgő alap, sötétkék címek, sötétszürke törzs, pezsgő elválasztók.
   ========================================================================== */
#footer.bo-footer {
    background: var(--bo-bg-soft);
    border-top: 1px solid var(--bo-line);
    color: var(--bo-text);
}
.bo-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 64px 24px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.bo-footer-col { min-width: 0; }
.bo-footer-logo img {
    max-height: 42px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    margin-bottom: 18px;
}
.bo-footer-tagline {
    font-family: 'sofia_pro', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bo-text-soft);
    margin: 0;
    max-width: 26em;
}
.bo-footer-col h4 {
    font-family: 'sofia_pro', sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--bo-navy);
    margin: 0 0 18px;
    text-transform: none;
}
.bo-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bo-footer-col li { margin: 0 0 11px; }
.bo-footer-col li:last-child { margin-bottom: 0; }
.bo-footer-col a,
.bo-footer-contact a {
    font-family: 'sofia_pro', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bo-text);
    transition: color .18s ease;
}
.bo-footer-col a:hover,
.bo-footer-contact a:hover { color: var(--bo-navy); }
.bo-footer-contact {
    font-family: 'sofia_pro', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bo-text);
}
.bo-footer-contact p { margin: 0 0 12px; }
.bo-footer-contact .muted {
    font-size: 13px;
    color: var(--bo-text-soft);
    margin-top: -6px;
}
.bo-footer-socials {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}
.bo-footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bo-line);
    color: var(--bo-navy);
    transition: .18s;
    font-size: 16px;
}
.bo-footer-socials a i,
.bo-footer-socials a svg { display: block; line-height: 1; }
.bo-footer-socials a:hover {
    background: var(--bo-navy);
    border-color: var(--bo-navy);
    color: var(--bo-champagne-lt);
}
.bo-footer-bottom {
    border-top: 1px solid var(--bo-line);
    text-align: center;
    padding: 22px 24px 30px;
    font-family: 'sofia_pro', sans-serif;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--bo-text-soft);
}
@media (max-width: 1024px) {
    .bo-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
}
@media (max-width: 640px) {
    .bo-footer-inner { grid-template-columns: 1fr; gap: 34px; padding: 48px 22px 32px; }
}