/* ============================================================================
   Falah chrome
   Refinements to the Vlog site header that the theme does not provide itself.

   This file used to be four times longer. Most of it was re-stating things the
   theme already writes from Theme Options in dynamic-css.php:

     nav font family/weight  <- nav_font
     nav font size           <- font_size_nav
     link colour             <- color_header_main_txt
     hover / current colour  <- color_header_main_acc
     submenu panel bg        <- color_header_main_bg

   Worse, it bound those colours to --fl-acc and --fl-txt, which are the CONTENT
   palette, so the header ignored its own settings.

   Worse again, it cost width. The theme centres the main nav inside a 1104px
   container, so the nav's budget is 2 x (right-slot-left-edge - container-centre)
   = 710px, and it does not grow with the viewport. Measured on the live site:
   the nav needs 672px at theme defaults and 763px with the old version of this
   file. The 91px difference was letter-spacing (38px), the chevron (39px) and
   2px of extra padding per item (14px). Past that 710px the theme's own JS
   moves the LAST menu item into the "..." overflow and repeats, which is how
   The Path, About and the language switcher all quietly disappeared.

   So: no font, no size, no colours, no padding, no tracking. Only the four
   things the theme genuinely lacks, and the chevron is placed inside the link's
   existing padding so it costs nothing.
   ========================================================================= */

/* Desktop only. Vlog swaps in .vlog-responsive-header at 991px and below via
   Bootstrap 3 visibility classes (header.php carries hidden-xs hidden-sm,
   responsive.php carries hidden-lg hidden-md), so md starts at 992px.
   The previous 1024px here left a dead band from 992 to 1023. */
@media (min-width:992px){

  /* ---------- affordance: which items open something ----------
     The theme gives no visual cue that a top-level item has a submenu until
     the pointer is already on it. This chevron is absolutely positioned inside
     the link's own padding, so it adds 0px to the nav's width. */
  .vlog-site-header .vlog-main-nav > li.menu-item-has-children > a{
    position:relative;
    padding-inline-end:22px;
  }
  .vlog-site-header .vlog-main-nav > li.menu-item-has-children > a::after{
    content:"";position:absolute;
    inset-inline-end:8px;top:50%;margin-top:-4px;
    width:5px;height:5px;
    /* Physical sides on purpose. A downward chevron is not directional, so
       mirroring it in RTL would point it sideways. */
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.45;
    transition:opacity .18s ease,transform .18s ease;
  }
  .vlog-site-header .vlog-main-nav > li.menu-item-has-children:hover > a::after{
    opacity:1;transform:rotate(225deg) translate(-2px,-2px);
  }

  /* ---------- the dropdown panel ----------
     Kept, unlike the rest of the old file, because it costs the nav no width:
     a submenu is absolutely positioned, so it never competes for the 710px.
     The theme offers no options for panel geometry or shadow, so this is not
     duplicating a setting. Colours now come from the HEADER tokens, not the
     content ones, so changing Theme Options > Header > Main moves them. */
  .vlog-site-header .vlog-main-nav .sub-menu{
    min-width:238px;
    padding:10px 0;
    border:1px solid color-mix(in srgb, var(--fl-hdr-acc, #1b4332) 14%, #E8E4DA);
    border-radius:4px;
    box-shadow:0 18px 40px -22px rgba(40,32,18,.42),
               0 2px 6px -2px rgba(40,32,18,.10);
    /* a hairline of brand gold along the top edge, the one flourish */
    background-image:linear-gradient(var(--fl-gold,#C9A227),var(--fl-gold,#C9A227));
    background-size:100% 2px;background-repeat:no-repeat;background-position:top;
  }
  /* second-level panels fly out to the side, not back over the parent */
  .vlog-site-header .vlog-main-nav .sub-menu .sub-menu{
    inset-inline-start:100%;inset-block-start:-11px;
  }
  .vlog-site-header .vlog-main-nav .sub-menu li > a{
    border-inline-start:2px solid transparent;
    transition:background-color .16s ease,border-color .16s ease;
  }
  .vlog-site-header .vlog-main-nav .sub-menu li > a:hover,
  .vlog-site-header .vlog-main-nav .sub-menu li > a:focus-visible{
    background:color-mix(in srgb, var(--fl-hdr-acc, #1b4332) 6%, #fff);
    border-inline-start-color:var(--fl-gold,#C9A227);
  }
  /* NOTE: no `.sub-menu li:hover{padding:0}` here. The theme deliberately shifts
     a hovered row by 20px (main.css: .sub-menu li:hover{padding-left:20px}) and
     the old version of this file flattened that micro-interaction for no reason.
     Text colour on hover is left to the theme, which sets it from
     color_header_main_acc. */

  /* the theme's overflow toggle, kept but made quieter than real destinations */
  .vlog-site-header .vlog-main-nav > li#vlog-menu-item-more > a{opacity:.55}
  .vlog-site-header .vlog-main-nav > li#vlog-menu-item-more:hover > a{opacity:1}
}

/* ---------- keyboard ----------
   The theme reveals submenus on :hover only (main.css .vlog-main-nav li:hover
   > .sub-menu), so a keyboard user tabbing into a parent never sees its
   children. This is the one rule in this file that fixes a real defect rather
   than adding polish. */
.vlog-site-header .vlog-main-nav li:focus-within > .sub-menu{
  visibility:visible;opacity:1;
}
.vlog-site-header .vlog-main-nav a:focus-visible{
  outline:2px solid var(--fl-gold, #C9A227);
  outline-offset:-2px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  /* Drop the animation, keep the state. */
  .vlog-site-header .vlog-main-nav *,
  .vlog-site-header .vlog-main-nav *::after{
    transition:none !important;
  }
}