/* ============================================================
 * header site chrome
 * Rendered from resources/views/components/site/header.blade.php
 * ============================================================ */

/* ------------------------------------------------------------------
         "More" nav dropdown — warm editorial styling.
         Sits on a cream background, brass caret, refined hover states.
         ------------------------------------------------------------------ */
      .more-nav__trigger {
        appearance: none;
        background: transparent;
        border: 0;
        padding: 0.35rem 0.55rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.005em;
        color: #171311;
        cursor: pointer;
        border-radius: 8px;
        transition: color 180ms ease, background-color 180ms ease;
      }
      .more-nav__trigger:hover,
      .more-nav__trigger:focus-visible {
        color: #4A2E1F;
        background: rgba(182, 138, 69, 0.09);
        outline: none;
      }
      .more-nav__caret {
        width: 0.75rem;
        height: 0.75rem;
        color: #B68A45;
        transition: transform 200ms ease, color 200ms ease;
      }
      .more-nav__caret.is-open { transform: rotate(180deg); }
      .more-nav__trigger:hover .more-nav__caret { color: #4A2E1F; }

      .more-nav__panel {
        position: absolute;
        top: calc(100% + 0.85rem);
        right: 0;
        z-index: 40;
        min-width: 17rem;
        background: #FFFDFC;
        border: 1px solid #DED4C8;
        border-radius: 16px;
        padding: 0.65rem 0;
        box-shadow:
          0 24px 48px -20px rgba(23, 19, 17, 0.22),
          0 4px 12px -4px rgba(23, 19, 17, 0.08);
      }
      /* Small arrow that points from the trigger up into the panel. */
      .more-nav__panel::before {
        content: '';
        position: absolute;
        top: -7px; right: 1.15rem;
        width: 12px; height: 12px;
        background: #FFFDFC;
        border-left: 1px solid #DED4C8;
        border-top: 1px solid #DED4C8;
        transform: rotate(45deg);
      }
      .more-nav__label {
        font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #B68A45;
        margin: 0 1.25rem 0.35rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #DED4C8;
      }
      .more-nav__list {
        list-style: none;
        margin: 0;
        padding: 0.35rem 0;
      }
      .more-nav__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.62rem 1.25rem;
        font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
        font-size: 0.92rem;
        font-weight: 500;
        color: #171311;
        text-decoration: none;
        border-left: 2px solid transparent;
        transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
      }
      .more-nav__item:hover,
      .more-nav__item:focus-visible {
        background: #F7F1E8;
        color: #4A2E1F;
        border-left-color: #B68A45;
        outline: none;
      }
      .more-nav__item.is-active {
        color: #4A2E1F;
        border-left-color: #B68A45;
        background: rgba(247, 241, 232, 0.6);
      }
      .more-nav__arrow {
        color: #B68A45;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 200ms ease, transform 200ms ease;
        font-size: 0.95rem;
      }
      .more-nav__item:hover .more-nav__arrow,
      .more-nav__item:focus-visible .more-nav__arrow,
      .more-nav__item.is-active .more-nav__arrow {
        opacity: 1;
        transform: translateX(0);
      }

      /* Alpine transition shells */
      .more-nav__enter { transition: opacity 180ms ease, transform 180ms ease; }
      .more-nav__leave { transition: opacity 130ms ease, transform 130ms ease; }

      @media (prefers-reduced-motion: reduce) {
        .more-nav__trigger, .more-nav__caret, .more-nav__item, .more-nav__arrow { transition: none !important; }
      }