/* =====================================================================
   our904 — base styles shared across site pages
   ---------------------------------------------------------------------
   Contains the site-wide color palette and the top nav component used
   by fishing-map, fishing-trip-planner, eats, and (optionally) regs.
   Each page may still define its own page-specific styles on top of
   these.  Single source of truth — update colors or nav here once.
   =====================================================================
*/

:root{
  /* Core navy stack — backgrounds / borders */
  --navy-900: #060d1a;
  --navy-800: #0a1628;
  --navy-700: #0f2240;
  --navy-600: #163257;

  /* Brand accents */
  --gold:     #e8a832;
  --gold-dim: #c48a1a;

  /* Teal pair — deep (--teal) for major accents, bright (--teal-lt) for CTAs */
  --teal:     #1a8fa0;
  --teal-lt:  #24b8cf;

  /* Green / red / amber semantic colors */
  --green:    #2e7d52;
  --green-lt: #4caf79;
  --red:      #ef5350;
  --amber:    #ffb74d;

  /* Text tones */
  --white:    #f0f4f8;
  --ink:      #f0f4f8; /* alias for --white, used in build.js generated pages */
  --soft:     #c9d6e3;
  --muted:    #7a94b0;
}

/* ---------------------------------------------------------------------
   Site-wide top nav bar.

   Used on fishing-map.html, fishing-trip-planner.html, eats.html.
   index.html has its own shell nav (.header + .nav-btn buttons) and
   does NOT use .site-nav.

   Default positioning is fixed (overlays the app).  Pages that are
   naturally scrolling (like fishing-trip-planner) override to sticky.
   --------------------------------------------------------------------- */
/* Match landing-page header so the toolbar feels identical site-wide:
   - 64px tall (was 44px)
   - Logo: circle PNG icon + 'our904' wordmark + NORTHEAST FLORIDA subtitle
   - Nav items: bordered button style with hover gold border, active = gold bg */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: var(--navy-800);
  border-bottom: 1px solid var(--navy-700);
}
.site-nav .logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.site-nav .logo .logo-img{
  height: 42px; width: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}
.site-nav .logo .logo-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-nav .logo .logo-name{
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.3px;
}
.site-nav .logo .logo-subtitle{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .3px;
}
.site-nav nav{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.site-nav nav a{
  background: transparent;
  border: 1px solid var(--navy-600);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.site-nav nav a:hover{
  border-color: var(--gold);
  color: var(--white);
  text-decoration: none;
}
.site-nav nav a.active{
  background: var(--gold);
  color: var(--navy-900);
  border-color: var(--gold);
}
/* Icons default to gold (via .icon class). When the link is active —
   meaning gold background — flip the icon to navy so it stays visible. */
.site-nav nav a.active .icon{ color: var(--navy-900); }

/* Give link gets a subtle gold-tint highlight so it stands out from the
   utility nav items without screaming. Less loud than the active state
   (which is full gold) — when the user IS on /give, .active still wins
   because it's defined above and has matching specificity. */
.site-nav nav a.give{
  background: rgba(232, 168, 50, 0.10);
  border-color: rgba(232, 168, 50, 0.5);
  color: var(--gold);
}
.site-nav nav a.give:hover{
  background: rgba(232, 168, 50, 0.18);
  border-color: var(--gold);
  color: var(--white);
}
.site-nav nav a.give.active{
  /* Keep the soft gold-tint look even when on /give.html (Daniel's
     preference 2026-05-14) — the Give button stays visually consistent
     across every page rather than flipping to the loud full-gold fill. */
  background: rgba(232, 168, 50, 0.10);
  border-color: rgba(232, 168, 50, 0.5);
  color: var(--gold);
}
/* Stop the general .active rule from flipping the heart icon to navy
   (the gold-tint background needs the gold icon to stay readable). */
.site-nav nav a.give.active .icon{ color: var(--gold); }

/* Hamburger toggle — hidden on desktop, shown at narrow widths. */
.site-nav .nav-toggle{
  display: none;
  background: transparent;
  border: 1px solid var(--navy-600);
  color: var(--gold);
  width: 44px; height: 44px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, background 0.2s;
}
.site-nav .nav-toggle:hover{ border-color: var(--gold); background: rgba(232,168,50,0.08); }
.site-nav .nav-toggle .menu-icon{ display: block; }
.site-nav .nav-toggle .close-icon{ display: none; }
.site-nav.menu-open .nav-toggle .menu-icon{ display: none; }
.site-nav.menu-open .nav-toggle .close-icon{ display: block; }

/* ---------------------------------------------------------------------
   Mobile breakpoint — at 720px and below, swap the inline nav buttons
   for a hamburger that opens a stacked panel.  Below 720px the full
   button layout doesn't fit cleanly with logo + 5 buttons.  At narrower
   widths (Galaxy S26 Ultra ~412px), the panel is a comfortable
   thumb-tap drop-down covering the right edge.
   --------------------------------------------------------------------- */
@media (max-width: 720px){
  .site-nav{ padding: 0 16px; }
  .site-nav .logo{ gap: 10px; }
  .site-nav .logo .logo-img{ height: 36px; width: 36px; }
  .site-nav .logo .logo-name{ font-size: 16px; }
  .site-nav .logo .logo-subtitle{ display: none; }  /* save horizontal space */

  .site-nav .nav-toggle{ display: inline-flex; }

  /* Hide the inline nav by default; .menu-open reveals it as a dropdown. */
  .site-nav nav{
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--navy-800);
    border-bottom: 1px solid var(--navy-700);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 16px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
  .site-nav.menu-open nav{ display: flex; }

  /* Stacked nav links — full width, larger touch targets. */
  .site-nav nav a{
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;  /* 44px+ tall touch target */
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
   Embed-detect hook.  js/embed-detect.js adds `.in-iframe` to <body>
   when the page is loaded inside the index.html shell's iframe.  CSS
   can then hide the duplicate nav and reclaim the top 64px.
   --------------------------------------------------------------------- */
body.in-iframe .site-nav{ display: none !important; }

/* ---------------------------------------------------------------------
   Icon system.  Use:
     <svg class="icon icon-32" aria-hidden="true">
       <use href="/brand/icons.svg#fish"/>
     </svg>
   Stroke color inherits from `color` (default: brand gold). Override by
   setting `color:` on an ancestor (e.g. `color:var(--teal-lt)`) or on
   the .icon element itself.  All symbols use `stroke="currentColor"` so
   color travels through the <use> reference correctly.
   --------------------------------------------------------------------- */
.icon{
  display:inline-block;vertical-align:middle;
  flex-shrink:0;
  color:var(--gold);
}
.icon-16{width:16px;height:16px}
.icon-18{width:18px;height:18px}
.icon-20{width:20px;height:20px}
.icon-24{width:24px;height:24px}
.icon-28{width:28px;height:28px}
.icon-32{width:32px;height:32px}
.icon-40{width:40px;height:40px}
.icon-44{width:44px;height:44px}
.icon-48{width:48px;height:48px}

/* Use as inline-with-text alongside button labels — slight optical lift. */
.icon-inline{margin-right:6px;transform:translateY(-1px)}

/* ---------------------------------------------------------------------
   Visually hidden but accessible to screen readers and search engines.
   Used for H1 tags on map/app pages where a visible page-level title
   would disrupt the layout (e.g. fishing-map.html). Standard SR-only
   technique — Google indexes these as legitimate H1s.
   --------------------------------------------------------------------- */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}