/*
 * EXTRACTOR THEME OVERLAY
 * Applies the editorial / neo-brutalist design from extractor-html-a-texto.html
 * to the homepage and taxonomy store pages.
 *
 * TO DISABLE: set define('COUPONSITE_EXTRACTOR_THEME', false) in functions.php
 */

/* === Design tokens === */
:root {
  --ext-bg:           #f4f1ea;
  --ext-ink:          #1a1a1a;
  --ext-accent:       #c8553d;
  --ext-accent-soft:  #e8a598;
  --ext-muted:        #6b6356;
  --ext-paper:        #fffdf7;
  --ext-border:       #1a1a1a;
}

/* === Base === */

body {
  font-family: 'Fraunces', serif;
  background: var(--ext-bg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(200, 85, 61, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(26, 26, 26, 0.04) 0%, transparent 40%);
  color: var(--ext-ink);
}

a { color: var(--ext-ink); }

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  letter-spacing: -0.02em;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* === Site header === */

header.header-bar {
  background: var(--ext-paper);
  border-bottom: 2px solid var(--ext-border);
}

.logo {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  color: var(--ext-ink);
  font-size: 1.5rem;
}

.top-menu a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ext-muted);
}

.top-menu a:hover { color: var(--ext-accent); }

/* === Store grid (homepage logos) === */

.store-grid {
  background: transparent;
}

.store-grid a {
  background: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ext-border);
  transition: transform 0.1s ease;
}

.store-grid a:hover {
  transform: translate(-2px, -2px);
}

/* === Coupon cards === */

.coupon {
  background: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ext-border);
  transition: transform 0.1s ease;
}

.coupon:hover {
  transform: translate(-1px, -1px);
}

.coupon.featured-coupon {
  border: 2px solid var(--ext-border);
  border-top: 4px solid var(--ext-accent);
}

.coupon-title a {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--ext-ink);
}

.coupon-title a:hover { color: var(--ext-accent); }

.coupon-desc {
  font-family: 'Fraunces', serif;
  color: var(--ext-muted);
}

.coupon-desc-toggle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ext-muted);
}

.top-label {
  background: var(--ext-accent);
  color: var(--ext-paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  border-radius: 2px;
  letter-spacing: 0.15em;
}

/* Coupon signals */
.coupon-expiry,
.coupon-signal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ext-muted);
}

.coupon-expiry--urgent { color: var(--ext-accent); }

/* === Buttons === */

/* The full ticket (.btn-coupon + .code-teaser) gets shadow as a unit */
.coupon-cta {
  box-shadow: 4px 4px 0 var(--ext-border);
  border-radius: 4px;
  transition: transform 0.1s ease;
}

.coupon-cta:hover {
  transform: translate(-2px, -2px);
}

/* Coupon button (left half of ticket) */
.btn-coupon {
  background: var(--ext-ink);
  color: var(--ext-paper);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  border: 2px solid var(--ext-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  box-shadow: none;
}

.btn-coupon:hover,
.btn-coupon:focus {
  background: #333;
  filter: none;
}

/* Code teaser (right half of ticket) */
.code-teaser {
  background: var(--ext-paper);
  border: 2px dashed var(--ext-border);
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--ext-ink);
  letter-spacing: 3px;
}

/* Standalone offer button (no code) */
.btn-offer,
.coupon-cta .btn-offer {
  background: var(--ext-accent);
  color: var(--ext-paper);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: none;
}

.btn-offer:hover { background: #b34a33; filter: none; }

/* Modal primary button */
#coupon-body .btn.btn-primary {
  background: var(--ext-accent);
  color: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ext-border);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  height: auto;
  padding: 10px 20px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#coupon-body .btn.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ext-border);
  filter: none;
}

/* === Store header (taxonomy page) === */

.store-header {
  text-align: left;
  background: transparent;
  padding: 1rem 0;
}

.store-logo-canvas {
  background: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ext-border);
}

.store-header h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ext-muted);
  margin-top: 4px;
}

/* === Content boxes (about, leaflet, FAQ, related) === */

.html-box {
  background: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ext-border);
  color: var(--ext-muted);
}

.html-box h2,
.html-box-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--ext-ink);
  letter-spacing: -0.02em;
}

/* Homepage h2 ("Latest Coupons" heading) */
.coupons > h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ext-ink);
  border-bottom: 2px solid var(--ext-border);
  padding-bottom: 8px;
  margin-bottom: 1.5rem;
}

/* === Related sections === */

.related-stores a {
  color: var(--ext-accent);
}

.related-stores a:hover {
  text-decoration: underline;
  color: var(--ext-ink);
}

.related-coupons-table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--ext-border);
  color: var(--ext-muted);
}

.related-coupons-table tbody tr:nth-child(odd) {
  background: rgba(244, 241, 234, 0.5);
}

.related-coupons-table .btn-visit {
  background: var(--ext-ink);
  color: var(--ext-paper);
  border-radius: 3px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
}

.related-coupons-table .btn-visit:hover {
  background: var(--ext-accent);
  color: var(--ext-paper);
}

/* === Coupon modal === */

#coupon-modal .modal-dialog {
  background: var(--ext-paper);
  border: 2px solid var(--ext-border);
  border-radius: 4px;
  box-shadow: 8px 8px 0 var(--ext-border);
  animation: none;
  transform: none;
  opacity: 1;
}

#coupon-body h2#coupon-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--ext-ink);
}

#coupon-body .coupon-code {
  font-family: 'JetBrains Mono', monospace;
  border-color: var(--ext-accent);
  background: var(--ext-bg);
  border-radius: 4px;
}

#coupon-body .copy-btn {
  font-family: 'JetBrains Mono', monospace;
  border-color: var(--ext-accent-soft);
  border-radius: 3px;
}

#coupon-body .coupon-terms {
  font-family: 'Fraunces', serif;
  color: var(--ext-muted);
}

/* === Footer === */

.footer-bar {
  background: var(--ext-paper);
  border-top: 2px solid var(--ext-border);
}

.footer-menu a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ext-muted);
}

.footer-menu a:hover { color: var(--ext-accent); }