/* ============================================================
   RETRO THEME — late-90s portal (Yahoo! homepage vibe)
   All rules scoped to [data-theme="retro"]. Loaded after styles.css.
   ============================================================ */

[data-theme="retro"] {
  --r-bg:        #FFFFFF;
  --r-page:      #FFFFFF;
  --r-paper:     #FFFFFF;
  --r-alt:       #F4F4F4;     /* table-row stripe */
  --r-shade:     #ECECEC;     /* light section panels */
  --r-rule:      #999999;
  --r-rule-soft: #CCCCCC;

  --r-text:      #000000;
  --r-mute:      #444444;
  --r-faint:     #666666;

  --r-link:      #0000CC;
  --r-visited:   #660066;
  --r-hover:     #CC0000;

  --r-brand:     #6b30ac;     /* Coax brand purple */
  --r-brand-2:   #54237d;     /* darker variant for borders */
  --r-accent:    #CC0000;     /* portal "headline" red */
  --r-tab:       #EDE3F6;     /* tinted band fill */

  --r-gray:      #C0C0C0;
  --r-darkgray:  #808080;
}

/* ---- Base ---- */
[data-theme="retro"] html { scroll-behavior: auto; }

[data-theme="retro"] body {
  background: var(--r-bg);
  background-image: none;
  color: var(--r-text);
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

[data-theme="retro"] img { image-rendering: auto; }

[data-theme="retro"] a {
  color: var(--r-link);
  text-decoration: underline;
  transition: none;
}
[data-theme="retro"] a:visited { color: var(--r-visited); }
[data-theme="retro"] a:hover   { color: var(--r-hover); text-decoration: underline; }
[data-theme="retro"] a:active  { color: var(--r-hover); }

[data-theme="retro"] p { line-height: 1.5; font-size: 13px; }
[data-theme="retro"] strong { color: var(--r-text); font-weight: bold; }

/* ---- Typography ---- */
[data-theme="retro"] h1,
[data-theme="retro"] h2,
[data-theme="retro"] h3 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--r-text);
}

[data-theme="retro"] h1 { font-size: 22px; font-weight: bold; }
[data-theme="retro"] h2 { font-size: 18px; font-weight: bold; }
[data-theme="retro"] h3 { font-size: 14px; font-weight: bold; }

[data-theme="retro"] .serif {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
}

/* ---- Page width frame ---- */
[data-theme="retro"] section.band,
[data-theme="retro"] .topnav,
[data-theme="retro"] .press,
[data-theme="retro"] .support,
[data-theme="retro"] .hero {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Sections (bands) ---- */
[data-theme="retro"] section.band {
  padding: 0 !important;
  background: var(--r-paper) !important;
  border: 1px solid var(--r-rule);
  border-top: 0;
  margin: 0 auto 14px;
}

[data-theme="retro"] section.band > .mx-auto,
[data-theme="retro"] section.band > .prose {
  padding: 14px 18px 18px;
}

/* Yahoo-style header bar that introduces each band */
[data-theme="retro"] section.band::before {
  content: attr(data-retro-label);
  display: block;
  background: var(--r-brand);
  color: #FFFFFF;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  text-transform: none;
  border-bottom: 1px solid var(--r-rule);
}
[data-theme="retro"] section.band:not([data-retro-label])::before { display: none; }

[data-theme="retro"] section.band h2.band-h {
  font-size: 18px;
  color: var(--r-accent);
  font-weight: bold;
  text-align: left;
  margin: 0 0 4px;
}

[data-theme="retro"] .section-subtitle {
  color: var(--r-mute);
  font-size: 12px;
  margin: 0 0 14px;
  text-align: left;
  font-style: italic;
}

/* ---- Header / Top nav ---- */
[data-theme="retro"] .topnav {
  padding: 8px 10px;
  background: var(--r-paper);
  border: 1px solid var(--r-rule);
  border-bottom: 0;
  margin-top: 14px;
  gap: 8px !important;
}

[data-theme="retro"] .topnav nav {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  gap: 10px !important;
}

[data-theme="retro"] .topnav nav a {
  color: var(--r-link);
  text-decoration: underline;
  font-weight: normal;
}
[data-theme="retro"] .topnav nav a:visited { color: var(--r-visited); }
[data-theme="retro"] .topnav nav a:hover   { color: var(--r-hover); }

[data-theme="retro"] .topnav .nav-cta {
  background: var(--r-shade);
  color: var(--r-brand) !important;
  border: 1px outset var(--r-gray);
  border-radius: 0;
  padding: 3px 10px;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  animation: none;
}
[data-theme="retro"] .topnav .nav-cta:hover {
  border-style: inset;
  color: var(--r-brand) !important;
}

[data-theme="retro"] .nav-hamburger span { background: var(--r-text); }

[data-theme="retro"] .mobile-nav {
  background: var(--r-paper);
  border: 1px solid var(--r-rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 780px;
  margin: 0 auto;
}
[data-theme="retro"] .mobile-nav nav a {
  color: var(--r-link);
  border-bottom: 1px solid var(--r-rule-soft);
  font-family: Verdana, Arial, sans-serif;
}
[data-theme="retro"] .mobile-nav nav a:visited { color: var(--r-visited); }

/* ---- Hero (portal "splash" panel) ---- */
[data-theme="retro"] .hero {
  /* Override Bootstrap's d-flex on the hero — we want a plain block so the
     absolute video doesn't become a flex sibling on mobile (which would put
     it next to .hero-inner instead of stacking above it). */
  display: block !important;
  background: var(--r-paper);
  border: 1px solid var(--r-rule);
  padding: 0;
  margin-top: 0;
  margin-bottom: 14px;
  min-height: 0;
  isolation: auto;
  overflow: visible;
}

[data-theme="retro"] .hero-scrim { display: none; }

/* The hero demo video — un-hide and shrink to a small framed "postage stamp"
   in the top-right of the hero panel, with an SVG posterize filter for an
   old-school GIF look. The filter is defined inline in index.html. */
[data-theme="retro"] .hero-video {
  display: block;
  position: absolute;
  inset: auto;
  top: 50%;
  right: 22px;
  transform: translateY(-50%); /* vertical-center within the hero */
  width: 240px;
  height: 135px; /* 16:9 */
  margin: 0;
  z-index: 3;
  background: #000;
  border: 3px ridge #999;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  overflow: hidden;
  pointer-events: none;
  filter: url(#retro-posterize) contrast(1.15) saturate(1.45) brightness(1.05);
}

[data-theme="retro"] .hero-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
}

[data-theme="retro"] .hero-inner {
  position: static;
  padding: 0;
}

/* Hero layout — render as a real 2-column table (text left, video right). */
[data-theme="retro"] .hero-card .hero-layout {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
[data-theme="retro"] .hero-card .hero-layout tbody { display: table-row-group; }
[data-theme="retro"] .hero-card .hero-layout tr     { display: table-row; }
[data-theme="retro"] .hero-card .hero-layout td {
  display: table-cell;
  vertical-align: top;
  padding: 0;
}
[data-theme="retro"] .hero-card .hero-text-cell  { padding-right: 22px; }
[data-theme="retro"] .hero-card .hero-video-cell {
  display: table-cell;
  width: 240px;
  min-width: 240px;
}

/* Below 900px, drop the side-by-side layout: hide the empty video cell,
   collapse the table to a single block, and let the video stack above
   the text via its static-position mobile rules. */
@media (max-width: 900px) {
  [data-theme="retro"] .hero-card .hero-layout,
  [data-theme="retro"] .hero-card .hero-layout tbody,
  [data-theme="retro"] .hero-card .hero-layout tr,
  [data-theme="retro"] .hero-card .hero-layout td {
    display: block;
    width: auto;
    padding: 0;
  }
  [data-theme="retro"] .hero-card .hero-video-cell { display: none; }
  [data-theme="retro"] .hero-video {
    position: static;
    transform: none; /* reset the desktop translateY */
    margin: 14px auto 0; /* horizontally center the stamp */
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

[data-theme="retro"] .hero-card {
  display: block;
  width: 100%;
  max-width: none;
  background: var(--r-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 22px 20px;
  text-align: left;
}

[data-theme="retro"] .hero-card-content { text-align: left; }

[data-theme="retro"] .hero-logo {
  width: auto;
  max-width: 260px;
  margin: 0 0 12px;
  /* SVG filter recolors the white-on-transparent logo to Coax brand purple. */
  filter: url(#retro-purple);
}

[data-theme="retro"] .sticky-bar-logo {
  filter: url(#retro-purple);
}

[data-theme="retro"] .support-credit img {
  filter: brightness(0);
}

[data-theme="retro"] .hero h1 {
  font-size: 22px;
  font-weight: bold;
  color: var(--r-brand);
  text-align: left;
  margin-bottom: 6px;
}

[data-theme="retro"] .hero .tagline {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: var(--r-text);
  text-align: left;
  max-width: 560px;
}

[data-theme="retro"] .hero-card .d-flex.flex-wrap {
  justify-content: flex-start;
}

/* ---- Buttons (clean 3D bevel, restrained) ---- */
[data-theme="retro"] .btn-primary,
[data-theme="retro"] .btn-ghost,
[data-theme="retro"] .sticky-bar .btn-primary {
  border: 1px outset var(--r-gray) !important;
  border-radius: 0 !important;
  background: var(--r-shade) !important;
  color: var(--r-text) !important;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 12px;
  text-decoration: none;
  letter-spacing: 0;
  transition: none;
}
[data-theme="retro"] .btn-primary {
  background: var(--r-brand) !important;
  color: #FFFFFF !important;
  border-color: var(--r-brand-2) !important;
}
[data-theme="retro"] .btn-primary:hover,
[data-theme="retro"] .btn-ghost:hover {
  border-style: inset !important;
  opacity: 1;
  color: var(--r-text) !important;
}
[data-theme="retro"] .btn-primary:hover { color: #FFFFFF !important; }

/* ---- Press strip ---- */
[data-theme="retro"] .press {
  background: var(--r-paper) !important;
  border: 1px solid var(--r-rule);
  padding: 0;
}
[data-theme="retro"] .press > .mx-auto { padding: 14px 18px; }

[data-theme="retro"] .press-eyebrow {
  font-family: Arial, Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--r-faint);
  text-transform: uppercase;
  animation: none;
  text-align: left;
}

[data-theme="retro"] .press-card {
  background: var(--r-alt);
  border: 1px solid var(--r-rule-soft);
  border-radius: 0;
  padding: 10px 12px;
  box-shadow: none;
}

[data-theme="retro"] .press-card--featured {
  border-color: var(--r-rule);
  background: var(--r-shade);
  box-shadow: none;
}

[data-theme="retro"] .press-source {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--r-accent);
  text-transform: uppercase;
}

[data-theme="retro"] .press-card blockquote {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--r-text);
}

[data-theme="retro"] .press-card figcaption {
  font-size: 12px;
  color: var(--r-mute);
}
[data-theme="retro"] .press-card figcaption a { color: var(--r-link); font-size: 12px; }

/* ---- Prose ---- */
[data-theme="retro"] .prose h2 {
  font-size: 18px;
  color: var(--r-accent);
  text-align: left;
}

[data-theme="retro"] .prose h3 {
  font-family: Verdana, Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  color: var(--r-brand);
  text-align: left;
  text-decoration: none;
}

[data-theme="retro"] .prose p {
  color: var(--r-text);
  font-size: 13px;
}

[data-theme="retro"] .prose p.prose-lede {
  background: var(--r-shade);
  border: 1px solid var(--r-rule-soft);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--r-text);
  font-style: normal;
  text-align: left;
}

[data-theme="retro"] .prose p.prose-foot {
  border-top: 1px solid var(--r-rule-soft);
  color: var(--r-mute);
  font-size: 12px;
}

/* Overview table — render as an actual table only in retro mode.
   Undoes the prose-flow reset that styles.css applies. */
[data-theme="retro"] .prose .overview-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--r-rule);
  background: var(--r-paper);
  margin: 12px 0 0;
}
[data-theme="retro"] .prose .overview-table tbody { display: table-row-group; }
[data-theme="retro"] .prose .overview-table tr     { display: table-row; }
[data-theme="retro"] .prose .overview-table th,
[data-theme="retro"] .prose .overview-table td {
  display: table-cell;
  border: 1px solid var(--r-rule);
  padding: 8px 12px;
  vertical-align: top;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  margin: 0;
  background: var(--r-paper);
}
[data-theme="retro"] .prose .overview-table th {
  background: var(--r-tab);
  color: var(--r-brand);
  font-weight: bold;
  text-align: left;
  width: 28%;
  white-space: nowrap;
}
[data-theme="retro"] .prose .overview-table td { color: var(--r-text); }
[data-theme="retro"] .prose .overview-table td p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--r-text);
  line-height: 1.5;
}
[data-theme="retro"] .prose .overview-table td p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  [data-theme="retro"] .prose .overview-table th { white-space: normal; width: 36%; }
}

/* ---- Pitch ---- */
[data-theme="retro"] .pitch { background: var(--r-paper) !important; }

/* Force a tight side-by-side layout at every viewport: small posterized
   video preview next to the text, never the full-width Bootstrap stack. */
[data-theme="retro"] .pitch-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 16px;
  margin: 0;
  --bs-gutter-x: 0;
}
[data-theme="retro"] .pitch-row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
[data-theme="retro"] .pitch-row > .col-12.col-lg-7 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}
[data-theme="retro"] .pitch-row > .pitch-shot-col {
  flex: 0 0 180px;
  width: 180px;
  max-width: 180px;
  padding: 0;
  position: static;
  opacity: 1;
  z-index: auto;
  inset: auto;
}
[data-theme="retro"] .pitch-shot-col .shot--filled {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
  border: 3px ridge #999;
  border-radius: 0;
  background: #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
[data-theme="retro"] .pitch-shot-col video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: url(#retro-posterize) contrast(1.15) saturate(1.45) brightness(1.05);
}

[data-theme="retro"] .pitch-text {
  background: var(--r-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: static;
  z-index: auto;
}

@media (max-width: 600px) {
  [data-theme="retro"] .pitch-row > .pitch-shot-col {
    flex: 0 0 120px;
    width: 120px;
    max-width: 120px;
  }
  [data-theme="retro"] .pitch-row { gap: 12px; }
}

[data-theme="retro"] .pitch-eyebrow {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--r-accent);
  text-transform: uppercase;
}

[data-theme="retro"] .pitch-row h2 {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 22px;
  text-align: left;
  color: var(--r-text);
}

[data-theme="retro"] .pitch-row p { color: var(--r-text); font-size: 13px; }
[data-theme="retro"] .pitch-row em { color: var(--r-accent); font-style: italic; font-weight: normal; }

/* ---- Feature shots (image frames) ---- */
[data-theme="retro"] .shot,
[data-theme="retro"] .shot--filled {
  border: 1px solid var(--r-rule);
  border-radius: 0;
  background: var(--r-paper);
  box-shadow: none;
}

[data-theme="retro"] .shot::before { display: none; }

/* ---- Feature cards ---- */
[data-theme="retro"] .feature-card {
  background: var(--r-alt);
  border: 1px solid var(--r-rule-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 12px !important;
  transition: none;
}
[data-theme="retro"] .feature-card:hover {
  transform: none;
  border-color: var(--r-rule);
}

[data-theme="retro"] .feature-card h3 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--r-brand);
  text-align: left;
  text-decoration: none;
}

[data-theme="retro"] .feature-card p {
  color: var(--r-text);
  font-size: 13px;
  font-family: Verdana, Arial, sans-serif;
  text-align: left;
}

/* ---- Reviews ---- */
[data-theme="retro"] .review-card {
  background: var(--r-alt);
  border: 1px solid var(--r-rule-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 12px !important;
}

[data-theme="retro"] .review-stars {
  color: var(--r-accent);
  text-shadow: none;
  font-size: 13px;
  letter-spacing: 2px;
}

[data-theme="retro"] .review-title {
  color: var(--r-brand);
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
}

[data-theme="retro"] .review-card blockquote {
  font-family: "Times New Roman", Times, serif;
  color: var(--r-text);
  font-style: italic;
  font-size: 13px;
}

[data-theme="retro"] .review-card cite {
  color: var(--r-mute);
  font-family: Verdana, Arial, sans-serif;
  font-style: normal;
  font-size: 11px;
}

/* ---- FAQ ---- */
[data-theme="retro"] .faq-group-title {
  font-family: Verdana, Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  color: var(--r-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--r-rule);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-theme="retro"] .faq-item {
  background: var(--r-alt);
  border: 1px solid var(--r-rule-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 12px !important;
}

[data-theme="retro"] .faq-item h3 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: var(--r-brand);
  text-align: left;
  text-decoration: none;
}

[data-theme="retro"] .faq-item p { color: var(--r-text); font-size: 13px; }
[data-theme="retro"] .faq-item a { color: var(--r-link); }
[data-theme="retro"] .faq-item a:visited { color: var(--r-visited); }

/* ---- Support / Footer ---- */
[data-theme="retro"] .support {
  background: var(--r-paper) !important;
  border: 1px solid var(--r-rule);
  padding: 14px 18px;
  color: var(--r-text);
}

[data-theme="retro"] .support h2 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  color: var(--r-accent);
  text-align: left;
  text-decoration: none;
}

[data-theme="retro"] .support p { color: var(--r-text); font-size: 13px; }
[data-theme="retro"] .support p a { color: var(--r-link); }
[data-theme="retro"] .support p a:visited { color: var(--r-visited); }

[data-theme="retro"] .support-credit p {
  color: var(--r-mute);
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}
[data-theme="retro"] .support-credit img { opacity: 1; }

[data-theme="retro"] .footer-fineprint {
  border-top: 1px solid var(--r-rule-soft);
  color: var(--r-faint);
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}
[data-theme="retro"] .footer-fineprint a { color: var(--r-link); }
[data-theme="retro"] .footer-fineprint a:visited { color: var(--r-visited); }
[data-theme="retro"] .footer-fineprint a:hover { color: var(--r-hover); }

/* ---- Pickers ---- */
[data-theme="retro"] .lang-picker,
[data-theme="retro"] .theme-picker {
  background: var(--r-paper);
  color: var(--r-text);
  border: 1px inset var(--r-gray);
  border-radius: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  padding: 1px 4px;
}
[data-theme="retro"] .lang-picker:hover,
[data-theme="retro"] .theme-picker:hover { color: var(--r-link); }

/* ---- Sticky bar (compact info-bar look) ---- */
[data-theme="retro"] .sticky-bar {
  background: var(--r-shade);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--r-rule);
  box-shadow: none;
  padding: 6px 12px;
}

[data-theme="retro"] .sticky-bar-logo {
  height: 22px;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 960px) {
  [data-theme="retro"] section.band,
  [data-theme="retro"] .hero,
  [data-theme="retro"] .topnav,
  [data-theme="retro"] .press,
  [data-theme="retro"] .support {
    margin-left: 8px;
    margin-right: 8px;
  }
  [data-theme="retro"] .hero h1 { font-size: 18px; }
}

/* ---- Privacy page ---- */
[data-theme="retro"] .container {
  background: var(--r-paper);
  border: 1px solid var(--r-rule);
  padding: 18px 22px !important;
  margin-top: 14px;
  margin-bottom: 14px;
  max-width: 780px;
}
[data-theme="retro"] .container h1,
[data-theme="retro"] .container h2 {
  text-align: left;
}
[data-theme="retro"] .container h1 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 22px;
  color: var(--r-brand);
  text-decoration: none;
  font-weight: bold;
}
[data-theme="retro"] .container h2 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  color: var(--r-accent);
  text-decoration: none;
  font-weight: bold;
}
[data-theme="retro"] .container hr {
  border: 0;
  border-top: 1px solid var(--r-rule-soft);
}
[data-theme="retro"] .container .text-muted { color: var(--r-mute) !important; }