/* ============================================================
   SWN Christmas Theme Overrides — v1
   Loaded AFTER the base swn_guide_styles.css.
   Palette: Dark evergreen + team primary + team gold/secondary.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');

/* === Variant: christmas === */
/* ============================================================
   SWN Christmas Theme Overrides — v1
   Loaded AFTER the base swn_guide_styles.css.
   Palette: Dark evergreen + 49ers scarlet + 49ers gold.
   Naturally-aligned with team colors since 49ers scarlet/gold
   already read as Christmas colors.
   ============================================================ */

/* Festive display font — used for h1, Quick Picks, section names, FAQ heading.
   Body copy and product titles stay on the base Fraunces/IBM Plex stack. */


.swn-guide {
  /* Christmas display font */
  --font-display-christmas: 'Mountains of Christmas', 'Fraunces', Georgia, serif;

  /* === Christmas color tokens === */
  --team-primary: #c41e3a;          /* Christmas scarlet (rich, team-adjacent) */
  --team-secondary: #d4a13b;        /* 49ers gold — keeps team color identity */
  --team-ink: #f5e6d3;              /* Warm cream — pairs with gold accent */
  --team-paper: #0b2619;            /* Deep evergreen page bg */
  --team-card-bg: #143628;          /* Darker evergreen card */
  --team-muted: #a3b5a8;            /* Muted sage-green */
  --team-line: #1e4a35;             /* Evergreen border */
  --team-accent-warm: #f0c75e;      /* Brighter gold for prices/badges */
  --team-accent-red: #e63946;       /* Bright holiday red for sale tags */
  --team-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Christmas-specific custom tokens */
  --christmas-gold-glow: 0 0 20px rgba(240, 199, 94, 0.35);
  --christmas-scarlet-glow: 0 0 20px rgba(196, 30, 58, 0.35);
  --christmas-bg-gradient: linear-gradient(180deg, #0b2619 0%, #0f2f1f 100%);

  background: var(--christmas-bg-gradient);
  background-attachment: fixed;
}

/* === Header block === */
.swn-guide .swn-header {
  background: transparent;
  border-bottom-color: var(--team-line);
}

.swn-guide .swn-breadcrumb a {
  color: var(--team-muted);
}

.swn-guide .swn-breadcrumb a:hover {
  color: var(--team-accent-warm);
}

.swn-guide .swn-breadcrumb .swn-breadcrumb-current {
  color: var(--team-accent-warm);
}

/* === Headline — Mountains of Christmas + gold shimmer === */
.swn-guide .swn-h1 {
  font-family: var(--font-display-christmas);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--team-ink);
  text-shadow: 0 0 30px rgba(240, 199, 94, 0.2);
}

.swn-guide .swn-subtitle {
  color: var(--team-muted);
}

.swn-guide .swn-byline {
  color: var(--team-muted);
}

.swn-guide .swn-byline strong {
  color: var(--team-accent-warm);
}

/* === Hero image — gold-glow frame === */
.swn-guide .swn-hero-link picture {
  box-shadow:
    0 0 0 1px var(--team-line),
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(240, 199, 94, 0.10);
  border-radius: 8px;
  overflow: hidden;
}

.swn-guide .swn-hero-caption {
  color: var(--team-muted);
  background: rgba(20, 54, 40, 0.6);
}

.swn-guide .swn-hero-caption a {
  color: var(--team-accent-warm);
}

.swn-guide .swn-hero-caption a:hover {
  color: var(--team-primary);
  text-decoration-color: var(--team-primary);
}

/* === Affiliate disclosure === */
.swn-guide .swn-disclosure {
  background: rgba(196, 30, 58, 0.06);
  color: var(--team-muted);
}

/* === Intro paragraphs — scarlet drop cap === */
.swn-guide .swn-intro p {
  color: var(--team-ink);
}

.swn-guide .swn-intro p:first-of-type::first-letter {
  color: var(--team-primary);
  text-shadow: 0 0 12px rgba(196, 30, 58, 0.3);
}

/* === Quick picks — dark evergreen cards with gold hover === */
.swn-guide .swn-quick-picks {
  background: rgba(20, 54, 40, 0.4);
  border-top-color: var(--team-line);
  border-bottom-color: var(--team-line);
}

.swn-guide .swn-quick-picks-heading {
  font-family: var(--font-display-christmas);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--team-ink);
}

.swn-guide .swn-quick-pick {
  background: var(--team-card-bg);
  border: 1px solid var(--team-line);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.swn-guide .swn-quick-pick:hover {
  border-color: var(--team-accent-warm);
  box-shadow: var(--christmas-gold-glow);
  transform: translateY(-2px);
}

.swn-guide .swn-quick-pick-label {
  color: var(--team-accent-warm);
}

.swn-guide .swn-quick-pick-title {
  color: var(--team-ink);
}

.swn-guide .swn-quick-pick:hover .swn-quick-pick-title {
  color: var(--team-accent-warm);
}

/* === Shipping tip — scarlet-and-gold gradient callout === */
.swn-guide .swn-tip {
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.08), rgba(240, 199, 94, 0.06));
  border: 1px solid var(--team-line);
  border-left: 3px solid var(--team-primary);
  color: var(--team-ink);
}

.swn-guide .swn-tip strong {
  color: var(--team-accent-warm);
}

.swn-guide .swn-tip a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(240, 199, 94, 0.6);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.swn-guide .swn-tip a:hover {
  color: var(--team-accent-warm);
  text-decoration-color: var(--team-accent-warm);
}

/* === Section nav === */
.swn-guide .swn-section-nav {
  background: rgba(20, 54, 40, 0.3);
  border-top-color: var(--team-line);
  border-bottom-color: var(--team-line);
}

.swn-guide .swn-section-nav-label {
  color: var(--team-muted);
}

.swn-guide .swn-section-nav-link {
  color: var(--team-ink);
  border-bottom: 1px solid transparent;
}

.swn-guide .swn-section-nav-link:hover,
.swn-guide .swn-section-nav-link:focus {
  color: var(--team-accent-warm);
  border-bottom-color: var(--team-accent-warm);
}

/* === Sections / tiers === */
.swn-guide .swn-tier {
  border-top: 1px solid var(--team-line);
}

.swn-guide .swn-tier-eyebrow {
  color: var(--team-accent-warm);
}

.swn-guide .swn-tier-name {
  font-family: var(--font-display-christmas);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--team-ink);
}

.swn-guide .swn-tier-desc {
  color: var(--team-muted);
}

/* === Product cards — dark evergreen with gold hover halo === */
.swn-guide .swn-product {
  background: var(--team-card-bg);
  border: 1px solid var(--team-line);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.swn-guide .swn-product:hover {
  border-color: var(--team-accent-warm);
  box-shadow: var(--christmas-gold-glow);
  transform: translateY(-1px);
}

.swn-guide .swn-product.swn-top-pick {
  border-color: var(--team-accent-warm);
  box-shadow: var(--christmas-gold-glow);
  background: linear-gradient(180deg, var(--team-card-bg) 0%, rgba(240, 199, 94, 0.03) 100%);
}

/* Top-pick badge — gold gradient, scarlet border glow */
.swn-guide .swn-product-badge {
  background: linear-gradient(135deg, var(--team-accent-warm), var(--team-secondary));
  color: #0b2619;  /* evergreen text on gold bg for max contrast */
  box-shadow: 0 2px 8px rgba(240, 199, 94, 0.4);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Product image area — light tray so product photos pop */
.swn-guide .swn-product-image {
  background: #f8f5ef;
}

/* Product text */
.swn-guide .swn-product-meta {
  color: var(--team-muted);
}

.swn-guide .swn-product-title a {
  color: var(--team-ink);
}

.swn-guide .swn-product-title a:hover {
  color: var(--team-accent-warm);
}

.swn-guide .swn-product-price-current {
  color: var(--team-accent-warm);
  font-weight: 600;
}

.swn-guide .swn-product-price-original {
  color: var(--team-muted);
}

.swn-guide .swn-product-sale-tag {
  background: var(--team-accent-red);
  color: #ffffff;
}

.swn-guide .swn-product-desc {
  color: var(--team-muted);
}

.swn-guide .swn-product-desc.swn-product-desc-editorial {
  color: var(--team-ink);
}

/* === CTA buttons — scarlet primary, solid gold on hover === */
.swn-guide .swn-product-cta {
  background: linear-gradient(135deg, var(--team-primary), #a11a31);
  color: #ffffff;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.swn-guide .swn-product-cta:hover {
  background: var(--team-accent-warm);
  color: #0b2619;  /* dark evergreen — high contrast on gold */
  box-shadow: 0 4px 16px rgba(240, 199, 94, 0.35);
  transform: translateY(-1px);
}
.swn-guide .swn-product-cta:hover .swn-product-cta-arrow {
  color: #0b2619;
}

.swn-guide .swn-product-cta-arrow {
  color: #ffffff;
}

/* === FAQ === */
.swn-guide .swn-faq {
  background: rgba(20, 54, 40, 0.4);
  border-top: 1px solid var(--team-line);
  border-bottom: 1px solid var(--team-line);
}

.swn-guide .swn-faq-eyebrow {
  color: var(--team-accent-warm);
}

.swn-guide .swn-faq-heading {
  font-family: var(--font-display-christmas);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--team-ink);
}

.swn-guide .swn-faq-item {
  border-top-color: var(--team-line);
}

.swn-guide .swn-faq-q {
  color: var(--team-ink);
}

.swn-guide .swn-faq-a {
  color: var(--team-muted);
}

.swn-guide .swn-faq-a a[rel*="sponsored"] {
  color: var(--team-accent-warm);
}

.swn-guide .swn-faq-a a[rel*="sponsored"]:hover {
  color: var(--team-primary);
}

.swn-guide .swn-faq-a a:not([rel*="sponsored"]) {
  color: var(--team-accent-warm);
}

.swn-guide .swn-faq-a strong {
  color: var(--team-ink);
}

/* === Related guides === */
.swn-guide .swn-related {
  border-top: 1px solid var(--team-line);
}

.swn-guide .swn-related-eyebrow {
  color: var(--team-accent-warm);
}

.swn-guide .swn-related-heading {
  color: var(--team-ink);
}

.swn-guide .swn-related-list a {
  color: var(--team-ink);
  border-bottom: 1px solid var(--team-line);
  transition: all 0.2s ease;
}

.swn-guide .swn-related-list a:hover {
  color: var(--team-accent-warm);
  border-bottom-color: var(--team-accent-warm);
  background: rgba(240, 199, 94, 0.04);
}

.swn-guide .swn-related-arrow {
  color: var(--team-muted);
}

.swn-guide .swn-related-list a:hover .swn-related-arrow {
  color: var(--team-accent-warm);
}

/* === Closing block — gold-to-scarlet CTA === */
.swn-guide .swn-closing {
  background: transparent;
  border-top: 1px solid var(--team-line);
}

.swn-guide .swn-closing-text {
  color: var(--team-muted);
}

.swn-guide .swn-closing-cta {
  background: var(--team-primary);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.3);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.swn-guide .swn-closing-cta:hover {
  background: var(--team-accent-warm);
  color: #0b2619;  /* dark evergreen — high contrast on gold */
  box-shadow: 0 6px 20px rgba(240, 199, 94, 0.4);
  transform: translateY(-1px);
}
.swn-guide .swn-closing-cta:hover .swn-closing-cta-arrow {
  color: #0b2619;
}

/* === Default link color === */
.swn-guide a {
  color: var(--team-accent-warm);
}

.swn-guide a:hover {
  color: var(--team-primary);
}
</style>