/* ─────────────────────────────────────────────────────────
   tenvito-redux.css
   Shared stylesheet for all dark-theme redux pages
   (Homepage, Butchers, Local Heroes, Benefits, future verticals)
   
   Loaded once from Master template via:
   <link rel="stylesheet" href="/css/tenvito-redux.css">
   
   ⚠️  THIS SUPPLEMENTS TAILWIND — IT DOES NOT REPLACE IT.
   Redux pages rely on Tailwind utility classes (flex, grid-cols-5,
   text-[clamp(...)], bg-[#070D1A], py-24, etc.) compiled by the
   Tailwind CDN in Master. Do NOT remove the Tailwind CDN thinking
   this file covers it — every utility class would break site-wide.
   This file holds only custom CSS that Tailwind can't express:
   design tokens, component patterns, animations, the Umbraco reset.
   
   NOT used by editorial pages (compare-hub, vs-flipdish, vs-square,
   vs-toast, vs-shopify) — those have their own paper/serif design system.
   ───────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   1. UMBRACO CONTAINER RESET
   Neutralises the max-w-7xl page wrapper that Umbraco wraps
   around block content. Without this, all sections constrain
   to ~1216px with white gutters.
   Source of truth: tenvito-html-prompt.md
   ═══════════════════════════════════════════════════════════ */

body {
  margin: 0;
  padding: 0;
}

.blocklist-area,
.umb-block-list,
.umb-block-grid__layout-container,
.umb-block-list__block--view,
.umb-block-grid__area-container,
.umb-block-grid__layout-item {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════
   2. BOX-SIZING RESET
   font-family: inherit deliberately NOT set on the universal
   selector — it can clobber Tailwind font utilities and any
   element-specific font. Font inheritance flows from body below.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════
   3. DESIGN TOKENS — canonical CSS variables
   
   Single naming convention. Replaces the three competing
   conventions currently in use across redux blocks:
     --th-  (Homepage v9)
     --tv-  (Benefits v8)
     none   (Butchers v21, Local Heroes v4)
   
   Going forward: no prefix. The :root scope is sufficient.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --navy:   #070D1A;
  --navy2:  #0E1729;
  
  /* Brand */
  --lime:   #C5DC3F;
  --blue:   #88AEF9;
  --teal:   #36747D;
  
  /* Text on light surfaces */
  --text:   #131D30;
  --muted:  #6B7280;
  
  /* Layout */
  --max:    1280px;
  --gutter: clamp(24px, 5vw, 80px);
  
  /* Animation accent colours (referenced by Benefits page job animations) */
  --green:  #10B981;
  --orange: #F05A00;
}


/* ═══════════════════════════════════════════════════════════
   4. BODY DEFAULTS — dark theme
   
   font-family is Roboto today (matches styles.css default).
   Once typography swap is approved, change to:
     font-family: 'Outfit', system-ui, -apple-system, sans-serif;
   And remove `<link>` Outfit tags from individual page blocks.
   ═══════════════════════════════════════════════════════════ */

body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  background: #070D1A;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════
   5. SPACING TIERS
   Handled by Tailwind utilities, not custom classes, to keep
   one spacing system across the site:
     Tier 1 — Hero / closing CTA:  py-32  (md: py-32, 128px)
     Tier 2 — all other sections:  py-24  (96px)
   On mobile, Tier 1 hero may step down to py-20 (80px) per page.
   Source of truth: tenvito-playbook-v2.md §5
   No custom .tv-tier classes — use Tailwind py- utilities directly.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   6. LAYOUT CONTAINERS
   Wraps content to 1280px max width with responsive gutter.
   ═══════════════════════════════════════════════════════════ */

.tv-w {
  max-width: var(--max);
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════
   7. EYEBROW
   The blue uppercase label that sits above every section H2.
   Source: tenvito-playbook-v2.md §4
   ═══════════════════════════════════════════════════════════ */

.tv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.5rem;
}

.tv-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   8. PRIMARY CTA — lime pill
   The signature Tenvito "Start free / Start taking orders" button.
   ═══════════════════════════════════════════════════════════ */

.tv-cta {
  background: var(--lime);
  color: var(--navy);
  font-size: .95rem;
  font-weight: 700;
  padding: .85rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-block;
  transition: opacity .2s;
}

.tv-cta:hover { opacity: .88; }


/* ═══════════════════════════════════════════════════════════
   9. SECONDARY CTA — outlined white pill
   ═══════════════════════════════════════════════════════════ */

.tv-cta-secondary {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  padding: .85rem 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: border-color .2s, background .2s;
}

.tv-cta-secondary:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .04);
}


/* ═══════════════════════════════════════════════════════════
   10. ANCHOR PILL NAVIGATION
   The mobile sticky anchor bar pattern from Butchers v21.
   Used on long vertical pages with multiple sections.
   ═══════════════════════════════════════════════════════════ */

.tv-anchor-bar { display: none; }

@media (max-width: 768px) {
  .tv-anchor-bar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(7, 13, 26, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 10px 16px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: translateY(-100%);
    transition: transform .3s ease;
  }
  
  .tv-anchor-bar::-webkit-scrollbar { display: none; }
  .tv-anchor-bar.visible { transform: translateY(0); }
  
  .tv-anchor-pill {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s ease;
  }
  
  .tv-anchor-pill.active {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--navy);
    font-weight: 700;
  }
}


/* ═══════════════════════════════════════════════════════════
   11. FILTER TABS — pill nav for card grids
   Used on Local Heroes for category filtering.
   ═══════════════════════════════════════════════════════════ */

.tv-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tv-filter-tab {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: all .18s ease;
  background: transparent;
  letter-spacing: .01em;
}

.tv-filter-tab:hover {
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .85);
}

.tv-filter-tab.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy);
}


/* ═══════════════════════════════════════════════════════════
   12. CARD — the testimonial/profile card pattern
   Source: tenvito-playbook-v2.md §7
   ═══════════════════════════════════════════════════════════ */

.tv-card {
  background: var(--navy2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 32px 32px 28px;
  transition: border-color .2s ease, transform .2s ease;
}

.tv-card:hover {
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}

.tv-card-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.tv-card-quote {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

.tv-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  border: none;
  margin: 20px 0;
}

/* Photo-strip card variant — testimonial/profile cards with a
   16:9 photo header. Add .tv-card-photo to the photo div, and
   .has-photo once a background-image is set.
   ⚠️  USAGE: must pair with a .tv-card body beneath it. The photo
   rounds only its TOP corners (14px 14px 0 0) on the assumption a
   card body with rounded bottom corners sits below. Used standalone,
   the bottom corners will be square.
   Source: tenvito-playbook-v2.md §7 */
.tv-card-photo {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--navy2);
  border-radius: 14px 14px 0 0;
  position: relative;
}

.tv-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(7, 13, 26, .4) 100%);
  pointer-events: none;
}

.tv-card-photo-name {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 1;
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
}


/* ═══════════════════════════════════════════════════════════
   13. SHARED ANIMATIONS
   The two patterns that recur across redux blocks.
   ═══════════════════════════════════════════════════════════ */

@keyframes tv-fade-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes tv-pulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.6); }
}

@keyframes tv-chat-dot {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

.tv-fade-in { animation: tv-fade-in .5s ease forwards; }
.tv-pulse   { animation: tv-pulse 2s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════
   14. ALPINE.JS CLOAK
   Prevents flash-of-unstyled-content on Alpine-controlled elements.
   ═══════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   15. LINK DEFAULTS — dark theme
   Opacity fade scoped to CTA/button-style links via .tv-cta and
   .tv-cta-secondary (which set their own :hover above). A global
   a:hover opacity is deliberately avoided so inline body links
   keep their own treatment. Page blocks that want the fade on a
   specific link can add .tv-cta or an inline transition.
   ═══════════════════════════════════════════════════════════ */

a { transition: opacity .2s, color .2s; }


/* ═══════════════════════════════════════════════════════════
   16. RESPONSIVE BREAKPOINT — shared mobile rules
   Common collapse-to-single-column behaviour used across redux
   pages. Page-specific responsive rules stay in page blocks.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tv-stack-mobile {
    flex-direction: column !important;
  }
  
  .tv-grid-2-mobile {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .tv-grid-1-mobile {
    grid-template-columns: 1fr !important;
  }
}