/* =====================================================================
   STREET EATS — BRAND CSS
   For: Hello Elementor child theme
   Usage: Drop into child theme style.css or enqueue as separate file
   
   Two tiers of brand application:
   - Tier 1 (marketing): full zine intensity — rotations, tape, stamps
   - Tier 2 (utility): restrained — same DNA, scannable layouts
   
   Apply tier-specific classes via Elementor's CSS Classes field
   under Advanced settings of any widget.
   ===================================================================== */


/* =====================================================================
   1. GOOGLE FONTS
   Add to child theme functions.php instead for performance, OR
   keep here for simplicity. Comment out if loading via functions.php.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Special+Elite&family=Anton&family=IBM+Plex+Mono:wght@400;500;600;700&family=Archivo+Black&family=Reenie+Beanie&display=swap');


/* =====================================================================
   2. BRAND TOKENS — CSS VARIABLES
   Configure Elementor Global Colors/Fonts to reference these values
   so changing here updates everywhere.
   ===================================================================== */

:root {
  /* --- THE FLAME PALETTE --- */
  --se-paper: #F2EAD3;          /* cream paper — primary background */
  --se-paper-deep: #E8DDB5;     /* deeper paper for contrast surfaces */
  --se-ink: #1B1A2A;            /* near-black for text and structure */
  --se-burnt: #D9531E;          /* burnt orange — primary heat */
  --se-ember: #B8331A;          /* ember red — cooled flame */
  --se-oxblood: #6B1E1E;        /* oxblood — depth and shadow */
  --se-hot-yellow: #F5B538;     /* hot yellow — accent and highlights */
  --se-olive: #5B6B3A;          /* olive — vegan/herb accent */
  
  /* --- STATUS COLORS (for finder) --- */
  --se-open: #3D7A3D;
  --se-closing: var(--se-hot-yellow);
  --se-closed: var(--se-paper-deep);
  
  /* --- TYPOGRAPHY STACK --- */
  --se-font-display: 'Bungee', cursive;
  --se-font-headline: 'Anton', sans-serif;
  --se-font-utility: 'Archivo Black', sans-serif;
  --se-font-typewriter: 'Special Elite', cursive;
  --se-font-hand: 'Reenie Beanie', cursive;
  --se-font-mono: 'IBM Plex Mono', monospace;
  
  /* --- SPACING TOKENS --- */
  --se-radius: 0;               /* sharp corners by default — zine aesthetic */
  --se-radius-pill: 100px;      /* for status pills */
  --se-shadow-hard: 6px 6px 0 var(--se-ink);
  --se-shadow-hard-lg: 8px 8px 0 var(--se-ink);
  --se-shadow-pink: 6px 6px 0 var(--se-burnt);
}


/* =====================================================================
   3. GLOBAL FOUNDATION
   Applies to entire site — body texture, halftone, base typography
   ===================================================================== */

body {
  font-family: var(--se-font-mono);
  background: var(--se-paper);
  color: var(--se-ink);
  line-height: 1.5;
  position: relative;
}

/* Paper grain texture — copy machine feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.16 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halftone dot overlay — riso ghost */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.06;
  background-image: radial-gradient(circle at 1px 1px, var(--se-ink) 1px, transparent 0);
  background-size: 4px 4px;
}

/* Make sure all Elementor content renders above the texture layers */
.elementor, main, header, footer, section {
  position: relative;
  z-index: 5;
}


/* =====================================================================
   4. TYPOGRAPHY UTILITY CLASSES
   Apply via Elementor CSS Classes field on any heading/text widget
   ===================================================================== */

/* Display — biggest, boldest moments */
.se-display {
  font-family: var(--se-font-display);
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--se-ink);
}

/* Display with riso off-registration shadow (like the STREET EATS masthead) */
.se-display-riso {
  font-family: var(--se-font-display);
  color: var(--se-ink);
  text-shadow: 3px 0 0 var(--se-burnt), -2px 1px 0 var(--se-oxblood);
}

/* Headline — Anton condensed, for big screaming headlines */
.se-headline {
  font-family: var(--se-font-headline);
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--se-ink);
}

/* Utility heading — Archivo Black, for section headers and truck names */
.se-utility-heading {
  font-family: var(--se-font-utility);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--se-ink);
}

/* Typewriter — italicized accent text, taglines, pull quotes */
.se-typewriter {
  font-family: var(--se-font-typewriter);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--se-ink);
}

/* Handwritten accent — Reenie Beanie, for emphasis */
.se-hand {
  font-family: var(--se-font-hand);
  font-size: 24px;
  line-height: 1.3;
  color: var(--se-ink);
}

/* Mono utility — IBM Plex, for data, addresses, technical info */
.se-mono {
  font-family: var(--se-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--se-ink);
}

/* Eyebrow label — small caps tag above headlines */
.se-eyebrow {
  font-family: var(--se-font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--se-ember);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.se-eyebrow::before {
  content: '◢◤';
  color: var(--se-ink);
}

/* Dateline — small typed-feeling tag (e.g., "DATELINE: AUSTIN, TX") */
.se-dateline {
  font-family: var(--se-font-typewriter);
  font-size: 13px;
  background: var(--se-ink);
  color: var(--se-paper);
  padding: 6px 14px;
  display: inline-block;
  letter-spacing: 0.08em;
  transform: rotate(-1deg);
}


/* =====================================================================
   5. EMPHASIS PATTERNS
   For inline highlight effects on important words
   ===================================================================== */

/* Yellow highlight behind italic text (use on <em> or .se-highlight) */
.se-highlight,
.se-highlighted em {
  font-style: italic;
  color: var(--se-burnt);
  position: relative;
  display: inline-block;
}

.se-highlight::after,
.se-highlighted em::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: -4px;
  right: -4px;
  height: 14px;
  background: var(--se-hot-yellow);
  z-index: -1;
  transform: rotate(-1deg);
  opacity: 0.4;
}

/* Stamp behind text — yellow background highlight */
.se-stamp-bg {
  background: var(--se-hot-yellow);
  padding: 0 4px;
  font-weight: 600;
}

/* Inverse stamp — ink with paper text */
.se-stamp-inverse {
  background: var(--se-ink);
  color: var(--se-paper);
  padding: 1px 5px;
}


/* =====================================================================
   6. BUTTON SYSTEM
   Apply to Elementor button widgets via CSS Classes
   ===================================================================== */

/* Primary button — burnt orange with hard ink shadow */
.se-btn-primary,
.se-btn-primary a,
a.se-btn-primary {
  font-family: var(--se-font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  padding: 16px 28px !important;
  border: 3px solid var(--se-ink) !important;
  background: var(--se-burnt) !important;
  color: var(--se-ink) !important;
  box-shadow: var(--se-shadow-hard) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
}

.se-btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--se-shadow-hard-lg) !important;
}

.se-btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--se-ink) !important;
}

/* Outline button — transparent with burnt-orange shadow */
.se-btn-outline,
.se-btn-outline a,
a.se-btn-outline {
  font-family: var(--se-font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  padding: 16px 28px !important;
  border: 3px solid var(--se-ink) !important;
  background: transparent !important;
  color: var(--se-ink) !important;
  box-shadow: var(--se-shadow-pink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
}

.se-btn-outline:hover {
  background: var(--se-ink) !important;
  color: var(--se-paper) !important;
  transform: translate(-2px, -2px);
}

/* Yellow button — for major CTAs (final calls to action) */
.se-btn-yellow,
.se-btn-yellow a,
a.se-btn-yellow {
  font-family: var(--se-font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  padding: 16px 28px !important;
  border: 3px solid var(--se-ink) !important;
  background: var(--se-hot-yellow) !important;
  color: var(--se-ink) !important;
  box-shadow: var(--se-shadow-pink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
}

.se-btn-yellow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--se-burnt) !important;
}


/* =====================================================================
   7. ZINE FLOURISHES — TIER 1 (Marketing pages)
   For high-personality moments. Use sparingly on utility pages.
   ===================================================================== */

/* Tilted card — apply to any container for slight rotation */
.se-tilt-left { transform: rotate(-1deg); }
.se-tilt-left-2 { transform: rotate(-2deg); }
.se-tilt-right { transform: rotate(1deg); }
.se-tilt-right-2 { transform: rotate(2deg); }

/* Card with paper background, hard border, hard shadow */
.se-card {
  background: var(--se-paper);
  border: 3px solid var(--se-ink);
  padding: 32px;
  position: relative;
  box-shadow: var(--se-shadow-hard-lg);
  border-radius: 0;
  transition: transform 0.2s ease;
}

.se-card:hover {
  transform: rotate(0) translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--se-ink);
}

/* Inverse card — black background, cream text */
.se-card-dark {
  background: var(--se-ink);
  color: var(--se-paper);
  border: 3px solid var(--se-ink);
  padding: 32px;
  position: relative;
  box-shadow: var(--se-shadow-hard-lg);
}

/* Masking tape strip — apply via pseudo-element on .se-card-with-tape */
.se-card-with-tape {
  position: relative;
}

.se-card-with-tape::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 24px;
  width: 80px;
  height: 24px;
  background: rgba(245, 181, 56, 0.85);
  border: 1px solid rgba(0,0,0,0.15);
  transform: rotate(-6deg);
  z-index: 1;
}

/* Circular rubber stamp */
.se-stamp {
  width: 220px;
  height: 220px;
  border: 4px double var(--se-ember);
  border-radius: 50%;
  background: var(--se-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-8deg);
  padding: 18px;
  color: var(--se-ember);
  box-shadow: 4px 4px 0 var(--se-ink);
  position: relative;
}

.se-stamp::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--se-ember);
  border-radius: 50%;
}

/* Receipt-style block — for displaying lists with totals */
.se-receipt {
  background: var(--se-paper);
  padding: 18px 16px;
  font-family: var(--se-font-mono);
  font-size: 12px;
  border: 2px solid var(--se-ink);
  transform: rotate(2deg);
  box-shadow: 5px 5px 0 var(--se-oxblood);
}

.se-receipt-header {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed var(--se-ink);
  margin-bottom: 10px;
}

/* Rubber-stamp badge — small, tilted, attention-grabbing */
.se-stamp-badge {
  display: inline-block;
  background: var(--se-burnt);
  color: var(--se-ink);
  font-family: var(--se-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border: 2px solid var(--se-ink);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--se-ink);
  text-transform: uppercase;
}

/* "Trade note" — typewriter-style explanation block */
.se-trade-note {
  font-family: var(--se-font-typewriter);
  font-size: 14px;
  line-height: 1.55;
  padding: 14px 16px;
  background: rgba(245, 181, 56, 0.18);
  border-left: 4px solid var(--se-hot-yellow);
  position: relative;
}

.se-trade-note::before {
  content: '↳ what this means:';
  display: block;
  font-family: var(--se-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--se-hot-yellow);
  margin-bottom: 6px;
}


/* =====================================================================
   8. MASTHEAD — Editorial publication header
   Use for the top of either marketing or finder page
   ===================================================================== */

.se-masthead {
  background: var(--se-paper);
  border-bottom: 4px double var(--se-ink);
  padding: 24px 32px 18px;
  position: relative;
}

.se-masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--se-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--se-ink);
  padding-bottom: 12px;
  font-weight: 600;
}

.se-masthead-title {
  font-family: var(--se-font-display);
  font-size: clamp(60px, 13vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--se-ink);
  text-align: center;
  text-shadow: 3px 0 0 var(--se-burnt), -2px 1px 0 var(--se-oxblood);
  margin: 0;
}

/* Smaller masthead for utility pages (finder, etc.) */
.se-masthead-utility .se-masthead-title {
  font-size: clamp(36px, 6vw, 72px);
  text-shadow: 2px 0 0 var(--se-burnt), -2px 0 0 var(--se-oxblood);
}

.se-masthead-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-family: var(--se-font-typewriter);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.se-masthead-sub em {
  font-style: italic;
  color: var(--se-ember);
}


/* =====================================================================
   9. NAVIGATION
   For sticky top nav bars
   ===================================================================== */

.se-nav-strip {
  background: var(--se-ink);
  color: var(--se-paper);
  padding: 11px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--se-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.se-nav-strip a {
  color: var(--se-paper);
  text-decoration: none;
  padding: 6px 0;
  font-weight: 500;
  transition: color 0.15s ease;
}

.se-nav-strip a:hover {
  color: var(--se-hot-yellow);
}


/* =====================================================================
   10. SECTION BACKGROUNDS
   Apply to Elementor sections for full-bleed color treatments
   ===================================================================== */

/* Dark section — ink background with horizontal ledger lines */
.se-section-dark {
  background: var(--se-ink);
  color: var(--se-paper);
  position: relative;
  overflow: hidden;
}

.se-section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 28px,
    rgba(217, 83, 30, 0.08) 28px, rgba(217, 83, 30, 0.08) 29px
  );
  pointer-events: none;
  z-index: 0;
}

.se-section-dark > * {
  position: relative;
  z-index: 1;
}

/* Burnt orange section with diagonal hatch */
.se-section-burnt {
  background: var(--se-burnt);
  position: relative;
  overflow: hidden;
}

.se-section-burnt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg, transparent 0, transparent 30px,
    rgba(0,0,0,0.04) 30px, rgba(0,0,0,0.04) 31px
  );
  pointer-events: none;
}

/* Hot yellow section */
.se-section-yellow {
  background: var(--se-hot-yellow);
  position: relative;
}


/* =====================================================================
   11. TIER 2 — UTILITY STYLING (Finder, dashboards)
   Calmer versions of the brand. No rotations, no tape, scannable.
   ===================================================================== */

/* Straight card — no rotation, clean borders */
.se-card-utility {
  background: var(--se-paper);
  border: 1.5px solid var(--se-ink);
  padding: 16px;
  border-radius: 0;
  transition: background 0.12s ease;
}

.se-card-utility:hover {
  background: var(--se-paper-deep);
}

/* Status pills for finder */
.se-status-open,
.se-status-closing,
.se-status-closed {
  font-family: var(--se-font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  text-transform: uppercase;
  display: inline-block;
}

.se-status-open {
  background: var(--se-open);
  color: var(--se-paper);
}

.se-status-closing {
  background: var(--se-closing);
  color: var(--se-ink);
}

.se-status-closed {
  background: var(--se-closed);
  color: var(--se-oxblood);
  border: 1px solid var(--se-oxblood);
}

/* Cuisine tag — small label for category */
.se-tag-cuisine {
  font-family: var(--se-font-headline);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--se-ink);
  color: var(--se-paper);
  padding: 2px 7px;
  display: inline-block;
}

.se-tag-cuisine.veg {
  background: var(--se-olive);
}

/* Filter chip — for finder toolbar */
.se-chip {
  background: transparent;
  border: 1.5px solid var(--se-ink);
  padding: 7px 12px;
  font-family: var(--se-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.12s ease;
  color: var(--se-ink);
  display: inline-block;
}

.se-chip:hover {
  background: var(--se-ink);
  color: var(--se-paper);
}

.se-chip.active {
  background: var(--se-burnt);
  color: var(--se-ink);
}


/* =====================================================================
   12. PATTERNS & DECORATIVE ELEMENTS
   Background flourishes for variety
   ===================================================================== */

/* Marquee strip — for promo banners */
.se-marquee {
  background: var(--se-ink);
  color: var(--se-hot-yellow);
  font-family: var(--se-font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
}

/* Dashed divider — like a perforated edge */
.se-divider-dashed {
  border-top: 2px dashed var(--se-ink);
  width: 100%;
  margin: 24px 0;
}

/* Hot keyword highlight — yellow stripe behind important inline text */
.se-keyword {
  background: var(--se-hot-yellow);
  padding: 1px 5px;
  font-weight: 600;
}


/* =====================================================================
   13. ELEMENTOR-SPECIFIC OVERRIDES
   Force certain Elementor defaults to play nice with Street Eats
   ===================================================================== */

/* Make Elementor sections respect z-index over the paper texture */
.elementor-section {
  position: relative;
  z-index: 5;
}

/* Hello Elementor defaults to system fonts — ensure our fonts win */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--se-font-headline);
}

/* Default body copy in Elementor text widgets */
.elementor-widget-text-editor {
  font-family: var(--se-font-mono);
}


/* =====================================================================
   14. RESPONSIVE — Mobile adjustments
   ===================================================================== */

@media (max-width: 900px) {
  .se-display { font-size: clamp(40px, 12vw, 80px); }
  .se-headline { font-size: clamp(32px, 9vw, 56px); }
  .se-stamp { width: 160px; height: 160px; }
  .se-masthead { padding: 18px 20px 14px; }
  .se-card { padding: 22px; }
  .se-card-dark { padding: 22px; }
}

@media (max-width: 600px) {
  .se-tilt-left, .se-tilt-left-2, .se-tilt-right, .se-tilt-right-2 {
    transform: none; /* drop rotations on small screens for readability */
  }
  .se-nav-strip { padding: 10px 16px; }
}


/* =====================================================================
   END OF STREET EATS BRAND CSS
   ===================================================================== */