/*
 Theme Name: The Macro Wizard
 Theme URI: https://themacrowizard.com
 Description: Custom child theme for The Macro Wizard redesign. Built on GeneratePress.
 Author: Alberto Álvarez and Claude
 Author URI: https://themacrowizard.com
 Template: generatepress
 Version: 2.1.0
 License: GNU General Public License v2 or later
 Text Domain: macrowizard-v2
*/

/* ============================================
   1. DESIGN TOKENS
   ============================================ */
:root {
  --tmw-bg: #FAFAF7;
  --tmw-bg-card: #FFFFFF;
  --tmw-text-primary: #1A1A1A;
  --tmw-text-secondary: #6B6B6B;
  --tmw-text-tertiary: #999999;
  --tmw-border: #E8E8E4;
  --tmw-border-hover: #D0D0CC;
  --tmw-accent: #1A1A1A;
  --tmw-accent-subtle: #F2F2EE;
  --tmw-wizard-blue: #425D8A;
  --tmw-font-display: 'Instrument Serif', Georgia, serif;
  --tmw-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --tmw-max-width: 1200px;
  --tmw-content-width: 680px;
  --tmw-radius-sm: 8px;
  --tmw-radius-md: 12px;
  --tmw-radius-lg: 16px;
  --tmw-radius-pill: 100px;
  --tmw-header-height: 90px;
}

/* ============================================
   2. GLOBAL STYLES
   ============================================ */
body {
  font-family: var(--tmw-font-body);
  background-color: var(--tmw-bg) !important;
  color: var(--tmw-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-weight: 300;
}

/* Paper texture — subtle grain on cream backgrounds */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}

/* Hide texture in dark mode (dark bg doesn't need paper feel) */
body.tmw-dark::after {
  opacity: 0.015;
}

/* ============================================
   3. GENERATEPRESS OVERRIDES
   ============================================ */
.site,
.site-content,
.inside-article,
.inside-article .entry-content,
article.page,
article.post,
.content-area,
#page,
.grid-container,
.site-main {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

.site-content { padding: 0 !important; margin: 0 auto !important; }
.inside-article { padding: 0 !important; margin: 0 !important; }
.entry-content { max-width: 100% !important; padding: 0 !important; }
.entry-header { margin-bottom: 0; }
.post-image { margin-bottom: 0; }
.sidebar { display: none; }
.site-content .content-area { width: 100% !important; max-width: 100% !important; }
.page .entry-title, .page .entry-header { display: none; }
.page .comments-area, .page #comments, .page #respond { display: none; }
.site-footer .site-info { display: none; }

/* --- Header clipping fix ---
   GP wrappers must not clip the absolute/fixed header.
   Pull all content to top since header is out of flow. */
#page,
.site,
.site-content {
  overflow: visible !important;
}

/* GP may add margin/padding above site-content for the header.
   Since our header is position:absolute, we need content at pixel 0. */
.site-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill any GP-generated top spacing on page wrapper */
#page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* GP's nav wrapper and header wrapper — ensure they don't 
   create flow space when header is absolute */
.site-header {
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation {
  margin: 0 !important;
  padding: 0 !important;
}

/* GP sometimes wraps navigation above/below header. 
   Both must be transparent and out of flow. */
.nav-float-right,
.nav-float-left,
.gen-sidebar-nav,
#site-navigation {
  background: transparent !important;
}

/* GP skip-to-content link — hide but keep accessible */
.screen-reader-text:focus {
  background: var(--tmw-bg);
  z-index: 200;
}

/* Pages need top padding to clear the absolute header.
   Pages with full-bleed heroes (5nuggets) handle this themselves. */
.page .inside-article {
  padding-top: var(--tmw-header-height) !important;
}

.page .entry-content {
  margin-top: 0 !important;
}

/* 5nuggets: hero goes edge-to-edge, no top padding needed */
.page-slug-5nuggets .inside-article,
.tmw-dark-hero .inside-article {
  padding-top: 0 !important;
}

/* --- Single post article styling --- */
.single .inside-article {
  max-width: var(--tmw-content-width) !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

/* Article header: centered hero */
.single .entry-header {
  padding-top: calc(var(--tmw-header-height) + 2rem);
  margin-bottom: 2rem;
  text-align: center;
}

.single .entry-title {
  display: block !important;
  font-family: var(--tmw-font-display) !important;
  font-size: clamp(2rem, 5vw, 2.75rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: var(--tmw-text-primary) !important;
  margin-bottom: 0.75rem !important;
}

/* Article meta: clean, spaced, centered */
.single .entry-meta {
  font-size: 0.8125rem;
  color: var(--tmw-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.single .entry-meta a {
  color: var(--tmw-wizard-blue);
  text-decoration: none;
}

/* Hide dates — content is timeless */
.single .entry-meta .posted-on time,
.single .entry-meta .updated,
.single footer.entry-meta .posted-on time {
  /* Keep the reading time span but hide raw date text */
}

/* Hide "by" author prefix on single — it's Alberto's site, obvious */
.single .entry-meta .byline {
  display: none !important;
}

/* Article body content */
.single .entry-content {
  padding-bottom: 3rem !important;
}

/* Paragraph spacing — generous for readability */
.single .entry-content p {
  margin-bottom: 1.5rem !important;
}

/* In-article H1s should render as H2 visually (migrated content fix) */
.single .entry-content h1 {
  font-family: var(--tmw-font-body) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
  color: var(--tmw-text-primary) !important;
}

/* Ordered lists — wizard blue numbers */
.single .entry-content ol {
  margin-bottom: 1.75rem;
  padding-left: 0;
  counter-reset: tmw-list;
  list-style: none;
}

.single .entry-content ol > li {
  counter-increment: tmw-list;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.single .entry-content ol > li::before {
  content: counter(tmw-list) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tmw-wizard-blue);
  font-weight: 500;
  font-size: 1rem;
  opacity: 0.6;
}

/* Unordered list spacing */
.single .entry-content ul {
  margin-bottom: 1.75rem;
  padding-left: 0;
}

.single .entry-content ul li {
  margin-bottom: 0.5rem;
}

/* Empty headings — hide them (migrated content cleanup) */
.single .entry-content h3:empty,
.single .entry-content h2:empty,
.single .entry-content h4:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero image — centered, cinematic */
.single .post-image {
  margin-bottom: 2.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.single .post-image img {
  width: 100%;
  border-radius: var(--tmw-radius-md);
  display: block;
  aspect-ratio: 21/9;
  object-fit: cover;
}

/* In-content images: centered, rounded */
.single .entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: var(--tmw-radius-sm);
}

/* Article footer meta */
.single .entry-meta.footer-entry-meta,
.single footer.entry-meta {
  padding-top: 2rem;
  border-top: 1px solid var(--tmw-border);
  margin-top: 3rem;
  font-size: 0.8125rem;
  color: var(--tmw-text-tertiary);
}

/* Comments area */
.single .comments-area {
  max-width: var(--tmw-content-width);
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

/* Categories/tags at the bottom */
.single .cat-links,
.single .tags-links {
  font-size: 0.8125rem;
  color: var(--tmw-text-tertiary);
}

.single .cat-links a,
.single .tags-links a {
  color: var(--tmw-wizard-blue);
  text-decoration: none;
  font-weight: 400;
}

/* Post navigation (prev/next) */
.single .post-navigation {
  max-width: var(--tmw-content-width);
  margin: 0 auto;
  padding: 0 2rem 3rem;
  border-top: 1px solid var(--tmw-border);
}

.single .post-navigation a {
  color: var(--tmw-text-primary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 400;
  transition: color 0.2s;
}

.single .post-navigation a:hover {
  color: var(--tmw-wizard-blue);
}

/* Dark mode: in-article images get a subtle border */
body.tmw-dark .single .entry-content img {
  border: 1px solid var(--tmw-border);
}

body.tmw-dark .single .post-image img {
  border: none;
}

/* ============================================
   4. TYPOGRAPHY — Option D
   ============================================ */
h1, .entry-title, .tmw-page-title {
  font-family: var(--tmw-font-display) !important;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h2, .entry-content h2, .site-content h2 {
  font-family: var(--tmw-font-body) !important;
  font-weight: 400 !important;
  font-size: 1.75rem;
  letter-spacing: -0.02em !important;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

h3, .entry-content h3, .site-content h3 {
  font-family: var(--tmw-font-body) !important;
  font-weight: 400 !important;
  font-size: 1.1875rem;
  letter-spacing: -0.01em !important;
  line-height: 1.35;
  color: var(--tmw-text-secondary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.entry-content h1, .site-content h1 { font-family: var(--tmw-font-display) !important; }

h4, h5, h6 {
  font-family: var(--tmw-font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

p, li, td, dd { font-size: 1.0625rem; line-height: 1.8; font-weight: 300; }
.entry-content p, .site-content p { font-weight: 300 !important; }

a {
  color: var(--tmw-wizard-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(66, 93, 138, 0.3);
  transition: text-decoration-color 0.2s;
}
a:hover { text-decoration-color: var(--tmw-wizard-blue); }
.entry-content a { text-decoration-color: rgba(66, 93, 138, 0.3) !important; }
strong, b { font-weight: 500; }

blockquote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--tmw-wizard-blue);
  font-family: var(--tmw-font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: -0.01em;
  font-style: normal;
}

blockquote cite {
  font-size: 0.8125rem;
  color: var(--tmw-text-tertiary);
  font-style: normal;
  font-weight: 400;
  display: block;
  margin-top: 0.5rem;
}

/* ============================================
   5. HEADER — Overlay + shrink on scroll
   ============================================ */

/* --- Base: absolute, transparent, overlays content --- */
.site-header,
.site-header .inside-header,
.main-navigation,
.main-navigation .inside-navigation,
.navigation-search {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.main-navigation {
  border: none !important;
  box-shadow: none !important;
}

.site-header .inside-header {
  max-width: var(--tmw-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--tmw-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 0.3s ease;
}

.site-header .site-title,
.site-header .site-branding .header-content {
  font-size: 0 !important;
  color: transparent !important;
}

.site-header .custom-logo {
  display: block;
  height: 64px;
  width: auto;
  transition: height 0.3s ease, filter 0.3s ease;
}

/* Light mode at top: dark nav text */
.main-navigation a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--tmw-text-primary) !important;
  text-decoration: none;
  transition: color 0.3s ease, font-size 0.3s ease;
}

.main-navigation a:hover {
  color: var(--tmw-text-secondary) !important;
}

.main-navigation li.tmw-nav-cta a,
.main-navigation .main-nav li.tmw-nav-cta a,
.main-navigation .tmw-nav-cta > a {
  background: #425D8A !important;
  border: 1px solid #425D8A !important;
  color: #FAFAF7 !important;
  padding: 0.5625rem 1.375rem !important;
  border-radius: 100px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  transition: all 0.3s ease;
}

.main-navigation li.tmw-nav-cta a:hover,
.main-navigation .main-nav li.tmw-nav-cta a:hover,
.main-navigation .tmw-nav-cta > a:hover {
  opacity: 0.85;
}

/* --- Scrolled: fixed, compact bar ---
   Visual appearance (bg, blur, border) handled by .tmw-header-frost layer.
   This rule handles layout changes only. */
.site-header.tmw-scrolled {
  position: fixed;
}

.site-header.tmw-scrolled .inside-header { height: 64px; }

.site-header.tmw-scrolled .custom-logo { height: 36px; filter: none; }

.site-header.tmw-scrolled .main-navigation a {
  font-size: 0.875rem;
  color: var(--tmw-text-secondary) !important;
}

.site-header.tmw-scrolled .main-navigation a:hover {
  color: var(--tmw-text-primary) !important;
}

.site-header.tmw-scrolled .main-navigation li.tmw-nav-cta a,
.site-header.tmw-scrolled .main-navigation .main-nav li.tmw-nav-cta a,
.site-header.tmw-scrolled .main-navigation .tmw-nav-cta > a {
  font-size: 0.8125rem !important;
  padding: 0.4375rem 1.125rem !important;
}

/* --- DARK-HERO PAGES (Homepage, 5 Nuggets) ---
   These pages run dark mode only (body.tmw-dark is always set).
   The global dark-mode rules (section 10) handle nav colors,
   scrolled bar, CTA styling, etc.

   Only page-specific overrides needed here:
   - No top padding (hero is full-bleed)
   - Brighter logo at top (over hero image, before scroll)
   ============================================ */

/* Non-scrolled: boost logo brightness over hero image */
.page-slug-5nuggets .site-header:not(.tmw-scrolled) .custom-logo,
.tmw-dark-hero .site-header:not(.tmw-scrolled) .custom-logo {
  filter: brightness(2);
}

/* Non-scrolled hamburger: white (may be slightly brighter than
   dark-mode default, since hero image can be very dark) */
.page-slug-5nuggets .site-header:not(.tmw-scrolled) .tmw-hamburger span,
.tmw-dark-hero .site-header:not(.tmw-scrolled) .tmw-hamburger span {
  background: #FFFFFF;
}

/* Hide dark mode toggle — these pages are always dark */
.tmw-dark-hero .tmw-dark-toggle {
  display: none !important;
}
/* ============================================
   ADDITIONS TO style.css
   Append these rules to your style.css file.
   They support the new .tmw-overlay-hero body class used
   by the Viajes page (and any future page with a full-bleed hero).
   ============================================ */

/* --- OVERLAY-HERO PAGES (Viajes, future content hubs with full-bleed hero) ---
   These pages use a full-viewport hero image at the top, with the header
   floating transparently over it. Unlike .tmw-dark-hero pages (homepage,
   5nuggets), the rest of the page uses normal cream/dark theming and the
   dark-mode toggle remains visible and functional.
   ============================================ */

/* No top padding — the hero handles its own spacing under the header */
.tmw-overlay-hero .inside-article {
  padding-top: 0 !important;
}

/* Header logo: brighter when sitting over the dark hero photo (before scroll) */
.tmw-overlay-hero .site-header:not(.tmw-scrolled) .custom-logo {
  filter: brightness(2);
}

/* Header nav links: white when over the hero image (before scroll) */
.tmw-overlay-hero .site-header:not(.tmw-scrolled) .main-navigation a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tmw-overlay-hero .site-header:not(.tmw-scrolled) .main-navigation a:hover {
  color: #FFFFFF !important;
}

/* Header CTA pill: stays wizard blue but with a soft outer glow over the photo */
.tmw-overlay-hero .site-header:not(.tmw-scrolled) .main-navigation li.tmw-nav-cta a {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Hamburger (mobile): white over the hero */
.tmw-overlay-hero .site-header:not(.tmw-scrolled) .tmw-hamburger span {
  background: #FFFFFF;
}

/* IMPORTANT: do NOT hide the dark-mode toggle on overlay-hero pages
   (unlike .tmw-dark-hero, here we want the user to be able to switch). */
/* The default .tmw-dark-toggle visibility from section 9 applies — no override needed. */

/* ============================================
   5b. MOBILE MENU — Full-screen overlay
   Solved-style: opaque, full viewport, clean list
   ============================================ */

/* Hamburger icon — GP's native toggle is hidden on mobile, 
   replaced by custom .tmw-hamburger via JS */

/* GP mobile nav — full-screen overlay when open */
@media (max-width: 768px) {

  /* When nav is toggled, make the ENTIRE header full-screen */
  .site-header.tmw-mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    background: var(--tmw-bg) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header bar stays at top inside the overlay */
  .site-header.tmw-mobile-open .inside-header {
    position: sticky !important;
    top: 0 !important;
    height: 70px !important;
    background: var(--tmw-bg) !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--tmw-border) !important;
  }

  /* Logo stays visible top-left */
  .site-header.tmw-mobile-open .custom-logo {
    height: 36px !important;
    filter: none !important;
  }

  /* Menu toggle becomes close (X) — stays visible top-right */
  .site-header.tmw-mobile-open .menu-toggle {
    color: var(--tmw-text-primary) !important;
    z-index: 10001 !important;
  }

  /* Nav list takes full width */
  .site-header.tmw-mobile-open .main-navigation {
    background: var(--tmw-bg) !important;
    width: 100% !important;
  }

  .site-header.tmw-mobile-open .main-navigation .main-nav,
  .site-header.tmw-mobile-open .main-navigation .main-nav ul {
    background: var(--tmw-bg) !important;
    width: 100% !important;
  }

  .site-header.tmw-mobile-open .main-nav > ul {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem 2rem 2rem !important;
    width: 100% !important;
    text-align: left !important;
    align-items: stretch !important;
  }

  .site-header.tmw-mobile-open .main-nav > ul > li {
    border-bottom: 1px solid var(--tmw-border) !important;
    text-align: left !important;
  }

  .site-header.tmw-mobile-open .main-nav > ul > li > a {
    display: block !important;
    padding: 1.25rem 0 !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    color: var(--tmw-text-primary) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    text-align: left !important;
  }

  /* CTA in mobile menu */
  .site-header.tmw-mobile-open .main-nav li.tmw-nav-cta {
    border-bottom: none !important;
    padding-top: 1rem;
  }

  .site-header.tmw-mobile-open .main-nav li.tmw-nav-cta a {
    text-align: center !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    background: #425D8A !important;
    color: #FAFAF7 !important;
    border: none !important;
  }

  /* === Dark mode mobile menu === */
  body.tmw-dark .site-header.tmw-mobile-open,
  body.tmw-dark .site-header.tmw-mobile-open .inside-header,
  body.tmw-dark .site-header.tmw-mobile-open .main-navigation,
  body.tmw-dark .site-header.tmw-mobile-open .main-navigation .main-nav,
  body.tmw-dark .site-header.tmw-mobile-open .main-navigation .main-nav ul {
    background: #141413 !important;
  }

  body.tmw-dark .site-header.tmw-mobile-open .inside-header {
    border-bottom-color: #2A2A27 !important;
  }

  body.tmw-dark .site-header.tmw-mobile-open .main-nav > ul > li {
    border-bottom-color: #2A2A27 !important;
  }

  body.tmw-dark .site-header.tmw-mobile-open .main-nav > ul > li > a {
    color: #E8E6DF !important;
  }

  body.tmw-dark .site-header.tmw-mobile-open .menu-toggle {
    color: #E8E6DF !important;
  }

  body.tmw-dark .site-header.tmw-mobile-open .custom-logo {
    filter: brightness(1.4) !important;
  }

  /* Dark-hero pages (5nuggets, homepage): always dark mode,
     so the body.tmw-dark rules above handle mobile menu styling. */
}

/* ============================================
   6. HOMEPAGE SECTION STYLES
   ============================================ */
.tmw-sec-header h2 {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.tmw-bio-text h3 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  color: var(--tmw-text-primary) !important;
  margin-top: 0 !important;
}

.tmw-featured a {
  position: relative;
  min-height: 380px;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.tmw-featured a:hover {
  border-color: rgba(66, 93, 138, 0.2) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.06);
}
.tmw-featured-img { position: relative; overflow: hidden; }
.tmw-featured-img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; position: absolute; inset: 0;
  transition: transform 0.6s ease, filter 0.6s ease !important;
  filter: saturate(0.92);
}
.tmw-featured a:hover .tmw-featured-img img {
  transform: scale(1.04) !important;
  filter: saturate(1.1) brightness(1.02);
}
.tmw-featured-body .cat { transition: color 0.3s ease; }
.tmw-featured a:hover .cat { color: var(--tmw-wizard-blue) !important; }

.tmw-featured-body h3 { font-size: 1.5rem !important; font-weight: 400 !important; letter-spacing: -0.015em !important; line-height: 1.3 !important; color: var(--tmw-text-primary) !important; margin-top: 0 !important; }
.tmw-art-card h3 { font-size: 1.125rem !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--tmw-text-primary) !important; margin-top: 0 !important; }
.tmw-prod-card h3 { font-size: 1.0625rem !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--tmw-text-primary) !important; margin-top: 0 !important; }

.tmw-collab-overlay { background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.05) 100%) !important; padding: 3rem 2rem 2rem !important; }
.tmw-collab-overlay h3 { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-top: 0 !important; }
.tmw-collab-overlay p { opacity: 0.85 !important; }

.tmw-art-card {
  cursor: pointer;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.tmw-art-card:hover {
  border-color: rgba(66, 93, 138, 0.2) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.06);
}
.tmw-art-card-img { overflow: hidden !important; }
.tmw-art-card-img img {
  transition: transform 0.6s ease, filter 0.6s ease !important;
  filter: saturate(0.92);
}
.tmw-art-card:hover .tmw-art-card-img img {
  transform: scale(1.04) !important;
  filter: saturate(1.1) brightness(1.02);
}
.tmw-art-card .cat { transition: color 0.3s ease; }
.tmw-art-card:hover .cat { color: var(--tmw-wizard-blue) !important; }
.tmw-art-card .read-more .arrow,
.tmw-featured-body .read-more .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.tmw-art-card:hover .read-more .arrow,
.tmw-featured a:hover .read-more .arrow {
  transform: translateX(4px);
}
.tmw-art-card .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Product cards — same warm hover */
.tmw-prod-card {
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.tmw-prod-card:hover {
  border-color: rgba(66, 93, 138, 0.2) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.06);
}

/* ============================================
   7. COMPONENT LIBRARY
   ============================================ */
.tmw-takeaway { margin: 2.5rem 0; padding: 1.5rem 1.75rem; background: var(--tmw-bg-card); border: 1px solid var(--tmw-border); border-left: 3px solid var(--tmw-wizard-blue); border-radius: 0 var(--tmw-radius-sm) var(--tmw-radius-sm) 0; }
.tmw-takeaway-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tmw-wizard-blue); font-weight: 500; margin-bottom: 0.5rem; }
.tmw-takeaway p { font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0; }

.tmw-inline-cta { margin: 3rem 0; padding: 2rem; background: var(--tmw-accent-subtle); border-radius: var(--tmw-radius-md); text-align: center; }

.tmw-btn-primary { display: inline-block; padding: 0.875rem 2rem; background: var(--tmw-accent); color: var(--tmw-bg); border-radius: var(--tmw-radius-pill); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: opacity 0.2s; border: none; cursor: pointer; }
.tmw-btn-primary:hover { opacity: 0.85; color: var(--tmw-bg); text-decoration: none; }

.tmw-progress-bar { position: fixed; top: 64px; left: 0; width: 0%; height: 2px; background: var(--tmw-wizard-blue); z-index: 99; transition: width 0.1s linear; pointer-events: none; }

/* --- Wizard section divider ---
   Replaces <hr> between homepage sections */
.tmw-wizard-divider {
  max-width: var(--tmw-max-width);
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.tmw-wizard-divider::before,
.tmw-wizard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tmw-border);
}

.tmw-wizard-divider svg {
  height: 24px;
  width: auto;
  opacity: 0.2;
  flex-shrink: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmw-wizard-divider:hover svg {
  opacity: 0.55;
  transform: translateY(-2px) rotate(-5deg);
}

body.tmw-dark .tmw-wizard-divider svg {
  opacity: 0.15;
}

body.tmw-dark .tmw-wizard-divider:hover svg {
  opacity: 0.45;
  filter: brightness(1.5);
}

/* --- Wizard blue round bullets --- */
.entry-content ul li,
.tmw-5n-items li {
  list-style: none;
  position: relative;
  padding-left: 1.25rem;
}

.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tmw-wizard-blue);
  opacity: 0.5;
}

/* --- Newsletter CTA — elevated with atmosphere --- */
.tmw-nl-elevated {
  position: relative;
  background: var(--tmw-accent);
  border-radius: 20px;
  padding: 4rem 3rem;
  overflow: hidden;
  text-align: center;
}

/* Subtle blue ambient glow */
.tmw-nl-elevated::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(66, 93, 138, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(66, 93, 138, 0.5) 0%, transparent 40%);
  pointer-events: none;
}

/* Wizard watermark bottom-right */
.tmw-nl-elevated::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 200px;
  height: 200px;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='%23fff' points='127.578,91.058 100.003,20.22 72.422,91.058'/%3E%3Cpath fill='%23fff' d='M148.408,97.355c0-10.089-21.673-18.271-48.405-18.271c-26.735,0-48.411,8.182-48.411,18.271c0,10.087,21.676,18.263,48.411,18.263C126.735,115.618,148.408,107.442,148.408,97.355z'/%3E%3Cpath fill='%23ccc' d='M100.003,97.355c-15.213,0-27.546,5.867-27.546,13.106v26.318c0,4.513,2.598,8.409,6.374,10.308v7.468c0,10.829,8.778,19.608,19.612,19.608c6.898,0,12.959-3.562,16.454-8.945c7.226-1.544,13.225-7.963,13.225-15.648v-39.108C128.121,103.223,115.21,97.355,100.003,97.355z'/%3E%3Cpolygon fill='%23fff' points='100.003,20.22 119.423,14.39 136.509,33.858 132.618,59.384 120.937,36.599 108.823,53.324'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.tmw-nl-elevated h2 {
  font-family: var(--tmw-font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--tmw-bg);
  margin-bottom: 0.75rem;
  position: relative;
  line-height: 1.15;
}

.tmw-nl-elevated p {
  font-size: 1rem !important;
  color: rgba(250, 250, 247, 0.55) !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  max-width: 440px;
  margin: 0 auto 2rem !important;
  position: relative;
}

.tmw-nl-elevated .tmw-nl-form {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tmw-nl-elevated .tmw-nl-form input {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #FAFAF7;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}

.tmw-nl-elevated .tmw-nl-form input::placeholder {
  color: rgba(250, 250, 247, 0.3);
}

.tmw-nl-elevated .tmw-nl-form input:focus {
  border-color: rgba(66, 93, 138, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.tmw-nl-elevated .tmw-nl-form button {
  padding: 1rem;
  border-radius: 12px;
  border: none;
  background: #FAFAF7;
  color: #1A1A1A;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.tmw-nl-elevated .tmw-nl-form button:hover {
  transform: scale(1.02);
}

/* Shimmer sweep on button */
.tmw-nl-elevated .tmw-nl-form button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(66, 93, 138, 0.08), transparent);
  animation: tmwShimmer 3s ease-in-out infinite;
}

@keyframes tmwShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.tmw-nl-elevated .tmw-nl-proof {
  font-size: 0.8125rem;
  color: rgba(250, 250, 247, 0.35);
  margin-top: 1rem;
  position: relative;
  font-weight: 300;
}

.tmw-nl-elevated .tmw-nl-proof strong {
  color: rgba(250, 250, 247, 0.55);
  font-weight: 500;
}

/* Dark mode newsletter CTA */
body.tmw-dark .tmw-nl-elevated {
  background: var(--tmw-bg-card);
  border: 1px solid var(--tmw-border);
}

body.tmw-dark .tmw-nl-elevated h2 {
  color: var(--tmw-text-primary);
}

body.tmw-dark .tmw-nl-elevated .tmw-nl-form button {
  background: var(--tmw-text-primary);
  color: var(--tmw-bg);
}

/* --- Scroll reveal --- */
.tmw-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.tmw-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   ADD THIS BLOCK TO style.css
   ============================================================================

   Where to paste it:
     Open style.css and find this section header (around line 1085):

         /* ============================================
            7. COMPONENT LIBRARY
            ============================================ */

     Paste the entire block below at the END of section 7 (just before the
     "/* ============================================  7b. SIMPLIFICA..." header
     starts). This keeps reusable components grouped together.

   What it does:
     - Defines .tmw-press as the shared container for all press strips site-wide
     - Replaces the old inline .tmw-press / .tmw-press-logo rules that lived
       inside homepage-content.html (those become unused once the homepage
       block is swapped to the [tmw_press_logos] shortcode)
     - Forces all SVG logos to a single tonal monochrome color via CSS filter,
       so brand colors of the source SVGs don't matter
     - Per-logo height tuning (.tmw-pl-mh / .tmw-pl-lv / .tmw-pl-co) so wider
       wordmarks and narrower wordmarks feel optically balanced — pixel-equal
       heights would make Cosmopolitan look enormous next to La Vanguardia
     - Dark mode variant matches the muted lavender-gray look from the
       reference (Outlander/Antler/Altair/SQ Capital) using a CSS filter
       chain rather than hard-coding a tint color
     - .tmw-press-compact variant for tighter contexts (e.g. inside the
       About column on the homepage)
   ============================================================================ */

/* Press / "Visto en" strip — site-wide */
.tmw-press {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.tmw-press-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t3);
  font-weight: 500;
}

.tmw-press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

/* Logo base treatment: monochrome, muted, hover-lift.
   filter: grayscale forces single-tone regardless of source SVG color.
   filter: brightness/contrast tunes the resulting gray to match light bg. */
.tmw-press-logo {
  height: 26px;
  width: auto;
  display: block;
  filter: grayscale(1) brightness(1.6) contrast(0.45);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.tmw-press-logo:hover {
  opacity: 0.85;
}

/* Per-logo optical sizing — wordmarks have different aspect ratios and
   visual densities; pixel-equal heights look unbalanced. */
.tmw-press-logo.tmw-pl-mh { height: 28px; }   /* Men's Health — tall serif caps */
.tmw-press-logo.tmw-pl-lv { height: 22px; }   /* La Vanguardia — wide, shorter */
.tmw-press-logo.tmw-pl-co { height: 24px; }   /* Cosmopolitan — wide bold caps */

/* Compact variant — for narrower contexts (e.g. About column) */
.tmw-press-compact {
  padding: 1.5rem 0;
  gap: 1.5rem;
}
.tmw-press-compact .tmw-press-logos { gap: 2rem; }
.tmw-press-compact .tmw-press-logo.tmw-pl-mh { height: 26px; }
.tmw-press-compact .tmw-press-logo.tmw-pl-lv { height: 20px; }
.tmw-press-compact .tmw-press-logo.tmw-pl-co { height: 22px; }

/* Mobile: tighter spacing, slightly smaller logos.
   Default variant: looser padding for standalone strips.
   Compact variant (About column): extra breathing room above logos,
   centered label since mobile nav is also centered. */
@media (max-width: 600px) {
  .tmw-press { padding: 1.75rem 1rem; }
  .tmw-press-logos { gap: 2rem; }
  .tmw-press-logo.tmw-pl-mh { height: 22px; }
  .tmw-press-logo.tmw-pl-lv { height: 17px; }
  .tmw-press-logo.tmw-pl-co { height: 19px; }

  /* Compact variant (About column) mobile polish */
  .tmw-press-compact { gap: 2rem; text-align: center; }
  .tmw-press-compact .tmw-press-label { align-self: center; }
  .tmw-press-compact .tmw-press-logos { justify-content: center; }
}

/* ============================================================================
   DARK MODE OVERRIDE — add this to section 10 (DARK MODE — ALL OVERRIDES)
   You can also leave it here; it works either way because of the body.tmw-dark
   selector. If you prefer it grouped with other dark overrides, move it to
   around line 1428+ in style.css.
   ============================================================================ */

body.tmw-dark .tmw-press-logo {
  /* Invert + grayscale + warm slightly to land on the muted lavender-gray
     of the reference (Outlander/Antler/Altair/SQ Capital). The invert flips
     dark-on-light source SVGs to light-on-dark; sepia + hue-rotate adds the
     subtle warm/cool cast that matches the reference exactly. */
  filter: invert(1) grayscale(1) brightness(0.78) sepia(0.15) hue-rotate(200deg);
  opacity: 0.6;
}

body.tmw-dark .tmw-press-logo:hover {
  opacity: 0.9;
}

/* ============================================
   7b. SIMPLIFICA PRE-FOOTER BANNER
   ============================================ */
.tmw-simplifica-banner { position: relative; width: 100%; background: var(--tmw-bg); overflow: hidden; padding: 5rem 2rem; display: flex; align-items: center; justify-content: center; min-height: 280px; border-top: 1px solid var(--tmw-border); }
.tmw-simplifica-quote { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 720px; width: 100%; text-align: center; font-family: var(--tmw-font-body); font-size: 0.9375rem; font-weight: 300; line-height: 1.85; color: rgba(26, 26, 26, 0.10); letter-spacing: 0.01em; pointer-events: none; z-index: 1; padding: 0 1rem; }
.tmw-simplifica-word { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0; user-select: none; }
.tmw-simplifica-word span { font-family: var(--tmw-font-body); font-size: clamp(3.5rem, 10vw, 8rem); font-weight: 800; letter-spacing: -0.04em; color: var(--tmw-text-primary); line-height: 1; }
.tmw-simplifica-wizard { display: inline-flex; align-items: flex-end; margin-left: -0.05em; margin-bottom: -0.05em; position: relative; z-index: 3; align-self: flex-end; }
.tmw-simplifica-wizard svg { height: clamp(1.5rem, 3.5vw, 2.5rem); width: auto; opacity: 0.65; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.08)); }

.tmw-simplifica-banner::before, .tmw-simplifica-banner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; }
.tmw-simplifica-banner::before { left: 0; background: linear-gradient(to right, var(--tmw-bg), transparent); }
.tmw-simplifica-banner::after { right: 0; background: linear-gradient(to left, var(--tmw-bg), transparent); }

body.tmw-dark .tmw-simplifica-quote { color: rgba(228, 226, 219, 0.12); }
body.tmw-dark .tmw-simplifica-wizard svg { opacity: 0.80; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }

@media (max-width: 768px) { .tmw-simplifica-banner { padding: 3.5rem 1.5rem; min-height: 200px; } .tmw-simplifica-quote { font-size: 0.75rem; line-height: 1.7; max-width: 90%; } }
@media (max-width: 480px) { .tmw-simplifica-banner { padding: 3rem 1rem; min-height: 160px; } .tmw-simplifica-quote { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .tmw-simplifica-word span { opacity: 0; transform: translateY(20px); animation: tmwBannerUp 0.8s ease forwards; animation-delay: 0.1s; }
  .tmw-simplifica-wizard { opacity: 0; transform: translateY(10px) scale(0.8); animation: tmwWizardPop 0.6s ease forwards; animation-delay: 0.5s; }
  .tmw-simplifica-quote { opacity: 0; animation: tmwQuoteFade 1.2s ease forwards; animation-delay: 0.3s; }
  @keyframes tmwBannerUp { to { opacity: 1; transform: translateY(0); } }
  @keyframes tmwWizardPop { to { opacity: 0.85; transform: translateY(0) scale(1); } }
  @keyframes tmwQuoteFade { to { opacity: 1; } }
}

/* ============================================
   7c. ARTICLES PAGE
   ============================================ */
.tmw-articles-page{ --bg:#FAFAF7;--card:#FFF;--t1:#1A1A1A;--t2:#6B6B6B;--t3:#999;--brd:#E8E8E4;--brd-h:#D0D0CC;--sub:#F2F2EE;--blue:#425D8A; }
body.tmw-dark .tmw-articles-page{ --bg:#141413;--card:#1E1E1C;--t1:#E8E6DF;--t2:#A09E96;--t3:#6B6A65;--brd:#2A2A27;--brd-h:#3A3A36;--sub:#252523;--blue:#7A9BC5; }

.tmw-articles-hero { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 3rem; display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
.tmw-articles-hero-content h1 { font-family: var(--tmw-font-display), 'Instrument Serif', Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 1.5rem; color: var(--t1); }
.tmw-articles-hero-content p { font-size: 1.0625rem; color: var(--t2); line-height: 1.8; font-weight: 300; max-width: 480px; }
.tmw-articles-hero-content p + p { margin-top: 1rem; }

.tmw-articles-nl { background: var(--card); border: 1px solid var(--brd); border-radius: 16px; padding: 2rem; }
.tmw-articles-nl h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: 1rem; color: var(--t1); line-height: 1.4; }
.tmw-articles-nl-form { display: flex; flex-direction: column; gap: 0.625rem; }
.tmw-articles-nl-form input { padding: 0.875rem 1rem; border-radius: 8px; border: 1px solid var(--brd); background: var(--bg); color: var(--t1); font-size: 0.9375rem; font-family: inherit; outline: none; }
.tmw-articles-nl-form input:focus { border-color: var(--blue); }
.tmw-articles-nl-form button { padding: 0.875rem 1.5rem; border-radius: 8px; border: none; background: var(--t1); color: var(--bg); font-size: 0.9375rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: opacity 0.2s; }
.tmw-articles-nl-form button:hover { opacity: 0.85; }
.tmw-articles-nl .nl-note { font-size: 0.8125rem; color: var(--t3); font-style: italic; margin-top: 0.75rem; font-weight: 300; }

.tmw-articles-all { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 1rem; text-align: center; }
.tmw-articles-all h2 { font-family: var(--tmw-font-display), 'Instrument Serif', Georgia, serif; font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 0.5rem; color: var(--t1); }
.tmw-articles-all p { font-size: 1rem; color: var(--t3); font-weight: 300; }

.tmw-articles-cats { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem 4rem; }

.tmw-articles-cat h3 { font-family: inherit; font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.015em; color: var(--t1); padding-bottom: 0.2rem; border-bottom: 2px solid var(--t1); margin-bottom: 1.5rem; display: inline; background-image: linear-gradient(to top, rgba(66,93,138,0.15) 40%, transparent 40%); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 0.3s ease; cursor: pointer; }
.tmw-articles-cat h3 a { color: var(--t1) !important; text-decoration: none !important; }
.tmw-articles-cat h3:hover { background-size: 100% 100%; }

body.tmw-dark .tmw-articles-cat h3 { color: #E8E6DF; border-bottom-color: #E8E6DF; background-image: linear-gradient(to top, rgba(122,155,197,0.2) 40%, transparent 40%); }
body.tmw-dark .tmw-articles-cat h3 a { color: #E8E6DF !important; }
body.tmw-dark .tmw-articles-page .tmw-cat-list-item { color: #E8E6DF !important; border-bottom-color: #2A2A27 !important; text-decoration: none !important; }
body.tmw-dark .tmw-articles-page .tmw-cat-list-item:hover { color: #7A9BC5 !important; }
body.tmw-dark .tmw-articles-page .tmw-articles-cat-more { color: #A09E96 !important; text-decoration: none !important; }
body.tmw-dark .tmw-articles-page .tmw-articles-cat-more:hover { color: #E8E6DF !important; }

.tmw-cat-list { display: flex; flex-direction: column; }
.tmw-articles-page .tmw-cat-list-item { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--brd); font-size: 1rem; font-weight: 300; color: #1A1A1A !important; text-decoration: none !important; transition: color 0.2s; line-height: 1.45; }
.tmw-articles-page .tmw-cat-list-item:hover { color: #425D8A !important; }

.tmw-articles-page .tmw-articles-cat-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #6B6B6B !important; text-decoration: none !important; transition: color 0.2s; }
.tmw-articles-page .tmw-articles-cat-more:hover { color: #1A1A1A !important; }

.tmw-articles-divider { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.tmw-articles-divider hr { border: none; border-top: 1px solid var(--brd); }

.tmw-articles-cta { max-width: 680px; margin: 0 auto; padding: 3rem 2rem; background: var(--t1); border-radius: 16px; text-align: center; }
body.tmw-dark .tmw-articles-cta { background: var(--card); border: 1px solid var(--brd); }
.tmw-articles-cta h2 { font-family: var(--tmw-font-display), 'Instrument Serif', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 0.75rem; color: var(--bg); line-height: 1.2; }
body.tmw-dark .tmw-articles-cta h2 { color: var(--t1); }
.tmw-articles-cta p { color: rgba(250,250,247,0.6); font-size: 0.9375rem; line-height: 1.6; font-weight: 300; margin-bottom: 1.5rem; }
body.tmw-dark .tmw-articles-cta p { color: var(--t2); }
.tmw-articles-cta-form { max-width: 380px; margin: 0 auto; display: flex; gap: 0.5rem; }
.tmw-articles-cta-form input { flex: 1; padding: 0.75rem 1rem; border-radius: 100px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #FAFAF7; font-size: 0.875rem; font-family: inherit; outline: none; }
body.tmw-dark .tmw-articles-cta-form input { background: var(--bg); border-color: var(--brd); color: var(--t1); }
.tmw-articles-cta-form input::placeholder { color: rgba(250,250,247,0.4); }
body.tmw-dark .tmw-articles-cta-form input::placeholder { color: var(--t3); }
.tmw-articles-cta-form button { padding: 0.75rem 1.5rem; border-radius: 100px; border: none; background: #FAFAF7; color: #1A1A1A; font-size: 0.8125rem; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity 0.2s; }
body.tmw-dark .tmw-articles-cta-form button { background: var(--t1); color: var(--bg); }
.tmw-articles-cta-form button:hover { opacity: 0.85; }
.tmw-articles-cta-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem 4rem; }

.archive .site-main { max-width: 1200px !important; margin: 0 auto !important; padding: 0 2rem 4rem !important; display: block !important; }
.archive .site-main .page-header { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--tmw-border); }
.archive .page-header h1 { font-family: var(--tmw-font-display) !important; font-size: clamp(1.75rem, 4vw, 2.5rem) !important; font-weight: 400 !important; letter-spacing: -0.025em !important; }
.archive .site-main article.post { background: transparent !important; border: none !important; border-bottom: 1px solid var(--tmw-border) !important; border-radius: 0 !important; padding: 1.25rem 0 !important; margin: 0 !important; }
.archive .site-main article.post:first-of-type { border-top: 1px solid var(--tmw-border) !important; }
.archive article.post .post-image { display: none !important; }
.archive article.post .inside-article { padding: 0 !important; background: transparent !important; }
.archive article.post .entry-title { display: block !important; font-family: var(--tmw-font-body) !important; font-size: 1.0625rem !important; font-weight: 400 !important; letter-spacing: -0.01em !important; line-height: 1.4 !important; margin: 0 !important; }
.archive article.post .entry-title a { color: var(--tmw-text-primary) !important; text-decoration: none !important; }
.archive article.post .entry-title a:hover { color: var(--tmw-wizard-blue) !important; }
.archive article.post .entry-summary, .archive article.post .entry-meta, .archive article.post footer.entry-meta, .archive article.post .read-more { display: none !important; }
.archive article .entry-header { display: block !important; }
.archive nav.navigation { padding: 2.5rem 0; display: flex; justify-content: center; gap: 0.75rem; }
.archive nav.navigation a { padding: 0.625rem 1.25rem; border: 1px solid var(--tmw-border); border-radius: var(--tmw-radius-pill); color: var(--tmw-text-secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; }
.archive nav.navigation a:hover { border-color: var(--tmw-text-primary); color: var(--tmw-text-primary); }
.blog .page-header { display: none !important; }

.tmw-articles-page .tmw-footer-wrap{border-top:1px solid var(--brd);margin-top:1rem}
.tmw-articles-page .tmw-footer-grid{max-width:1200px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:2rem}
.tmw-articles-page .tmw-footer-brand p{font-size:.8125rem;color:var(--t3);line-height:1.6;max-width:240px;margin-top:1rem}
.tmw-articles-page .tmw-footer-col h4{font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:1rem;font-weight:500}
.tmw-articles-page .tmw-footer-col a{display:block;font-size:.875rem;color:var(--t2);text-decoration:none;margin-bottom:.5rem;transition:color .2s}
.tmw-articles-page .tmw-footer-col a:hover{color:var(--t1)}
.tmw-articles-page .tmw-footer-bottom{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--brd);display:flex;justify-content:space-between;font-size:.75rem;color:var(--t3)}
.tmw-articles-page .tmw-footer-bottom a{color:var(--t3);text-decoration:none}

@media (max-width: 900px) {
  .tmw-articles-hero { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 2rem 2rem; }
  .tmw-articles-cats { grid-template-columns: 1fr; gap: 2.5rem; }
  .tmw-articles-page .tmw-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tmw-articles-cta-form { flex-direction: column; }
  .tmw-articles-page .tmw-footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .tmw-articles-hero-content > *, .tmw-articles-nl { opacity: 0; transform: translateY(16px); animation: tmwArtUp 0.7s ease forwards; }
  .tmw-articles-hero-content h1 { animation-delay: 0s; }
  .tmw-articles-hero-content p { animation-delay: 0.08s; }
  .tmw-articles-nl { animation-delay: 0.12s; }
  @keyframes tmwArtUp { to { opacity: 1; transform: translateY(0); } }
}

/* ============================================
   8. FOOTER
   ============================================ */
.site-footer {
  border-top: 1px solid var(--tmw-border);
  background: var(--tmw-bg) !important;
}

/* ============================================
   9. DARK MODE TOGGLE — Wizard + celestial carousel
   ============================================ */
.tmw-dark-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  height: 44px;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 999;
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.4s ease, transform 0.4s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 0 14px;
  line-height: 1;
  border: 1px solid #E8E8E4 !important;
  background: #FFFFFF !important;
}

.tmw-dark-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(66, 93, 138, 0.2);
}

/* Wizard SVG */
.tmw-dark-toggle .tmw-toggle-wizard {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  transition: transform 0.4s ease, filter 0.6s ease;
}

.tmw-dark-toggle:hover .tmw-toggle-wizard {
  transform: rotate(-12deg);
}

/* Celestial carousel — clipped viewport */
.tmw-dark-toggle .tmw-sky {
  width: 20px;
  height: 22px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* The carousel strip: sun on top, moon below */
.tmw-dark-toggle .tmw-carousel {
  position: absolute;
  left: 0;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(0);
}

/* Sun — 9px core + 8 ray spokes */
.tmw-dark-toggle .tmw-sun {
  width: 20px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tmw-dark-toggle .tmw-sun-wrap {
  position: relative;
  width: 20px;
  height: 20px;
}

.tmw-dark-toggle .tmw-sun-core {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #EF9F27;
  position: absolute;
  top: 5.5px;
  left: 5.5px;
}

.tmw-dark-toggle .tmw-ray {
  position: absolute;
  width: 1.5px;
  height: 3.5px;
  background: #EF9F27;
  border-radius: 0.75px;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.tmw-dark-toggle .tmw-ray:nth-child(2) { transform: translate(-50%, -50%) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(3) { transform: translate(-50%, -50%) rotate(45deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(4) { transform: translate(-50%, -50%) rotate(90deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(5) { transform: translate(-50%, -50%) rotate(135deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(6) { transform: translate(-50%, -50%) rotate(180deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(7) { transform: translate(-50%, -50%) rotate(225deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(8) { transform: translate(-50%, -50%) rotate(270deg) translateY(-8.5px); }
.tmw-dark-toggle .tmw-ray:nth-child(9) { transform: translate(-50%, -50%) rotate(315deg) translateY(-8.5px); }

/* Moon — SVG crescent */
.tmw-dark-toggle .tmw-moon {
  width: 20px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tmw-dark-toggle .tmw-moon svg {
  width: 16px;
  height: 16px;
}

/* Hide old icon spans */
.tmw-dark-toggle .icon-sun,
.tmw-dark-toggle .icon-moon,
.tmw-dark-toggle .tmw-toggle-label {
  display: none !important;
}

/* ============================================
   10. DARK MODE — ALL OVERRIDES
   ============================================ */
body.tmw-dark {
  --tmw-bg: #141413;
  --tmw-bg-card: #1E1E1C;
  --tmw-text-primary: #E8E6DF;
  --tmw-text-secondary: #A09E96;
  --tmw-text-tertiary: #6B6A65;
  --tmw-border: #2A2A27;
  --tmw-border-hover: #3A3A36;
  --tmw-accent: #E8E6DF;
  --tmw-accent-subtle: #1E1E1C;
}

body.tmw-dark,
body.tmw-dark .site,
body.tmw-dark .site-content,
body.tmw-dark .inside-article,
body.tmw-dark .entry-content,
body.tmw-dark #page,
body.tmw-dark .grid-container,
body.tmw-dark .site-main {
  background-color: #141413 !important;
  color: #E8E6DF !important;
}

/* Dark mode header — transparent at top */
body.tmw-dark .site-header,
body.tmw-dark .site-header .inside-header,
body.tmw-dark .main-navigation,
body.tmw-dark .main-navigation .inside-navigation,
body.tmw-dark .navigation-search,
body.tmw-dark .main-navigation .main-nav,
body.tmw-dark .main-navigation .main-nav ul {
  background: transparent !important;
}

body.tmw-dark .site-header { border-bottom-color: transparent !important; }

body.tmw-dark .main-navigation .main-nav li a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
body.tmw-dark .main-navigation .main-nav li a:hover { color: #FFFFFF !important; }

body.tmw-dark .main-navigation li.tmw-nav-cta a,
body.tmw-dark .main-navigation .main-nav li.tmw-nav-cta a,
body.tmw-dark .main-navigation .tmw-nav-cta > a {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  text-shadow: none;
}

body.tmw-dark .main-navigation li.tmw-nav-cta a:hover,
body.tmw-dark .main-navigation .main-nav li.tmw-nav-cta a:hover,
body.tmw-dark .main-navigation .tmw-nav-cta > a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

body.tmw-dark .custom-logo { filter: brightness(2); }

/* Dark mode scrolled — visual frost handled by .tmw-header-frost layer */
body.tmw-dark .site-header.tmw-scrolled { border-bottom-color: rgba(42, 42, 39, 0.5) !important; }

body.tmw-dark .site-header.tmw-scrolled .main-navigation .main-nav li a { color: #A09E96 !important; text-shadow: none; }
body.tmw-dark .site-header.tmw-scrolled .main-navigation .main-nav li a:hover { color: #E8E6DF !important; }

body.tmw-dark .site-header.tmw-scrolled .main-navigation li.tmw-nav-cta a,
body.tmw-dark .site-header.tmw-scrolled .main-navigation .main-nav li.tmw-nav-cta a,
body.tmw-dark .site-header.tmw-scrolled .main-navigation .tmw-nav-cta > a {
  background: #425D8A !important;
  border-color: #425D8A !important;
  color: #E8E6DF !important;
}

body.tmw-dark .site-header.tmw-scrolled .custom-logo { filter: brightness(1.4); }

body.tmw-dark .site-title, body.tmw-dark .site-title a { color: #E8E6DF !important; }

body.tmw-dark .tmw-dark-toggle { border-color: #2A2A27 !important; background: #1E1E1C !important; }
body.tmw-dark .tmw-dark-toggle:hover { box-shadow: 0 4px 20px rgba(66, 93, 138, 0.3); }
body.tmw-dark .tmw-dark-toggle .tmw-toggle-wizard { filter: brightness(1.4); }
body.tmw-dark .tmw-dark-toggle .tmw-carousel { transform: translateY(-40px); }

body.tmw-dark .entry-content h1, body.tmw-dark .entry-content h2, body.tmw-dark .entry-title { color: #E8E6DF !important; }
body.tmw-dark .entry-content h3 { color: #A09E96 !important; }
body.tmw-dark .entry-content p, body.tmw-dark .entry-content li { color: #C5C3BB !important; }
body.tmw-dark .entry-content a { color: #7A9BC5 !important; }
body.tmw-dark .entry-content blockquote { border-left-color: #425D8A !important; color: #C5C3BB !important; }

body.tmw-dark .site-footer, body.tmw-dark .inside-footer { background: #141413 !important; border-top-color: #2A2A27 !important; }

body.tmw-dark .tmw-takeaway { background: #1E1E1C; border-color: #2A2A27; border-left-color: #425D8A; }
body.tmw-dark .tmw-inline-cta { background: #1E1E1C; }

/* ============================================
   11. RESPONSIVE — Global fixes + breakpoints
   ============================================ */

/* --- FIX: Hide GP's "Menu" text label on mobile toggle --- 
   GP outputs: <button class="menu-toggle"><span class="mobile-menu">Menu</span></button>
   We want only the hamburger icon, not the word "Menu" */
.menu-toggle .mobile-menu {
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* GP places .menu-toggle inside .main-navigation.
   JS in functions.php hides all GP toggles on mobile and injects
   a clean custom .tmw-hamburger button in .inside-header instead. */

/* Hide GP's native toggle on mobile — JS handles this too, 
   but CSS backup ensures no flash of unstyled toggle */
@media (max-width: 768px) {
  .menu-toggle {
    display: none !important;
  }
}

/* Custom hamburger button — 3 spans that animate to X */
.tmw-hamburger {
  display: none; /* hidden on desktop, shown on mobile via media query */
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: none !important;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 10001;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

.tmw-hamburger:focus,
.tmw-hamburger:active,
.tmw-hamburger:hover,
.tmw-hamburger:focus-visible {
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.tmw-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--tmw-text-primary);
  position: absolute;
  left: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.tmw-hamburger span:nth-child(1) { top: 16px; }
.tmw-hamburger span:nth-child(2) { top: 21.5px; }
.tmw-hamburger span:nth-child(3) { top: 27px; }

/* Animate to X when open */
.tmw-hamburger.is-open span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.tmw-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.tmw-hamburger.is-open span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Dark mode */
body.tmw-dark .tmw-hamburger span {
  background: #E8E6DF;
}

/* Scrolled state */
.site-header.tmw-scrolled .tmw-hamburger span {
  background: var(--tmw-text-secondary);
}

body.tmw-dark .site-header.tmw-scrolled .tmw-hamburger span {
  background: #A09E96;
}

/* Mobile open state */
.site-header.tmw-mobile-open .tmw-hamburger span {
  background: var(--tmw-text-primary);
}

body.tmw-dark .site-header.tmw-mobile-open .tmw-hamburger span {
  background: #E8E6DF;
}

/* --- FIX: Dark mode toggle — prevent warp/distortion ---
   Ensure the button doesn't get unexpected browser outlines or shape issues */
.tmw-dark-toggle {
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden;
}

.tmw-dark-toggle:focus {
  outline: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.tmw-dark-toggle:focus-visible {
  outline: 2px solid var(--tmw-wizard-blue) !important;
  outline-offset: 2px !important;
}

/* --- FIX: Desktop hero photo alignment ---
   Prevent the photo from dropping below the content.
   align-items:center on the grid should handle it, but
   the aspect-ratio:3/4 can push it taller than the content.
   Cap the max-height so it stays aligned. */
.tmw-hero-photo {
  max-height: 520px;
  align-self: center;
}

/* --- FIX: Page title "# Home" leaking through ---
   GP shows the page title; we hide it in CSS but ensure it's truly gone */
.page .entry-title,
.page .entry-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ---------- TABLET LANDSCAPE (≤1024px) ---------- */
@media (max-width: 1024px) {

  .site-header .inside-header {
    padding: 0 1.5rem;
  }

  .main-navigation .main-nav > ul > li {
    margin: 0 0.5rem;
  }

  .main-navigation a {
    font-size: 0.9375rem !important;
  }

  .tmw-hero {
    gap: 3rem;
  }

  .tmw-home .tmw-footer-grid,
  .tmw-articles-page .tmw-footer-grid,
  .tmw-books .tmw-footer-grid {
    gap: 1.5rem;
  }
}

/* ---------- TABLET PORTRAIT (≤768px) ---------- */
@media (max-width: 768px) {

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  :root { --tmw-header-height: 70px; }

  /* --- HEADER & HAMBURGER FIX --- */
  .site-header {
    z-index: 100;
  }

  /* Mobile scrolled: frosted glass — handled by .tmw-header-frost layer.
     Only layout overrides needed here. */

  .site-header.tmw-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
  }

  /* Inside header: flex layout, NO overflow hidden (that clips the menu) */
  .site-header .inside-header {
    padding: 0 1.25rem !important;
    height: 70px !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header.tmw-scrolled .inside-header {
    height: 56px !important;
  }

  /* When menu is OPEN, restore overflow so content is visible */
  .site-header.tmw-mobile-open .inside-header {
    overflow: visible !important;
  }

  /* Logo: constrained to fit header */
  .site-header .custom-logo {
    height: 36px !important;
    width: auto !important;
    max-width: 36px !important;
    flex-shrink: 0;
    object-fit: contain;
  }

  .site-header.tmw-scrolled .custom-logo {
    height: 28px !important;
    max-width: 28px !important;
  }

  /* Show our custom hamburger on mobile */
  .tmw-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* --- DARK MODE TOGGLE FIX --- */
  .tmw-dark-toggle {
    bottom: 1rem !important;
    right: 1rem !important;
    height: 40px !important;
    min-width: 72px !important;
    padding: 0 12px !important;
    gap: 5px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12) !important;
  }

  .tmw-dark-toggle .tmw-toggle-wizard {
    height: 20px !important;
  }

  .tmw-dark-toggle .tmw-sky {
    width: 18px !important;
    height: 20px !important;
  }

  .tmw-dark-toggle .tmw-sun,
  .tmw-dark-toggle .tmw-moon {
    width: 18px !important;
    height: 20px !important;
  }

  .tmw-dark-toggle .tmw-carousel {
    gap: 16px !important;
  }

  body.tmw-dark .tmw-dark-toggle .tmw-carousel {
    transform: translateY(-36px) !important;
  }

  /* --- SINGLE ARTICLE MOBILE --- */
  .single .inside-article {
    padding: 0 1.25rem !important;
  }

  .single .entry-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .single .entry-header {
    padding-top: calc(var(--tmw-header-height) + 1.5rem);
    margin-bottom: 1.5rem;
  }

  .single .entry-content p,
  .single .entry-content li {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .single .entry-content h2,
  .single .site-content h2 {
    font-size: 1.375rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
  }

  .single .entry-content h3,
  .single .site-content h3 {
    font-size: 1.0625rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
  }

  .single .entry-content blockquote {
    font-size: 1.0625rem !important;
    padding-left: 1.25rem !important;
    margin: 2rem 0 !important;
  }

  .single .entry-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .single .post-image {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 2rem;
  }

  .single .post-image img {
    border-radius: 0 !important;
    width: 100% !important;
  }

  .tmw-takeaway {
    padding: 1.25rem 1.25rem !important;
    margin: 2rem 0 !important;
  }

  .tmw-inline-cta {
    padding: 1.5rem !important;
    margin: 2rem 0 !important;
  }

  .tmw-progress-bar {
    top: 56px !important;
  }

  /* --- HOMEPAGE HERO MOBILE: CENTERED --- */
  .tmw-hero {
    padding: 2rem 1.25rem 1.5rem !important;
    gap: 1.5rem;
    text-align: center;
  }

  .tmw-hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tmw-hero-photo {
    max-height: 400px !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 340px !important;
    aspect-ratio: 3/4;
    display: flex;
    justify-content: center;
  }

  .tmw-hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .tmw-hero h1 {
    text-align: center;
  }

  .tmw-hero-sub {
    text-align: center;
  }

  .tmw-hero-proof {
    text-align: center;
  }

  .tmw-home .tmw-nl-form {
    max-width: 100% !important;
    width: 100%;
  }

  .tmw-about-articles {
    padding: 2.5rem 1.25rem !important;
    gap: 2.5rem !important;
  }

  .tmw-about h2 {
    font-size: 1.5rem !important;
  }

  /* Books strip */
  .tmw-books-inner {
    gap: clamp(1.25rem, 3vw, 2.5rem) !important;
    padding: 0 1rem;
  }

  .tmw-book-cover {
    width: 100px !important;
    height: 145px !important;
    padding: 0.625rem !important;
  }

  .tmw-book-cover-title {
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }

  .tmw-book-cover-author {
    font-size: 0.5rem !important;
    margin-top: 0.375rem !important;
  }

  .tmw-books-item span {
    font-size: 0.6875rem !important;
  }

  /* Newsletter elevated CTA */
  .tmw-nl-elevated {
    padding: 3rem 1.5rem !important;
  }

  .tmw-nl-elevated h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* Collab cards */
  .tmw-collab {
    padding: 2.5rem 1.25rem 3rem !important;
  }

  /* --- ARTICLES PAGE MOBILE --- */
  .tmw-articles-hero {
    padding: 2.5rem 1.25rem 2rem !important;
  }

  .tmw-articles-hero-content h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }

  .tmw-articles-cats {
    padding: 2rem 1.25rem 3rem !important;
    gap: 2rem !important;
  }

  .tmw-articles-cta-wrap {
    padding: 0 1.25rem 3rem !important;
  }

  /* --- BOOKS PAGE MOBILE --- */
  .tmw-books-hero {
    padding: 3rem 1.25rem 1rem !important;
  }

  .tmw-books-intro {
    padding: 1rem 1.25rem 2rem !important;
  }

  .tmw-books-showcase {
    padding: 0.75rem 1.25rem 1.5rem !important;
  }

  .tmw-book-feat-body {
    padding: 1.75rem !important;
  }

  .tmw-book-feat-body h2 {
    font-size: 1.5rem !important;
  }

  .tmw-books-row {
    padding: 1rem 1.25rem 1.5rem !important;
  }

  .tmw-book-sec-body {
    padding: 1.5rem 1.5rem 2rem !important;
  }

  .tmw-books-pair-label {
    padding: 0 1.25rem !important;
  }

  .tmw-books-author {
    padding: 2rem 1.25rem !important;
  }

  .tmw-books-divider {
    padding: 0.75rem 1.25rem !important;
  }

  /* --- WIZARD DIVIDER MOBILE --- */
  .tmw-wizard-divider {
    padding: 1.5rem 1rem !important;
    gap: 1rem !important;
  }

  .tmw-wizard-divider svg {
    height: 20px !important;
  }

  /* --- 5 NUGGETS MOBILE --- */
  .tmw-5n-hero-photo {
    height: 50vh !important;
    min-height: 320px !important;
    max-height: 450px !important;
  }

  .tmw-5n-hero-content {
    padding-top: 1rem !important;
  }

  /* --- FOOTER MOBILE --- */
  .tmw-home .tmw-footer-grid,
  .tmw-articles-page .tmw-footer-grid,
  .tmw-books .tmw-footer-grid {
    padding: 2.5rem 1.25rem !important;
  }

  .tmw-home .tmw-footer-bottom,
  .tmw-articles-page .tmw-footer-bottom,
  .tmw-books .tmw-footer-bottom {
    padding: 1.25rem !important;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ---------- PHONES PORTRAIT (≤480px) ---------- */
@media (max-width: 480px) {

  .single .inside-article {
    padding: 0 1rem !important;
  }

  .single .entry-title {
    font-size: 1.625rem !important;
  }

  .single .entry-content p,
  .single .entry-content li {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
  }

  .single .entry-content h2 {
    font-size: 1.25rem !important;
  }

  .single .entry-content h3 {
    font-size: 1rem !important;
  }

  .single .entry-content blockquote {
    font-size: 1rem !important;
  }

  .tmw-hero {
    padding: 1.5rem 1rem 1rem !important;
  }

  .tmw-hero h1 {
    font-size: 2rem !important;
  }

  .tmw-hero-sub {
    font-size: 1rem !important;
  }

  .tmw-hero-photo {
    max-height: 360px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
  }

  .tmw-hero-photo img {
    border-radius: 14px !important;
  }

  .tmw-book-cover {
    width: 88px !important;
    height: 128px !important;
  }

  .tmw-book-cover-title {
    font-size: 0.75rem !important;
  }

  .tmw-nl-elevated {
    padding: 2.5rem 1.25rem !important;
    border-radius: 14px !important;
  }

  .tmw-collab-card {
    padding: 1.75rem !important;
  }

  .tmw-collab-card h3 {
    font-size: 1.1875rem !important;
  }

  .tmw-articles-hero {
    padding: 2rem 1rem 1.5rem !important;
  }

  .tmw-articles-nl {
    padding: 1.5rem !important;
  }

  .tmw-articles-cats {
    padding: 1.5rem 1rem 2.5rem !important;
  }

  .tmw-articles-cta {
    padding: 2rem 1.25rem !important;
  }

  .tmw-books-hero {
    padding: 2rem 1rem 0.75rem !important;
  }

  .tmw-books-hero h1 {
    font-size: 1.75rem !important;
  }

  .tmw-book-feat-body .desc {
    font-size: 0.9375rem !important;
  }

  .tmw-book-sec-body h3 {
    font-size: 1.25rem !important;
  }

  .tmw-book-sec-body .desc {
    font-size: 0.875rem !important;
  }

  .tmw-home .tmw-footer-grid,
  .tmw-articles-page .tmw-footer-grid,
  .tmw-books .tmw-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }

  .tmw-home .tmw-footer-brand,
  .tmw-articles-page .tmw-footer-brand,
  .tmw-books .tmw-footer-brand {
    text-align: center;
  }

  .tmw-home .tmw-footer-brand p,
  .tmw-articles-page .tmw-footer-brand p,
  .tmw-books .tmw-footer-brand p {
    margin: 0.75rem auto 0;
  }

  .tmw-home .tmw-footer-brand div,
  .tmw-articles-page .tmw-footer-brand div,
  .tmw-books .tmw-footer-brand div {
    justify-content: center;
  }
}

/* ---------- SMALL PHONES (≤375px, iPhone SE) ---------- */
@media (max-width: 375px) {

  .site-header .inside-header {
    padding: 0 0.75rem !important;
  }

  .single .entry-title {
    font-size: 1.5rem !important;
  }

  .single .entry-content p,
  .single .entry-content li {
    font-size: 0.9375rem !important;
  }

  .tmw-hero h1 {
    font-size: 1.75rem !important;
  }

  .tmw-hero-sub {
    font-size: 0.9375rem !important;
  }

  .tmw-hero-photo {
    max-height: 320px !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  .tmw-books-inner {
    gap: 0.75rem !important;
  }

  .tmw-book-cover {
    width: 76px !important;
    height: 110px !important;
  }

  .tmw-book-cover-title {
    font-size: 0.6875rem !important;
  }

  .tmw-books-item span {
    font-size: 0.625rem !important;
  }

  .tmw-nl-elevated h2 {
    font-size: 1.375rem !important;
  }

  .tmw-dark-toggle {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    height: 36px !important;
    min-width: 64px !important;
    padding: 0 10px !important;
  }

  .tmw-dark-toggle .tmw-toggle-wizard {
    height: 18px !important;
  }
}

/* ---------- IPAD PORTRAIT (~820px) ---------- */
@media (min-width: 769px) and (max-width: 834px) {

  .tmw-hero {
    gap: 2.5rem;
    padding: 3rem 2rem 2rem;
  }

  .tmw-hero-photo {
    border-radius: 18px;
  }

  .tmw-about-articles {
    gap: 3rem;
  }

  .single .inside-article {
    max-width: 640px !important;
  }
}

/* ---------- IPAD PRO 12.9" PORTRAIT ---------- */
@media (min-width: 1000px) and (max-width: 1100px) {
  .tmw-hero {
    gap: 3rem;
  }

  .single .inside-article {
    max-width: var(--tmw-content-width) !important;
  }
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height: 500px) and (orientation: landscape) {

  .tmw-hero-photo {
    max-height: 260px !important;
    max-width: 200px;
  }

  .tmw-books-strip {
    padding: 3rem 1.5rem !important;
  }

  .tmw-dark-toggle {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
    height: 34px !important;
    min-width: 60px !important;
  }
}

/* ---------- TOUCH DEVICE HOVER SAFETY ---------- */
@media (hover: none) {
  .tmw-art-card:hover,
  .tmw-prod-card:hover,
  .tmw-collab-card:hover,
  .tmw-book-feat:hover,
  .tmw-book-sec:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .tmw-book-feat:hover .tmw-book-cover-svg,
  .tmw-book-sec:hover .tmw-book-cover-svg-sm,
  .tmw-books-item:hover .tmw-book-cover {
    transform: none !important;
  }

  .tmw-art-card:hover .tmw-art-card-img img {
    transform: none !important;
    filter: saturate(0.92) !important;
  }

  .tmw-wizard-divider:hover svg {
    opacity: 0.2 !important;
    transform: none !important;
  }

  body.tmw-dark .tmw-wizard-divider:hover svg {
    opacity: 0.15 !important;
  }

  .tmw-art-card:active,
  .tmw-prod-card:active,
  .tmw-collab-card:active,
  .tmw-book-feat:active,
  .tmw-book-sec:active {
    transform: scale(0.99) !important;
    transition: transform 0.1s ease !important;
  }
}
/* =========================================================
   Frosted header — dev.themacrowizard.com
   ---------------------------------------------------------
   FIX: replaced body.tmw-light with body:not(.tmw-dark)
   because JS only toggles .tmw-dark — .tmw-light never exists.

   On dark-hero pages (5nuggets, homepage), light-mode menu
   now uses dark frost to match Screenshot 3's look.
   ========================================================= */


/* =========================================================
   1 & 2 — MOBILE MENU OPEN
   ========================================================= */
@media (max-width: 768px) {

  /* ---- Neutralize inner panels (both modes) ---- */
  body.tmw-dark .site-header.tmw-mobile-open .inside-header,
  body.tmw-dark .site-header.tmw-mobile-open .main-navigation,
  body.tmw-dark .site-header.tmw-mobile-open .inside-navigation,
  body.tmw-dark .site-header.tmw-mobile-open .main-nav,
  body.tmw-dark .site-header.tmw-mobile-open .main-nav ul,
  body.tmw-dark .site-header.tmw-mobile-open #primary-menu,
  body.tmw-dark .site-header.tmw-mobile-open #menu-primary,
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .inside-header,
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .main-navigation,
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .inside-navigation,
  body:not(.tmw-dark) .site-header.tmw-mobile-open .inside-header,
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-navigation,
  body:not(.tmw-dark) .site-header.tmw-mobile-open .inside-navigation,
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-nav,
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-nav ul,
  body:not(.tmw-dark) .site-header.tmw-mobile-open #primary-menu,
  body:not(.tmw-dark) .site-header.tmw-mobile-open #menu-primary,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .inside-header,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .main-navigation,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .inside-navigation {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ---- Dark-mode menu open — dark frost ---- */
  body.tmw-dark .site-header.tmw-mobile-open,
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled {
    background: rgba(20, 20, 19, 0.55) !important;
    background-color: rgba(20, 20, 19, 0.55) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* ---- Light-mode menu open — normal pages: light frost ---- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled {
    background: rgba(250, 250, 247, 0.55) !important;
    background-color: rgba(250, 250, 247, 0.55) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  }
}


/* =========================================================
   3 & 4 & 5 — SCROLLED HEADER (all viewports)
   ---------------------------------------------------------
   Visual frost is handled by .tmw-header-frost layer
   (see Safari Liquid Glass fix). These rules are for
   border-bottom-color only (the frost layer handles bg/blur).
   ========================================================= */

/* Dark mode scrolled border */
body.tmw-dark .site-header.tmw-scrolled:not(.tmw-mobile-open) {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Light mode scrolled border */
body:not(.tmw-dark) .site-header.tmw-scrolled:not(.tmw-mobile-open) {
  border-bottom-color: rgba(232, 232, 228, 0.6) !important;
}


/* =========================================================
   Fallback for browsers without backdrop-filter
   ========================================================= */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

  @media (max-width: 768px) {
    body.tmw-dark .site-header.tmw-mobile-open,
    body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled {
      background-color: rgba(20, 20, 19, 0.92) !important;
    }
    body:not(.tmw-dark) .site-header.tmw-mobile-open,
    body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled {
      background-color: rgba(250, 250, 247, 0.92) !important;
    }
  }

  body.tmw-dark .site-header.tmw-scrolled:not(.tmw-mobile-open) {
    background-color: rgba(20, 20, 19, 0.92) !important;
  }
  body:not(.tmw-dark) .site-header.tmw-scrolled:not(.tmw-mobile-open) {
    background-color: rgba(250, 250, 247, 0.92) !important;
  }
}
/* =========================================================
   Mobile menu consistency fix
   ---------------------------------------------------------
   When the mobile menu is open (.tmw-mobile-open), the menu
   must look identical whether the user opened it at the top
   of the page or after scrolling. The .tmw-scrolled class
   stays on the header (for JS state tracking) but its visual
   effects must be neutralized.

   ADD this block right after the frosted header section,
   before section 12 (Animations).
   ========================================================= */

@media (max-width: 768px) {

  /* --- Reset scrolled visual differences when menu is open --- */

  /* Height: match non-scrolled menu header height */
  .site-header.tmw-mobile-open.tmw-scrolled .inside-header {
    height: 70px !important;
  }

  /* Logo: match non-scrolled size */
  .site-header.tmw-mobile-open.tmw-scrolled .custom-logo {
    height: 36px !important;
    max-width: 36px !important;
  }

  /* Nav link font size: match non-scrolled menu */
  .site-header.tmw-mobile-open.tmw-scrolled .main-nav > ul > li > a {
    font-size: 1.125rem !important;
  }

  /* Hamburger color: match non-scrolled menu state */
  .site-header.tmw-mobile-open.tmw-scrolled .tmw-hamburger span {
    background: #E8E6DF !important;
  }

  /* --- CTA button: always dark-hero style when menu is open ---
     Never blue pill — always the transparent dark-hero style
     matching Screenshot 1's look.                              */
  .site-header.tmw-mobile-open .main-nav li.tmw-nav-cta a,
  .site-header.tmw-mobile-open.tmw-scrolled .main-nav li.tmw-nav-cta a,
  .site-header.tmw-mobile-open .main-navigation .main-nav li.tmw-nav-cta a,
  .site-header.tmw-mobile-open.tmw-scrolled .main-navigation .main-nav li.tmw-nav-cta a {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #E8E6DF !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    text-align: center !important;
    font-weight: 500 !important;
  }
  /* --- Menu link colors: always light text on dark frost ---
     This covers both dark-hero and dark-mode pages.
     For normal light-mode pages (non-dark-hero), the light
     frost variant would need dark text — but since the
     frosted rules already set dark frost for dark-hero pages,
     we only need to ensure the scrolled state doesn't
     override back to dark text.                              */

  /* Dark mode: white text when scrolled+open */
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .main-nav > ul > li > a {
    color: #E8E6DF !important;
    text-shadow: none !important;
  }

  /* Dark mode: light borders when scrolled+open */
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .main-nav > ul > li {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Dark mode: logo brightness when scrolled+open */
  body.tmw-dark .site-header.tmw-mobile-open.tmw-scrolled .custom-logo {
    filter: brightness(1.4) !important;
  }

  /* Inside-header border: match non-scrolled menu */
  .site-header.tmw-mobile-open.tmw-scrolled .inside-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }
}
/* =========================================================
   Light-mode menu fix
   ---------------------------------------------------------
   In light mode, the frosted mobile menu needs:
   1. Higher opacity (0.78) for readability
   2. Dark text on the light frost
   3. CTA button in wizard blue
   ========================================================= */

@media (max-width: 768px) {

  /* --- Light frost: raise opacity for readability --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled {
    background: rgba(250, 250, 247, 0.78) !important;
    background-color: rgba(250, 250, 247, 0.78) !important;
  }

  /* --- Text: dark on light frost --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-nav > ul > li > a,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .main-nav > ul > li > a {
    color: #1A1A1A !important;
  }

  /* --- Borders: dark subtle on light frost --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-nav > ul > li,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .main-nav > ul > li {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  }

  /* --- Inside-header border --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .inside-header,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .inside-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  }

  /* --- Hamburger: dark on light frost --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .tmw-hamburger span,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .tmw-hamburger span {
    background: #1A1A1A !important;
  }

  /* --- Logo: no brightness filter on light frost --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .custom-logo,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .custom-logo {
    filter: none !important;
  }

  /* --- CTA button: wizard blue on light frost --- */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .main-nav li.tmw-nav-cta a,
  body:not(.tmw-dark) .site-header.tmw-mobile-open.tmw-scrolled .main-nav li.tmw-nav-cta a {
    background: #425D8A !important;
    border: none !important;
    color: #FAFAF7 !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    text-align: center !important;
    font-weight: 500 !important;
  }
}
/* =========================================================
   Safari 26 Liquid Glass — Header Tinting Fix
   =========================================================
   
   WHAT THIS FIXES:
   Safari 26 reads background-color and backdrop-filter from
   position:fixed elements to tint the status bar. Our header
   has both, so Safari tints the status bar with our frosted
   color — causing content to bleed through.
   
   THE FIX:
   1. The fixed header becomes a transparent shell (no bg,
      no backdrop-filter)
   2. A new position:absolute child (.tmw-header-frost)
      carries all frost visuals — Safari ignores it
   3. Safari falls back to tinting from the html element's
      background-color
   4. On dark-hero pages, html bg switches from dark to
      light as user scrolls past the hero
   
   REQUIRES:
   =========================================================
   
   A) HTML CHANGE — Add a frost layer inside .inside-header
      (or directly inside .site-header):
   
      In your header.php or via GP Hooks (wp_head), inject
      this element as the first child of .site-header:
   
      <div class="tmw-header-frost" aria-hidden="true"></div>
   
      The nav content (.inside-header) sits after it with
      position:relative and z-index:1 so it's above the frost.
   
   B) VIEWPORT META — Must include viewport-fit=cover:
   
      <meta name="viewport" content="width=device-width,
        initial-scale=1, viewport-fit=cover">
   
   C) JS CHANGES — See the JS section at the bottom of
      this file for the scroll handler updates.
   
   ========================================================= */


/* ---------------------------------------------------------
   1. HTML element background for Safari tinting fallback
   ---------------------------------------------------------
   Safari 26 Liquid Glass reads the html element's background
   to tint the status bar / URL bar chrome. We set an opaque
   solid color so Safari has a clean base to work with.
   --------------------------------------------------------- */

/* Light mode: cream background */
html {
  background-color: #FAFAF7 !important;
}

/* Dark mode: dark background */
html:has(body.tmw-dark) {
  background-color: #141413 !important;
}
/* Fallback for browsers without :has() */
body.tmw-dark {
  /* JS will also set html background directly */
}

/* Dark-hero pages (homepage, 5nuggets): always dark mode,
   so html:has(body.tmw-dark) above already sets #141413.
   No light-mode transitions needed. */


/* ---------------------------------------------------------
   2. Fixed header becomes transparent shell
   --------------------------------------------------------- */

/* When scrolled (fixed), strip ALL visual properties from
   the header itself. Safari only reads the fixed element. */
.site-header.tmw-scrolled {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Also strip from inner GP wrappers that are direct children
   of the fixed header — they inherit position context */
.site-header.tmw-scrolled .inside-header,
.site-header.tmw-scrolled .main-navigation,
.site-header.tmw-scrolled .main-navigation .inside-navigation {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ---------------------------------------------------------
   3. Frost layer — carries all visual properties
   --------------------------------------------------------- */

/* Hidden by default (non-scrolled state) */
.tmw-header-frost {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Visible when header is scrolled (fixed) */
.site-header.tmw-scrolled .tmw-header-frost {
  display: block;
}

/* Light mode frost */
.site-header.tmw-scrolled .tmw-header-frost {
  background: rgba(250, 250, 247, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(232, 232, 228, 0.6);
}

/* Dark mode frost */
body.tmw-dark .site-header.tmw-scrolled .tmw-header-frost {
  background: rgba(20, 20, 19, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Remove the border from the header itself — frost layer
   handles the border now */
.site-header.tmw-scrolled {
  border-bottom: none !important;
}

/* Nav content must sit above the frost layer */
.site-header .inside-header {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   4. Mobile menu open — also transparent shell
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* Fixed menu overlay: transparent shell */
  .site-header.tmw-mobile-open {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Show frost layer when menu is open */
  .site-header.tmw-mobile-open .tmw-header-frost {
    display: block;
  }

  /* Dark mode menu frost */
  body.tmw-dark .site-header.tmw-mobile-open .tmw-header-frost {
    background: rgba(20, 20, 19, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Light mode, normal pages: light frost menu */
  body:not(.tmw-dark) .site-header.tmw-mobile-open .tmw-header-frost {
    background: rgba(250, 250, 247, 0.78);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
}


/* ---------------------------------------------------------
   5. Mobile scrolled frost (inside @media 768)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* GP wrappers transparent — frost layer handles visuals */
  .site-header.tmw-scrolled .inside-header,
  .site-header.tmw-scrolled .main-navigation,
  .site-header.tmw-scrolled .main-navigation .inside-navigation,
  .site-header.tmw-scrolled .main-navigation .main-nav,
  .site-header.tmw-scrolled .main-navigation .main-nav > ul {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Frost layer gets the visual treatment */
  .site-header.tmw-scrolled .tmw-header-frost {
    background: rgba(250, 250, 247, 0.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
  }

  body.tmw-dark .site-header.tmw-scrolled .tmw-header-frost {
    background: rgba(20, 20, 19, 0.55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
  }
}
/* ============================================
   12. ANIMATIONS
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tmw-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .tmw-animate {
    opacity: 0;
    transform: translateY(16px);
    animation: tmw-fadeUp 0.7s ease forwards;
  }
}
/* ============================================================
   HOMEPAGE — "In the Clouds"  (append to end of style.css)
   Version bump: 2.0.0 -> 2.1.0
   ------------------------------------------------------------
   Almost everything for the homepage lives in the page's Custom
   HTML block (scoped under .tmw-home). The theme already handles:
   full-bleed content container, forced dark, frosted header on
   scroll, mobile hamburger + overlay, and the Google Fonts (incl.
   DM Sans 500). So the ONLY thing needed in style.css is a small
   legibility win for the nav links over the bright dune sky.
   Scoped to body.home so /5nuggets/ and other pages are untouched.
   ============================================================ */

/* Nav links over the bright hero (before scroll): solid white + crisp
   outline shadow. Replaces the global dark-hero rgba(255,255,255,.85),
   which reads faint against the lit sky. Scrolled state is inherited
   from the existing global header rules and is intentionally NOT touched. */
body.home .site-header:not(.tmw-scrolled) .main-navigation .main-nav li a {
  color: #FFFFFF !important;
  text-shadow: 0 0 1px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.75), 0 1px 10px rgba(0,0,0,0.5) !important;
}

/* Suscríbete pill keeps the frosted-glass dark-hero treatment; just drop
   the inherited text-shadow so the pill label stays clean. */
body.home .site-header:not(.tmw-scrolled) .main-navigation li.tmw-nav-cta a {
  text-shadow: none !important;
}


/* ============================================================
   SITE-WIDE FOOTER  (.tmw-site-footer) — rendered by functions.php
   Light + dark, centered & larger on mobile.
   ============================================================ */
.tmw-site-footer{border-top:1px solid var(--tmw-border,#E8E8E4);background:var(--tmw-bg,#FAFAF7)}
.tmw-sf-grid{max-width:var(--tmw-max-width,1200px);margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:2rem}
.tmw-sf-logo{display:flex;align-items:center;gap:.5rem}
.tmw-sf-mark{display:inline-flex;height:28px;width:28px}
.tmw-sf-mark svg{height:28px;width:auto}
.tmw-sf-logo strong{font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:500;color:var(--tmw-text-primary,#1A1A1A)}
.tmw-sf-brand p{font-family:'DM Sans',sans-serif;font-size:.8125rem;color:var(--tmw-text-tertiary,#999);line-height:1.6;max-width:240px;margin:1rem 0 0}
.tmw-sf-col h4{font-family:'DM Sans',sans-serif;font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tmw-text-tertiary,#999);margin:0 0 1rem;font-weight:500}
.tmw-sf-col a{display:block;font-family:'DM Sans',sans-serif;font-size:.875rem;color:var(--tmw-text-secondary,#6B6B6B);text-decoration:none;margin-bottom:.5rem;transition:color .2s}
.tmw-sf-col a:hover{color:var(--tmw-text-primary,#1A1A1A)}
.tmw-sf-bottom{max-width:var(--tmw-max-width,1200px);margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--tmw-border,#E8E8E4);display:flex;justify-content:space-between;font-family:'DM Sans',sans-serif;font-size:.75rem;color:var(--tmw-text-tertiary,#999)}
.tmw-sf-bottom a{color:var(--tmw-text-tertiary,#999);text-decoration:none}
.tmw-sf-bottom a:hover{color:var(--tmw-text-secondary,#6B6B6B)}

/* Dark (homepage + any tmw-dark page) — explicit, matches the theme's footer pattern */
body.tmw-dark .tmw-site-footer{background:#141413;border-top-color:#2A2A27}
body.tmw-dark .tmw-sf-logo strong{color:#E8E6DF}
body.tmw-dark .tmw-sf-brand p,
body.tmw-dark .tmw-sf-col h4,
body.tmw-dark .tmw-sf-bottom{color:#6B6A65}
body.tmw-dark .tmw-sf-col a{color:#A09E96}
body.tmw-dark .tmw-sf-col a:hover{color:#E8E6DF}
body.tmw-dark .tmw-sf-bottom{border-top-color:#2A2A27}
body.tmw-dark .tmw-sf-bottom a{color:#6B6A65}

/* Mobile: centered + a touch larger for easy tapping */
@media (max-width:768px){
  .tmw-sf-grid{grid-template-columns:1fr;text-align:center;gap:2.25rem;padding:3rem 1.5rem}
  .tmw-sf-logo{justify-content:center}
  .tmw-sf-brand p{margin-left:auto;margin-right:auto;max-width:300px;font-size:.875rem}
  .tmw-sf-col h4{font-size:.75rem;margin-bottom:.75rem}
  .tmw-sf-col a{font-size:1.0625rem;margin-bottom:.75rem}
  .tmw-sf-bottom{flex-direction:column;gap:.5rem;align-items:center;text-align:center;font-size:.8125rem}
}
/* ============================================================
   HOMEPAGE — centered desktop nav   (v2 — pill fix)
   logo (left)  ·  3 links (true-centered)  ·  Suscríbete pill (far right)
   Desktop only (>=769px). The mobile hamburger overlay is untouched.
   Scoped to body.home. To use site-wide, swap every "body.home" for "body".
   Replace the previous header-centered-nav.css with this whole file.
   ============================================================ */
@media (min-width:769px){

  body.home .site-header .inside-header{
    display:grid;
    grid-template-columns:1fr auto 1fr;   /* logo | centered nav | spacer */
    align-items:center;
    position:relative;                    /* the pill anchors to THIS */
  }

  /* logo: first cell, pinned left */
  body.home .site-header .inside-header > *:first-child{ justify-self:start; }

  /* nav: middle cell, true-centered across the full header width */
  body.home .site-header .main-navigation{ grid-column:2; justify-self:center; }

  /* GeneratePress puts position:relative on the nav wrappers, which was
     trapping the pill next to the links. Force them static so the pill's
     containing block becomes .inside-header (the whole header). */
  body.home .site-header .main-navigation,
  body.home .site-header .main-navigation .inside-navigation,
  body.home .site-header .main-navigation nav,
  body.home .site-header .main-navigation .main-nav,
  body.home .site-header .main-navigation .main-nav > ul{ position:static !important; }

  /* Suscríbete pill leaves the centered group and pins to the far right */
  body.home .site-header .main-navigation .main-nav > ul > li.tmw-nav-cta{
    position:absolute !important;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    margin:0;
  }
}