/* ==========================================================================
   TALKIN' TRASH, base.css
   Design tokens, resets, base elements, shared UI.
   Palette sampled from the brand logo + campaign collateral.
   ========================================================================== */

@font-face {
  font-family: 'Funhouse';
  src: url('../fonts/Funhouse.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root{
  /* Brand */
  --tt-green:       #14442E;   /* primary: bands, headings, logo */
  --tt-green-dk:    #0D2E1F;
  --tt-green-mid:   #1D6642;
  --tt-leaf:        #3B7D11;   /* data figures, positive accents */
  --tt-gold:        #F3B440;   /* accent: pills, rules, CTAs */
  --tt-gold-dk:     #D2942A;
  --tt-gold-pale:   #FBE8BE;   /* callout fill */
  --tt-green-pale:  #E8F1DE;   /* card tint */

  /* Blue, carried over from the previous site's sky-blue field, and already
     present in the mascots (Bruce's bin, Rocky's overalls). */
  --tt-sky:         #97D5FF;   /* section ground */
  --tt-sky-pale:    #D6EDFF;   /* soft cards on sky */
  --tt-blue:        #20408F;   /* deep royal, from the old interior headings */

  /* Horry County SWA seal. Its green is a near match for --tt-green. */
  --tt-maroon:      #721124;   /* seal maroon, used for urgency only */

  /* Neutrals */
  --tt-cream:       #FAF7EE;   /* page background */
  --tt-white:       #FFFFFF;
  --tt-ink:         #1A1F1C;
  --tt-stone:       #5A6560;
  --tt-line:        #E2DDCE;

  /* Type */
  --tt-display: 'Funhouse', 'Bungee', Impact, sans-serif;
  --tt-head:    'Barlow Condensed', 'Oswald', Helvetica, Arial, sans-serif;
  --tt-ui:      'Barlow', -apple-system, Helvetica, Arial, sans-serif;

  /* Layout */
  --tt-maxw: 1180px;
  /* Corners follow the logo: cards sit at a small radius, buttons and pills are cut square. */
  --tt-radius: 6px;
  --tt-section-y: clamp(56px, 8vw, 104px);
  --tt-gutter: clamp(20px, 5vw, 48px);
  --tt-shadow: 0 10px 30px rgba(20,68,46,.10);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--tt-ui);
  color:var(--tt-ink);
  background:var(--tt-cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
picture{ display:block; }
a{ color:inherit; }
ul{ list-style:none; }

h1,h2,h3,h4{ line-height:1.1; font-weight:600; }
h1,h2{ font-family:var(--tt-display); font-weight:400; letter-spacing:0; word-spacing:.04em; }
h3,h4{ font-family:var(--tt-head); font-weight:600; letter-spacing:.01em; }

::selection{ background:var(--tt-gold); color:var(--tt-green-dk); }
:focus-visible{ outline:3px solid var(--tt-gold); outline-offset:3px; }

.tt-wrap{ max-width:var(--tt-maxw); margin-inline:auto; padding-inline:var(--tt-gutter); }
.tt-section{ padding-block:var(--tt-section-y); }

/* ---------- Shared UI ---------- */
.tt-eyebrow{
  display:inline-block; font-family:var(--tt-head); font-weight:600;
  font-size:.95rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tt-gold-dk); margin-bottom:.75rem;
}
.tt-eyebrow--light{ color:var(--tt-gold); }

.tt-section-head{ max-width:820px; margin-bottom:clamp(32px,4vw,52px); }
.tt-section-head--center{ margin-inline:auto; text-align:center; }
.tt-section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.05; color:var(--tt-green); }
.tt-section-head p{ margin-top:1rem; font-size:1.1rem; color:var(--tt-stone); }
.tt-on-green .tt-section-head h2{ color:var(--tt-white); }
.tt-on-green .tt-section-head p{ color:rgba(255,255,255,.82); }
.tt-on-green .tt-section-head p a{ color:var(--tt-gold); font-weight:600; }

/* Gold rule, the motif from the campaign collateral */
.tt-rule{ height:5px; width:96px; background:var(--tt-gold); }
.tt-rule--center{ margin-inline:auto; }

.tt-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--tt-head); font-weight:600; font-size:1.05rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:.75em 1.6em; border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.tt-btn:hover{ transform:translateY(-2px); }
/* Smaller pair, used in the hero where the logo is doing the shouting. */
.tt-btn--sm{ font-size:.92rem; padding:.62em 1.3em; }
.tt-btn--gold{ background:var(--tt-gold); color:var(--tt-green-dk); }
.tt-btn--gold:hover{ background:#FFC759; }
.tt-btn--green{ background:var(--tt-green); color:var(--tt-white); }
.tt-btn--green:hover{ background:var(--tt-green-mid); }
.tt-btn--ghost{ background:transparent; color:var(--tt-green); border-color:var(--tt-green); }
.tt-btn--ghost:hover{ background:var(--tt-green); color:var(--tt-white); }
.tt-btn--ghost-light{ background:transparent; color:var(--tt-white); border-color:rgba(255,255,255,.6); }
.tt-btn--ghost-light:hover{ background:var(--tt-white); color:var(--tt-green); border-color:var(--tt-white); }

/* Gold pill badge, e.g. "WINNER" */
.tt-pill{
  display:inline-block; font-family:var(--tt-head); font-weight:700;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--tt-gold); color:var(--tt-green-dk);
  padding:.32em 1.15em;
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
/* The outline variant cannot be clipped without losing its border. */
.tt-pill--outline{ clip-path:none; }
.tt-pill--outline{ background:transparent; border:2px solid var(--tt-gold); color:var(--tt-gold); }

.tt-band-green{ background:var(--tt-green); color:var(--tt-white); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Sky band ---------- */
.tt-band-sky{ background:linear-gradient(180deg,#DCF0FF 0%, var(--tt-sky) 100%); }
.tt-band-sky .tt-section-head h2{ color:var(--tt-green); }
.tt-band-sky .tt-section-head p{ color:#28506B; }
.tt-band-sky .tt-eyebrow{ color:var(--tt-blue); }

/* ---------- Co-brand lockup (Talkin' Trash + SWA seal) ---------- */
.tt-lockup{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.tt-lockup__tt{ height:44px; width:auto; }
.tt-lockup__div{
  width:1px; height:34px; background:rgba(255,255,255,.28); flex:0 0 auto;
}
.tt-lockup__swa{
  height:40px; width:40px; flex:0 0 auto;
  background:var(--tt-white); border-radius:50%; padding:3px;
}
@media (max-width: 420px){
  .tt-lockup{ gap:10px; }
  .tt-lockup__tt{ height:36px; }
  .tt-lockup__swa{ height:34px; width:34px; padding:2px; }
}

/* ---------- Hand-cut tags ----------
   Corners clipped at an angle by slightly different amounts, echoing the way the
   Funhouse letterforms are cut. Filled elements only: clip-path removes borders,
   so an outlined chip would lose its outline at each cut. */
.tt-tag-cut{
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.tt-pill{ padding-inline:1.15em; }