/* ==========================================================================
   1) THEME TOKENS
   -------------------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;

  --surface: #ffffff;      /* cards, boxes */
  --surface-alt: #f7f7f7;  /* zebra rows, subtle backgrounds */

  --primary: #2F9B46;               /* Light theme default color */
  --primary-hover: color-mix(in srgb, var(--primary) 92%, black 8%);
  --primary-active: color-mix(in srgb, var(--primary) 85%, black 15%);
  --primary-contrast: #ffffff;

  --navbar-bg: var(--primary);
  --navbar-text: #ffffff;
  --navbar-hover-bg: var(--primary);
  --navbar-active-bg: var(--primary);

  --border: #e5e7eb;                /* <-- used throughout */

  /* Splash */
  --splash-logo-w: clamp(220px, 28vw, 520px);
  --splash-divider: rgba(0, 0, 0, .14);
  --stack-gap: 24px;
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --text: #e5e7eb;
  --muted: #9ca3af;

  --surface: #171a21;
  --surface-alt: #12151b;

  --primary: #0E2E15;               /* Dark theme default color */
  --primary-hover: color-mix(in srgb, var(--primary) 88%, white 12%);
  --primary-active: color-mix(in srgb, var(--primary) 80%, white 20%);
  --primary-contrast: #ffffff;

  --navbar-bg: var(--primary);
  --navbar-text: #e5e7eb;
  --navbar-hover-bg: var(--primary-hover);
  --navbar-active-bg: var(--primary-hover);

  --border: #2a2f3a;

  --splash-divider: rgba(255, 255, 255, .16);
}

/* ==========================================================================
   2) GLOBAL BASE
   -------------------------------------------------------------------------- */
html, body { background: var(--bg); color: var(--text); }
a { color: var(--primary); }

/* ==========================================================================
   3) NAVBAR — BASE
   -------------------------------------------------------------------------- */
.navbar.is-primary { background-color: var(--navbar-bg) !important; }
.navbar .navbar-item,
.navbar .navbar-link { color: var(--navbar-text) !important; }

.navbar-burger { cursor: pointer; }
.navbar.is-primary .navbar-burger span { background-color: var(--navbar-text); }

/* Dropdown panel uses surface tokens */
.navbar-menu {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.navbar-menu .navbar-item,
.navbar-menu .navbar-link { color: var(--text) !important; }

/* A touch of spacing between right-side items on mobile */
.navbar-menu .navbar-end .navbar-item { padding-left: 1rem; padding-right: 1rem; }

/* ==========================================================================
   4) NAVBAR — STATES (DESKTOP vs MOBILE)
   -------------------------------------------------------------------------- */
/* Desktop (>=1024px): items sit on the colored bar */
@media (min-width: 1024px) {
  /* EXCLUDE the language item from background tint */
  .navbar.is-primary .navbar-item:hover:not(.is-static):not(.lang-nav),
  .navbar.is-primary .navbar-link:hover {
    background-color: var(--navbar-hover-bg) !important;
    color: var(--navbar-text) !important;
  }
  .navbar.is-primary .navbar-item.is-active,
  .navbar.is-primary .navbar-link.is-active {
    background-color: var(--navbar-active-bg) !important;
    color: var(--navbar-text) !important;
  }
  /* keep icons/text visible on hover/active */
  .navbar.is-primary .navbar-item:hover:not(.is-static):not(.lang-nav) *,
  .navbar.is-primary .navbar-link:hover *,
  .navbar.is-primary .navbar-item.is-active *,
  .navbar.is-primary .navbar-link.is-active * {
    color: var(--navbar-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* .navbar .navbar-brand { padding-left: 1rem; } */
  .navbar .navbar-end { padding-right: 1rem; }
}

/* Light theme: make language chip outline + text dark on the colored topbar */
:root[data-theme="light"] .navbar.is-primary .lang-nav .button.is-light {
  color: #111 !important;
  border-color: rgba(0,0,0,.45) !important;
}
/* Light theme — language pill hover matches navbar item hover */
:root[data-theme="light"] .navbar.is-primary .lang-nav .button.is-light:hover {
  background: var(--navbar-hover-bg) !important;     /* same as other topbar items */
  color: var(--primary-contrast) !important;         /* usually white */
  border-color: transparent !important;
}

/* If user is on "auto", mirror light behavior when OS prefers light */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .navbar.is-primary .lang-nav .button.is-light {
    color: #111 !important;
    border-color: rgba(0,0,0,.45) !important;
  }
  :root[data-theme="auto"] .navbar.is-primary .lang-nav .button.is-light:hover {
    background: var(--navbar-hover-bg) !important;
    color: var(--primary-contrast) !important;
    border-color: transparent !important;
  }
}


/* Mobile (<=1023.98px): items live on surface */
@media (max-width: 1023.98px) {
  .navbar-menu .navbar-item:hover:not(.is-static),
  .navbar-menu .navbar-link:hover {
    background: var(--surface-alt) !important;
    color: var(--text) !important;
  }
  .navbar-menu .navbar-item.is-active,
  .navbar-menu .navbar-link.is-active {
    background: var(--surface-alt) !important;
    color: var(--text) !important;
    font-weight: 600;
  }
}

/* ==========================================================================
   5) NAVBAR — UTILITIES (TOGGLE, GREETING, LOGOUT, LANGUAGE)
   -------------------------------------------------------------------------- */
.theme-toggle { display:inline-flex; align-items:center; padding:0 .75rem; color:var(--navbar-text); opacity:.9; }
.theme-toggle:hover { opacity:1; }
.theme-toggle svg { display:block; }
.navbar-menu .theme-toggle { color:var(--text); }

.navbar-item.is-static { cursor:default; pointer-events:none; user-select:none; }
.navbar-item.is-static:hover,
.navbar-item.is-static:focus { background:transparent !important; text-decoration:none; }

.logout-form { padding:0; }
.logout-form .logout-button { background:none; border:0; color:inherit; font:inherit; padding:0; cursor:pointer; }
.logout-form .logout-button:hover { text-decoration:underline; }

/* ---- Language switch (rectangular chips) ---- */
/* prevent the whole navbar item from tinting on hover */
.navbar .navbar-item.lang-nav:hover,
.navbar .navbar-item.lang-nav:focus { background:transparent !important; }

/* rectangular chips with tight seam */
.lang-nav .buttons.has-addons .button {
  border-radius: 4px !important;
  padding: .38rem .70rem;
  line-height: 1;
  font-size: .8rem;
}
.lang-nav .buttons.has-addons .button:not(:first-child) { margin-left: -1px; }
.lang-nav .buttons.has-addons .button:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.lang-nav .buttons.has-addons .button:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Topbar (colored) – match other navbar hover/active tokens */
.navbar.is-primary .lang-nav .button.is-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: var(--navbar-text);
}
.navbar.is-primary .lang-nav .button.is-light:hover,
.navbar.is-primary .lang-nav .button.is-light:focus {
  background-color: var(--navbar-hover-bg) !important;
  border-color: transparent !important;
  color: var(--navbar-text) !important;
}
.navbar.is-primary .lang-nav .button.is-primary {
  background-color: var(--navbar-active-bg) !important;
  border-color: transparent !important;
  color: var(--navbar-text) !important;
}
.navbar.is-primary .lang-nav .button.is-primary:hover,
.navbar.is-primary .lang-nav .button.is-primary:focus {
  background-color: var(--navbar-active-bg) !important; /* keep steady */
  color: var(--navbar-text) !important;
}

/* Mobile dropdown (surface context) */
.navbar-menu .lang-nav .button.is-light {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.navbar-menu .lang-nav .button.is-light:hover,
.navbar-menu .lang-nav .button.is-light:focus {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
}
.navbar-menu .lang-nav .button.is-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color:#fff !important;
}

/* ==========================================================================
   6) COMPONENTS
   -------------------------------------------------------------------------- */
.card, .box, .message, .notification, .modal-card, .dropdown-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Tables */
.table {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.table thead th { color: var(--text); border-color: var(--border); }
.table td, .table th { border-color: var(--border) !important; }
.table tr:nth-child(even) { background: var(--surface-alt); }

/* Buttons (override Bulma so states follow our tokens) */
.button.is-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
.button.is-primary:hover,
.button.is-primary.is-hovered,
.button.is-primary:focus,
.button.is-primary.is-focused {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
}
.button.is-primary:active,
.button.is-primary.is-active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: var(--primary-contrast) !important;
}

/* ==========================================================================
   7) SPLASH — LOGO SIZE
   -------------------------------------------------------------------------- */
:root { --splash-logo-w: clamp(220px, 26vw, 480px); }

.splash-logo{
  display:block;
  width:var(--splash-logo-w);
  height:auto;
  margin:0 auto;
  image-rendering:auto;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.18)) drop-shadow(0 8px 28px rgba(0,0,0,.10));
}
:root[data-theme="light"] .splash-logo{
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.28)) drop-shadow(0 8px 28px rgba(0,0,0,.12));
}

/* ==========================================================================
   8) SPLASH — SPLIT LAYOUT + ALIGNMENT (desktop & mobile)
   -------------------------------------------------------------------------- */
.splash-wrap{
  display:grid;
  grid-template-columns: minmax(380px,1fr) 1px minmax(460px,1fr);
  place-items:center;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 0;
  max-width: 1180px;
  margin: 8vh auto 0;
  min-height: 62vh;
}

.splash-left   { justify-self:end; }
.splash-right  {
  justify-self:start;
  text-align:left;
  max-width: 560px;
  padding-block: 20px;
}
.splash-right .title    { margin: 0 0 .9rem; line-height: 1.12; }
.splash-right .subtitle { margin: .6rem 0 1.25rem; }
.splash-right .buttons  { display:flex; flex-wrap:wrap; gap:.75rem; }

/* Divider */
.splash-divider{
  position:relative;
  width:1px;
  align-self:stretch;
}
.splash-divider::before{
  content:"";
  position:absolute; left:0; right:0; top:8%; bottom:8%;
  background:linear-gradient(to bottom, transparent 0%, var(--splash-divider) 20%, var(--splash-divider) 80%, transparent 100%);
  border-radius:999px;
}

/* Splash page: reduce top padding */
.splash-section { padding-top: 1.25rem; }
@media (max-width: 900px){ .splash-section { padding-top: 0.75rem; } }

/* Mobile: stack & center, equal spacing around divider */
@media (max-width: 900px){
  .splash-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto;
    place-items: center;
    row-gap: var(--stack-gap);
    margin: 3.5vh auto 0;
  }

  /* Invert order: welcome (1), divider (2), logo (3) */
  .splash-right{ grid-row:1; justify-self:center; text-align:center; max-width:620px; padding-block:0; }
  .splash-divider{ grid-row:2; width:100%; height:1px; }
  .splash-left{ grid-row:3; justify-self:center; }
  .splash-logo{ --splash-logo-w: clamp(240px, 42vw, 520px); }

  .splash-divider::before{
    top:0; bottom:0; left:10%; right:10%;
    background: linear-gradient(to right, transparent 0%, var(--splash-divider) 20%, var(--splash-divider) 80%, transparent 100%);
  }

  /* Stack the action buttons and keep them centered/auto-width */
  .splash-right .buttons{ flex-direction:column; align-items:center; gap:.75rem; }
  .splash-right .buttons .button{ width:max-content; }
}

/* Theme-specific splash logos */
.splash-logo--dark  { display:block; }
.splash-logo--light { display:none; }
:root[data-theme="light"] .splash-logo--dark  { display:none; }
:root[data-theme="light"] .splash-logo--light { display:block; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .splash-logo--dark  { display:none; } :root[data-theme="auto"] .splash-logo--light { display:block; } }
@media (prefers-color-scheme: dark)  { :root[data-theme="auto"] .splash-logo--dark  { display:block; } :root[data-theme="auto"] .splash-logo--light { display:none; } }

/* ==========================================================================
   9) MISC HELPERS
   -------------------------------------------------------------------------- */
.navbar .navbar-item { font-weight: 600; }

/* === Dark mode table fixes (Bulma 0.9.x) =============================== */
/* Keep text readable and use darker row/hover backgrounds.               */

html[data-theme="dark"] .table {
  color: #e5e7eb; /* keep text bright on dark rows */
}

html[data-theme="dark"] .table tbody tr {
  background-color: rgba(255, 255, 255, 0.02); /* base row */
}

html[data-theme="dark"] .table.is-striped tbody tr:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.04); /* striped rows */
}

html[data-theme="dark"] .table.is-hoverable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.08) !important; /* hover row */
}

html[data-theme="dark"] .table.is-hoverable tbody tr:hover td,
html[data-theme="dark"] .table.is-hoverable tbody tr:hover th {
  color: #e5e7eb; /* don't let text dim on hover */
}

/* Optional: table links in dark mode */
html[data-theme="dark"] .table a {
  color: #cfe5ff;
}
html[data-theme="dark"] .table a:hover {
  color: #a6ccff;
}

/* --- Splash: correct column alignment & spacing (no HTML changes) --- */

/* Center LEFT + RIGHT columns as a pair; keep a clean gap */
.splash-wrap {
  align-items: center;                          /* centers both columns */
  column-gap: clamp(2.5rem, 6vw, 5rem);
  gap: clamp(2.5rem, 6vw, 5rem);                /* if grid/flex uses gap */
}

/* Undo the inner vertical centering that pulled text down */
.splash-right {
  display: block;                                /* reset any flex */
  min-height: 0;                                 /* undo min-height */
  padding-left: clamp(1.25rem, 3vw, 2.5rem);     /* space from divider */
  max-width: 60ch;                               /* readable line length */
}

/* Tight, consistent stack — spacing only */
.splash-right .title   { margin: 0 0 1.5rem 0; line-height: 1.15; }
.splash-right .subtitle{ margin: 0 0 .9rem 0; }
.splash-right p        { margin: 0; }

/* Small screens: lighten padding without changing layout */
@media (max-width: 900px){
  .splash-right { padding-left: 0rem; max-width: 62ch; }
}

/* Splash — fix text colors for proper contrast (light & dark) */
.splash-right .title { color: #0f172a; }                 /* light */
html[data-theme="dark"] .splash-right .title { color: #e5e7eb; }  /* dark */

.splash-right .subtitle { color: #334155; }              /* light */
html[data-theme="dark"] .splash-right .subtitle { color: #cbd5e1; } /* dark */

.splash-right p { color: #475569; }                      /* light body */
html[data-theme="dark"] .splash-right p { color: #9aa5b1; }         /* dark body */

/* (Optional) keep the divider visible but subtle in dark mode */
html[data-theme="dark"] .splash-divider { background: rgba(255,255,255,.08); }

/* ===================== MENU SCREEN TUNE-UP ===================== */
/* Works with Bulma boxes/cards; no template changes required.    */

/* Section heading/subheading contrast (safe site-wide) */
html[data-theme="dark"] .section .title,
html[data-theme="dark"] h1.title {
  color: #e7eaf0;            /* bright but not pure white */
}
html[data-theme="dark"] .section .subtitle,
html[data-theme="dark"] h2.subtitle {
  color: #b8c2cc;            /* softer secondary text */
}

/* Cards / boxes that hold each dish */
html[data-theme="dark"] .box,
html[data-theme="dark"] .card {
  background: rgba(255,255,255,0.04);   /* lift surface a bit */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

html[data-theme="dark"] .box:hover,
html[data-theme="dark"] .card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

/* Title + meta inside the card */
html[data-theme="dark"] .box .title,
html[data-theme="dark"] .card .title {
  color: #e8edf4;
}
html[data-theme="dark"] .box .subtitle,
html[data-theme="dark"] .card .subtitle,
html[data-theme="dark"] .box .content,
html[data-theme="dark"] .card .content {
  color: #c4cdd7;
}

/* “GRÁTIS” tag and any success-looking tag */
html[data-theme="dark"] .tag.is-success,
html[data-theme="dark"] .tag.is-primary {
  color: #0b2413;
  background: #4ade80;                  /* green-400 */
  border-color: transparent;
}
html[data-theme="dark"] .tag.is-success.is-light,
html[data-theme="dark"] .tag.is-primary.is-light {
  color: #1a2e22;
  background: #86efac;                  /* green-300 */
}

/* Primary/affirmative buttons: tighter contrast & focus ring */
html[data-theme="dark"] .button.is-primary,
html[data-theme="dark"] .button.is-success {
  background-color: #136b2b;            /* richer green */
  border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .button.is-primary:hover,
html[data-theme="dark"] .button.is-success:hover {
  filter: brightness(1.07);
}
html[data-theme="dark"] .button:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

/* Secondary button legibility on dark */
html[data-theme="dark"] .button.is-light {
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .button.is-light:hover {
  background: rgba(255,255,255,0.1);
}

/* Nice breathing room between cards (grid/columns agnostic) */
.menu-cards,
.section .columns {
  row-gap: 1.25rem;
}

/* Order service-day pill: make the date readable in both themes */
.tag.order-service-date{
  --badge-bg: #eef2f7;   /* light */
  --badge-fg: #1f2937;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 0;
}
:root[data-theme="dark"] .tag.order-service-date{
  --badge-bg: #2a2f36;   /* dark */
  --badge-fg: #f3f4f6;
}

/* If inner date was muted by Bulma helpers, override */
.tag.order-service-date .has-text-grey,
.tag.order-service-date .has-text-grey-light{
  color: var(--badge-fg) !important;
  opacity: 1 !important;
}

/* Works even if the inner span has no helper classes */
.tag.order-service-date > span:last-child{
  color: var(--badge-fg) !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* Wordmark only — keep the rest of the UI untouched */
.brand-wordmark {
  font-family: "Mynerve", cursive;
  font-size: 1.40rem;            /* handwriting needs a smidge more size */
  letter-spacing: -0.01em;       /* tighten slightly for nav */
  line-height: 2;
  display: inline-block;
  /* margin-left: .4rem;            space after the icon */
  text-transform: none;          /* Mynerve looks worse in ALL CAPS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fallback if you can't wrap the text: targets the first brand item text */
.navbar-brand .navbar-item:first-child {
  font-family: "Mynerve", cursive;
  font-size: 1.30rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.notification.hango-cutoff-banner {
  color: #ffb000 !important;
  border: 1px solid #ffb000 !important;
  background-color: rgba(255,176,0,.08) !important;
}