@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

/* ==========================================================================
   GadgetFusions — Editorial Design System  (Wirecutter rebuild, Sprint 1)
   Authoritative tokens, two-font system, modular scale, 12-col grid,
   3/6/3 main band, hairline-driven components. Near-monochrome + ONE accent.
   Hooks preserved for gf-home.js: .gf-reveal / .gf-cascade / body.gf-anim-ready
   / .gf-hamburger / #gf-mobile-nav / .gf-mobile-nav__close / .gf-is-open.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (brief-locked — supersede all prior GF accent colors)
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --gf-bg:             #FFFFFF;
  --gf-bg-subtle:      #F7F8FA;
  --gf-text:           #14233B;   /* primary: headlines + body */
  --gf-text-secondary: #5C6B82;   /* dek, bylines, captions, meta */
  --gf-hairline:       #E3E7EE;   /* 1px rules, dividers, separators */
  --gf-navy:           #0A1F3D;   /* masthead bar / footer / dark bands ONLY */
  --gf-accent:         #1466C8;   /* links, CTAs, actions */
  --gf-accent-hover:   #0F4E9C;
  --gf-amber:          #C8861E;   /* badges / flags ONLY — never body/links */
  --gf-price-strike:   #8A93A3;

  /* Type families */
  --gf-serif: "Source Serif 4", Georgia, serif;
  --gf-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Spacing — 8px baseline */
  --gf-s1: 8px;
  --gf-s2: 16px;
  --gf-s3: 24px;
  --gf-s4: 32px;
  --gf-s5: 48px;
  --gf-s6: 64px;

  /* Layout */
  --gf-container: 1200px;
  --gf-gutter: 24px;

  /* Motion */
  --gf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gf-dur-fast: 180ms;
  --gf-dur-base: 360ms;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
.gf-redesign {
  background: var(--gf-bg);
  color: var(--gf-text);
  font-family: var(--gf-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gf-redesign h1, .gf-redesign h2, .gf-redesign h3, .gf-redesign h4 {
  font-family: var(--gf-serif);
  font-weight: 600;
  color: var(--gf-text);
  margin: 0 0 var(--gf-s2);
}

.gf-redesign p { margin: 0 0 var(--gf-s2); }

/* --------------------------------------------------------------------------
   3. MODULAR TYPE SCALE  (px / line-height / letter-spacing — brief-exact)
   -------------------------------------------------------------------------- */
.gf-display { font-family: var(--gf-serif); font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--gf-text); margin: 0 0 var(--gf-s2); }
.gf-redesign h1, .gf-h1 { font-size: 34px; line-height: 1.1;  letter-spacing: -0.01em; }
.gf-redesign h2, .gf-h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.gf-redesign h3, .gf-h3 { font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.gf-redesign h4, .gf-h4 { font-size: 17px; line-height: 1.3;  letter-spacing: 0; }

.gf-dek  { font-family: var(--gf-serif); font-weight: 400; font-size: 19px; line-height: 1.45; color: var(--gf-text-secondary); margin: 0 0 var(--gf-s2); }
.gf-body { font-family: var(--gf-sans); font-weight: 400; font-size: 16px; line-height: 1.6; }
.gf-meta { font-family: var(--gf-sans); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--gf-text-secondary); }
.gf-meta .gf-meta-sep { margin: 0 6px; opacity: 0.55; }

.gf-eyebrow {
  display: inline-block;
  font-family: var(--gf-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gf-accent);
  margin: 0 0 var(--gf-s1);
}
.gf-eyebrow--dim { color: var(--gf-text-secondary); }

/* --------------------------------------------------------------------------
   4. LINKS
   -------------------------------------------------------------------------- */
.gf-redesign a { color: var(--gf-accent); text-decoration: none; transition: color var(--gf-dur-fast) var(--gf-ease); }
.gf-redesign a:hover, .gf-redesign a:focus { color: var(--gf-accent-hover); }
/* Headline links read as text, not links, until hover */
.gf-redesign h1 a, .gf-redesign h2 a, .gf-redesign h3 a, .gf-redesign h4 a,
.gf-display a, .gf-headline-link { color: var(--gf-text); }
.gf-redesign h1 a:hover, .gf-redesign h2 a:hover, .gf-redesign h3 a:hover,
.gf-redesign h4 a:hover, .gf-display a:hover, .gf-headline-link:hover { color: var(--gf-accent); }

/* --------------------------------------------------------------------------
   5. LAYOUT — container, sections, hairlines, 12-col helper
   -------------------------------------------------------------------------- */
.gf-container { max-width: var(--gf-container); margin: 0 auto; padding: 0 var(--gf-s3); }
.gf-section { padding: var(--gf-s6) 0; }
.gf-hr { border: 0; border-top: 1px solid var(--gf-hairline); margin: 0; }
.gf-section-head { margin-bottom: var(--gf-s3); }
.gf-section-head h2 { margin: 0; }

.gf-grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gf-gutter); }

/* --------------------------------------------------------------------------
   6. CARDS  (category + review grids)
   -------------------------------------------------------------------------- */
.gf-card { display: flex; flex-direction: column; }
.gf-card__media { position: relative; overflow: hidden; background: var(--gf-bg-subtle); aspect-ratio: 16 / 10; margin-bottom: var(--gf-s2); border-radius: 4px; }
.gf-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--gf-ease); }
@media (hover: hover) {
  .gf-card:hover .gf-card__img { transform: scale(1.03); }
  .gf-card:hover .gf-card__title { color: var(--gf-accent); }
}
.gf-card__title { font-family: var(--gf-serif); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0 0 6px; color: var(--gf-text); transition: color var(--gf-dur-fast) var(--gf-ease); }
.gf-card__dek { font-family: var(--gf-sans); font-size: 14px; line-height: 1.5; color: var(--gf-text-secondary); margin: 0 0 var(--gf-s1); }
.gf-card__meta { margin-top: auto; }

/* --------------------------------------------------------------------------
   7. SCROLL REVEAL  (default VISIBLE — hidden state engages only after the
      page script confirms support via body.gf-anim-ready. Matches gf-home.js.)
   -------------------------------------------------------------------------- */
.gf-reveal { opacity: 1; transform: none; transition: opacity 600ms var(--gf-ease), transform 600ms var(--gf-ease); will-change: opacity, transform; }
body.gf-anim-ready .gf-reveal:not(.gf-is-visible) { opacity: 0; transform: translateY(16px); }

.gf-cascade > * { opacity: 1; transform: none; }
body.gf-anim-ready .gf-cascade > * { opacity: 0; transform: translateY(8px); animation: gfCascadeIn 600ms var(--gf-ease) forwards; }
body.gf-anim-ready .gf-cascade > *:nth-child(1) { animation-delay: 0ms; }
body.gf-anim-ready .gf-cascade > *:nth-child(2) { animation-delay: 70ms; }
body.gf-anim-ready .gf-cascade > *:nth-child(3) { animation-delay: 140ms; }
body.gf-anim-ready .gf-cascade > *:nth-child(4) { animation-delay: 210ms; }
body.gf-anim-ready .gf-cascade > *:nth-child(5) { animation-delay: 280ms; }
@keyframes gfCascadeIn { to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gf-reveal, body.gf-anim-ready .gf-reveal:not(.gf-is-visible),
  .gf-cascade > *, body.gf-anim-ready .gf-cascade > *, .gf-card__img {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. UTILITIES
   -------------------------------------------------------------------------- */
.gf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   10. PROD HARDENING — beat parent-theme (Flatsome) overrides. All scoped to
   .gf-redesign so nothing leaks sitewide. Flatsome forces Montserrat on
   headings and a light-blue (#34A8EB) link color that fail our design + AA.
   -------------------------------------------------------------------------- */
/* Serif headlines */
.gf-redesign h1, .gf-redesign h2, .gf-redesign h3, .gf-redesign h4,
.gf-redesign .gf-display, .gf-redesign .gf-card__title, .gf-redesign .gf-latest__title,
.gf-redesign .gf-pick__title, .gf-redesign .gf-railtitle, .gf-redesign .gf-lead__headline,
.gf-redesign .gf-dek, .gf-redesign .gf-footer__brand-name {
  font-family: var(--gf-serif) !important;
  font-weight: 600 !important;
}
.gf-redesign .gf-dek { font-weight: 400 !important; }
/* Sans for functional text */
.gf-redesign .gf-eyebrow, .gf-redesign .gf-meta, .gf-redesign .gf-nav-link,
.gf-redesign .gf-cta, .gf-redesign .gf-browse a, .gf-redesign .gf-flag,
.gf-redesign .gf-card__dek, .gf-redesign .gf-trust__grid p, .gf-redesign input,
.gf-redesign button, .gf-redesign .gf-newsletter__fine, .gf-redesign .gf-footer__tagline,
.gf-redesign .gf-footer__col a, .gf-redesign .gf-pick__rationale, .gf-redesign .gf-related__list li {
  font-family: var(--gf-sans) !important;
}
/* Heading color (elements without their own link) */
.gf-redesign h1, .gf-redesign h2, .gf-redesign h3, .gf-redesign h4 { color: var(--gf-text) !important; }
/* Links: default accent, then override the text-colored + chrome groups */
.gf-redesign a { color: var(--gf-accent) !important; }
.gf-redesign a:hover, .gf-redesign a:focus { color: var(--gf-accent-hover) !important; }
.gf-redesign .gf-headline-link, .gf-redesign .gf-nav-link,
.gf-redesign .gf-mobile-nav__list a, .gf-redesign .gf-browse a,
.gf-redesign .gf-latest__item a, .gf-redesign .gf-rail__list a,
.gf-redesign .gf-card__title a, .gf-redesign .gf-pick__title a { color: var(--gf-text) !important; }
.gf-redesign .gf-headline-link:hover, .gf-redesign .gf-nav-link:hover,
.gf-redesign .gf-card__title a:hover, .gf-redesign .gf-latest__item a:hover,
.gf-redesign .gf-pick__title a:hover, .gf-redesign .gf-rail__list a:hover { color: var(--gf-accent) !important; }
/* Chrome link colors */
.gf-redesign .gf-topbar a { color: rgba(255,255,255,0.82) !important; }
.gf-redesign .gf-footer a, .gf-redesign .gf-footer__col a, .gf-redesign .gf-footer__bottom a { color: rgba(255,255,255,0.72) !important; }
.gf-redesign .gf-footer a:hover { color: #fff !important; }
/* Brand color accents */
.gf-redesign .gf-eyebrow { color: var(--gf-accent) !important; }
.gf-redesign .gf-eyebrow--dim { color: var(--gf-text-secondary) !important; }
.gf-redesign .gf-footer__col h4 { color: var(--gf-amber) !important; }
.gf-redesign .gf-flag { color: var(--gf-navy) !important; background: var(--gf-amber) !important; }
.gf-redesign .gf-newsletter__form button { color: #fff !important; background: var(--gf-accent) !important; }
.gf-redesign .gf-cta { color: var(--gf-accent) !important; }

/* End of gf-design-system.css */