/* =============================================
   masthead.css  v1
   Site masthead (logo, utility row, primary row, Learn and Search
   panels) and the phone side drawer. Extracted from index.html so
   every live page shares one copy. index.html keeps its own inline
   copy and is unchanged.
   Needs: masthead markup, js/masthead.js, and
   <script>document.documentElement.classList.add('js')</script> in <head>.
   Load after main.css. Fonts: Raleway, National Park (main.css).
   ============================================= */

:root {
  --mast-ground: #f3efe6;   /* footer cream: header and footer bookend the page */
  --mast-rule:   #7A463A;   /* redwood, the footer's top rule */
  --mast-ink:    #3f2805;   /* dark brown, the footer heading color */
  --mast-soft:   #7A463A;   /* redwood, the footer link color */
  --mast-accent: #d37e0f;   /* the site orange */
  --mast-current: #a85a00;  /* darker orange for the current page: readable on the cream ground */
  --mast-pad:    20px;      /* phones: lines up with the phone banner title */
}
@media (min-width: 760px) { :root { --mast-pad: 30px; } }   /* lines up with the banner title's 30px inset */

/* Resets for main.css's global ul / li / p / a / button rules, kept at low specificity
   so the component rules below always win */
:where(.mast, .drawer, .hp5-because) ul { list-style: none; margin: 0; padding: 0; max-width: none; line-height: inherit; font-weight: inherit; }
:where(.mast, .drawer, .hp5-because) li { margin: 0; text-align: left; }
:where(.mast, .drawer) p { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
.mast :where(a), .drawer :where(a) { color: var(--mast-ink); text-decoration: none; }
.mast :where(a):hover, .drawer :where(a):hover { color: var(--mast-ink); }
.mast :where(button), .drawer :where(button), .hp5-because :where(button) {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer;
}
.mast :is(a, button, input):focus-visible,
.drawer :is(a, button, input):focus-visible { outline: 2px solid #1b1606; outline-offset: 3px; border-radius: 2px; }

/* ── Skip link ── */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; border-radius: 0 0 6px 6px;
  background: #1b1606; color: #f7f2e4;
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #f7f2e4; outline: 2px solid #ff9c2f; outline-offset: 2px; }
#page-top-content:focus { outline: none; }

/* ── Masthead: phones first (logo + Menu), tablet and desktop below ── */
.mast {
  position: relative;
  z-index: 40;
  background: var(--mast-ground);
  border-bottom: 3px solid var(--mast-rule);
  font-family: 'Raleway', sans-serif;
  color: var(--mast-ink);
}
.mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px var(--mast-pad);
}
.mast-logo { flex: none; display: block; line-height: 0; }
.mast-logo img { display: block; width: auto; height: 48px; max-width: none; margin: 0; }
.mast-nav { display: none; }

.mast-menu-btn,
.mast-nojs-menu {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px 0 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mast-ink);
}
.mast-nojs-menu { display: none; }
html:not(.js) .mast-menu-btn { display: none; }
html:not(.js) .mast-nojs-menu { display: inline-flex; }
.mast-menu-icon { position: relative; display: block; width: 20px; height: 2px; background: currentColor; }
.mast-menu-icon::before,
.mast-menu-icon::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.mast-menu-icon::before { top: -6px; }
.mast-menu-icon::after  { top: 6px; }

/* Utility row (About, Contact, Search) */
.mast-util-link,
.mast-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--mast-soft);
}
.mast-util-link:hover,
.mast-search-btn:hover { color: var(--mast-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mast-search-btn[aria-expanded="true"] { color: var(--mast-ink); }
.mast-search-btn svg { flex: none; width: 15px; height: 15px; }
.mast-home svg { flex: none; width: 15px; height: 15px; }
html:not(.js) .mast-search { display: none; }   /* search needs script; hide it rather than show a dead control */

/* Primary row (Identify, Species, Range Maps, Learn): National Park caps, like the banner title */
.mast-link,
.mast-learn-btn,
.mast-nojs-learn {
  position: relative;
  align-items: center;
  padding: 12px 0 17px;
  font-family: 'National Park', 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mast-ink);
}
.mast-link,
.mast-learn-btn { display: inline-flex; }
.mast-nojs-learn { display: none; }
html:not(.js) .mast-learn-btn { display: none; }
html:not(.js) .mast-nojs-learn { display: inline-flex; }
/* hover or open: an underline under the word. Current page (or section): bold dark orange. */
.mast-link:hover,
.mast-nojs-learn:hover,
.mast-learn-btn:hover,
.mast-learn-btn[aria-expanded="true"] {
  text-decoration: underline;
  text-decoration-color: var(--mast-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.mast-link[aria-current],
.mast-learn-btn[aria-current],
.mast-nojs-learn[aria-current],
.mast-util-link[aria-current] {
  font-weight: 700;
  color: var(--mast-current);
}
.mast-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: -5px 1px 0 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.mast-learn-btn[aria-expanded="true"] .mast-caret { margin-top: 3px; transform: rotate(-135deg); }

/* Panels hang from the header, just below the redwood rule, right-aligned with the nav */
.mast-panel {
  position: absolute;
  top: 100%;
  right: var(--mast-pad);
  margin-top: 3px;
  z-index: 45;
  background: var(--mast-ground);
  border: 1px solid rgba(122, 70, 58, .22);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 40px rgba(20, 14, 4, .35);
  text-align: left;
  white-space: normal;
}
.mast-panel[hidden] { display: none; }

.mast-learn-panel { width: min(740px, calc(100vw - 2 * var(--mast-pad))); padding: 26px 32px 20px; }
.mast-groups { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 36px; }
.mast-group-label {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mast-soft);
}
.mast-group a { display: block; padding: 6px 0; font-weight: 500; font-size: 16px; line-height: 1.3; white-space: nowrap; color: #1b1606; }
.mast-group a:hover,
.mast-all a:hover { color: #3d8035; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mast-all { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(122, 70, 58, .2); }
.mast-all a { font-weight: 600; font-size: 15px; color: var(--mast-soft); }

.mast-search-panel { width: min(520px, calc(100vw - 2 * var(--mast-pad))); padding: 22px 26px 22px; }

/* Search form (prototype: not connected to a site index) */
.proto-search-label {
  display: block;
  margin-bottom: 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mast-soft);
}
.proto-search-row { display: flex; gap: 10px; }
.proto-search-row input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #b9a98a;
  border-radius: 8px;
  background: #fffdf8;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  color: #1b1606;
}
.proto-search-row input::placeholder { color: #8a7a62; }
.proto-search-row button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  border: 1px solid #b9a98a;
  border-radius: 8px;
  background: transparent;
  color: var(--mast-soft);
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .03em;
}
.proto-search-row button:hover { background: rgba(122, 70, 58, .08); color: var(--mast-ink); }
.proto-search-row button svg { width: 18px; height: 18px; }
.proto-search-note { margin-top: 12px; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.45; color: #5b4a33; }
.proto-search-note:empty { display: none; }

/* Tablet and desktop: the masthead. A meaningful logo on the left; two quiet rows on the right,
   the small utility row above the main destinations. */
@media (min-width: 760px) {
  .mast-inner { align-items: stretch; padding-top: 0; padding-bottom: 0; }
  .mast-logo { align-self: center; margin: 10px 0; }
  .mast-logo img { height: 72px; }
  .mast-menu-btn,
  html:not(.js) .mast-nojs-menu { display: none; }
  .mast-nav { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
  .mast-utility { display: flex; align-items: center; gap: 24px; padding-top: 12px; }
  .mast-primary { display: flex; align-items: flex-end; gap: clamp(24px, 3vw, 44px); }
  .mast-utility > li,
  .mast-primary > li { display: flex; }   /* no text line box, so the orange segment lands exactly on the rule */
}

/* ── Phone side drawer (a modal dialog that slides in from the right) ── */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mast-ground);
  color: var(--mast-ink);
  box-shadow: -14px 0 36px rgba(20, 14, 4, .32);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: 'Raleway', sans-serif;
  transform: translateX(100%);
  transition: transform .26s ease;
}
.drawer.is-open { transform: none; }
.drawer::backdrop { background: rgba(20, 14, 4, .55); }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
html.drawer-open,
html.drawer-open body { overflow: hidden; }

.drawer-inner { min-height: 100%; padding: 0 var(--mast-pad) 30px; }
/* Close sits exactly where Menu was: same bar height, same right edge */
.drawer-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 67px;
  margin: 0 calc(-1 * var(--mast-pad));
  padding: 8px var(--mast-pad);
  border-bottom: 3px solid var(--mast-rule);
}
.drawer-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px 0 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.drawer-x { position: relative; display: block; width: 20px; height: 20px; }
.drawer-x::before,
.drawer-x::after { content: ""; position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: currentColor; transform: rotate(45deg); }
.drawer-x::after { transform: rotate(-45deg); }

.drawer-search { margin: 18px 0 4px; }
.drawer-search .proto-search-row button { width: 48px; padding: 0; }

.drawer-primary { margin-top: 14px; }
.drawer-primary a {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid rgba(122, 70, 58, .16);
  font-family: 'National Park', 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mast-ink);
}
.drawer-group { margin-top: 26px; }
.drawer-group-label {
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mast-soft);
}
.drawer-group a {
  display: flex;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid rgba(122, 70, 58, .12);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: #1b1606;
}
.drawer-all { margin-top: 16px; }
.drawer-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--mast-soft); }
.drawer-utility { display: flex; gap: 30px; margin-top: 22px; padding-top: 4px; border-top: 1px solid rgba(122, 70, 58, .25); }
.drawer-utility a { display: inline-flex; align-items: center; min-height: 46px; font-weight: 500; font-size: 16px; color: var(--mast-soft); }
.drawer-utility a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.drawer-inner a:hover { color: #3d8035; }
.drawer-inner a[aria-current] { font-weight: 700; color: var(--mast-current); }