/* ==========================================================================
   Sloppy Canteen: brand layer on top of template.css
   Palette comes from the logo: ink black, teal green, white.
   ========================================================================== */

:root {
  --brand: #19b38a;        /* logo ring */
  --brand-deep: #0a7558;   /* teal for small text on light backgrounds (AA contrast on white and on paper) */
  --brand-soft: #c9efe3;   /* tint for cards / chips */
  --ink: #161515;          /* logo black */
  --paper: #f4f1ea;        /* warm white for light sections */

  /* Re-point the template's colour tokens (their names are the template's, the values are ours). */
  --primary--red: var(--brand);
  --primary--yellow: var(--brand);
  --primary--orange: var(--brand);
  --primary--beige: var(--paper);
  --primary--brown: #0b3a2c;
  --primary--black: var(--ink);

  /* Greek-capable families replace OMG Sans / BDO Grotesk / Batuphat Script */
  --_typography---font-family--primary: "Sofia Sans Extra Condensed", Impact, "Arial Narrow", sans-serif;
  --_typography---font-family--secondary: "Inter Tight", Arial, sans-serif;
  --_typography---font-family--detail: "Playpen Sans", "Comic Sans MS", cursive;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.sl-defs { position: absolute; }
.w-webflow-badge { display: none !important; }

/* ---------- Type ---------- */
/* The display face is one heavy cut; every weight maps to it (see fonts.css). */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6 { letter-spacing: 0; }
h4, .heading-style-h2, .heading-style-h4, .heading-style-h5, .heading-style-h6 { text-transform: uppercase; }
.navbar_link, .footer_link { letter-spacing: 0.01em; }

/* Hand-cut edge on big display type */
.rough,
h1, h2, .heading-style-h1, .heading-style-h2, .heading-style-h3,
.about-header_word, .about-us_text { filter: url(#sl-rough); }
/* smaller type gets a finer, lighter edge */
@media screen and (max-width: 767px) {
  .rough,
  h1, h2, .heading-style-h1, .heading-style-h2, .heading-style-h3,
  .about-header_word, .about-us_text { filter: url(#sl-rough-sm); }
}

/* Script labels (Playpen Sans instead of Batuphat): a touch smaller, slight slant */
.label_text, .menu_link { font-weight: 700; letter-spacing: -0.01em; }
.label_text { color: var(--brand-deep); font-size: 1.6rem; transform: rotate(-3deg); transform-origin: left center; display: inline-block; }
.label_text._2 { transform: translate(0.14rem, 0.14rem) rotate(-3deg); }
.menu_link { font-size: 1.25rem; }

/* ---------- Colour fixes where teal replaces red ---------- */
.navbar_info-text { color: var(--brand-deep); }
.footer_info-label, .footer_info-label a { color: var(--brand); }
.navbar_info-icon-wrap { background-color: var(--brand); }
.navbar_info-icon-wrap.white { background-color: #fff; }
.button.yellow { color: var(--ink); }

/* ---------- Navbar logo (round badge) ---------- */
.navbar_logo { width: 4.25rem; height: auto; border-radius: 50%; }
.navbar { padding-top: 1rem; padding-bottom: 1rem; }
@media screen and (max-width: 991px) { .navbar_logo { width: 3.5rem; } }
@media screen and (max-width: 479px) { .navbar_logo { width: 3rem; } }

/* ---------- Footer ---------- */
.footer_logo { width: 6rem; height: auto; border-radius: 50%; }
.footer_shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; align-items: start; }
.footer_shops .footer_info-label { margin-bottom: 0.25rem; }
.footer_shops a { color: inherit; text-decoration: none; }
.footer_shops .footer_info-text a:hover, .footer_template-link:hover { color: var(--brand); }
/* beside the link groups the two columns must never get narrower than their longest address */
@media screen and (min-width: 992px) { .footer_shops { grid-template-columns: repeat(2, minmax(max-content, 1fr)); } }
/* phones: the right column takes the width of its longest address, the left one gets the rest */
@media screen and (max-width: 479px) { .footer_shops { grid-template-columns: 1fr auto; gap: 1.25rem 1rem; width: 100%; } }
@media screen and (max-width: 359px) { .footer_shops { column-gap: 0.75rem; } .footer_shops .footer_info-text { font-size: 0.875rem; } }

.footer_link-text { white-space: nowrap; }

/* ---------- Navbar: keep one line between tablet-landscape and wide desktop ---------- */
.navbar_logo-wrap { flex: none; }
.navbar_text, .navbar_info, .navbar_info-text { white-space: nowrap; }
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .navbar_links { grid-column-gap: 1.25rem; }
  .navbar_infos { grid-column-gap: 0.75rem; }
  .navbar_info-texts { display: none; }
  .navbar_info-icon-wrap { width: 3.25rem; height: 3.25rem; }
}
/* from 1100px the first line of each label fits next to its icon again */
@media screen and (min-width: 1100px) and (max-width: 1279px) {
  .navbar_info-texts { display: block; }
  .navbar_info { display: none; }
  .navbar_info-text { font-size: 0.875rem; }
  .navbar_info-block { grid-column-gap: 0.5rem; }
}
.footer_brand-desc { max-width: none; white-space: nowrap; }
@media screen and (max-width: 479px) { .footer_brand-desc { max-width: 15.625rem; white-space: normal; } }

/* ---------- Buttons: keep the hover "bite" inside the side padding, clear of the label's last letter ---------- */
.button_bite-1 { width: 1.7rem; }
.button_bite-2 { width: 2.6rem; }
@media screen and (max-width: 767px) {
  .button_bite-1 { width: 1.4rem; }
  .button_bite-2 { width: 2.2rem; }
}

/* keyboard focus */
.button:focus-visible, .navbar_link:focus-visible, .footer_link:focus-visible, a:focus-visible,
.navbar_hamburger-wrap:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* the template removes the outline from tab links (.w-tab-link:focus) */
.w-tab-link:focus-visible { outline: 2px dashed var(--brand); outline-offset: 5px; }