/* nav-mega.css — desktop mega / dropdown navigation for the microsite header.
   CSS-only hover dropdowns. Mobile nav lives in the layout's mobile drawer. */

.ms-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: center;
}

.ms-nav-list > li {
  position: relative;
  display: flex;
}

.ms-nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}

.ms-nav-list > li > a:hover,
.ms-nav-list > li.is-active > a {
  color: var(--accent);
}

.ms-nav-list > li.ms-dd-parent:hover > a {
  border-bottom-color: var(--accent);
}

.ms-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform .12s ease;
}
.ms-dd-parent:hover .ms-caret { transform: rotate(180deg); }

/* ---- Dropdown panel ---- */
.ms-dd {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(11, 14, 20, 0.20), 0 3px 10px rgba(11, 14, 20, 0.08);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
}
.ms-dd-parent:hover > .ms-dd {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* right-aligned dropdowns (for nav items near the right edge) */
.ms-dd--right { left: auto; right: 0; }

.ms-dd-head {
  background: #0b0e14;
  color: #fff;
  font-family: var(--font-mono), monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 16px;
}

.ms-dd-links {
  display: grid;
  gap: 2px 14px;
  padding: 12px 16px 14px;
}
.ms-dd-links a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 5px 6px;
  border-radius: 5px;
  line-height: 1.3;
  transition: background .1s ease, color .1s ease;
}
.ms-dd-links a:hover { background: var(--paper-2); color: var(--accent); }
.ms-dd-links a::before {
  content: "\203A";        /* › */
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Display-Ad supplements dropdown ---- */
.ms-dd--supps { width: 340px; }
.ms-dd--supps .ms-dd-links { grid-template-columns: 1fr 1fr; }

/* ---- Simple dropdowns (About / Tariff) ---- */
.ms-dd--simple { width: 230px; }
.ms-dd--simple .ms-dd-links { grid-template-columns: 1fr; }

/* ---- Ad Rates mega dropdowns (By Category / By Location) ---- */
.ms-dd--rates { width: 600px; }
.ms-dd--rates .ms-dd-section + .ms-dd-section { border-top: 1px solid var(--rule); }
.ms-dd--rates .ms-dd-links { grid-template-columns: 1fr 1fr 1fr; }
/* By Category — fewer, wider columns so long category names fit on one line */
.ms-dd--cat .ms-dd-links { grid-template-columns: 1fr 1fr; }

/* ============================================================
   Mobile drawer — accordion submenus
   ============================================================ */
.ms-m-acc-panel { display: none; }
.ms-m-acc.is-open .ms-m-acc-panel { display: block; }
.ms-m-acc-links a {
  display: block;
  padding: 8px 12px 8px 26px;
  font-size: 13px;
  color: var(--ink-2);
}
.ms-m-acc-links a:hover { color: var(--accent); }

/* By Category on mobile: a 2-column grid of chip-style links so the long list
   stays compact instead of one tall scrolling column. The grid display is applied
   only when the accordion is open, so the panel still collapses when closed
   (a bare `.ms-m-acc-grid { display:grid }` would override the panel's display:none). */
.ms-m-acc-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 16px 14px;
}
.ms-m-acc.is-open .ms-m-acc-grid { display: grid; }
.ms-m-acc-grid a {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 9px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-m-acc-grid a:active,
.ms-m-acc-grid a:hover { color: var(--accent); border-color: var(--accent); }