/* ================================================================
   Stage 6 - Design fixes
   Future Technology | 2026-09-30
   ================================================================ */

/* ── Footer redesign ──────────────────────────────────────────── */

.site-footer {
  background: var(--surface-1, #0c1122);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: var(--space-xl, 3rem) var(--space-s, 1rem) var(--space-m, 1.5rem);
  margin-top: var(--space-2xl, 4rem);
}

.footer-grid {
  max-width: var(--content-width, 72rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl, 3rem);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l, 2rem);
  }
}

.footer-section h4 {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: var(--step-0, 1rem);
  font-weight: 600;
  color: var(--ink, #f4f6fb);
  margin: 0 0 var(--space-s, 1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.6;
}

.footer-section a {
  display: block;
  color: var(--ink-soft, #b8bdd0);
  text-decoration: none;
  padding: 0.25rem 0;
  font-size: var(--step--1, 0.875rem);
  transition: color 0.15s;
}

.footer-section a:hover {
  color: var(--accent, #22d3ee);
}

.footer-section--brand {
  max-width: 22rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink, #f4f6fb);
  text-decoration: none;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: var(--step-0, 1rem);
  margin-bottom: var(--space-xs, 0.5rem);
}

.footer-brand__logo {
  flex-shrink: 0;
}

.footer-tagline {
  color: var(--ink-soft, #b8bdd0);
  font-size: var(--step--1, 0.875rem);
  line-height: 1.5;
  margin: 0 0 var(--space-s, 1rem);
}

.footer-nl-btn {
  display: inline-block;
  background: var(--accent, #22d3ee);
  color: var(--bg, #070b18) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--step--1, 0.875rem);
  text-decoration: none;
  transition: opacity 0.15s;
}

.footer-nl-btn:hover {
  opacity: 0.85;
}

.footer-bottom {
  max-width: var(--content-width, 72rem);
  margin: var(--space-l, 2rem) auto 0;
  padding-top: var(--space-m, 1.5rem);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bottom p {
  color: var(--ink-mute, #8b92a8);
  font-size: 0.8125rem;
  margin: 0;
}

.footer-bottom__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-social-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.footer-social-row a {
  color: var(--ink-mute, #8b92a8);
  transition: color 0.15s;
  display: flex;
}

.footer-social-row a:hover {
  color: var(--accent, #22d3ee);
}

.footer-cookie-link {
  color: var(--ink-mute, #8b92a8);
  font-size: 0.8125rem;
  text-decoration: none;
}

.footer-cookie-link:hover {
  color: var(--ink-soft, #b8bdd0);
}

/* Remove old footer newsletter form if it appears */
.ft-footer-nl,
section.ft-footer-nl {
  display: none !important;
}


/* -- Mobile overlay menu (v2) ---------------------------------------- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}
.mobile-overlay[aria-hidden="false"] {
  pointer-events: auto;
  visibility: visible;
}
.mobile-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-overlay[aria-hidden="false"] .mobile-overlay__backdrop {
  opacity: 1;
}
.mobile-overlay__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(85vw, 360px);
  height: 100%;
  background: var(--surface-1, #0c1122);
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-overlay[aria-hidden="false"] .mobile-overlay__panel {
  transform: translateX(0);
}
.mobile-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.mobile-overlay__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--ink, #f4f6fb);
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.mobile-overlay__brand img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}
.mobile-overlay__title {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink, #f4f6fb);
}
.mobile-overlay__close {
  background: none;
  border: none;
  color: var(--ink-soft, #b8bdd0);
  cursor: pointer;
  padding: 0.375rem;
  display: flex;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.mobile-overlay__close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink, #f4f6fb);
}
.mobile-overlay__nav {
  flex: 1;
  padding: 1rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-overlay__section {
  margin-bottom: 0.25rem;
}
.mobile-overlay__label {
  display: block;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #8b92a8);
  margin-bottom: 0.75rem;
}
.mobile-overlay__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mobile-overlay__topic-chip {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink, #f4f6fb);
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mobile-overlay__topic-chip:hover,
.mobile-overlay__topic-chip:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: var(--chip-color, var(--accent, #22d3ee));
  color: #fff;
}
.mobile-overlay__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 0.75rem 0;
}
.mobile-overlay__pages {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0.25rem;
}
.mobile-overlay__pages .mobile-overlay__link {
  display: block;
  color: var(--ink-soft, #b8bdd0);
  text-decoration: none;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  transition: color 0.15s;
}
.mobile-overlay__pages .mobile-overlay__link:hover,
.mobile-overlay__pages .mobile-overlay__link:focus-visible {
  color: var(--accent, #22d3ee);
}
.mobile-overlay__link {
  display: block;
  color: var(--ink, #f4f6fb);
  text-decoration: none;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
.mobile-overlay__link:hover {
  color: var(--accent, #22d3ee);
}
.mobile-overlay__section .mobile-overlay__link {
  display: block;
  padding: 0.5rem 0;
  color: var(--ink, #f4f6fb);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  transition: color 0.15s;
}
.mobile-overlay__section .mobile-overlay__link:hover,
.mobile-overlay__section .mobile-overlay__link:focus-visible {
  color: var(--accent, #22d3ee);
}
.mobile-overlay__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.mobile-overlay__cta {
  display: block;
  text-align: center;
  background: var(--accent, #22d3ee);
  color: var(--bg, #070b18);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mobile-overlay__cta:hover {
  opacity: 0.85;
}


/* ── Key takeaways alignment fix ──────────────────────────────── */

.takeaways,
.key-takeaways,
[class*="takeaway"] {
  text-align: left !important;
  padding-left: var(--space-s, 1rem);
  padding-right: var(--space-s, 1rem);
}

.takeaways ul,
.takeaways ol,
.key-takeaways ul,
.key-takeaways ol {
  text-align: left;
  padding-left: 1.25em;
  margin-left: 0;
}

.takeaways li,
.key-takeaways li {
  text-align: left;
}

/* Fix any elements that shift left inside articles */
article .takeaways,
article .key-takeaways {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/* ── Article hero removal ─────────────────────────────────────── */

.article-hero,
.article-hero__img,
div[class*="article-hero"] {
  display: none !important;
}


/* ── Remove hero images from "More from FT" related cards ─────── */

.rel__thumb,
.rel__thumb img,
.related-card__thumb,
.related-card__img,
.related-articles .rel__thumb {
  display: none !important;
}

/* Adjust related card layout without thumbnails */
.rel__card,
.related-card {
  grid-template-columns: 1fr;
}


/* ── Remove "In this article" button/TOC ──────────────────────── */

.ft-toc,
.in-this-article,
[class*="in-this-article"],
.ft-toc__toggle,
nav.ft-toc {
  display: none !important;
}


/* ── Mobile margins consistency ───────────────────────────────── */

@media (max-width: 768px) {
  .page-content,
  .category-page,
  main,
  article {
    padding-left: var(--space-s, 1rem);
    padding-right: var(--space-s, 1rem);
  }

  /* Ensure consistent max-width behaviour */
  .page-header-section,
  .page-header,
  .cards,
  .ft-featured,
  .ft-secondary,
  .ft-trending,
  .ft-latest {
    padding-left: 0;
    padding-right: 0;
  }

  /* Fix elements that break out of mobile viewport */
  img,
  iframe,
  video,
  table,
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .page-content,
  .category-page,
  main > *,
  article > * {
    padding-left: var(--space-xs, 0.75rem);
    padding-right: var(--space-xs, 0.75rem);
  }
}


/* ── All stories (news) page layout consistency ───────────────── */

.news-page .cards,
.page-content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-m, 1.5rem);
}

.news-page .page-header-section,
.category-page .page-header-section {
  text-align: center;
  margin-bottom: var(--space-l, 2rem);
}


/* ── Quiz page formatting ─────────────────────────────────────── */

/* Ensure quiz page uses site fonts, not Google Fonts CDN */
.quiz-page,
.techiq-page,
[class*="quiz"] {
  font-family: var(--font-body, 'Outfit', sans-serif);
}

.quiz-page h1,
.techiq-page h1,
.quiz-page h2,
.techiq-page h2 {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
}

/* Fix quiz container */
.quiz-container,
.techiq-container {
  max-width: var(--prose-width, 42.5rem);
  margin: 0 auto;
  padding: var(--space-m, 1.5rem) var(--space-s, 1rem);
}

/* Fix quiz cards/options */
.quiz-option,
.quiz-answer,
.techiq-option {
  background: var(--surface-1, #0c1122);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--ink, #f4f6fb);
}

.quiz-option:hover,
.techiq-option:hover {
  border-color: var(--accent, #22d3ee);
  background: rgba(34, 211, 238, 0.05);
}

/* Fix quiz timer */
.quiz-timer,
.techiq-timer {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: var(--step-1, 1.25rem);
  font-weight: 600;
  text-align: center;
  margin: var(--space-m, 1.5rem) 0;
}

/* Fix "How to play" section */
.quiz-howto,
.techiq-howto,
.how-to-play {
  background: var(--surface-1, #0c1122);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: var(--space-m, 1.5rem);
  margin-bottom: var(--space-l, 2rem);
}

@media (max-width: 768px) {
  .quiz-container,
  .techiq-container {
    padding: var(--space-s, 1rem) var(--space-xs, 0.75rem);
  }
}


/* ── Homepage: remove featured hero image ─────────────────────── */

.ft-featured__img {
  display: none !important;
}

/* Adjust featured section without image */
.ft-featured__bg {
  min-height: auto;
  padding: var(--space-l, 2rem) var(--space-m, 1.5rem);
}

/* Remove secondary card images too */
.ft-secondary__img {
  display: none !important;
}

.ft-secondary__top {
  display: none !important;
}

.ft-secondary__card {
  grid-template-rows: auto;
}
.glass-header__logo { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; }


/* Fix: override legacy nav a:not(.cta){display:none} at 700px -- needs specificity > 0,1,2 */
@media (max-width: 700px) {
  .mobile-overlay .mobile-overlay__topic-chip {
    display: inline-block !important;
  }
  .mobile-overlay .mobile-overlay__link {
    display: block !important;
  }
  .mobile-overlay .mobile-overlay__cta {
    display: block !important;
  }
}


/* ================================================================
   Workstream 2 - Article Page Layout Fixes
   2026-10-02
   ================================================================ */

/* -- 1. Glass header: tighter on article pages -------------------- */
.glass-header {
  max-width: 960px;
  height: 48px;
}
.glass-header.is-compact {
  height: 42px;
}

/* -- 2. Typography scale for articles ----------------------------- */
article h1 {
  font-size: 38px !important;
  line-height: 1.2 !important;
}
article h2 {
  font-size: 28px !important;
  line-height: 1.3 !important;
  margin-top: 40px !important;
}

/* -- 3. Content width and whitespace ------------------------------ */
article {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* -- 4. Key takeaways box ----------------------------------------- */
.takeaways,
.key-takeaways,
[class*="takeaway"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px !important;
  margin-top: 28px !important;
  border: none !important;
  border-left: 3px solid var(--accent, #22d3ee) !important;
  background: rgba(34, 211, 238, 0.04) !important;
  border-radius: 0 8px 8px 0 !important;
  box-sizing: border-box !important;
}

/* -- 5. Hide mid-article callout (engagement.js) ------------------ */
.eng-mid-callout {
  display: none !important;
}

/* -- 6. Hide mid-article newsletter CTA, tighten end CTA ---------- */
.ft-article-cta {
  display: none !important;
}
.ft-article-cta-end > div {
  padding: 32px 24px !important;
}

/* -- 7. Post-article tail cleanup --------------------------------- */
/* Hide "More from Future Technology" section */
section.rel[aria-label="More from Future Technology"] {
  display: none !important;
}

/* Constrain engagement wrapper to article width */
.eng-wrapper {
  max-width: 780px !important;
  margin: 32px auto 0 !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* Restyle Read Next: constrain width, simple card layout */
.eng-read-next {
  max-width: 100% !important;
  padding: 0 !important;
}
.eng-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

/* Hide "More in Category" section */
.eng-more-cat {
  display: none !important;
}

/* -- 8. Related articles cards: constrain and fix grid ------------- */
.related-wrap {
  max-width: 780px !important;
  margin: 32px auto 0 !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* -- 9. Breadcrumbs ----------------------------------------------- */
.breadcrumb-nav {
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

/* -- 10. Mobile (375px) ------------------------------------------- */
@media (max-width: 480px) {
  article h1 {
    font-size: 28px !important;
  }
  article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .takeaways,
  .key-takeaways,
  [class*="takeaway"] {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    padding: 16px !important;
    border-radius: 0 !important;
  }
  .related-grid {
    grid-template-columns: 1fr !important;
  }
  .eng-card-grid {
    grid-template-columns: 1fr !important;
  }
  .glass-header {
    width: calc(100% - 24px) !important;
  }
  .eng-wrapper {
    padding: 0 16px !important;
  }
  .related-wrap {
    padding: 0 16px !important;
  }
}


/* Mobile tap targets: at least 44px tall (WCAG 2.5.5) */
@media (max-width: 768px) {
  .footer-section > a:not(.footer-brand),
  .footer-cookie-link,
  .mobile-overlay__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-cookie-link { display: inline-flex; }
  .footer-social-row a,
  .glass-header__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}