/* ============================================================
   CannaCalc DARE Theme — Retro 90s PSA Design System
   "JUST SAY KNOW"
   ============================================================ */

/* ── Retro Texture Classes ── */

/* Halftone dot pattern overlay */
.halftone {
  position: relative;
}
.halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 1;
}

/* Paper texture — subtle grain */
.paper-texture {
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(139, 94, 60, 0.02) 2px,
      rgba(139, 94, 60, 0.02) 4px
    );
}

/* CSS brick wall pattern */
.brick-bg {
  background-color: var(--color-brick);
  background-image:
    linear-gradient(
      335deg,
      var(--color-brick-dark) 23px,
      transparent 23px
    ),
    linear-gradient(
      155deg,
      var(--color-brick-dark) 23px,
      transparent 23px
    ),
    linear-gradient(
      335deg,
      var(--color-brick-dark) 23px,
      transparent 23px
    ),
    linear-gradient(
      155deg,
      var(--color-brick-dark) 23px,
      transparent 23px
    );
  background-size: 58px 49px;
  background-position:
    0px 2px,
    4px 35px,
    29px 31px,
    34px 17px;
}

/* Starburst badge shape */
.starburst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    50% 0%, 61% 11%, 75% 3%, 78% 18%,
    93% 18%, 88% 33%, 100% 41%, 90% 52%,
    97% 65%, 83% 68%, 83% 83%, 68% 78%,
    59% 93%, 50% 82%, 41% 93%, 32% 78%,
    17% 83%, 17% 68%, 3% 65%, 10% 52%,
    0% 41%, 12% 33%, 7% 18%, 22% 18%,
    25% 3%, 39% 11%
  );
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
}

/* DARE-style gradient banner */
.dare-banner {
  background: var(--gradient-dare-banner);
  color: white;
  padding: 0.75rem 1.5rem;
  font-family: 'Bangers', cursive;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  border: 3px solid var(--color-primary-dark);
}

/* Speech bubble from mascot */
.speech-bubble {
  position: relative;
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  color: var(--color-primary-dark);
}
.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 24px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: var(--color-primary);
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 26px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--color-bg);
}

/* PSA "The More You Know" style tip box */
.psa-box {
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  border-top: 6px solid var(--color-accent);
  padding: 1.25rem;
  position: relative;
}
.psa-box::before {
  content: '\2605';
  position: absolute;
  top: -18px;
  left: 12px;
  font-size: 1.5rem;
  color: var(--color-accent);
  text-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Safety stripe — yellow/black warning border */
.safety-stripe {
  border-image: repeating-linear-gradient(
    -45deg,
    #e8d44d 0px,
    #e8d44d 8px,
    #1a1a1a 8px,
    #1a1a1a 16px
  ) 10;
  border-width: 4px;
  border-style: solid;
}

/* ── Retro Typography Utilities ── */

.dare-text {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.psa-tip {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-primary);
}

.calc-says {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-primary-dark);
}
.calc-says::before {
  content: 'CALC SAYS: ';
  font-family: 'Bangers', cursive;
  color: var(--color-accent-dark);
}

.retro-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: 'Bangers', cursive;
  padding: 0.25rem 0.75rem;
  border: 2px solid var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* ── Header Retro Styles ── */

.dare-header {
  background-color: var(--color-primary-dark);
  border-bottom: 3px solid transparent;
  border-image: var(--gradient-sunset) 1;
  position: relative;
}
.dare-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
}
.dare-header .site-brand {
  color: var(--color-accent) !important;
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
.dare-header .site-brand:hover {
  color: #fff !important;
}
.dare-header nav a:not(.site-brand) {
  color: #fdf6e3 !important;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.dare-header nav a:not(.site-brand):hover {
  color: var(--color-accent) !important;
}

/* ── Footer Retro Styles ── */

.dare-footer {
  background-color: #0d2b14;
  position: relative;
}
.dare-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
}
.dare-footer h3,
.dare-footer h4 {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
}
.dare-footer a {
  transition: color 0.2s;
}
.dare-footer a:hover {
  color: var(--color-accent) !important;
}

/* ── Hero Section ── */

.dare-hero {
  background: var(--gradient-sunset);
  position: relative;
  overflow: hidden;
  padding: 4rem 1rem;
}
.dare-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  pointer-events: none;
}
.dare-hero h1 {
  font-family: 'Bangers', cursive;
  color: #fdf6e3;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
}
.dare-hero p {
  font-family: 'Permanent Marker', cursive;
  color: rgba(253, 246, 227, 0.9);
}

/* ── Tool Cards Retro ── */

.dare-card {
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  transition: all 0.2s ease;
}
.dare-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(45, 122, 58, 0.2);
}
.dare-card h2,
.dare-card h3 {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.03em;
}
.dare-card p {
  font-family: 'Roboto Slab', serif;
}

/* Icon starburst wrapper inside cards */
.icon-starburst {
  background: var(--color-accent);
  clip-path: polygon(
    50% 0%, 61% 11%, 75% 3%, 78% 18%,
    93% 18%, 88% 33%, 100% 41%, 90% 52%,
    97% 65%, 83% 68%, 83% 83%, 68% 78%,
    59% 93%, 50% 82%, 41% 93%, 32% 78%,
    17% 83%, 17% 68%, 3% 65%, 10% 52%,
    0% 41%, 12% 33%, 7% 18%, 22% 18%,
    25% 3%, 39% 11%
  );
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* NEW badge — starburst style */
.new-badge-dare {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: 'Bangers', cursive;
  font-size: 0.7rem;
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  clip-path: polygon(
    50% 0%, 61% 11%, 75% 3%, 78% 18%,
    93% 18%, 88% 33%, 100% 41%, 90% 52%,
    97% 65%, 83% 68%, 83% 83%, 68% 78%,
    59% 93%, 50% 82%, 41% 93%, 32% 78%,
    17% 83%, 17% 68%, 3% 65%, 10% 52%,
    0% 41%, 12% 33%, 7% 18%, 22% 18%,
    25% 3%, 39% 11%
  );
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Category badge — retro pill */
.category-badge-dare {
  display: inline-block;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Filter Tabs Retro ── */

.dare-tab {
  font-family: 'Bangers', cursive;
  border: 3px solid var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.25rem;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s;
}
.dare-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.dare-tab.active {
  background: var(--gradient-sunset);
  color: white;
  border-color: transparent;
}

/* ── Calculator Form Retro ── */

.dare-form-card {
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  padding: 1.5rem;
}
.dare-form-card h2 {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-primary);
}
.dare-form-card label {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.dare-form-card input,
.dare-form-card select {
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  font-family: 'Roboto Slab', serif;
}
.dare-form-card input:focus,
.dare-form-card select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}

/* Calculate button — retro sunset */
.dare-calculate-btn {
  background: var(--gradient-sunset) !important;
  font-family: 'Bangers', cursive !important;
  font-size: 1.25rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 3px solid var(--color-primary-dark) !important;
  color: white !important;
  transition: all 0.2s;
}
.dare-calculate-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(232, 125, 62, 0.4);
}

/* ── Results Display Retro ── */

.dare-result-card {
  border-left: 5px solid var(--color-accent);
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  border-left: 5px solid var(--color-accent);
}
.dare-result-number {
  font-family: 'Bangers', cursive;
  font-size: 3.5rem;
  color: var(--color-primary);
  line-height: 1;
}
.dare-result-label {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* PSA Tip inside results */
.dare-psa-tip {
  background: var(--color-bg-alt);
  border: 3px solid var(--color-info);
  border-top: 6px solid var(--color-accent);
  padding: 1rem;
  position: relative;
}
.dare-psa-tip::before {
  content: '\2605 PSA TIP';
  font-family: 'Bangers', cursive;
  color: var(--color-accent-dark);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}

/* Warning box — safety stripe */
.dare-warning {
  border: 4px solid;
  border-image: repeating-linear-gradient(
    -45deg,
    #e8d44d 0px,
    #e8d44d 8px,
    #1a1a1a 8px,
    #1a1a1a 16px
  ) 10;
  padding: 1rem;
  background: var(--color-bg);
}
.dare-warning h3 {
  font-family: 'Bangers', cursive;
  color: var(--color-danger);
}

/* ── Educational Sections ── */

.dare-education {
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  border-left: 6px solid var(--color-accent);
  padding: 1.5rem;
  position: relative;
}
.dare-education::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
}
.dare-education h2 {
  font-family: 'Bangers', cursive;
  color: var(--color-primary);
  letter-spacing: 0.03em;
}
.dare-education h3 {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-primary-dark);
}
.dare-education p {
  font-family: 'Roboto Slab', serif;
}

/* FAQ "Hotline" */
.dare-faq h2::after {
  content: ' \260E';
}

/* ── Breadcrumb Retro ── */

.dare-breadcrumb {
  font-family: 'Permanent Marker', cursive;
  color: var(--color-primary);
  font-size: 0.9rem;
}
.dare-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.dare-breadcrumb a:hover {
  color: var(--color-accent-dark);
}

/* ── Newsletter Brick Section ── */

.dare-newsletter {
  position: relative;
}
.dare-newsletter h2 {
  font-family: 'Bungee Shade', sans-serif;
  color: var(--color-accent);
  text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}
.dare-newsletter input {
  border: 3px solid var(--color-primary);
  background: var(--color-bg);
  font-family: 'Roboto Slab', serif;
}
.dare-newsletter button {
  background: var(--gradient-sunset);
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 3px solid var(--color-primary-dark);
}

/* ── Age Verification Modal Retro ── */

.dare-modal {
  background: var(--color-primary-dark);
  border: 4px solid var(--color-accent);
  color: #fdf6e3;
}
.dare-modal h2 {
  font-family: 'Bangers', cursive;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.dare-modal p {
  font-family: 'Roboto Slab', serif;
}
.dare-modal .confirm-btn {
  background: var(--color-accent);
  color: var(--color-text);
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 3px solid var(--color-text);
  transition: all 0.2s;
}
.dare-modal .confirm-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(232, 212, 77, 0.4);
}
.dare-modal .exit-btn {
  background: transparent;
  color: #fdf6e3;
  border: 3px solid rgba(253, 246, 227, 0.4);
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dare-modal .exit-btn:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ── Feature Cards — PSA Poster Style ── */

.dare-feature {
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  padding: 1.5rem;
  text-align: center;
  position: relative;
}
.dare-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
}
.dare-feature h3 {
  font-family: 'Bangers', cursive;
  color: var(--color-primary);
}
.dare-feature p {
  font-family: 'Roboto Slab', serif;
  color: var(--color-text-muted);
}

/* ── Unit Toggle Retro ── */

.dare-unit-toggle {
  border: 3px solid var(--color-primary);
  overflow: hidden;
}
.dare-unit-toggle button {
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.dare-unit-toggle button.active-unit {
  background: var(--color-primary) !important;
  color: white !important;
}
.dare-unit-toggle button:not(.active-unit) {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* ── Mascot / Tagline ── */

.tagline-badge {
  font-family: 'Bungee Shade', sans-serif;
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.15);
}

/* ── Responsive Overrides ── */

@media (max-width: 640px) {
  .dare-hero {
    padding: 2.5rem 1rem;
  }
  .dare-hero h1 {
    font-size: 2rem;
  }
  .dare-result-number {
    font-size: 2.5rem;
  }
  .dare-newsletter h2 {
    font-size: 1.5rem;
  }
}