/* =========================================================
   site.css — shared 2026 monochrome/Inter theme
   Loaded via nav.php on the 13 public marketing pages only
   (index, table-service, quick-service, ipad-pos,
    kitchen-display, costings, loyalty, blog, story,
    wai-cafe, terms, privacy, qr-menu marketing).
   Goal: white/black, Inter, red only in the logo image.
   Loads AFTER each page's own <style> (nav.php is in <body>),
   so equal-specificity rules here win; !important guards the
   essentials against pages that use it.
   ========================================================= */

:root{
  /* Flip the brand token to ink — every var(--red) accent on a
     page (buttons, links, headings) turns monochrome in one shot.
     The logo is an <img>, so it keeps its real red. */
  --red:#1d1d1f;
  --dark-red:#000000;

  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  /* faint warm/pink section tint -> neutral Apple grey, site-wide */
  --soft:#f5f5f7;
}

body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color:#1d1d1f;
  letter-spacing:-.01em;
}

/* ---------- NAVBAR (monochrome, no line, sticky glass) ---------- */
.navbar{
  background:rgba(255,255,255,.8) !important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:none !important;
  box-shadow:none !important;
  padding:.55rem 1rem;
  position:sticky; top:0; z-index:1030;
}
.navbar-brand img{ height:60px !important; }
.navbar .nav-link{
  color:#1d1d1f !important;
  font-weight:500;
  font-size:.95rem;
  margin-left:1.1rem;
  opacity:.85;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{ opacity:1; color:#1d1d1f !important; }
.navbar .dropdown-menu{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.10);
  padding:.5rem;
}
.navbar .dropdown-item{ border-radius:9px; padding:.55rem .8rem; font-weight:500; color:#1d1d1f; font-size:.92rem; }
.navbar .dropdown-item:hover{ background:#f5f5f7; }
.navbar .dropdown-item.active,
.navbar .dropdown-item:active{ background:#f5f5f7 !important; color:#1d1d1f !important; font-weight:600; }
.navbar .btn-outline-light{
  border:1px solid #1d1d1f !important;
  color:#fff !important;
  background:#1d1d1f !important;
  border-radius:999px;
  padding:.45rem 1.1rem;
  font-weight:600;
  font-size:.9rem;
}
.navbar .btn-outline-light:hover{ background:#000 !important; color:#fff !important; border-color:#000 !important; }
.navbar-toggler{ border:none !important; outline:none !important; box-shadow:none !important; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231d1d1f' viewBox='0 0 30 30'%3E%3Cpath stroke='none' d='M4 7h22v2H4zM4 14h22v2H4zM4 21h22v2H4z'/%3E%3C/svg%3E") !important;
}
@media (max-width:991px){
  .navbar-collapse{ background:#fff !important; padding:.75rem 0; }
  .navbar .nav-link{ margin-left:0 !important; }
  .navbar-collapse .d-flex{ align-items:flex-start !important; }
}

/* ---------- Neutralise Bootstrap brand-red utilities ---------- */
.btn-danger{ background:#1d1d1f !important; border-color:#1d1d1f !important; color:#fff !important; }
.btn-danger:hover,.btn-danger:focus{ background:#000 !important; border-color:#000 !important; color:#fff !important; }
.btn-outline-danger{ color:#1d1d1f !important; border-color:#1d1d1f !important; }
.btn-outline-danger:hover{ background:#1d1d1f !important; color:#fff !important; }
.text-danger{ color:#1d1d1f !important; }
.bg-danger{ background:#1d1d1f !important; }
.border-danger{ border-color:#1d1d1f !important; }

/* ---------- Red-tint accents -> neutral grey (icon badges, pills, gradients) ---------- */
.icon-badge,
.split-icon,
.split-icon i{ background:#eef0f2 !important; }
.split-icon{ background:linear-gradient(135deg,#eef0f2,#f6f7f8) !important; }
.step-pill{ background:#eef0f2 !important; color:#1d1d1f !important; }
.contact-confirm{ border-color:var(--line) !important; box-shadow:0 12px 30px rgba(0,0,0,.06) !important; }
.day-step::before{ background:#1d1d1f !important; }

/* ---------- FAQ accordion: one monochrome style on every page ---------- */
.accordion-item{ border:1px solid var(--line) !important; margin-bottom:.8rem !important; border-radius:14px !important; overflow:hidden; box-shadow:none !important; }
.accordion-button{ background:#fff !important; color:var(--ink) !important; font-weight:600 !important; border:none !important; border-radius:0 !important; padding:1.2rem 1.25rem !important; box-shadow:none !important; font-size:1.02rem !important; }
.accordion-button:not(.collapsed){ background:#fff !important; color:var(--ink) !important; }
.accordion-button::before{ display:none !important; }        /* kill the old red underline */
.accordion-button::after{ content:"\f107" !important; font-family:"Font Awesome 6 Free" !important; font-weight:900 !important; transition:transform .3s ease !important; color:var(--ink-3) !important; background-image:none !important; }
.accordion-button:not(.collapsed)::after{ transform:rotate(180deg) !important; }
.accordion-body{ background:#fff !important; color:var(--ink-2) !important; font-size:.97rem !important; line-height:1.7 !important; padding:0 1.25rem 1.3rem !important; }

/* ---------- Footer: no top line, consistent links across all pages ---------- */
footer{ background:#fff !important; border-top:none !important; color:#86868b !important; padding:2rem 1rem !important; font-size:.9rem; text-align:center; }
footer a{ color:#6e6e73 !important; font-weight:500; text-decoration:none !important; transition:color .2s ease !important; }
footer a:hover{ color:#1d1d1f !important; opacity:1 !important; text-decoration:none !important; }
