/* =====================================================================
   Live At The Markets — Paddy's Markets franchise theme
   ===================================================================== */

/* ---------------------------------------------------------------------
   Webfonts, served from this document root.

   These used to come from Google, via:

     @import url('https://fonts.googleapis.com/css2?family=Yellowtail&family=Montserrat:wght@400;500;600;700;800&display=swap');

   Kept for reference only — do not re-enable it. An @import is the
   slowest possible way to load a font: the browser has to fetch and
   parse THIS file before it learns the Google URL exists, then resolve a
   second host, fetch a second stylesheet, and only then start on the
   binaries. Lighthouse put that chain at about a second of
   render-blocking time. Self-hosted, the fonts come down a connection
   that is already open, behind the year-long Expires header in
   franchise/.htaccess.

   Latin subset, upright only, and only the weights this theme uses —
   nothing in the app sets font-style: italic on a themed element. If you
   ever add one, add the face here too, or the browser will slant the
   upright by hand and it will look like it.

   font-display: swap paints the fallback immediately and repaints when
   the webfont lands, so a slow font can never hide the text.
   --------------------------------------------------------------------- */

/* Display. Yellowtail ships at 400 only; see the weight override below. */
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yellowtail-v25-latin-regular.woff2') format('woff2');
}

/* Body. style.css uses 400/500/600/700/800. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2');
}

:root{
  --highlight: #547432;
  --callout:   #934A0C;
  --tertiary:  #D13400; /* #C45630 */
  --secondary: #355b62;
  --primary:   #78b3a0;
  --dark:      #18393D;
  --light:     #f6f5e0;
  --white:     #FFFFFF;
  --line:      #78b3A026;
  --shadow:    0 4px 6px -1px rgba(24, 57, 61, 0.12);
  --radius:    0.75rem;
  --font-display: 'Yellowtail', cursive;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --primary-hover: #18393d;
}

/* ---------------------------------------------------------------------
   Custom override styles 
   --------------------------------------------------------------------- */

body {
  background: var(--line);
  color: var(--dark);
}
.topbar-inner {
  padding: 16px;
}
.brand-text {
  color: var(--light);
}
.brand img {
  width: 60px;
  height: 60px;
}
.nav-links {
  background: var(--dark);
  color: var(--light);
}
.nav-toggle {
  color: var(--light);
  position: relative;
  z-index: 40;
}
.nav-links a {
  color: var(--light);
  font-weight: 700;
  padding: 20px 0;
}
.nav-links a:hover {
  color: var(--primary);
}
@media (max-width: 860px) {
  body:has(.nav-links.open) {
    overflow: hidden;
  }
  body:has(.nav-links.open)::after {
    background: var(--apple-black);
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 80;
  }
  .topbar {
    z-index: 100;
  }
  .topbar::before {
    background: var(--dark);
    border-top: 8px solid var(--primary);
    content: '';
    inset: 0;
    position: absolute;
    z-index: 0;
  }
  .topbar-inner {
    padding: 16px 16px 8px 16px;
  }
  .brand {
    position: relative;
    z-index: 40;
  }
  .nav-links {
    border-bottom: 1px solid var(--white);
    display: flex;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    z-index: -1;
  }
  .nav-links.open {
    display: flex;
    transform: translateY(0%);
    z-index: -1;
  }
}
@media (min-width: 768px) {
  .topbar {
    background: var(--dark);
    color: var(--light);
  }
}

.hero::before {
  background: linear-gradient(160deg, var(--dark) 0%, var(--primary) 100%);
}
.hero::after {
  background: var(--primary);
}
/* Yellowtail exists at 400 and nothing else, so anywhere style.css sets
   a display element to 700 the browser smears the 400 outline into a
   fake bold — on a script face that reads as a printing fault. (The
   Google-hosted version did the same; it also served only 400.) .hero h1
   and .script were already corrected; .brand-text and .how-card .num are
   the two that were missed. .event-card .date is not in the list because
   this theme switches it to --font-body below, where 700 is a real face. */
.hero h1,
.script,
.brand-text,
.how-card .num {
  font-weight: 400;
}
.hero-badge {
  border-radius: var(--radius-sm);
}
.event-card .date {
  font-family: var(--font-body);
  color: var(--dark);
}
.cutoff-banner {
  color: var(--light);
}
.live-badge {
  border-radius: var(--radius-sm);
}
.product-card .live-tag {
  background: var(--tertiary);
}
@media (max-width: 768px) {
  .live-wrap {
    background: var(--light);
  }
}
.tabs button.active {
  color: var(--dark);
  border-color: var(--dark);
}
.sticky-bar button.btn-primary {
  background: var(--secondary);
}
.sticky-bar button.btn-primary.btn-basket-open {
  background: var(--dark);
}
.chat-msg.host {
  background: var(--primary);
}
footer div.flex a {
  color: var(--light);
  font-size: 12px;
  text-transform: uppercase;
}
footer div.flex a:not(:last-child) {
  border-right: 1px solid var(--light);
  padding-right: 16px;
}
footer p.muted {
  color: var(--white);
}