/* =========================================================================
   GetFoodies (getfoodies.com) - the ONE header, footer and cookie banner of every page.
   Markup: src/chrome.mjs (chromeHeader / chromeFooter). Loaded by every page, AFTER the page
   stylesheet (home.css or site.css), and scoped to .gf-chrome so page styles can't change it.
   Values are the new home page's (storyboard rework). Do not restyle the header elsewhere.
   ========================================================================= */
@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('/assets/fonts/mona-sans.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }

.gf-chrome, .cookie-banner, .skip {
  --green: #003024; --green-700: #04402F; --green-800: #002B21; --lime: #A8F140; --lime-600: #98E02C;
  --soft: #D7F9A7; --cream: #F3F0E8; --burgundy: #552208; --burgundy-700: #6B2C0B; --ink: #10281F;
  --on-dark: #F3F0E8; --on-dark-muted: #D3DDD6;
  --radius-btn: 10px; --maxw: 1200px; --pad: clamp(16px, 5vw, 64px);
  font-family: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: normal;
}
/* Resets so page styles (site.css h2/p/ul/a/img rules) can't leak in */
.gf-chrome *, .gf-chrome *::before, .gf-chrome *::after { box-sizing: border-box; }
.gf-chrome p, .gf-chrome h2, .gf-chrome ul { margin: 0; padding: 0; }
.gf-chrome h2 { font-weight: 400; line-height: 1.06; letter-spacing: normal; text-transform: none; }
.gf-chrome a { color: inherit; text-transform: none; letter-spacing: normal; }
.gf-chrome img { max-width: 100%; height: auto; display: block; }
.gf-chrome .container, .cookie-banner .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.gf-chrome :focus-visible, .cookie-banner :focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* Buttons (same as the home page's .btn) */
.gf-chrome .btn, .cookie-banner .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 17px/1.1 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none; text-align: center; text-transform: none; letter-spacing: normal;
  padding: 16px 26px; min-height: 48px; border-radius: var(--radius-btn); border: 2px solid transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gf-chrome .btn:hover, .cookie-banner .btn:hover { transform: translateY(-1px); }
.gf-chrome .btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .gf-chrome .btn:hover, .cookie-banner .btn:hover { transform: none; } }

/* ---- From the home page (extracted from home.css; the home no longer styles these itself) ---- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--lime); color: var(--green); padding: 10px 16px; border-radius: var(--radius-btn); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.gf-chrome.nav .btn--primary, .gf-chrome .mobile-menu .btn--primary, .cookie-banner .btn--primary { background: var(--lime); color: var(--green); }
.gf-chrome.nav .btn--primary:hover, .gf-chrome .mobile-menu .btn--primary:hover, .cookie-banner .btn--primary:hover { background: var(--lime-600); }
.gf-chrome.nav :focus-visible, .gf-chrome .mobile-menu :focus-visible, .cookie-banner :focus-visible, .gf-chrome.footer :focus-visible { outline-color: var(--cream); }
/* No backdrop-filter: it makes the header the containing block of the fixed mobile menu and clipped the menu to 0px. */
.gf-chrome.nav { position: sticky; top: 0; z-index: 100; background: var(--green); border-bottom: 1px solid rgba(255,255,255,.08); }
.gf-chrome.nav.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.gf-chrome .nav__inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.gf-chrome .nav__logo { display: inline-flex; }
.gf-chrome .nav__logo img { height: 34px; width: auto; }
.gf-chrome .nav__links { display: flex; gap: 24px; margin-left: auto; }
.gf-chrome .nav__links a, .gf-chrome .nav__login { color: var(--on-dark-muted); font-weight: 600; font-size: 16px; text-decoration: none; }
.gf-chrome .nav__links a:hover, .gf-chrome .nav__login:hover { color: var(--lime); }
.gf-chrome .nav__cta { display: flex; gap: 14px; align-items: center; }
.gf-chrome .nav__cta .btn { padding: 11px 18px; font-size: 16px; min-height: 44px; }
.gf-chrome .nav__toggle { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; background: none; border: 0; padding: 12px; cursor: pointer; }
.gf-chrome .nav__toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.gf-chrome .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.gf-chrome .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gf-chrome .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.gf-chrome .mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 12px var(--pad) 24px; background: var(--green-800); position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 99; overflow-y: auto; }
.gf-chrome .mobile-menu[hidden] { display: none; }
.gf-chrome .mobile-menu a:not(.btn) { color: #fff; font-weight: 600; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.gf-chrome .mobile-menu .btn { margin-top: 12px; }
.gf-chrome.footer { background: var(--green-800); color: var(--on-dark-muted); padding-top: clamp(48px, 6vw, 72px); }
.gf-chrome .footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 36px; }
.gf-chrome .footer__logo { width: 160px; height: auto; }
.gf-chrome .footer__tagline { margin-top: 16px; max-width: 280px; font-size: 16px; }
.gf-chrome .footer__col h2 { font-family: var(--font-body); font-weight: 700; color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.gf-chrome .footer__col a, .gf-chrome .footer__col span { display: block; color: var(--on-dark-muted); font-size: 16px; padding: 7px 0; text-decoration: none; }
.gf-chrome .footer__col a:hover { color: var(--lime); }
.gf-chrome .footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px; font-size: 16px; color: #B9C7BF; }
.gf-chrome .footer__legal p + p { margin-top: 8px; }
.gf-chrome .footer__legal a { color: inherit; text-underline-offset: 3px; }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--green-800); color: #fff; border-top: 1px solid rgba(168,241,64,.25); box-shadow: 0 -12px 30px rgba(0,0,0,.22); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; align-items: center; gap: 20px; padding-block: 16px; flex-wrap: wrap; }
.cookie-banner__text { flex: 1 1 320px; font-size: 16px; color: var(--on-dark-muted); line-height: 1.5; }
.cookie-banner__text a { color: var(--lime); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner__actions .btn { padding: 11px 22px; font-size: 16px; }
@media (max-width: 880px) {
  .gf-chrome .nav__links, .gf-chrome .nav__cta { display: none; }
  .gf-chrome .nav__toggle { display: flex; }
  .gf-chrome .footer__inner { grid-template-columns: 1fr 1fr; }
  .gf-chrome .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .gf-chrome .footer__inner { grid-template-columns: 1fr; }
  .gf-chrome .footer__col a, .gf-chrome .footer__col span { padding: 11px 0; }
}
@media (max-width: 640px) {
  .gf-chrome.footer { padding-top: 36px; }
  .gf-chrome .footer__inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-bottom: 20px; }
  .gf-chrome .footer__brand { grid-column: 1 / -1; }
  .gf-chrome .footer__col:last-child { grid-column: 1 / -1; }
  .gf-chrome .footer__col a, .gf-chrome .footer__col span { padding: 8px 0; }
  .gf-chrome .footer__logo { width: 120px; }
  .gf-chrome .footer__tagline { margin-top: 8px; }
  .gf-chrome .footer__legal { padding-block: 16px; }
  .gf-chrome .footer__col.footer__col--dup { display: none; }
  .gf-chrome .footer__inner { grid-template-columns: 1fr; }
  .gf-chrome .footer__col { display: flex; flex-wrap: wrap; column-gap: 18px; }
  .gf-chrome .footer__col h2 { width: 100%; margin-bottom: 2px; }
  .gf-chrome .footer__col a, .gf-chrome .footer__col span { padding: 7px 0; }
}
.gf-chrome .lang-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); }
.gf-chrome .lang-sw a { color: var(--on-dark-muted); font-weight: 700; font-size: 16px; text-decoration: none; padding: 6px 10px; border-radius: 999px; min-width: 44px; text-align: center; }
.gf-chrome .lang-sw a[aria-current="true"] { background: var(--soft); color: var(--green); }
.gf-chrome .lang-sw a:hover { color: var(--lime); }
.gf-chrome .lang-sw a[aria-current="true"]:hover { color: var(--green); }
.gf-chrome .mobile-menu .lang-sw { align-self: flex-start; margin-top: 12px; }
.gf-chrome .mobile-menu .lang-sw a { border-bottom: 0; padding: 8px 14px; }
.cookie-banner .btn-lime { background: var(--lime); color: var(--green); }
.cookie-banner .btn-lime:hover { background: var(--lime-600); }
.cookie-banner .btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.cookie-banner .btn-ghost:hover { background: rgba(243,240,232,.14); }
.cookie-banner__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* Social links (Contact column) */
.gf-chrome .footer__social { display: flex; flex-wrap: wrap; column-gap: 16px; margin-top: 4px; }
.gf-chrome .footer__social a { display: inline-block; }
/* 404 */
.nf{text-align:center;padding-block:40px}.nf img{margin:0 auto 12px}