/* Floating glass pill header, shared by every public page.

   The site has three copy-pasted header markups. Rather than rewrite all of
   them, this sheet matches each one structurally:

     A  .header > .container > [mobile row] + .desktop-nav > [brand div] + nav
        contact, blog list, recipes list, post, recipe, thank you
     B  .header > .header-inner > .header-logo + .header-nav + toggle
        tools, compare
     C  .header > .header-inner > .header-mobile-row + .header-desktop-row
        skyler (partials/site_header.ejs)

   The landing pages carry explicit pill classes (.nav-brand-pill,
   .nav-links-pill, .mobile-bar), which are listed first in each group.

   Loaded after every page's inline <style>, so equal-specificity rules win on
   order and the rest win on the extra .header scope. */

/* Pages offset their content by --header-h. The floating pills are taller than
   the old bar, so this has to grow with them. */
:root {
  --header-h: 78px;
}

.header {
  --nav-pill-h: 50px;
  --se-logo-h: 40px;
  --nav-pill-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.8));
  --nav-pill-border: rgba(255, 255, 255, 0.85);
  --nav-pill-shadow:
    0 10px 30px -10px rgba(2, 44, 40, 0.45),
    0 2px 8px -3px rgba(2, 44, 40, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --nav-pill-blur: blur(18px) saturate(1.8);
  top: 0;
  height: auto;
  min-height: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.85rem);
  padding-bottom: 0.85rem;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Gaps between the pills must not swallow clicks on the page beneath. */
  pointer-events: none;
}

.header.scrolled,
.header.logo-collapsed {
  height: auto;
  box-shadow: none;
}

/* The pill is a fixed shape, so collapsing the wordmark on scroll would make
   it jitter. Keep the brand at full width. */
.header.logo-collapsed .logo-wordmark {
  max-width: 9rem;
  margin-inline-start: 8px;
  opacity: 1;
  transform: none;
}

.header .container,
.header .header-inner {
  max-width: 1400px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.25rem;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0.75rem;
}

/* The menu panel lives inside the header, so it has to opt back in to clicks.
   Pages that load landing-mobile-menu.css get a more careful svh-based height
   from there; this is the floor for the ones that don't (compare). */
.header .mobile-nav {
  pointer-events: auto;
  top: calc(var(--header-h, 76px) + env(safe-area-inset-top, 0px));
  height: calc(100svh - var(--header-h, 76px) - env(safe-area-inset-top, 0px));
}

/* ---- Pill surfaces ---- */

.header .nav-brand-pill,
.header .nav-links-pill,
.header .header-cta-pill,
.header .desktop-nav > :is(div:first-child, nav:not(.nav-actions)),
.header .header-desktop-row > .logo,
.header .header-inner > :is(.header-logo, .header-nav, .mobile-menu-toggle),
.header :is(.mobile-bar, .header-mobile-row) > :is(.logo, .mobile-menu-toggle),
.header > .container > div:first-child > :is(.logo, .mobile-menu-toggle) {
  pointer-events: auto;
  position: relative;
  height: var(--nav-pill-h);
  border-radius: 999px;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.header .nav-brand-pill,
.header .nav-links-pill,
.header .desktop-nav > :is(div:first-child, nav:not(.nav-actions)),
.header .header-desktop-row > .logo,
.header .header-inner > :is(.header-logo, .header-nav, .mobile-menu-toggle),
.header :is(.mobile-bar, .header-mobile-row) > :is(.logo, .mobile-menu-toggle),
.header > .container > div:first-child > :is(.logo, .mobile-menu-toggle) {
  display: flex;
  align-items: center;
  background: var(--nav-pill-bg);
  border: 1px solid var(--nav-pill-border);
  box-shadow: var(--nav-pill-shadow);
  backdrop-filter: var(--nav-pill-blur);
  -webkit-backdrop-filter: var(--nav-pill-blur);
}

/* Brand pill padding - the wordmark needs more room on the trailing side. */
.header .nav-brand-pill,
.header .desktop-nav > div:first-child,
.header .header-desktop-row > .logo,
.header .header-inner > .header-logo {
  padding-inline: 1rem 1.35rem;
}

.header .nav-links-pill,
.header .desktop-nav > nav:not(.nav-actions),
.header .header-inner > .header-nav {
  gap: 0.1rem;
  padding-inline: 0.5rem;
}

.header .nav-actions {
  pointer-events: auto;
  gap: 0.6rem;
}

/* ---- Logo mark ----
   No plate behind it. The PNG has a real alpha channel, so drop-shadow traces
   the leaf silhouette instead of a square, which is what lets it glow. */

.header .home-logo-wrapper {
  width: auto;
  min-width: 0;
  height: var(--se-logo-h, 40px);
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  margin-inline-end: 0;
}

.header .home-logo-wrapper img {
  width: auto;
  height: var(--se-logo-h, 40px);
  animation: seLogoBreathe 4.8s ease-in-out infinite;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes seLogoBreathe {
  0%,
  100% {
    filter:
      drop-shadow(0 0 3px rgba(16, 185, 129, 0.3))
      drop-shadow(0 1px 2px rgba(2, 44, 40, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(52, 211, 153, 0.62))
      drop-shadow(0 1px 2px rgba(2, 44, 40, 0.28));
  }
}

.header .logo:hover .home-logo-wrapper img,
.header .logo:focus-visible .home-logo-wrapper img,
.header .header-logo:hover .home-logo-wrapper img,
.header .header-logo:focus-visible .home-logo-wrapper img {
  transform: scale(1.09) rotate(-4deg);
}

.header .logo-wordmark,
.header .home-logo-wrapper + span {
  margin-inline-start: 8px;
}

/* The pale mint wordmark washes out against the light pill. */
.header .smarteat-gradient {
  background: linear-gradient(135deg, #0f766e 0%, #10b981 48%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
  .header .home-logo-wrapper img {
    animation: none;
    transition: none;
    filter: drop-shadow(0 1px 2px rgba(2, 44, 40, 0.28));
  }
  .header .logo:hover .home-logo-wrapper img,
  .header .header-logo:hover .home-logo-wrapper img {
    transform: none;
  }
}

/* ---- Links ---- */

.header .nav-link {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
}

.header .nav-link:hover,
.header .nav-link:focus-visible {
  color: #0d9488;
  background: transparent;
  text-decoration: none;
}

.header .nav-link.active {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.13);
}

/* .nav-pill-sep is the landing's separator; the other headers ship
   .nav-divider in the same spot. */
.header .nav-pill-sep,
.header .nav-divider {
  display: inline-block;
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin-inline: 0.4rem;
  background: rgba(15, 23, 42, 0.12);
}

.header .nav-wa {
  z-index: 1;
  display: flex;
  align-items: center;
}

.header .whatsapp-button,
.header .nav-link:has(> .fa-whatsapp) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.13);
}

.header .whatsapp-button:hover,
.header .nav-link:has(> .fa-whatsapp):hover {
  background: rgba(37, 211, 102, 0.24);
}

/* ---- Landing CTA pill ---- */

.header .header-cta-pill {
  margin-inline-start: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 26px -10px rgba(13, 148, 136, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.header .header-cta-pill-btn {
  font-size: 0.8rem;
  padding-inline: 1rem;
}

/* ---- Cursor shine on the pills ----
   The glass pills use the shared card shine from landing-motion.css untouched.
   Only the CTA needs its own, since a teal wash over a teal gradient is
   invisible - same radii and alphas, just white instead. */

@media (hover: hover) and (pointer: fine) {
  .se-shine--cta::before {
    background: radial-gradient(
      220px circle at var(--se-shine-x, 50%) var(--se-shine-y, 50%),
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.042) 42%,
      transparent 78%
    );
  }

  .se-shine--cta::after {
    background: radial-gradient(
      180px circle at var(--se-shine-x, 50%) var(--se-shine-y, 50%),
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.126) 45%,
      transparent 82%
    );
  }
}

/* ---- Scrolled: the page behind turns light, so swap to a defined edge ---- */

.header.scrolled {
  --nav-pill-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.9));
  --nav-pill-border: rgba(15, 23, 42, 0.09);
  --nav-pill-shadow:
    0 12px 30px -14px rgba(15, 23, 42, 0.32),
    0 2px 6px -3px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---- Breakpoints ----
   Pills are fixed-width, so they cannot compress the way the old full-width
   bar did. Hand over to the hamburger well before they would overlap; the
   mobile menu carries every link, so nothing is lost. */

@media (min-width: 1150px) {
  .header :is(.mobile-bar, .header-mobile-row),
  .header > .container > div:first-child,
  .header .header-inner > .mobile-menu-toggle {
    display: none;
  }
  .header :is(.desktop-nav, .header-nav) {
    display: flex;
  }
}

/* Tighten the link pill before it can collide with the brand. */
@media (min-width: 1150px) and (max-width: 1340px) {
  .header {
    --nav-pill-h: 48px;
  }
  .header .nav-link {
    font-size: 0.75rem;
    padding: 0.4rem 0.52rem;
  }
}

@media (max-width: 1149px) {
  /* Matches the specificity of the pill-surface rules above, which also set
     display, so these have to be at least as strong to win. */
  .header .desktop-nav,
  .header .header-desktop-row,
  .header .header-inner > .header-nav {
    display: none;
  }
  .header :is(.mobile-bar, .header-mobile-row),
  .header > .container > div:first-child {
    display: flex;
  }
  .header .mobile-menu-toggle {
    display: flex;
  }
  /* Keep the hamburger on the leading edge like every other header. */
  .header .header-inner > .mobile-menu-toggle {
    order: -1;
  }
  .header {
    --nav-pill-h: 48px;
    --se-logo-h: 36px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.65rem);
    padding-bottom: 0.65rem;
  }
  .header .container,
  .header .header-inner {
    padding-inline: 0.9rem;
  }
  .header :is(.mobile-bar, .header-mobile-row) > .logo,
  .header > .container > div:first-child > .logo,
  .header .header-inner > .header-logo {
    padding-inline: 0.75rem 1.05rem;
  }
  .header :is(.mobile-bar, .header-mobile-row) > .mobile-menu-toggle,
  .header > .container > div:first-child > .mobile-menu-toggle,
  .header .header-inner > .mobile-menu-toggle {
    justify-content: center;
    width: var(--nav-pill-h);
    padding: 0;
  }
}

@media (max-width: 1149px) {
  :root {
    --header-h: 72px;
  }
}

@media (prefers-color-scheme: dark) {
  .header {
    --nav-pill-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.72));
    --nav-pill-border: rgba(255, 255, 255, 0.12);
    --nav-pill-shadow:
      0 10px 30px -10px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .header.scrolled {
    --nav-pill-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.9));
    --nav-pill-border: rgba(255, 255, 255, 0.14);
    --nav-pill-shadow:
      0 12px 30px -14px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .header .nav-link {
    color: #cbd5e1;
  }
  .header .nav-pill-sep,
  .header .nav-divider {
    background: rgba(255, 255, 255, 0.14);
  }
}