/**
 * HF Staging Desktop Nav — Shop + Delivery Areas mega-dropdowns.
 * Desktop only (≥1000px). Does not affect mobile menu / hamburger drawer.
 */

:root {
  --hf-dn-ink: #271f18;
  --hf-dn-muted: #796f64;
  --hf-dn-surface: #fffaf1;
  --hf-dn-line: #e5d9c8;
  --hf-dn-accent: #c9432b;
  --hf-dn-accent-soft: #f8e4da;
  --hf-dn-hover-bg: #f8eee1;
  /* Match site brand / --font-title (not Instrument Serif). */
  --hf-dn-display: var(--font-title, "Playfair Display", Georgia, serif);
  --hf-dn-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Inactive / mobile: no mega chrome */
@media (max-width: 999px) {
  .hf-dn-chevron,
  .hf-dn-mega {
    display: none !important;
  }
}

@media (min-width: 1000px) {
  /*
   * Mega is nested under .nectar-global-section.after-nav (sticky, z-index ~999).
   * City heroes (e.g. Greenpoint .hero) use z-index ~9998 and paint OVER the
   * overflowing mega bottom. Raising only .hf-dn-region is not enough — the
   * whole sticky header stack must beat the hero stacking context.
   */
  .hf-dn-region {
    position: relative;
    z-index: 100050;
    overflow: visible !important;
  }

  body.hf-dn-mega-open #header-outer,
  body.hf-dn-mega-open .nectar-global-section.after-nav,
  body.hf-dn-mega-open .nectar-global-section.after-nav.zindex-set,
  body.hf-dn-mega-open .site_header,
  body.hf-dn-mega-open .wpb_row.site_header,
  body.hf-dn-mega-open .hf-dn-region,
  body.hf-dn-mega-open .hf-dn-region.wpb_row,
  body.hf-dn-mega-open .main_head {
    z-index: 100200 !important;
    overflow: visible !important;
  }

  body.hf-dn-mega-open .nectar-global-section.after-nav {
    /* keep sticky; just win the stack over .hero */
    position: sticky;
  }

  #menu-header-main-menu > .menu-item.hf-dn-trigger {
    position: relative;
  }

  #menu-header-main-menu > .menu-item.hf-dn-trigger > a {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }

  #menu-header-main-menu > .menu-item.hf-dn-trigger > a.hf-dn-open,
  #menu-header-main-menu > .menu-item.hf-dn-trigger > a:hover,
  #menu-header-main-menu > .menu-item.hf-dn-trigger > a:focus-visible {
    color: var(--hf-dn-accent);
  }

  .hf-dn-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.16s ease;
  }

  .hf-dn-trigger > a.hf-dn-open .hf-dn-chevron {
    transform: rotate(180deg);
  }

  .hf-dn-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 100100;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid var(--hf-dn-line);
    border-top: 3px solid var(--hf-dn-accent);
    border-radius: 0 0 1rem 1rem;
    background: var(--hf-dn-surface);
    color: var(--hf-dn-ink);
    font-family: var(--hf-dn-sans);
    box-shadow: 0 1.25rem 3rem rgba(39, 31, 24, 0.18);
    grid-template-columns: 15rem 1fr;
    gap: 1rem;
    pointer-events: auto;
  }

  .hf-dn-mega.is-open {
    display: grid;
  }

  .hf-dn-mega__intro {
    border-right: 1px solid var(--hf-dn-line);
    padding: 0.35rem 1.1rem 0.35rem 0.15rem;
  }

  .hf-dn-mega__intro small {
    display: block;
    color: var(--hf-dn-accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.62rem;
    font-weight: 700;
  }

  .hf-dn-mega__intro h2 {
    margin: 0.45rem 0 0;
    font-family: var(--hf-dn-display);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--hf-dn-ink);
  }

  .hf-dn-mega__intro p {
    margin: 0.55rem 0 0;
    color: var(--hf-dn-muted);
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .hf-dn-mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.12rem 0.25rem;
    align-content: start;
  }

  .hf-dn-link {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    min-height: 2.4rem;
    margin: 0;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--hf-dn-ink);
    text-align: left;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
  }

  .hf-dn-link:hover,
  .hf-dn-link:focus-visible {
    border-color: var(--hf-dn-line);
    color: var(--hf-dn-accent);
    background: var(--hf-dn-hover-bg);
    outline: none;
  }

  .hf-dn-link__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hf-dn-link__chevron {
    width: 0.75rem;
    height: 0.75rem;
    color: #aa9f92;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hf-dn-link:hover .hf-dn-link__chevron,
  .hf-dn-link:focus-visible .hf-dn-link__chevron {
    color: var(--hf-dn-accent);
  }

  .hf-dn-cat-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    display: grid;
    place-items: center;
    color: #8f5619;
    background: #f5eee4;
    flex: none;
  }

  .hf-dn-cat-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hf-dn-link.tone-blue .hf-dn-cat-icon,
  .hf-dn-link.tone-cyan .hf-dn-cat-icon {
    color: #1767af;
    background: #eaf2f8;
  }

  .hf-dn-link.tone-purple .hf-dn-cat-icon {
    color: #4e178f;
    background: #f0e8f5;
  }

  .hf-dn-link.tone-red .hf-dn-cat-icon {
    color: #6f140f;
    background: #f5eae7;
  }

  .hf-dn-link.tone-stone .hf-dn-cat-icon {
    color: #62533e;
    background: #eeeae2;
  }

  .hf-dn-link.tone-green .hf-dn-cat-icon {
    color: #27733a;
    background: #e9f0e7;
  }

  .hf-dn-link.tone-orange .hf-dn-cat-icon {
    color: #9b5b20;
    background: #f7ede4;
  }

  .hf-dn-pin-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--hf-dn-accent);
    background: var(--hf-dn-accent-soft);
    flex: none;
  }

  .hf-dn-pin-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (max-width: 1280px) {
    .hf-dn-mega {
      grid-template-columns: 12.5rem 1fr;
      left: 0.75rem;
      right: 0.75rem;
    }

    .hf-dn-mega__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}