/* LuckyFind site header (scripts/site_nav.py + assets/js/luckyfind-nav.js).
   Sticker style: warm paper bar, ink outlines, Fredoka labels, icon tiles tinted by group.
   Desktop (>= 960px): direct links + grouped dropdowns. Narrower: a menu button opens a sheet that lists
   every group as a labelled section. Without JavaScript, dropdowns open on hover/focus. */
.lf-nav { --lf-nav-laws: #e2f0d4; --lf-nav-learn: #d5ecf4; --lf-nav-gear: #f8e2c4; --lf-nav-world: #cdeaf0;
  position: relative; z-index: 900; background: var(--lf-paper, #fdf8ec); border-bottom: 2.5px solid var(--lf-ink, #2b2119);
  color: var(--lf-ink, #2b2119); font: 16px/1.35 var(--lf-bfont, system-ui, sans-serif); }
.lf-nav *, .lf-nav *::before, .lf-nav *::after { box-sizing: border-box; }
.lf-nav [hidden] { display: none !important; }
:where(.lf-nav) :is(ul, p) { margin: 0; padding: 0; }
.lf-nav ul, .lf-nav li { list-style: none; }
.lf-nav a, .lf-nav a:hover { color: inherit; text-decoration: none; }
.lf-nav a:focus-visible, .lf-nav button:focus-visible { outline: 3px solid #a76000; outline-offset: 2px; }
/* Resets sit in :where() so every component rule below wins without !important. */
.lf-nav-top, .lf-nav-toggle { -webkit-appearance: none; appearance: none; }
:where(.lf-nav) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lf-nav-icon, .lf-nav-chev { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.lf-nav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 66px; padding: 9px max(16px, calc((100% - 1100px) / 2)); }
.lf-nav-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; font: 600 23px/1 var(--lf-hfont, system-ui, sans-serif); }
.lf-nav-brand::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--lf-ink, #2b2119); background: url(/assets/img/luckyfind-mark-96.png) center / cover; transition: transform .18s ease; }
.lf-nav-brand:hover::before { transform: rotate(-8deg); }
.lf-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }

/* Top-level pills and buttons */
.lf-nav-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.lf-nav-top:hover, .lf-nav-help:hover { background: var(--lf-sand, #f5ead0); }
.lf-nav-chev { width: 15px; height: 15px; stroke-width: 2.4; transition: transform .18s ease; }
.lf-nav-group.is-current > .lf-nav-top, .lf-nav-solo > .lf-nav-top[aria-current] { background: var(--lf-leaf, #e2f0d4); border-color: var(--lf-ink, #2b2119); }
.lf-nav-group.is-open > .lf-nav-top { background: #fff; border-color: var(--lf-ink, #2b2119); box-shadow: 0 3px 0 var(--lf-ink, #2b2119); }
.lf-nav-group.is-open .lf-nav-chev { transform: rotate(180deg); }
.lf-nav-help { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.lf-nav-help[aria-current] { text-decoration: underline !important; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lf-nav-get { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 17px 0 13px; border: 2.5px solid var(--lf-ink, #2b2119); border-radius: 999px;
  background: var(--lf-green, #2f7d3a); color: #fff !important; font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 3px 0 var(--lf-ink, #2b2119);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.lf-nav-get:hover { background: var(--lf-green-hi, #3f9149); transform: translateY(-1px); box-shadow: 0 4px 0 var(--lf-ink, #2b2119); }
.lf-nav-get:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lf-ink, #2b2119); }
.lf-nav-get .lf-nav-icon { width: 18px; height: 18px; }

/* Icon tiles, label and blurb (dropdown and mobile rows) */
.lf-nav-link { display: flex; align-items: center; gap: 12px; }
.lf-nav-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 2px solid var(--lf-ink, #2b2119); border-radius: 12px;
  background: var(--lf-nav-laws); box-shadow: 0 2px 0 var(--lf-ink, #2b2119); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.lf-nav-learn .lf-nav-tile { background: var(--lf-nav-learn); }
.lf-nav-gear .lf-nav-tile { background: var(--lf-nav-gear); }
.lf-nav-solo .lf-nav-tile { background: var(--lf-nav-world); }
.lf-nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-nav-label { font: 600 16.5px/1.2 var(--lf-hfont, system-ui, sans-serif); }
.lf-nav-blurb { font-size: 13.5px; line-height: 1.35; color: var(--lf-ink-2, #55432f); }
.lf-nav-heading, .lf-nav-more-label { font: 800 12px/1.3 var(--lf-bfont, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--lf-copper, #9a5428); }
.lf-nav-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 2px solid var(--lf-ink, #2b2119); border-radius: 999px; background: #fff;
  font-weight: 700; font-size: 14px; box-shadow: 0 2px 0 var(--lf-ink, #2b2119); transition: background-color .15s ease, transform .12s ease; }
.lf-nav-chip:hover { background: var(--lf-nav-laws); transform: translateY(-1px); }
.lf-nav-chip[aria-current] { background: var(--lf-nav-laws); }
.lf-nav-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-nav-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lf-nav-app, .lf-nav-secondary { display: none; }

@media (min-width: 960px) {
  .lf-nav-menu { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
  .lf-nav-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
  .lf-nav-item { position: relative; }
  .lf-nav-heading, .lf-nav-toggle { display: none; }
  .lf-nav-solo .lf-nav-tile { width: auto; height: auto; border: 0; box-shadow: none; background: none; }
  .lf-nav-solo .lf-nav-tile .lf-nav-icon { width: 19px; height: 19px; }
  .lf-nav-solo .lf-nav-text { display: contents; }
  .lf-nav-solo .lf-nav-label { font: inherit; }
  .lf-nav-solo .lf-nav-blurb { display: none; }
  .lf-nav-solo .lf-nav-link { gap: 6px; padding-inline: 12px 14px; }
  .lf-nav-actions { margin-inline-start: 0; }
  /* Dropdown */
  .lf-nav-panel { display: none; position: absolute; top: 100%; left: 50%; z-index: 2; padding-top: 10px; transform: translateX(calc(-50% + var(--lf-shift, 0px))); }
  .lf-nav-group.is-open .lf-nav-panel { display: block; animation: lfNavDrop .16s ease-out; }
  .lf-nav:not(.is-ready) .lf-nav-group:hover .lf-nav-panel, .lf-nav:not(.is-ready) .lf-nav-group:focus-within .lf-nav-panel { display: block; }
  .lf-nav-card { width: min(38rem, calc(100vw - 32px)); padding: 10px; background: #fff; border: 2.5px solid var(--lf-ink, #2b2119); border-radius: 22px;
    box-shadow: 0 6px 0 var(--lf-ink, #2b2119), 0 26px 40px -22px rgba(43, 33, 25, .45); }
  .lf-nav-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .lf-nav-items .lf-nav-link { align-items: flex-start; padding: 10px 12px; border-radius: 15px; transition: background-color .15s ease; }
  .lf-nav-items .lf-nav-link:hover { background: var(--lf-paper, #fdf8ec); }
  .lf-nav-items .lf-nav-link:hover .lf-nav-tile { transform: rotate(-6deg) scale(1.05); }
  .lf-nav-items .lf-nav-link[aria-current] { background: var(--lf-paper, #fdf8ec); }
  .lf-nav-items .lf-nav-link[aria-current] .lf-nav-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lf-green, #2f7d3a); }
  .lf-nav-items .lf-nav-text { padding-top: 1px; }
  .lf-nav-more { margin: 6px 6px 4px; padding: 12px 6px 4px; border-top: 2px dashed #e3d4b5; }
}
@keyframes lfNavDrop { from { opacity: 0; transform: translateX(calc(-50% + var(--lf-shift, 0px))) translateY(-6px); } }

@media (max-width: 959.98px) {
  .lf-nav-menu { display: none; }
  .lf-nav-help { display: none; }
  .lf-nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 2px solid var(--lf-ink, #2b2119);
    border-radius: 999px; background: #fff; box-shadow: 0 2px 0 var(--lf-ink, #2b2119); }
  .lf-nav-close-icon, .lf-nav-toggle[aria-expanded="true"] .lf-nav-open-icon { display: none; }
  .lf-nav-toggle[aria-expanded="true"] .lf-nav-close-icon { display: block; }
  .lf-nav:not(.is-ready):has(.lf-nav-toggle:focus, .lf-nav-menu:focus-within) .lf-nav-menu,
  .lf-nav.is-menu .lf-nav-menu { display: block; position: fixed; top: var(--lf-nav-top, 66px); left: 0; right: 0; bottom: 0; z-index: 1200; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 16px 28px; background: var(--lf-paper, #fdf8ec); border-top: 2.5px solid var(--lf-ink, #2b2119); animation: lfNavSheet .2s ease-out; }
  .lf-nav-list > li { border-bottom: 2px dashed #e3d4b5; }
  .lf-nav-list > li:last-child { border-bottom: 0; }
  .lf-nav-solo { padding: 6px 0; }
  .lf-nav-solo > .lf-nav-top, .lf-nav-solo > .lf-nav-top[aria-current] { padding: 8px 0; border: 0; border-radius: 0; background: none; white-space: normal; font-weight: inherit; }
  .lf-nav-group { padding: 14px 0 8px; }
  .lf-nav-group > .lf-nav-top { display: none; }
  .lf-nav-heading { padding: 0 0 4px; }
  .lf-nav-link { min-height: 60px; padding: 8px 0; }
  .lf-nav-link::after { content: "\2192"; margin-inline-start: auto; padding-inline-start: 8px; color: var(--lf-copper, #9a5428); font-weight: 700; }
  .lf-nav-link[aria-current] .lf-nav-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lf-green, #2f7d3a); }
  .lf-nav-label { font-size: 18.5px; }
  .lf-nav-solo .lf-nav-label { font-size: 21px; }
  .lf-nav-more { padding: 6px 0 8px; }
  .lf-nav-secondary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .lf-nav-secondary a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border: 2px solid var(--lf-ink, #2b2119); border-radius: 999px; background: #fff; font-weight: 700; }
  .lf-nav-secondary .lf-nav-icon { width: 18px; height: 18px; }
  .lf-nav-app { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; padding: 14px; color: #fff; background: var(--lf-green, #2f7d3a);
    border: 2.5px solid var(--lf-ink, #2b2119); border-radius: 20px; box-shadow: 0 4px 0 var(--lf-ink, #2b2119); }
  .lf-nav-app img { flex: none; width: 44px; height: 44px; border-radius: 11px; border: 2px solid var(--lf-ink, #2b2119); }
  .lf-nav-app p { flex: 1 1 160px; min-width: 0; }
  .lf-nav-app strong { display: block; font: 600 17px/1.2 var(--lf-hfont, system-ui, sans-serif); }
  .lf-nav-app span { display: block; font-size: 13.5px; opacity: .92; }
  .lf-nav-app a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 2px solid var(--lf-ink, #2b2119);
    border-radius: 999px; background: #fff; color: var(--lf-ink, #2b2119) !important; font-weight: 800; box-shadow: 0 2px 0 var(--lf-ink, #2b2119); }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .lf-nav-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 400px) {
  .lf-nav-bar { gap: 8px; padding-inline: 12px; }
  .lf-nav-brand { font-size: 20px; gap: 7px; }
  .lf-nav-brand::before { width: 28px; height: 28px; border-radius: 8px; }
  .lf-nav-get { padding: 0 12px; font-size: 14px; }
  .lf-nav-get .lf-nav-icon { display: none; }
}
@keyframes lfNavSheet { from { opacity: 0; transform: translateY(-10px); } }
html.lf-nav-lock { overflow: hidden; }
/* Homepage hold (site_nav.HOME_NAV): when the shared header is on, the homepage's own header steps aside. */
.lf-nav + #header { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lf-nav *, .lf-nav *::before { animation: none !important; transition: none !important; }
}
@media print { .lf-nav { display: none !important; } }