/**
 * Nav additions — Services mega menu (category columns + emergency banner)
 *                 and About mega menu (promo card + feature grid).
 *
 * ADDITIVE SUPPLEMENT. Loaded after anchor-header.css (dependency declared in
 * inc/enqueue.php) and never replaces it. Every selector below is either a new
 * class (.anchor-nav__svc-cols, .anchor-nav__emergency*) or is scoped to the
 * .anchor-nav__dropdown--services modifier, which exists on exactly one element
 * in the whole theme. Nothing else can be affected.
 *
 * The two overriding rules chain --mega and --services (both live on the same
 * element) so they win on specificity (0,3,0) rather than relying on load order.
 *
 * Vars consumed — all already defined on this site:
 *   --anchor-navy            (inc/colors.php, runtime)   #0b3a52
 *   --anchor-navy-rgb        (inc/colors.php, runtime)   11, 58, 82
 *   --accent-color           (inc/colors.php, runtime)   #14a6df
 *   --accent-rgb             (inc/colors.php, runtime)   20, 166, 223
 *   --anchor-radius-lg       (anchor-header.css)
 *   --anchor-radius-xl       (anchor-header.css)
 *   --anchor-transition-fast (anchor-header.css)
 *   --anchor-font-heading    (Anchor Tools -> Site Config, runtime)
 */

/* The services dropdown stacks: a row of columns, then the emergency bar.
   Overrides .anchor-nav__dropdown--mega's wrapping flex row. */
.anchor-nav__dropdown--mega.anchor-nav__dropdown--services .anchor-nav__dropdown-inner {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1.1rem;
  padding: 1.4rem;
}

/* The column row itself. Wraps rather than overflowing on narrow desktops —
   Bell Road carries 5 columns where the reference theme carries 4. */
.anchor-nav__svc-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.anchor-nav__dropdown--services .anchor-nav__mega-col {
  min-width: 160px;
}

/* Column headings: sentence case with an accent rule, not the muted uppercase
   micro-label the About mega uses. */
.anchor-nav__dropdown--mega.anchor-nav__dropdown--services .anchor-nav__mega-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--anchor-navy);
  white-space: nowrap;
  padding: 0 0 0.45rem;
  margin-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent-color);
}

/* Full-width emergency bar, pinned below the columns. */
.anchor-nav__emergency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  background: var(--anchor-navy);
  color: #fff;
  border-radius: var(--anchor-radius-lg);
  padding: 0.8rem 1.2rem;
}
.anchor-nav__emergency-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.anchor-nav__emergency-label i {
  color: var(--accent-color);
  margin-right: 0.4rem;
}
.anchor-nav__emergency-cta {
  font-size: 0.86rem;
  white-space: nowrap;
  opacity: 0.92;
}
.anchor-nav__emergency:hover .anchor-nav__emergency-cta {
  text-decoration: underline;
}


/* =========================================================================
   About mega menu — promo card + 2-column feature grid.

   Ported from the reference theme's .anchor-nav__dropdown--about. Before this,
   the About dropdown carried --mega but NO second modifier, so the four layout
   rules above (chained to --services) never matched it and its links rendered
   with no column layout at all. It now carries --about.

   The one overriding rule chains --mega and --about (both on the same element)
   so it wins on specificity (0,3,0), not on load order — same rationale as the
   --services block above.
   ========================================================================= */

/* The About dropdown is a single non-wrapping row: promo card, then the grid.
   Overrides .anchor-nav__dropdown--mega's wrapping flex row. */
.anchor-nav__dropdown--mega.anchor-nav__dropdown--about .anchor-nav__dropdown-inner {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1.25rem;
  padding: 1.25rem;
}

/* Accent promo card. Headline comes from Site Config's business.tagline. */
.anchor-nav__promo {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  text-decoration: none;
  background: var(--accent-color);
  color: #fff;
  border-radius: var(--anchor-radius-xl);
  padding: 1.4rem;
}
.anchor-nav__promo-title {
  font-family: var(--anchor-font-heading, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
}
.anchor-nav__promo-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 0.95rem;
  border-radius: 9999px;
  transition: background var(--anchor-transition-fast);
}
.anchor-nav__promo:hover .anchor-nav__promo-btn {
  background: rgba(255, 255, 255, 0.32);
}

/* Two-column feature grid, filled row-wise. */
.anchor-nav__feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 0.35rem 1.25rem;
  align-content: center;
}
.anchor-nav__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  text-decoration: none;
  padding: 0.55rem 0.7rem;
  border-radius: var(--anchor-radius-lg);
  transition: background var(--anchor-transition-fast);
}
.anchor-nav__feature:hover {
  background: rgba(var(--anchor-navy-rgb), 0.045);
}
.anchor-nav__feature-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-color);
  font-size: 0.95rem;
}
.anchor-nav__feature-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.anchor-nav__feature-title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--anchor-navy);
}
.anchor-nav__feature-desc {
  font-size: 0.76rem;
  line-height: 1.3;
  color: rgba(var(--anchor-navy-rgb), 0.55);
}

/* ------------------------------------------------------------------ *
 * New Patients mega — two-column layout (New Patients / Special Offers).
 * Cloned from .anchor-nav__dropdown--services so it matches the Services
 * mega. Generic pieces (__svc-cols, __dropdown-link, __mega-title--link)
 * are inherited; only these three scoped rules are duplicated.
 * ------------------------------------------------------------------ */
.anchor-nav__dropdown--mega.anchor-nav__dropdown--newpatients .anchor-nav__dropdown-inner {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1.1rem;
  padding: 1.4rem;
  width: max-content;
}
.anchor-nav__dropdown--newpatients .anchor-nav__mega-col {
  min-width: 160px;
  /* Two columns only — don't stretch to fill the wide mega shell. */
  flex: 0 0 auto;
}
.anchor-nav__dropdown--mega.anchor-nav__dropdown--newpatients .anchor-nav__mega-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--anchor-navy);
  white-space: nowrap;
  padding: 0 0 0.45rem;
  margin-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent-color);
}


/* ------------------------------------------------------------------ *
 * New Patients mega (2026-07-15, rev3): restored to the true two-column
 * layout (New Patients | Special Offers), matching the Services mega. The
 * single-column width pins from the 2026-07-13 fix and the rev2 plain-list
 * pass are removed, so the base .anchor-nav__svc-cols lays the two columns
 * side by side; each column title carries the blue separator via the
 * --newpatients .anchor-nav__mega-title rule above.
 * ------------------------------------------------------------------ */
.anchor-nav__dropdown--newpatients .anchor-nav__dropdown-link {
	white-space: nowrap;
}
/* Mobile overlay: indent the Special Offers child links (plain text). */
.anchor-mobile-overlay__sub-link--indent {
	padding-left: 1.5rem;
}