/* =========================================================================
   dropdowns.css — drop-downy main-nav (mega-menu, sub-listy, label_url).
   Źródło prawdy: data/menu_v2.php. Wydzielone z styles.css (v3.7k refaktor).
   ========================================================================= */
/* =========================================================================
   MENU v2 — drop-downy (main-nav + utility-bar)
   Plik źródła prawdy: data/menu_v2.php (zob. 02_design/inwentaryzacja-menu.md)
   ========================================================================= */

/* Pozycje top-level: <li> staje się relative kontenerem dla drop-downa */
.main-nav__links li,
.utility-bar__links li {
    position: relative;
}
/* Z chevronem padding wizualnie staje się asymetryczny — kompensujemy
   subtelnie na linkach z drop-down, żeby zachować rytm 14px ze starej v3.4 */
.main-nav__links li.has-dropdown > a {
    padding-right: 8px;
}
.utility-bar__links li.has-dropdown > a {
    padding-right: 0;
}

/* Strzałka w dół przy zakładce z drop-down — dyskretny marker, nie elem rozpraszający */
.menu-chevron {
    margin-left: 3px;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 10px; height: 10px;
    flex-shrink: 0;
}
/* W utility-bar (białe tło, ciemny tekst) chevron jeszcze bardziej dyskretny */
.utility-bar__links .menu-chevron {
    width: 9px; height: 9px;
    opacity: 0.45;
}
.has-dropdown:hover .menu-chevron,
.has-dropdown.is-open .menu-chevron,
.has-dropdown:focus-within .menu-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* === Drop-down główny (.main-nav__dropdown) === */
.main-nav__dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: var(--green-900, #0e5c47);
    border-top: 2px solid var(--accent-gold-500, #f0c24c);
    border-radius: 0 0 var(--r-card, 8px) var(--r-card, 8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.main-nav__dropdown li { margin: 0; }
.main-nav__dropdown a {
    display: block;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 0;
    white-space: normal;
    transition: background 0.15s ease, color 0.15s ease;
}
.main-nav__dropdown a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--accent-gold-100, #fde9b3);
    text-decoration: none;
}
.main-nav__dropdown--has-description {
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
}

/* === Drop-down utility-bar (.utility-bar__dropdown) === */
.utility-bar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--border, #e2e2e2);
    border-radius: var(--r-card, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    margin: 4px 0 0;
    list-style: none;
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.utility-bar__dropdown li { margin: 0; }
.utility-bar__dropdown a {
    display: block;
    padding: 8px 14px;
    color: var(--text, #1f2a25);
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
}
.utility-bar__dropdown a:hover {
    background: rgba(14, 92, 71, 0.08);
    color: var(--green-900, #0e5c47);
    text-decoration: none;
}
.utility-bar__dropdown--has-description {
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
}

/* === MEGA-MENU (mainnav) — wprowadzone 02.05 (v3.6) =====================
   Modyfikator `.main-nav__dropdown--mega` zamienia <ul> drop-down w grid
   2-3-kolumnowy z nagłówkami grup. Używane w „Modlitwy" (2-kol) i „Kontakty"
   (3-kol) wg uzgodnień z s. Elżbietą z 02.05.
   ========================================================================= */
.main-nav__dropdown--mega {
    display: grid;
    gap: 4px 16px;
    padding: 14px 18px 12px;
    min-width: 480px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}
.main-nav__dropdown--mega[data-cols="2"] {
    width: min(560px, calc(100vw - 32px));
    grid-template-columns: 1fr 1fr;
    min-width: 480px;
}
.main-nav__dropdown--mega[data-cols="3"] {
    width: min(840px, calc(100vw - 32px));
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    min-width: 640px;
}

/* Mega-menu w utility-bar — białe tło, ciemny tekst */
.utility-bar__dropdown.utility-bar__dropdown--mega {
    display: grid;
    gap: 4px 14px;
    padding: 12px 14px 8px;
    min-width: 420px;
    max-width: 800px;
}
.utility-bar__dropdown--mega[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.utility-bar__dropdown--mega[data-cols="3"] { grid-template-columns: repeat(3, minmax(150px, 1fr)); }

.dropdown__description {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    padding: 8px 16px 12px;
    margin: 0 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.dropdown__description p {
    margin: 0;
}
.utility-bar__dropdown .dropdown__description,
.utility-bar__dropdown--mega .dropdown__description {
    color: var(--text-muted, #68756f);
    border-bottom-color: rgba(14, 92, 71, 0.14);
}
.main-nav__dropdown--mega .dropdown__description,
.utility-bar__dropdown--mega .dropdown__description {
    grid-column: 1 / -1;
    padding: 0 8px 12px;
}

.dropdown__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Pozwala na osobne kolumny żeby nagłówek + lista grupowały się razem */
}
.dropdown__group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-gold-100, #fde9b3);
    padding: 6px 8px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 4px;
}
.utility-bar__dropdown--mega .dropdown__group-label {
    color: var(--green-700, #146a51);
    border-bottom-color: rgba(14, 92, 71, 0.15);
}
/* v3.7i — klikalny nagłówek kolumny mega-menu (np. Modlitwy → „Do Miłosierdzia Bożego" → anchor) */
.dropdown__group-label--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-decoration: none;
    transition: color .15s, opacity .15s, transform .15s;
    cursor: pointer;
}
.dropdown__group-label--link:hover,
.dropdown__group-label--link:focus-visible {
    color: var(--bg);
    opacity: 1;
    text-decoration: none;
}
.dropdown__group-label--link span {
    opacity: .6;
    transition: transform .15s, opacity .15s;
    font-weight: 400;
}
.dropdown__group-label--link:hover span,
.dropdown__group-label--link:focus-visible span {
    opacity: 1;
    transform: translateX(2px);
}
.dropdown__group-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dropdown__group-list li { margin: 0; }
.dropdown__group-list a {
    display: block;
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    border-radius: 4px;
    white-space: normal;
    transition: background 0.15s ease, color 0.15s ease;
}
.dropdown__group-list a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--accent-gold-100, #fde9b3);
    text-decoration: none;
}
.utility-bar__dropdown--mega .dropdown__group-list a {
    color: var(--text, #1f2a25);
    font-size: 12.5px;
}
.utility-bar__dropdown--mega .dropdown__group-list a:hover {
    background: rgba(14, 92, 71, 0.08);
    color: var(--green-900, #0e5c47);
}

/* „Więcej →" w klasycznym drop-down (Miłosierdzie, Św. Faustyna) */
.dropdown__more {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 4px;
    padding-top: 4px;
}
.dropdown__more a {
    color: var(--accent-gold-100, #fde9b3) !important;
    font-style: italic;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.utility-bar__dropdown .dropdown__more {
    border-top-color: rgba(14, 92, 71, 0.15);
}
.utility-bar__dropdown .dropdown__more a {
    color: var(--green-700, #146a51) !important;
}

/* „Więcej →" pod mega-menu — pełna szerokość, separator nad */
.dropdown__mega-more {
    grid-column: 1 / -1;
    display: block;
    margin: 8px -18px -12px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--accent-gold-100, #fde9b3);
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    border-radius: 0 0 var(--r-card, 8px) var(--r-card, 8px);
    transition: background 0.15s ease;
}
.dropdown__mega-more:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}
.utility-bar__dropdown--mega .dropdown__mega-more {
    margin: 8px -14px -8px;
    padding: 10px 14px;
    border-top-color: rgba(14, 92, 71, 0.15);
    color: var(--green-700, #146a51);
}
.utility-bar__dropdown--mega .dropdown__mega-more:hover {
    background: rgba(14, 92, 71, 0.05);
    color: var(--green-900, #0e5c47);
}

/* Otwórz drop-down i mega-menu na hover (desktop) i przez .is-open (klik / fokus klawiaturą) */
@media (min-width: 1024px) {
    .has-dropdown:hover > .main-nav__dropdown,
    .has-dropdown:focus-within > .main-nav__dropdown,
    .has-dropdown.is-open > .main-nav__dropdown,
    .has-dropdown:hover > .utility-bar__dropdown,
    .has-dropdown:focus-within > .utility-bar__dropdown,
    .has-dropdown.is-open > .utility-bar__dropdown,
    .has-mega:hover > .main-nav__dropdown,
    .has-mega:focus-within > .main-nav__dropdown,
    .has-mega.is-open > .main-nav__dropdown,
    .has-mega:hover > .utility-bar__dropdown,
    .has-mega:focus-within > .utility-bar__dropdown,
    .has-mega.is-open > .utility-bar__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* .has-mega potrzebuje analogicznego stanu początkowego dla mega-menu (div, nie ul) */
.has-mega > .main-nav__dropdown--mega,
.has-mega > .utility-bar__dropdown--mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    z-index: 150;
}
.has-mega > .main-nav__dropdown--mega {
    background: var(--green-900, #0e5c47);
    border-top: 2px solid var(--accent-gold-500, #f0c24c);
    border-radius: 0 0 var(--r-card, 8px) var(--r-card, 8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.has-mega > .utility-bar__dropdown--mega {
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border, #e2e2e2);
    border-radius: var(--r-card, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Chevron rotation dla has-mega (analogicznie do has-dropdown) */
.has-mega > a > .menu-chevron,
.has-mega:hover > a > .menu-chevron,
.has-mega.is-open > a > .menu-chevron,
.has-mega:focus-within > a > .menu-chevron {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.has-mega:hover > a > .menu-chevron,
.has-mega.is-open > a > .menu-chevron,
.has-mega:focus-within > a > .menu-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Padding pozycji „Kontakty" / „Modlitwy" z mega — taki sam jak has-dropdown
   żeby zachować rytm wizualny w głównej nawigacji */
.main-nav__links li.has-mega > a {
    padding-right: 8px;
}

/* Mega-menu w prawej części nav (Modlitwy/Kontakty) wyrównujemy do prawej krawędzi
   linku, żeby panel nie wyjeżdżał poza viewport na węższych desktopach. */
.main-nav__links li.has-mega > .main-nav__dropdown--mega[data-cols="2"],
.main-nav__links li.has-mega:last-child > .main-nav__dropdown--mega,
.main-nav__links li.has-mega:nth-last-child(-n+2) > .main-nav__dropdown--mega[data-cols="3"] {
    left: auto;
    right: 0;
}

@media (max-width: 1180px) and (min-width: 1024px) {
    .main-nav__dropdown--mega[data-cols="2"] {
        width: min(420px, calc(100vw - 32px));
        min-width: 0;
        grid-template-columns: 1fr;
    }
}

/* Mobile (<1024): drop-downy + mega ukryte — wszystko idzie do drawera */
@media (max-width: 1023px) {
    .main-nav__dropdown,
    .utility-bar__dropdown,
    .main-nav__dropdown--mega,
    .utility-bar__dropdown--mega {
        display: none;
    }
}