/**
 * StreamVerse — Footer
 *
 * Built fresh (there was no existing Footer before), but deliberately
 * from the same pieces every other section already uses, not a new
 * visual language:
 *   - Container/inner + breakpoint padding-inline: the exact pattern
 *     every section (`.pricing__container`, `.channels-carousel__inner`,
 *     etc.) already uses (--space-5 -> --space-6 @768 -> --space-7 @1024).
 *   - Column titles: --text-h4 (22px/600), tokens.css's own "small
 *     headings" size — never a full section --text-h2 title, since a
 *     footer column heading is a smaller-order heading than "Popular
 *     Movies" or "Choose Your Plan".
 *   - About/contact-label copy: the exact #A3AED0 used sitewide for
 *     every other section's subtitle/description text (Hero, Pricing,
 *     the carousels, the banners) — not the --color-text-secondary
 *     token, which the rest of the codebase already reserves
 *     specifically for nav-style links (see .header__drawer-link).
 *   - Link list items: --color-text-secondary + violet accent hover —
 *     the same treatment as the Header's own drawer nav links, since
 *     Quick Links/Support are functionally the same kind of element.
 *   - Icons: same 24x24 viewBox / stroke-width 2 / round-cap outline
 *     language as every checkmark and nav-arrow icon elsewhere, sized
 *     down and accent-colored like `.pricing-card__feature-icon`, with
 *     no circular badge/glow — kept deliberately plain and small so
 *     the footer reads as "minimal utility area," not another feature
 *     banner.
 *
 * Compacting pass, per explicit request for a tighter, content-sized
 * Footer with a distinct, shorter copyright bar:
 *   - `.site-footer__main` and `.site-footer__bottom` are now two
 *     separate full-width bands (see index.html) instead of the
 *     copyright line living inside the same padded container as the
 *     columns — that's what lets the bottom bar have its own
 *     background and its own short, symmetric padding, independent of
 *     the main area's spacing.
 *   - Colors: main band keeps the existing --color-bg-surface (one
 *     tier above the page's own --color-bg-base); the copyright bar
 *     uses --color-bg-base itself — already the darkest existing tier
 *     in tokens.css's own dark-mode scale, so the "slightly
 *     darker/deeper tone" the request asks for is an existing token,
 *     not a new color. Both keep the same --color-border-subtle hairline
 *     technique used everywhere else for a section boundary.
 *
 * No new colors, radii, or type sizes were introduced — every spacing
 * value below is an existing token, several stepped down one or two
 * notches on the existing --space-* scale from the first pass.
 */

.site-footer__main {
  /* Flat solid fill, per explicit request to remove the gradient
     bleed that used to extend up into this element's bottom edge —
     no gradient, no purple tint here, just the same plain background
     this had before any gradient experimentation. */
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
  /* Symmetric and tightened from --space-7/--space-5 (48px/24px) —
     the old asymmetric values existed to lead into the copyright line
     that used to live in this same band; now that the copyright bar
     is its own separate strip below, this only needs to be a normal,
     content-sized section padding. */
  padding-block: var(--space-6);
}

.site-footer__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
 * Column grid — 1 column (mobile) -> 2x2 (tablet) -> 4-across
 * (desktop), the same breakpoint shape as `.pricing__grid`. Gap
 * tightened from --space-6 (32px) -> --space-5 (24px) at the stacked
 * (mobile/tablet) shape, per explicit request to reduce the vertical
 * gaps between columns there; the desktop row gap was already a tight
 * --space-5 and is unchanged.
 * ------------------------------------------------------------------ */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.site-footer__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4); /* 22px — tokens.css's own "small headings" size */
  line-height: var(--text-h4-line-height);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3); /* tightened from --space-4 (16px) */
}

/* ------------------------------------------------------------------
 * About Us
 * ------------------------------------------------------------------ */
.site-footer__about-text {
  max-width: 34ch; /* keeps the paragraph reading as short/balanced
                       lines rather than stretching the full column
                       width at wider breakpoints, same technique the
                       Hero/Pricing subtitles already use. */
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line-height);
  font-weight: 400;
  color: #A3AED0;
}

/* ------------------------------------------------------------------
 * Contact Info
 * ------------------------------------------------------------------ */
.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* tightened from --space-4 (16px) */
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2); /* tightened from --space-3 (12px) */
}

.site-footer__contact-icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.site-footer__contact-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A3AED0;
}

.site-footer__contact-link {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  word-break: break-word; /* keeps a long email from causing horizontal
                              overflow on narrow columns/phones */
  transition: color var(--duration-micro) var(--ease-standard);
}

.site-footer__contact-link:hover {
  color: var(--color-accent-hover);
}

/* ------------------------------------------------------------------
 * Quick Links / Support — same link treatment as the Header's own
 * drawer nav links (.header__drawer-link): --color-text-secondary at
 * rest, brand-accent on hover. A comfortable padding-block on each
 * link keeps every row an easy, well-spaced tap target on mobile.
 * ------------------------------------------------------------------ */
.site-footer__link-list {
  display: flex;
  flex-direction: column;
}

.site-footer__link {
  display: inline-block;
  padding-block: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  transition: color var(--duration-micro) var(--ease-standard);
}

.site-footer__link:hover {
  color: var(--color-accent-hover);
}

/* ------------------------------------------------------------------
 * Copyright bar — its own full-width strip (a sibling of
 * `.site-footer__main` in index.html, not nested inside its padded
 * `.site-footer__inner`), so it can carry a different background and
 * a short, symmetric padding independent of the main area's spacing.
 * --space-3 (12px) top/bottom is squarely inside the requested
 * 10-14px range and is an existing scale token, not a new value —
 * tightened from --space-4 (16px) per explicit request to make this
 * a thin, compact strip that fits the text naturally rather than a
 * large section with extra empty space. No min-height anywhere here,
 * so the bar's height is just this padding plus the line's own
 * content height. Flex-centers the text both ways per request — with
 * only a single line of content and symmetric padding this is
 * equivalent to plain text-align:center, but makes the vertical
 * centering explicit and robust rather than incidental.
 *
 * Background — flat solid fill, per explicit request to remove the
 * gradient/transition entirely and go back to a clean solid purple:
 * --color-accent (#7C3AED), the site's own normal/resting accent tone
 * (the same one used as-is for every `.btn--primary` fill, e.g.
 * "Subscription Now"/"Get Started") — not the brighter
 * --color-accent-hover, which is reserved for hover states. No
 * gradient, no glow, no animation — one existing token, flat.
 * ------------------------------------------------------------------ */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-3);
  padding-inline: var(--space-5); /* safety gutter only — matches the
                                       narrowest container padding used
                                       everywhere else, prevents the
                                       text ever touching the viewport
                                       edge on very narrow phones */
  background-color: var(--color-accent);
  text-align: center;
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  /* White, per request — the same token `.btn--primary` already uses
     for text sitting on this exact accent background. */
  color: var(--color-text-on-accent);
}

/* Brand name inside the copyright line — per explicit request, made
   "slightly more prominent, but subtle and premium." A weight bump
   only (the line's own 400 -> 600) rather than a color, size, or
   background change: it stays the exact same white as the rest of
   the line and the exact same font-size, so it reads as a quiet
   emphasis rather than a second visual element competing with the
   plain copyright text around it. 600 (semi-bold) was chosen over
   700 (the header logo's own weight) specifically to keep this
   subtle at copyright-line scale rather than reading as a second
   logo/wordmark moment. */
.site-footer__copyright-brand {
  font-weight: 600;
}