/**
 * Navigation Dropdown Styles — nav-dropdown-styles.css
 *
 * Five sub-menu appearances for core/navigation.
 * Applied via .nav-dropdown-{style} on the nav wrapper (PHP render filter).
 * Colors reference palette CSS custom properties for dual-palette compatibility.
 * Hover colors inherit --oi-nav-hover-bg and --oi-nav-hover-text from the
 * Nav Item Hover panel when set, with palette defaults as fallback.
 *
 * Styles:
 *   madridsky  — Arrow Indicator  (legacy slug kept for backward compat)
 *   minimal    — Clean Minimal
 *   elevated   — Elevated Card
 *   lined      — Left Accent Line
 *   pill       — Pill Fill
 */

/* ── Shared base resets ──────────────────────────────────────────────── */

.nav-dropdown-madridsky .wp-block-navigation__submenu-container,
.nav-dropdown-minimal   .wp-block-navigation__submenu-container,
.nav-dropdown-elevated  .wp-block-navigation__submenu-container,
.nav-dropdown-lined     .wp-block-navigation__submenu-container,
.nav-dropdown-pill      .wp-block-navigation__submenu-container {
    /* Dropdown panel gets its OWN colors, independent of the top-level nav.
       --oi-nav-dropdown-bg / --oi-nav-dropdown-text come from the Dropdown
       Style panel; palette defaults keep it readable when unset. */
    background-color: var( --oi-nav-dropdown-bg, var( --wp--preset--color--palette-9 ) );
    border:           none;
    min-width:        var( --oi-nav-dropdown-width, 220px );
}

/* Custom dropdown width — works independently of the sub-menu style above.
   When the user sets `Dropdown width` in the inspector, the value is inlined
   on the nav wrapper as `--oi-nav-dropdown-width` AND the wrapper receives
   the `oi-nav--has-dropdown-width` class. We use !important because WP
   layers its own min-width on the sub-menu container at the same specificity
   level, plus inline styles in some block variants. */
.oi-nav--has-dropdown-width .wp-block-navigation__submenu-container,
.wp-block-navigation[style*="--oi-nav-dropdown-width"] .wp-block-navigation__submenu-container {
    min-width: var( --oi-nav-dropdown-width ) !important;
    width:     var( --oi-nav-dropdown-width );
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.nav-dropdown-minimal   .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.nav-dropdown-elevated  .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.nav-dropdown-lined     .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.nav-dropdown-pill      .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    /* Explicit base color so dropdown items never inherit the top-level nav
       color (e.g. the white text forced by the transparent-overlay header). */
    color: var( --oi-nav-dropdown-text, var( --wp--preset--color--palette-3 ) );
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.nav-dropdown-minimal   .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.nav-dropdown-elevated  .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.nav-dropdown-lined     .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.nav-dropdown-pill      .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    text-decoration: none;
}

/* ── Arrow Indicator (madridsky) ─────────────────────────────────────── */

.nav-dropdown-madridsky .wp-block-navigation__submenu-container {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px;
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: var( --oi-nav-dropdown-text, var( --wp--preset--color--palette-3 ) );
    text-align: left;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: var( --oi-nav-dropdown-font-size, 0.9rem );
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
    text-align: left;
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: '\2192';
    margin-left: auto;
    opacity: 0;
    transform: translateX( -6px );
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size: 0.85em;
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-9 ) ) );
    flex-shrink: 0;
    margin-left: 6px;
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background-color: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-9 ) ) );
}

.nav-dropdown-madridsky .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    opacity: 1;
    transform: translateX( 0 );
}

/* ── Minimal ─────────────────────────────────────────────────────────── */

.nav-dropdown-minimal .wp-block-navigation__submenu-container {
    border: 1px solid var( --wp--preset--color--palette-6 ) !important;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
    border-radius: 4px;
    padding: 4px 0;
}

.nav-dropdown-minimal .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 9px 16px;
    font-size: var( --oi-nav-dropdown-font-size, 0.9rem );
    transition: color 0.15s ease;
}

.nav-dropdown-minimal .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) ) );
}

/* ── Elevated Card ───────────────────────────────────────────────────── */

.nav-dropdown-elevated .wp-block-navigation__submenu-container {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 ), 0 2px 6px rgba( 0, 0, 0, 0.06 );
    padding: 6px;
    min-width: 240px;
}

.nav-dropdown-elevated .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 9px 14px;
    font-size: var( --oi-nav-dropdown-font-size, 0.9rem );
    transition: color 0.15s ease, transform 0.18s ease;
}

.nav-dropdown-elevated .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) ) );
    transform: translateX( 4px );
}

/* ── Left Accent Line ────────────────────────────────────────────────── */

.nav-dropdown-lined .wp-block-navigation__submenu-container {
    box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
    border-radius: 0;
    padding: 4px 0;
}

.nav-dropdown-lined .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 9px 16px;
    font-size: var( --oi-nav-dropdown-font-size, 0.9rem );
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.nav-dropdown-lined .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    border-left-color: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) ) );
    padding-left: 20px;
}

/* ── Pill Fill ───────────────────────────────────────────────────────── */

.nav-dropdown-pill .wp-block-navigation__submenu-container {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
    padding: 6px;
}

.nav-dropdown-pill .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    border-radius: 999px;
    padding: 7px 16px;
    font-size: var( --oi-nav-dropdown-font-size, 0.9rem );
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown-pill .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background-color: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    color: var( --oi-nav-dropdown-hover-text, var( --oi-nav-hover-text, var( --wp--preset--color--palette-9 ) ) );
}

/* ── Dropdown text typography — style-agnostic ───────────────────────── */
/* Set from the Dropdown Style panel via inline CSS variables on the nav
   wrapper. No fallbacks on purpose: when a variable isn't defined the
   declaration is invalid and inherited/native styling applies, so these
   work with every sub-menu style including Default. (Per-style font-size
   rules above are more specific and reference the same variable.) */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: var( --oi-nav-dropdown-font-family );
    font-size: var( --oi-nav-dropdown-font-size );
    font-weight: var( --oi-nav-dropdown-font-weight );
    font-style: var( --oi-nav-dropdown-font-style );
    letter-spacing: var( --oi-nav-dropdown-letter-spacing );
    text-transform: var( --oi-nav-dropdown-text-transform );
}

/* ── Dropdown colors — style-agnostic ────────────────────────────────── */
/* Same [style*=…] gating as the width rule above so the Dropdown Colors
   settings also apply when the sub-menu style is Default (no
   .nav-dropdown-* class on the wrapper). !important on the background
   mirrors the width rule — core layers its own submenu background at the
   same specificity. */
.wp-block-navigation[style*="--oi-nav-dropdown-bg"] .wp-block-navigation__submenu-container {
    background-color: var( --oi-nav-dropdown-bg ) !important;
}

.wp-block-navigation[style*="--oi-nav-dropdown-text:"] .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var( --oi-nav-dropdown-text );
}

.wp-block-navigation[style*="--oi-nav-dropdown-hover-text"] .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-dropdown-hover-text );
}