/* Header refinements — larger signature on mobile, and a drawn burger icon. */

/* ---- signature / logo ---------------------------------------------------
   Base rule is: max-width:300px; width:17vw; min-width:180px. On a phone the
   vw value collapses and min-width does the work, so the logo was pinned at
   180px. Give it more presence. */
@media (max-width: 767px) {
  header svg {
    min-width: 0;
    width: 62vw;
    max-width: 240px;
    margin-top: 14px;
  }
}

/* ---- burger -------------------------------------------------------------
   Only Font Awesome 5 *Free* is bundled, which has no Light weight (and no
   regular-weight fa-bars at all), so there's no thinner glyph to switch to.
   Drawing it gives control over stroke weight and lets it morph to a close
   icon, which the Font Awesome version never did.

   The <i> is the middle bar; its ::before/::after are the outer two. The FA
   glyph is suppressed by emptying ::before's content. */

.navigation-toggle {
  --gw-burger: #FFFFFF;          /* light header variant, over photography */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 0 !important;
  opacity: 1 !important;
}

/* Dark header variant sits on pale backgrounds, so it takes the navy. */
.header-style-dark .navigation-toggle,
.single-recipe .navigation-toggle {
  --gw-burger: #243447;
}

/* The overlay's own header is always on the gold ground. */
#navigation-overlay .navigation-toggle {
  --gw-burger: #243447;
}

.navigation-toggle i,
.navigation-toggle i.fa-bars,
.navigation-toggle i.fa-times {
  position: relative;
  display: block;
  width: 30px;
  height: 1.5px;
  background: var(--gw-burger);
  border-radius: 2px;
  font-size: 0 !important;
  transition: background .2s ease;
}

.navigation-toggle i::before,
.navigation-toggle i::after {
  content: '' !important;        /* kills the Font Awesome glyph */
  position: absolute;
  left: 0;
  height: 1.5px;
  background: var(--gw-burger);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), top .28s cubic-bezier(.2,.7,.3,1), width .28s ease;
}

.navigation-toggle i::before { top: -9px; width: 30px; }
/* the short bottom stroke is what makes it read as designed rather than default */
.navigation-toggle i::after  { top:  9px; width: 19px; }

/* On hover the strokes trade places — the top pulls in, the bottom reaches out.
   The middle stays put so the mark still reads as a menu icon mid-animation. */
.navigation-toggle:hover i::before { width: 20px; }
.navigation-toggle:hover i::after  { width: 30px; }
.navigation-toggle:hover i         { width: 26px; }

/* ---- open state: morph to a close mark, in white ----
   The second selector is needed because #navigation-overlay .navigation-toggle
   above carries an ID and would otherwise out-specify this. */
body.navigation-active .navigation-toggle,
body.navigation-active #navigation-overlay .navigation-toggle {
  --gw-burger: #FFFFFF;
}
body.navigation-active .navigation-toggle i {
  background: transparent;
}
body.navigation-active .navigation-toggle i::before {
  top: 0;
  transform: rotate(45deg);
}
body.navigation-active .navigation-toggle i::after {
  top: 0;
  width: 30px;
  transform: rotate(-45deg);
}

/* ---- full-screen nav: match the header's horizontal padding ----
   The header's content sits 25px from the edge (10px on <header> + 15px from
   .container-fluid). The overlay's menu and footer were sitting at 7-12px, so
   the nav looked narrower than the rest of the page. */
@media (max-width: 991px) {
  #navigation-overlay .navigation-overlay-inner,
  #navigation-overlay .overlay-footer {
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
}

/* The menu <li> carries a 5px left padding of its own, which pushed the link
   text 5px past the logo. Drop it so the type lines up exactly. */
@media (max-width: 991px) {
  #navigation-overlay .navigation-overlay-inner .menu > li { padding-left: 0; }
}

/* ---- nav contrast ----
   On the dark header variant the nav sits on pale ground, where #666666 at 14px
   measured 3.87:1 against the darkest part of the hero photo — under the 4.5:1
   needed for normal text. #4A4A4A takes it to 6.04:1 and still reads as grey
   rather than black. */
.header-style-dark #header .navigation-wrapper .menu a,
.header-style-dark #header .navigation-wrapper .menu a:visited,
.single-recipe #header .navigation-wrapper .menu a {
  color: #4A4A4A;
}