/* Primary-nav polish (founder 2026-09-06): the baseline nav was plain text
 * links with a basic white dropdown. This refines desktop hover, the current
 * item, the submenu dropdowns (fade + slide in, hover rows, a chevron on
 * parents, a hover bridge over the gap), and styles the persistent "Sổ tay"
 * quick-access button in the utility bar. Own file, loaded after theme.css and
 * header-fit.css so these rules win by order; the mobile drawer keeps its own
 * accordion styling from theme.css. */

@media (min-width: 981px) {
  .site-nav__list > li > a {
    position: relative;
    font-weight: 600;
    font-size: clamp(12px, 0.9vw, 14px);
    padding: 10px clamp(9px, 0.7vw, 15px);
    transition: color .18s ease, background .18s ease;
  }
  /* Animated underline on hover, echoing the current item's solid underline. */
  .site-nav__list > li > a::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
    background: var(--brand-accent, #EF3E23);
    border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .2s ease;
  }
  .site-nav__list > li > a:hover { background: transparent; color: var(--text-brand, #A52610); }
  .site-nav__list > li > a:hover::after { transform: scaleX(1); }

  /* Current item: use the same underline, drop theme.css's inset box-shadow so
   * a hovered current item does not draw two lines. */
  .site-nav__list > .current-menu-item > a,
  .site-nav__list > .current_page_item > a,
  .site-nav__list > .current-menu-ancestor > a { box-shadow: none; color: var(--text-brand, #A52610); }
  .site-nav__list > .current-menu-item > a::after,
  .site-nav__list > .current_page_item > a::after,
  .site-nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); }

  /* Chevron on items that open a submenu. */
  .site-nav__list .menu-item-has-children > a { padding-right: 26px; }
  .site-nav__list .menu-item-has-children > a::before {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .5; transition: transform .2s ease, opacity .2s ease;
  }
  .site-nav__list .menu-item-has-children:hover > a::before,
  .site-nav__list .menu-item-has-children:focus-within > a::before {
    opacity: 1; transform: translateY(-30%) rotate(45deg);
  }

  /* Dropdown: laid out always; visibility/opacity animate the reveal. */
  .site-nav__list .sub-menu {
    display: block;
    visibility: hidden; opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    margin-top: 10px; padding: 6px;
    min-width: 224px;
    border-color: var(--border-subtle, #E1E4E8);
    box-shadow: 0 14px 34px rgba(40, 51, 80, .17);
  }
  .site-nav__list .sub-menu::before { /* invisible bridge so the gap does not drop the menu */
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  }
  .site-nav__list li:hover > .sub-menu,
  .site-nav__list li:focus-within > .sub-menu {
    visibility: visible; opacity: 1; transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
  }
  .site-nav__list .sub-menu a {
    border-radius: 6px;
    color: var(--text-heading, #283350);
    font-size: 13.5px; font-weight: 500;
    padding: 9px 12px;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
  }
  .site-nav__list .sub-menu a:hover {
    background: var(--surface-sunken, #F1F3F6);
    color: var(--text-brand, #A52610);
    padding-left: 15px;
  }
  .site-nav__list .sub-menu .current-menu-item > a { color: var(--text-brand, #A52610); font-weight: 700; }
}

/* Persistent "Sổ tay" quick-access button in the header utility bar, for the
 * newcomer whose first job is practical life help. Distinct pill, not a plain
 * link, so it reads as an offered resource. */
.site-utilitybar__handbook {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-full, 999px);
  font-size: 13px; font-weight: 700;
  /* Amber fill, navy ink. Amber is the palette's one warm highlight and this
   * pill is small enough to stay inside the ~10% warm budget the token file
   * sets. Red was the other candidate and is wrong here: red beside the amber
   * elsewhere in the bar reads as the national flag, which the brand rules
   * rule out for a non-governmental body. */
  background: var(--brand-highlight, #FCB415);
  color: var(--brand-primary, #283350);
  text-decoration: none;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(40,51,80,.08));
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  white-space: nowrap;
}
.site-utilitybar__handbook:hover,
.site-utilitybar__handbook:focus-visible {
  background: var(--amber-600, #E09A0C);
  color: var(--brand-primary, #283350);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(40,51,80,.14));
  transform: translateY(-1px);
}
.site-utilitybar__handbook:active { transform: translateY(0); }
.site-utilitybar__handbook svg { width: 15px; height: 15px; flex: none; }

/* Language switcher as a segmented control: one bordered track, the active
 * language filled navy. The old version was three muted text links that
 * readers did not register as a control at all. Flags come from Polylang
 * (show_flags), so this only has to size and align them. */
.site-lang--pills {
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-radius: var(--radius-full, 999px);
  background: var(--surface-card, #fff);
}
.site-lang--pills .lang-item { display: flex; }
.site-lang--pills a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full, 999px);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted, #5B6270);
  transition: background .15s ease, color .15s ease;
}
.site-lang--pills a:hover { background: var(--surface-sunken, #F1F3F6); color: var(--text-heading, #283350); }
.site-lang--pills .current-lang a {
  background: var(--brand-primary, #283350);
  color: #fff;
  font-weight: 700;
}
/* Polylang emits the flag as a 16x11 base64 PNG carrying inline width/height,
 * which no stylesheet rule can beat, so leave the size alone and only fix what
 * is overridable: the inline margin on the label span, and the hard edges. */
.site-lang--pills img {
  display: block; flex: none;
  margin: 0 !important;
  border-radius: 2px;
}
.site-lang--pills span { margin: 0 !important; }
/* Below 980px the switcher is the only thing left in the utility bar, pinned
 * at the top of the screen with the sticky header (it used to be repeated
 * inside the drawer instead, a tap away behind the hamburger). Bigger than the
 * desktop pills so the target is comfortable on a phone, but deliberately
 * short of the 44px used elsewhere on mobile: this bar is on screen for the
 * whole session, so its height is paid on every screen. A pill ends up roughly
 * 56x30, well past the 24x24 WCAG 2.5.8 asks for. */
@media (max-width: 980px) {
  .site-utilitybar .site-lang--pills a { padding: 6px 12px; font-size: 13px; }
}