@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root{
  /* Color system */
  --color-bg: #ffffff;
  --color-cream: #f7f5f0;
  --color-ink: #14141b;
  --color-text: #1d1d26;
  --color-muted: #6b6b78;
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-foreground: #ffffff;
  --color-hairline: #e5e4ea;
  --color-card: #ffffff;

  /* Default category color (indigo) - used by any category whose slug
     isn't one of the named ones in the "Category color system" block
     further down, so every category always gets a sensible color. Every
     tint/glow/shadow used elsewhere is derived FROM this single value via
     color-mix(), so an ACF-overridden color (see front-page.php's inline
     "--cat-color" style) stays visually consistent everywhere too. */
  --cat-color: var(--color-primary);

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-section: 68px; /* gap between major homepage sections on desktop - polish pass: was 88px, trimmed ~23% for a more compact editorial rhythm (also used as the pre-footer gap, see .site-footer) */

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20,20,30,.05), 0 1px 3px rgba(20,20,30,.06);
  --shadow-card: 0 1px 2px rgba(20,20,30,.04), 0 8px 24px -8px rgba(20,20,30,.10);
  --shadow-lift: 0 4px 8px rgba(20,20,30,.06), 0 20px 40px -16px rgba(20,20,30,.18);

  --max-width: 1280px;

  /* Approximate total height of the sticky site header (logo/nav row +
     trending ticker, when present). Used to offset sticky elements below it
     (e.g. the single-post sidebar) so they tuck under the header instead of
     starting underneath/behind it. */
  --header-height: 88px;
}

/* Reset and base */
*{box-sizing:border-box}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}

h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--color-ink);letter-spacing:-0.02em;line-height:1.15;font-weight:700}

::selection{background:var(--color-primary);color:#fff}

.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}
@media (min-width:768px){ .container{padding:0 32px} }

/* ==========================================================================
   Category color system
   ==========================================================================
   Maps known category slugs to a color, via a modifier class added in PHP
   (category-badge--{slug} / category-card--{slug} - see blogbars_get_
   category_color_slug() in inc/template-functions.php). Any category slug
   NOT listed here simply never matches one of these rules, so it keeps the
   default indigo set on :root above - nothing breaks for an unmapped or
   custom category. An editor's own ACF "Category Accent Color" (see
   front-page.php) overrides this via an inline style with higher priority
   than these classes. Colors are deliberately muted/premium, not neon. */
.category-badge--technology,.category-card--technology{--cat-color:#2563eb}
.category-badge--tech,.category-card--tech{--cat-color:#0891b2}
.category-badge--business,.category-card--business{--cat-color:#ea580c}
.category-badge--entertainment,.category-card--entertainment{--cat-color:#7c3aed}
.category-badge--health,.category-card--health{--cat-color:#e11d48}
.category-badge--home-improvement,.category-card--home-improvement{--cat-color:#16a34a}
.category-badge--seo,.category-card--seo{--cat-color:#8b5cf6}
.category-badge--sports,.category-card--sports{--cat-color:#1d4ed8}
.category-badge--travel,.category-card--travel{--cat-color:#db2777}
.category-badge--blog,.category-card--blog{--cat-color:#4f46e5}
.category-badge--culture,.category-card--culture{--cat-color:#ec4899}
.category-badge--economy,.category-card--economy{--cat-color:#d97706}
.category-badge--news,.category-card--news{--cat-color:#0284c7}
.category-badge--opinions,.category-card--opinions{--cat-color:#7c3aed}
.category-badge--politics,.category-card--politics{--cat-color:#dc2626}
.category-badge--science,.category-card--science{--cat-color:#06b6d4}
.category-badge--world,.category-card--world{--cat-color:#059669}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-hairline);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 1px 0 0 var(--color-hairline), 0 10px 30px -18px rgba(20,20,30,.2); }
/* Logo and nav sit flush together on the left with a fixed gap (matching
   the reference design), and the search pill is pushed to the far right
   via margin-left:auto on .header-actions below - rather than
   justify-content:space-between, which would spread the middle nav item
   based on leftover space and could leave an oversized, inconsistent gap
   next to the logo depending on viewport width. */
.header-inner{display:flex;align-items:center;gap:var(--spacing-xl);padding:16px 0;flex-wrap:wrap}

/* WordPress pins its admin toolbar at position:fixed;top:0 for logged-in
   users (adding a body.admin-bar class automatically). Our own sticky
   header also sits at top:0, so the two would stack on top of each other
   once scrolled. Offset the sticky header down by the toolbar's height -
   32px on desktop, 46px on the narrow/mobile toolbar (WP's own 782px
   breakpoint) - so it sticks directly under the toolbar instead. */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){
  body.admin-bar .site-header{ top:46px; }
}

/* Some full-page screenshot/print tools don't handle position:sticky
   correctly and can render it stuck mid-page. Falling back to static
   positioning for print output keeps those captures clean. */
@media print{
  .site-header,.site-ticker{ position:static; }
}

.site-branding{display:flex;flex-direction:column}
.site-branding .site-title{text-decoration:none;display:inline-flex;align-items:center}
.site-branding h1,.site-branding h2{font-size:1.55rem;margin:0;font-weight:900;letter-spacing:-0.03em;color:var(--color-ink)}
/* Two-tone wordmark: "Blog" stays the default ink color from the h1 rule
   above, "Bars" picks up the indigo accent, and a small accent dot follows. */
.logo-part-dark{color:var(--color-ink)}
.logo-part-accent{color:var(--color-primary)}
.logo-dot{display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--color-primary);vertical-align:middle}
.site-description{font-family:var(--font-sans);font-size:.8rem;color:var(--color-muted)}

.primary-navigation{display:flex}

/* Top-level menu row. `.menu ul` also covers any nested <ul class="sub-menu">
   that WordPress prints automatically for parent items (e.g. "Categories"),
   so it never falls back to the browser's default bulleted list style. */
.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{display:flex;align-items:center;gap:2px}

/* Every menu item is a positioning anchor for its own dropdown, so the
   .sub-menu below can be placed with position:absolute relative to it. */
.menu li{position:relative}

.menu a{display:inline-block;color:var(--color-text);opacity:.75;text-decoration:none;font-weight:500;font-size:.92rem;line-height:1.3;padding:10px 16px;border-radius:var(--radius-full);transition:background .2s ease,opacity .2s ease}
.menu a:hover{opacity:1;background:var(--color-cream);color:var(--color-ink)}

/* A "#" placeholder item (e.g. a "Categories" parent with no page of its
   own) is rendered by BlogBars_Nav_Walker as a <button> instead of a link,
   so it never navigates and never shows a URL on hover. `all:unset` first
   strips every native <button> default (Chrome/Safari draw their own
   themed background/border for buttons via "appearance", which can show
   through even after `background:none;border:0` unless appearance itself
   is reset) - then we re-declare the exact same values as ".menu a" above,
   so it's visually indistinguishable from a normal menu link. */
.menu .menu-trigger{
  all:unset;
  box-sizing:border-box;
  display:inline-block;
  color:var(--color-text);
  opacity:.75;
  font-family:inherit;
  font-weight:500;
  font-size:.92rem;
  line-height:1.3; /* matches .menu a exactly, so the button and links render at the same height */
  padding:10px 16px;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:background .2s ease,opacity .2s ease;
}
.menu .menu-trigger:hover,.menu .menu-trigger:focus{opacity:1;background:var(--color-cream);color:var(--color-ink)}
/* all:unset also removes the button's free native focus ring, so restore
   a visible one for keyboard users (the <a> links keep the browser's
   normal default outline, untouched). */
.menu .menu-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* Small caret after any item that has children, purely decorative. */
.menu .menu-item-has-children > a::after,
.menu .menu-item-has-children > .menu-trigger::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6}

/* Current-page indicators. Deliberately subtle (just a color/weight shift,
   no background) so a parent like "Categories" being current-menu-ancestor
   (e.g. while viewing a category archive) never looks like a filled button
   - it should read the same as any other link, just slightly emphasized. */
.menu .current-menu-item > a,
.menu .current-menu-item > .menu-trigger{color:var(--color-primary);opacity:1}
.menu .current-menu-parent > a,
.menu .current-menu-parent > .menu-trigger,
.menu .current-menu-ancestor > a,
.menu .current-menu-ancestor > .menu-trigger{color:var(--color-ink);opacity:1;font-weight:600}

/* Dropdown panel - hidden by default. We use opacity/visibility (not
   display:none) so it can fade in/out smoothly and still work with
   :focus-within for keyboard users tabbing onto a link inside it. */
.menu .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  margin-top:8px;
  padding:8px;
  background:var(--color-card);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  z-index:70;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Hover bridge: the 8px margin-top above is genuine empty space (margin
   sits outside any element's box), and dropdown visibility is driven by
   :hover on the parent <li> (see .menu-item-has-children:hover below) -
   so a cursor moving straight/diagonally down from "Categories" through
   that gap left the <li>'s hoverable area entirely for a moment, which
   closed the dropdown before the cursor ever reached a category link.
   This pseudo-element is a descendant of .sub-menu (so hovering it still
   counts as hovering the parent <li>) and exactly covers that gap,
   without changing the dropdown's actual visual position/spacing at all.
   Scoped to the first-level dropdown only (a nested .sub-menu .sub-menu
   opens to the right with margin-top:0 - no gap, nothing to bridge).
   Inherits the same opacity/visibility/pointer-events as .sub-menu
   itself, so it's only ever hoverable while the dropdown is already open. */
.menu > li > .sub-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:8px;
}
/* A second-level sub-menu (rare, but WP allows it) opens to the right
   instead of stacking directly under its parent submenu. */
.menu .sub-menu .sub-menu{top:0;left:100%;margin-top:0}

/* Open the dropdown only while the parent item is hovered or focused -
   never on page load, and never just because the header is sticky/scrolled. */
.menu .menu-item-has-children:hover > .sub-menu,
.menu .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.menu .sub-menu li{width:100%}
.menu .sub-menu a{display:block;width:100%;padding:9px 14px;border-radius:var(--radius-sm);font-size:.86rem;white-space:nowrap;opacity:1}
.menu .sub-menu a:hover{background:var(--color-cream);color:var(--color-primary)}

.header-actions{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto}

/* Padding/line-height tuned so the whole pill lands close to the same
   rendered height as the ".menu a" links beside it (both sit in the same
   vertically-centered header row), instead of the search box looking
   taller or shorter than the nav next to it. */
.search-form{display:flex;align-items:center;gap:6px;border:1px solid var(--color-hairline);background:var(--color-card);border-radius:var(--radius-full);padding:5px 5px 5px 16px;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease}
.search-form:focus-within{border-color:rgba(79,70,229,.5);box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.search-form .search-field{border:0;background:transparent;font-family:var(--font-sans);font-size:.88rem;line-height:1.3;padding:6px 0;outline:none;width:140px}
.search-form .search-submit{background:var(--color-ink);color:#fff;border:0;border-radius:var(--radius-full);padding:7px 16px;font-size:.78rem;line-height:1.3;font-weight:600;cursor:pointer;transition:background .2s ease}
.search-form .search-submit:hover{background:var(--color-primary)}

/* Mobile menu */
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-full);font-size:1.1rem;cursor:pointer}
@media (max-width:800px){
  .header-inner{gap:10px;padding:14px 0}
  .menu{flex-direction:column;align-items:stretch;background:var(--color-bg);position:fixed;top:0;right:0;height:100%;width:280px;max-width:85vw;overflow-y:auto;transform:translateX(100%);padding:80px var(--spacing-lg) var(--spacing-lg);box-shadow:var(--shadow-lift);transition:transform .3s ease;z-index:60;gap:4px}
  .menu a,.menu .menu-trigger{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:var(--radius)}
  .menu-toggle{display:inline-flex}
  body.menu-open .menu{transform:translateX(0)}
  .search-form .search-field{width:90px}

  /* On mobile there's no hover, so submenus can't be a hover-triggered
     overlay. Instead, always show them inline, indented under their
     parent item, inside the slide-in panel (which already scrolls). */
  .menu li{position:static}
  .menu .menu-item-has-children > a::after,
  .menu .menu-item-has-children > .menu-trigger::after{transform:translateY(-1px) rotate(135deg)}
  .menu .sub-menu{
    position:static;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    min-width:0;
    margin:2px 0 6px;
    padding-left:var(--spacing-md);
    background:transparent;
    border:0;
    box-shadow:none;
  }
  /* The desktop hover-gap bridge (see .menu > li > .sub-menu::before
     above) is meaningless here - mobile submenus are always expanded
     inline, not hover-triggered - and .sub-menu switching to position:
     static would otherwise send that absolutely-positioned pseudo-element
     looking for a different positioned ancestor (e.g. the sticky header)
     instead of just disappearing, which could leave a stray tappable
     strip near the top of the header. content:none removes it completely. */
  .menu > li > .sub-menu::before{content:none}
  .menu .sub-menu a{font-size:.86rem;opacity:.8}
}

/* Phones (covers the ~360-430px range the logo + hamburger + search row is
   tightest at) - trimmed enough that the row never wraps to a second line,
   while keeping a touch more breathing room than a bare-minimum squeeze. */
@media (max-width:480px){
  .header-inner{padding:14px 0;gap:10px}
  .site-branding h1,.site-branding h2{font-size:1.3rem}
  .site-description{display:none}
  .search-form{padding:4px 4px 4px 10px}
  .search-form .search-field{width:60px}
  .search-form .search-submit{padding:6px 10px;font-size:.7rem}
  .menu-toggle{width:38px;height:38px;font-size:1rem}
  .ticker-container{gap:var(--spacing-sm);padding:7px 0}
  .ticker-label{padding:3px 9px;font-size:.65rem}
}

/* Trending ticker - a compact one-line marquee.
   .site-ticker      dark bar, clips anything wider than the viewport
   .ticker-container flex row: fixed label + flexible scrolling viewport
   .ticker-viewport   the clipping window (overflow:hidden)
   .ticker-track      the element that actually animates left
   .ticker-group      one full copy of the dynamic ticker links (there are
                      two identical copies in the markup - see header.php -
                      so the loop can reset invisibly at the halfway point)
*/
.site-ticker{background:var(--color-ink);color:#fff;overflow:hidden}
.ticker-container{display:flex;align-items:center;gap:var(--spacing-md);padding:8px 0}
.ticker-label{flex-shrink:0;font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.14em;color:var(--color-primary-foreground);background:var(--color-primary);padding:4px 10px;border-radius:var(--radius-full);line-height:1.2}

.ticker-viewport{flex:1;min-width:0;overflow:hidden}

/* Both .ticker-group children sit side by side (no wrapping) inside this
   flex row, so its total width is exactly 2x one group's width. Animating
   it from translateX(0) to translateX(-50%) shifts it left by exactly one
   group's width, so the moment it "loops" back to 0%, the second (identical)
   group is already sitting exactly where the first one started - seamless. */
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 30s linear infinite}
.ticker-viewport:hover .ticker-track{animation-play-state:paused}

.ticker-group{display:flex;align-items:center;flex-shrink:0;gap:var(--spacing-xl);white-space:nowrap;padding-right:var(--spacing-xl)}
.ticker-link{display:inline-flex;color:rgba(255,255,255,.85);text-decoration:none;font-size:.85rem;line-height:1.3;transition:color .2s ease}
.ticker-link:hover{color:#fff}

@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Users who've asked their OS/browser to reduce motion get a static,
   horizontally-scrollable row instead of a moving marquee - and the
   aria-hidden duplicate copy (only needed for the animation loop) is
   hidden so titles don't appear twice. */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto}
  .ticker-group[aria-hidden="true"]{display:none}
  .ticker-viewport{overflow-x:auto;scrollbar-width:none}
  .ticker-viewport::-webkit-scrollbar{display:none}
}

/* ==========================================================================
   Section headings / eyebrows
   ========================================================================== */
.section-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--color-primary);margin-bottom:6px}
.section-label::before{content:"";display:inline-block;width:20px;height:2px;background:var(--color-primary)}
.section-heading{font-size:1.9rem;margin:0 0 var(--spacing-md) 0;font-weight:800}
@media (min-width:768px){ .section-heading{font-size:2.4rem} }
.section-description{color:var(--color-muted);max-width:640px;margin-bottom:var(--spacing-md);font-size:1.02rem}

/* Heading row: label + heading on the left, an optional right-side
   "See all / All articles" action aligned to the same baseline area.
   Used by Browse by Category, Latest Articles, and Editor's Picks. */
.section-heading-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}
.section-heading-row .section-heading{margin-bottom:0}

.section-action{flex-shrink:0;color:var(--color-primary);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;transition:color .2s ease}
a.section-action:hover{color:var(--color-primary-dark);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* Non-link variant (Editor's Picks note) - same look, no hover/underline
   since it isn't interactive. */
.section-action--text{color:var(--color-muted);font-weight:500;cursor:default}

@media (max-width:640px){
  .section-heading-row{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Hero sits right under the ticker, which already provides visual
   separation, so it gets a smaller gap than the rest of the sections.
   Polish pass: set as its own literal value (not var(--spacing-xl))
   because that token is shared with single/archive templates - a 32px
   fixed value here keeps this homepage-only tightening from leaking
   into unrelated pages. Was 40px (~20% reduction). */
#hero{margin-top:32px}
#browse-categories,#latest-articles,#editors-picks,#newsletter-cta{margin-top:var(--spacing-section)}
@media (max-width:800px){
  /* Also a literal value rather than var(--spacing-2xl) for the same
     reason as #hero above - that token is reused across single/archive
     spacing further down this file. Was 64px (~19% reduction). */
  #browse-categories,#latest-articles,#editors-picks,#newsletter-cta{margin-top:52px}
  #hero{margin-top:var(--spacing-lg)}
}

/* ==========================================================================
   Featured image helpers
   ========================================================================== */

/* Every article/post image lives inside one of these wrapper classes
   (.post-thumb / .hero-thumb / .hero-secondary-thumb - reused by the
   hero, Latest Articles, Editor's Picks, and any related-posts list that
   shares .post-card markup). Images no longer zoom on hover at all (it
   consistently vibrated regardless of GPU-layer tuning) - the wrapper now
   only ever provides a fade-in tint overlay via ::after, never a scaled
   child, so there is nothing here for the browser to re-rasterize on hover. */
.post-thumb,.hero-thumb,.hero-secondary-thumb{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--color-cream);
  aspect-ratio:16/10;
}
/* Soft, on-brand fallback for posts with no featured image - a category-
   tinted gradient (via --cat-color, set by the category-badge--{slug} class
   blogbars_get_featured_image() already adds to this element) behind a
   solid-color circular badge holding that category's own icon in white -
   the same "colored badge, white icon" treatment as the homepage's
   category cards, so the mark reads clearly at a glance instead of fading
   into the background, while the gradient keeps the block from feeling flat. */
.featured-image-placeholder{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  aspect-ratio:16/10;
  background:linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 18%, var(--color-cream)) 0%, color-mix(in srgb, var(--cat-color) 8%, var(--color-hairline)) 100%);
}
.featured-image-placeholder-icon{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:60px;height:60px;
  border-radius:50%;
  background:var(--cat-color);
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--cat-color) 60%, transparent), 0 0 0 6px color-mix(in srgb, var(--cat-color) 10%, transparent);
}
.featured-image-placeholder-icon .category-icon-svg{
  width:26px;height:26px;
  color:#fff;
}

/* The image itself: fixed size, fixed position, no transform, no
   transition - completely inert. It cannot vibrate because nothing about
   it ever animates. */
.featured-image{
  position:absolute;inset:0;
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  transform:none;
  transition:none;
  backface-visibility:hidden;
}

/* Non-zoom hover effect: a very subtle tinted gradient fades in over the
   image instead of the image itself moving or scaling. Opacity is the
   only thing that ever transitions here. */
.post-thumb::after,.hero-thumb::after,.hero-secondary-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,20,27,0) 0%, rgba(79,70,229,.14) 100%);
  opacity:0;
  transition:opacity .26s ease;
  pointer-events:none;
}
.hero-featured-post:hover .hero-thumb::after,
.hero-secondary-post:hover .hero-secondary-thumb::after,
.post-card:hover .post-thumb::after,
.editors-featured-post:hover .hero-thumb::after{
  opacity:1;
}

@media (prefers-reduced-motion:reduce){
  .post-thumb::after,.hero-thumb::after,.hero-secondary-thumb::after{transition:none}
}

.entry-category-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--cat-color);color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}
.entry-category{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cat-color);margin-bottom:6px}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Intro: eyebrow label + big heading on the left, short description on the
   right, matching the reference. Both are dynamic (ACF fields with safe
   fallback text set in front-page.php) - nothing here is post/category data. */
.hero-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}
.hero-intro-main{flex:1 1 480px;min-width:0}
.hero-heading{font-size:2.2rem;margin:0;font-weight:800;line-height:1.1;letter-spacing:-0.02em}
@media (min-width:768px){ .hero-heading{font-size:3.2rem} }
.hero-heading .heading-accent{color:var(--color-primary);font-style:italic}
.hero-intro-description{flex:0 1 320px;color:var(--color-muted);font-size:.95rem;line-height:1.6;margin:0}

/* align-items:stretch (was "start") is the actual fix for the height
   mismatch: it makes both grid columns fill the same row height, so the
   right column's outer wrapper stretches to match the left card instead
   of just sitting at its own shorter natural height. */
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-lg);align-items:stretch}

/* Left featured card now gets the same card treatment (border, radius,
   shadow) as the right-side secondary cards - previously it was a bare
   image+text with no border, which looked inconsistent next to them.
   overflow:hidden means the image's top corners appear rounded just from
   being clipped by the card's own border-radius, without needing the
   image itself to carry a separate radius. */
.hero-featured-post{
  display:flex;flex-direction:column;
  background:var(--color-card);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.hero-featured-post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.hero-thumb{aspect-ratio:16/9}
.hero-featured-post .hero-thumb{border-radius:0}
.hero-featured-post .hero-content{margin-top:0;padding:var(--spacing-lg)}
.hero-featured-post h3{font-size:1.9rem;margin:0 0 10px;font-weight:800;line-height:1.15}
@media (min-width:768px){ .hero-featured-post h3{font-size:2.4rem} }
.hero-excerpt{color:var(--color-muted);font-size:1rem;line-height:1.6;margin:0 0 var(--spacing-sm) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Main hero title only: a "running line" underline hover - a colored line
   animates in under the text instead of the text just changing color.
   box-decoration-break:clone makes the line run under each wrapped line
   individually if the title spans 2 lines. */
.hero-featured-post h3 a{
  display:inline;
  color:var(--color-ink);
  text-decoration:none;
  background-image:linear-gradient(var(--color-primary),var(--color-primary));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  padding-bottom:2px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .35s ease;
}
.hero-featured-post h3 a:hover{
  background-size:100% 2px;
}

/* Secondary (right-side) hero titles: deliberately NOT the running-underline
   effect - just a normal colored hyperlink that darkens and underlines on
   hover, per explicit design direction (only the main hero title gets the
   animated treatment). Clamp lives on the <a> (not the <h4>) for the same
   ellipsis-color-matching reason as .entry-title above. */
.hero-secondary-post h4 a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--color-primary);
  text-decoration:none;
  text-decoration-color:currentColor;
  transition:color .2s ease;
}
.hero-secondary-post h4 a:hover{
  color:var(--color-primary-dark);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}

.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--color-muted);font-size:.85rem;margin-top:8px}
.author-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(79,70,229,.12);color:var(--color-primary);font-size:.62rem;font-weight:700}

/* This column is a stretched grid item (see .hero-grid above), so it now
   has a definite height equal to the left card's. The two secondary cards
   are flex:1 (see .hero-secondary-post below) so THEY grow to fill the
   available height equally, while .hero-trending-box stays at its own
   compact, natural content height - this is what keeps the dark box from
   ballooning with empty space at the bottom. */
.hero-secondary-posts{display:flex;flex-direction:column;gap:var(--spacing-md)}

/* Secondary posts are compact horizontal cards - a square thumb on the
   left, content beside it - instead of a full-width stacked image, which
   is what was making the right column run far taller than the left card.
   flex:1 lets both cards grow equally (always the same height as each
   other) to help fill the stretched column; align-items:center keeps the
   fixed-square thumb centered rather than distorting its aspect ratio. */
.hero-secondary-post{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  flex:1;
  background:var(--color-card);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  padding:10px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.hero-secondary-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}
.hero-secondary-thumb{flex:0 0 96px;width:96px;aspect-ratio:1/1;border-radius:var(--radius-sm)}
.hero-secondary-content{flex:1;min-width:0;padding:2px 6px 2px 0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.hero-secondary-post h4{font-size:.98rem;margin:0;font-weight:700;line-height:1.3}
.hero-secondary-post .entry-meta{margin-top:0;font-size:.75rem;gap:6px}

/* Small dot + label category style for the compact cards (an image-overlay
   badge wouldn't fit on an 84px thumb) - reuses .entry-category's existing
   color/weight/size, just adds a colored dot in front of it. */
.entry-category-dot{margin-bottom:0}
.entry-category-dot::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:middle}

/* Dark "Trending Now" box, sitting below the two secondary cards in the
   same right-hand column. Items come from the hero_trending_posts ACF
   relationship field (falls back to latest posts) - see front-page.php.
   Deliberately NOT flex:1 and NOT stretched - it stays at its own compact,
   natural content height (flex-shrink:0 so the growing cards above can't
   squeeze it either); the two secondary cards above are what grow to fill
   the remaining column height instead (see .hero-secondary-post above). */
.hero-trending-box{flex-shrink:0;display:flex;flex-direction:column;background:var(--color-ink);color:#fff;border-radius:var(--radius-xl);padding:var(--spacing-md)}
.hero-trending-label{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.85);margin-bottom:10px}
.hero-trending-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.65rem;flex-shrink:0}
.hero-trending-list{list-style:none;margin:0;padding:0}
.hero-trending-item{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hero-trending-item:last-child{border-bottom:0;padding-bottom:0}
.hero-trending-index{flex-shrink:0;font-family:var(--font-display);font-weight:900;font-size:.85rem;color:var(--color-primary)}
.hero-trending-item a{color:#fff;text-decoration:none;font-size:.84rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s ease}
.hero-trending-item a:hover{color:var(--color-primary)}
.hero-trending-viewall{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);text-decoration:none;font-size:.78rem;font-weight:600;transition:color .2s ease}
.hero-trending-viewall:hover{color:#fff}

@media (max-width:640px){
  .hero-intro{align-items:flex-start}
  .hero-intro-description{flex-basis:100%}
  .hero-featured-post .hero-content{padding:var(--spacing-md)}
  .hero-secondary-thumb{flex:0 0 76px;width:76px}
  .hero-trending-box{padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm)}
}

/* ==========================================================================
   Category grid
   ========================================================================== */

/* Explicit column counts per breakpoint (rather than auto-fit) so the grid
   never grows past 4 columns on very wide screens: 1 col mobile, 2 col
   tablet, 4 col desktop. */
.category-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin-top:var(--spacing-md)}
@media (min-width:600px){ .category-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .category-grid{grid-template-columns:repeat(4,1fr)} }

.category-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-card);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-lg);
  padding:var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  text-decoration:none;color:var(--color-text);
  box-shadow:var(--shadow-card);
  min-height:196px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

/* Top accent line: invisible at rest (width:0), reveals left-to-right on
   hover by animating its width up to 100%. */
.category-card::before{
  content:"";position:absolute;top:0;left:0;
  width:0;height:3px;
  background:var(--cat-color);
  transition:width .4s ease;
}
.category-card:hover::before{width:100%}

/* Inner colored glow: a soft radial gradient in the category's own color,
   biased toward the upper-right corner, invisible at rest and fading in on
   hover. z-index:-1 keeps it behind the card's real (static-positioned)
   content while still sitting above the white card background. */
.category-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at top right, var(--cat-color) 0%, transparent 65%);
  opacity:0;
  transition:opacity .3s ease;
}
.category-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--shadow-lift), inset 0 0 0 1px color-mix(in srgb, var(--cat-color) 25%, transparent);
}
.category-card:hover::after{opacity:.12}

/* Small icon/accent block - a colored square holding a lightweight inline
   SVG icon (see blogbars_render_category_icon() in
   inc/template-functions.php), no icon library. color:#fff here is what
   the SVG's stroke="currentColor" actually resolves to.
   Deliberately NO transform/scale anywhere in this block, at rest or on
   hover - a sub-pixel scale on a 20px icon was causing visible shimmer/
   vibration, even with GPU-layer hints. Only box-shadow and background
   ever transition, which never touches icon size or position. */
.category-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border-radius:var(--radius-sm);
  background:var(--cat-color);
  color:#fff;
  margin-bottom:var(--spacing-sm);
  transform:none;
  transition:box-shadow .24s ease-out,background-color .24s ease-out;
}

/* The SVG is always fixed-size and never transitions/transforms at all -
   it stays perfectly stable and crisp regardless of what the surrounding
   .category-icon box does. */
.category-icon-svg{
  width:20px;
  height:20px;
  display:block;
  flex-shrink:0;
  transform:none;
  transition:none;
  shape-rendering:geometricPrecision;
}
.category-icon-svg *{
  transform:none;
  vector-effect:non-scaling-stroke;
}

.category-card:hover .category-icon{
  transform:none;
  background:color-mix(in srgb, var(--cat-color) 88%, black);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cat-color) 30%, transparent),
    0 8px 18px -6px color-mix(in srgb, var(--cat-color) 45%, transparent);
}

.category-name{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin:0 0 4px 0;color:var(--color-ink)}
.category-description{display:block;flex:1;font-size:.85rem;color:var(--color-muted);line-height:1.5;margin:0 0 var(--spacing-md) 0}

/* Divider + count/arrow row, pinned to the bottom of the card regardless
   of how long the description above happens to be (min-height keeps card
   height consistent across a row; margin-top:auto keeps this footer
   flush at the bottom either way). */
.category-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);margin-top:auto;padding-top:var(--spacing-sm);border-top:1px solid var(--color-hairline)}
.category-count{font-size:.78rem;color:var(--color-muted)}

/* Arrow: hidden at rest, fades and slides in from the right on hover - but
   only on devices with real hover (a mouse/trackpad). Touch devices can't
   trigger :hover, so gating this the same way there would leave the arrow
   permanently missing and the card looking unfinished; @media(hover:hover)
   keeps the reveal-on-hover flourish for desktop while touch devices just
   get the arrow shown plainly, all the time. */
.category-arrow{
  display:inline-flex;color:var(--cat-color);font-weight:700;
}
@media (hover:hover) and (pointer:fine){
  .category-arrow{opacity:0;transform:translateX(8px);transition:opacity .25s ease,transform .25s ease}
  .category-card:hover .category-arrow{opacity:1;transform:translateX(0)}
}

/* ==========================================================================
   Post cards (Latest Articles / index / archive / search)
   ========================================================================== */
.posts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}
.post-card{display:flex;flex-direction:column;background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.post-card .post-thumb{border-radius:0;aspect-ratio:16/10}
.entry-body{display:flex;flex-direction:column;flex:1;gap:12px;padding:var(--spacing-lg)}
/* The line-clamp (and its browser-generated "..." ellipsis) lives on the
   <a> itself, not the wrapping <h3> - a clamp on a plain block whose
   nested link is a different color makes the browser render the ellipsis
   in the BLOCK's color, not the link's, so a truncated title shows a
   grey/black "..." after blue link text. Putting the clamp on the same
   element as the color fixes that: the ellipsis always matches whatever
   color the title is currently in (ink at rest, indigo on hover). */
.entry-title{font-size:1.2rem;margin:0;font-weight:700;line-height:1.25}
.entry-title a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--color-ink);
  text-decoration:none;
  text-decoration-color:currentColor;
}
.entry-title a:hover{color:var(--color-primary)}
.entry-summary{color:var(--color-muted);font-size:.92rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Pins the meta row to the bottom of every card, so cards in the same row
   line up their date/read-time even when titles or excerpts differ in length. */
.entry-body .entry-meta{margin-top:auto}

/* Editor's picks compact cards */
.posts-list-compact{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.post-card-compact .post-thumb{aspect-ratio:4/3}
.post-card-compact .entry-body{padding:var(--spacing-md)}
.post-card-compact .entry-title{font-size:1.05rem}

.editors-featured-post{display:block;margin-bottom:var(--spacing-lg);transition:transform .3s ease}
.editors-featured-post:hover{transform:translateY(-4px)}
.editors-featured-post .hero-thumb{aspect-ratio:21/9}
.editors-featured-post h3{margin:var(--spacing-md) 0 0;font-size:1.7rem;font-weight:800}
@media (min-width:768px){ .editors-featured-post h3{font-size:2.1rem} }
.editors-featured-post h3 a{color:var(--color-ink);text-decoration:none}
.editors-featured-post h3 a:hover{color:var(--color-primary)}

/* ==========================================================================
   Newsletter CTA
   ========================================================================== */
.section-newsletter{position:relative;overflow:hidden;background:var(--color-ink);color:#fff;padding:72px var(--spacing-lg);border-radius:var(--radius-2xl);text-align:center;display:flex;flex-direction:column;align-items:center}
.section-newsletter::before{content:"";position:absolute;top:-40%;left:50%;width:60%;aspect-ratio:1/1;transform:translateX(-50%);background:radial-gradient(circle,rgba(79,70,229,.35),transparent 70%);pointer-events:none}
.section-newsletter .section-label{color:#fff}
.section-newsletter .section-label::before{background:var(--color-primary)}
.section-newsletter .section-heading{color:#fff;max-width:640px}
.section-newsletter .section-description{color:rgba(255,255,255,.7);margin-left:auto;margin-right:auto;text-align:center}
.section-newsletter .newsletter-form{position:relative;z-index:1;justify-content:center;width:100%;max-width:440px;margin:var(--spacing-md) 0 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.section-newsletter .newsletter-form input{color:#fff}
.section-newsletter .newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
@media (max-width:800px){
  .section-newsletter{padding:48px var(--spacing-md)}
}

.newsletter-form{display:flex;gap:8px;border:1px solid var(--color-hairline);background:var(--color-card);border-radius:var(--radius-full);padding:7px;box-shadow:var(--shadow-card);transition:border-color .2s ease,box-shadow .2s ease}
.newsletter-form:focus-within{border-color:rgba(79,70,229,.5);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.newsletter-form input{flex:1;min-width:0;padding:10px 14px;border:0;background:transparent;font-family:var(--font-sans);font-size:.9rem;outline:none}
.btn{background:var(--color-ink);color:#fff;padding:11px 22px;border-radius:var(--radius-full);border:0;font-weight:600;font-size:.85rem;cursor:pointer;transition:background .2s ease}
.btn:hover{background:var(--color-primary)}

/* Below ~480px, stack the email field and button instead of squeezing
   them into one row - applies to the footer, homepage CTA, and sidebar
   newsletter forms alike since they all share this base class. */
@media (max-width:480px){
  .newsletter-form{flex-direction:column;border-radius:var(--radius-lg);padding:8px}
  .newsletter-form input{width:100%;padding:10px 12px}
  .newsletter-form .btn{width:100%}
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Polish pass: padding trimmed from var(--spacing-2xl)/var(--spacing-lg)
   (64px/24px) to var(--spacing-xl)/var(--spacing-md) (40px/16px, ~37%/~33%
   less) - both already-existing tokens, just a size down. */
.site-footer{background:linear-gradient(to bottom,var(--color-cream),rgba(247,245,240,.5));border-top:1px solid var(--color-hairline);padding:var(--spacing-xl) 0 var(--spacing-md);margin-top:var(--spacing-section)}

/* A flat grid: brand + Explore (the single Footer Menu column) + Follow
   (only when social links are filled in), as real sibling columns.
   - Brand: minmax(240px,1.3fr) - always present, gets the widest share.
   - Explore: minmax(280px,2fr) - always present when a Footer Menu is
     assigned; a bigger fr share than Brand because it now carries every
     footer nav link (see .footer-menu below for how it fans a long menu
     out into extra CSS columns instead of growing taller).
   - Follow: bare `auto` (no minmax floor) - when its column doesn't
     exist in the markup at all (no social links set), an explicit `auto`
     track with nothing to size against collapses to 0 width on its own,
     so Brand/Explore's fr shares automatically expand to fill 100% of
     the row instead of leaving a reserved-but-empty third track.
   column-gap/row-gap are split (rather than one shared "gap") because
   .site-info below spans the full row and already carries its own
   margin-top/padding-top for separation from the columns above it -
   using the same value for row-gap on top of that would double up, which
   was the original source of the oversized empty band before the
   copyright line. row-gap is a much smaller assist value. */
.footer-inner{display:grid;grid-template-columns:minmax(240px,1.3fr) minmax(280px,2fr) auto;column-gap:var(--spacing-xl);row-gap:var(--spacing-md);align-items:start}

/* One consistent heading style for every footer column - Explore, Follow,
   and Newsletter - so they read as a matching set instead of the
   Newsletter heading looking like a different component. */
.footer-col h3,.footer-newsletter h3{font-size:.72rem;font-weight:700;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink);margin:0 0 var(--spacing-sm) 0}

.footer-brand .site-title h2{font-size:1.5rem}
.footer-description{color:var(--color-muted);margin-top:var(--spacing-sm);max-width:340px;font-size:.92rem;line-height:1.6}

.footer-newsletter{margin-top:var(--spacing-xl);max-width:360px}

.footer-social-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding-left:0}
.social-link{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border:1px solid var(--color-hairline);background:var(--color-card);border-radius:var(--radius-full);color:var(--color-text);text-decoration:none;font-size:.78rem;font-weight:600;box-shadow:var(--shadow-sm);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.social-link:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-2px)}

/* Footer Menu: fills vertically first, then continues into another CSS
   column, instead of the footer growing taller every time a link is
   added in Appearance > Menus > Footer Menu. column-width (not
   column-count) lets the browser decide how many ~170px columns fit the
   available track width on its own - naturally fewer on a narrower
   desktop/tablet track, more on a wide one - and the fixed height caps
   how tall a single column is allowed to get before overflowing into the
   next one. If an unusually long menu can't fit even after using every
   column the track's width allows, the last column grows taller rather
   than clipping - height is a target, not a hard cap, so no menu item is
   ever hidden. Disabled entirely on mobile (see the ≤600px rule further
   down) in favor of one normal single-column list. */
.footer-menu{list-style:none;padding-left:0;margin:0;columns:170px;column-gap:var(--spacing-lg);height:230px}
.footer-menu li{break-inside:avoid;margin-bottom:2px}
.footer-menu a{display:inline-block;color:var(--color-muted);text-decoration:none;font-size:.9rem;line-height:1.6;padding:4px 0;transition:color .2s ease,transform .2s ease}
.footer-menu a:hover{color:var(--color-primary);transform:translateX(3px)}

/* Explicitly span the full grid width so the copyright bar never gets
   squeezed under just the first column. margin-top trimmed from
   --spacing-xl (40px) to --spacing-lg (24px) so it reads as the close of
   the footer rather than a second, separately-floating block. */
.site-info{grid-column:1/-1;border-top:1px solid var(--color-hairline);margin-top:var(--spacing-lg);padding-top:var(--spacing-md)}
.site-info p{color:var(--color-muted);font-size:.8rem}

/* ==========================================================================
   Two-column content layout (archive/search)
   ========================================================================== */
.content-layout{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-xl);align-items:start;margin-top:var(--spacing-lg)}
.primary-column{min-width:0;container-type:inline-size;container-name:archive-main}
.search-result-count{color:var(--color-muted);margin-top:var(--spacing-xs)}

/* ==========================================================================
   Archive / category page header
   ========================================================================== */
.archive-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-hairline)}

/* Reuses the same category-badge--{slug} color system (and ACF accent-color
   override) as the homepage category cards and the single-post category
   pill - falls back to the default indigo on :root for tag/author/date/
   post-type archives, which don't have a category color of their own. */
.archive-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--cat-color);
  margin-bottom:var(--spacing-md);
}
.archive-kicker::before{content:"";width:18px;height:2px;background:var(--cat-color);flex-shrink:0}

.archive-title-row{display:flex;align-items:center;gap:var(--spacing-md)}
.archive-title{font-size:2.1rem;line-height:1.12;font-weight:800;letter-spacing:-0.02em;margin:0;text-wrap:balance}
@media (min-width:768px){ .archive-title{font-size:2.6rem} }

.archive-description{color:var(--color-muted);font-size:1.02rem;line-height:1.65;max-width:70ch;margin-top:var(--spacing-md)}
.archive-description p{margin:0 0 8px}
.archive-description p:last-child{margin-bottom:0}

.archive-count{color:var(--color-muted);font-size:.88rem;font-weight:600;margin-top:var(--spacing-sm)}

/* ==========================================================================
   Archive post grid
   ========================================================================== */
/* 1 column narrow, 2 once the column (not the viewport - a container query
   against .primary-column, which already has the sidebar's width deducted)
   is wide enough. Capped at 2 (not 3) here on purpose: with the sidebar
   present, .primary-column never has room for 3 genuinely comfortable
   columns without cramming them - unlike the sidebar-free related-posts
   grid on the single post page, which does go to 3. A lone 3rd card in an
   odd-numbered result set (e.g. 3 posts) simply sits in column 1 on its
   own row rather than stretching full-width, since the grid's own columns
   stay fixed at 1fr 1fr regardless of item count. */
.content-layout .posts-list{grid-template-columns:1fr}
@container archive-main (min-width:520px){
  .content-layout .posts-list{grid-template-columns:repeat(2,1fr)}
}

.entry-meta a{color:inherit;text-decoration:none}
.entry-meta a:hover{color:var(--color-primary)}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{margin-top:var(--spacing-2xl)}
.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;
  border-radius:var(--radius-full);
  background:var(--color-card);
  border:1px solid var(--color-hairline);
  color:var(--color-text);
  text-decoration:none;
  font-size:.9rem;font-weight:600;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pagination a.page-numbers:hover{background:var(--color-cream);color:var(--color-primary);border-color:var(--color-primary)}
.pagination .page-numbers.current{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pagination .page-numbers.dots{background:none;border:0;color:var(--color-muted);cursor:default}
.pagination .prev,.pagination .next{font-weight:700;padding:0 18px}

@media (max-width:480px){
  .pagination .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:.85rem}
  .pagination .prev,.pagination .next{padding:0 12px}
}

/* ==========================================================================
   Empty archive state
   ========================================================================== */
.archive-empty{
  margin-top:var(--spacing-lg);
  padding:var(--spacing-2xl) var(--spacing-lg);
  text-align:center;
  background:var(--color-cream);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-xl);
}
.archive-empty p{color:var(--color-muted);font-size:1.02rem;margin-bottom:var(--spacing-lg)}
.archive-empty .search-form{max-width:360px;margin:0 auto var(--spacing-lg)}
.archive-empty .btn{display:inline-flex;text-decoration:none}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg)}
.sidebar .widget{background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--spacing-lg)}
.widget-title{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink);margin:0 0 var(--spacing-md) 0}
.widget-title::before{content:"";width:14px;height:2px;background:var(--color-primary);flex-shrink:0}
.widget-title::after{content:"";flex:1;height:1px;background:var(--color-hairline)}

/* Popular Posts */
.popular-posts-list{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:var(--spacing-md);counter-reset:popular}
.popular-post-item{position:relative;display:flex;align-items:center;gap:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-hairline);counter-increment:popular}
.popular-post-item:last-child{border-bottom:0;padding-bottom:0}
.popular-post-item::before{content:counter(popular,decimal-leading-zero);font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--color-primary);flex-shrink:0;width:32px}
.popular-post-thumb{flex-shrink:0;overflow:hidden;border-radius:var(--radius-sm)}
.popular-post-thumb img{width:58px;height:58px;object-fit:cover;display:block;transform:none;transition:none}
.popular-post-content{min-width:0}
.popular-post-content h4{font-size:.9rem;margin:0 0 4px;font-weight:600;line-height:1.35}
.popular-post-content h4 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-ink);text-decoration:none;transition:color .2s ease}
.popular-post-item:hover .popular-post-content h4 a{color:var(--color-primary)}
.popular-post-meta{display:flex;align-items:center;gap:6px;margin:0;font-size:.75rem;color:var(--color-muted)}

/* Categories */
.widget-categories ul,.widget-tags ul{list-style:none;padding-left:0}
.widget-categories li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--color-hairline);font-size:.9rem}
.widget-categories li:last-child{border-bottom:0;padding-bottom:0}
.widget-categories a{color:var(--color-text);text-decoration:none;transition:color .2s ease}
.widget-categories li:hover a{color:var(--cat-color)}
.widget-categories .count{color:var(--color-muted);font-size:.76rem;background:var(--color-cream);padding:2px 9px;border-radius:var(--radius-full)}

/* Tags */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-link{background:var(--color-card);border:1px solid var(--color-hairline);color:var(--color-text);text-decoration:none;font-size:.78rem;font-weight:500;padding:7px 14px;border-radius:var(--radius-full);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.tag-link:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-2px)}

/* Newsletter */
.widget-newsletter{background:linear-gradient(135deg,var(--color-cream),var(--color-card));position:relative;overflow:hidden}
.widget-newsletter .newsletter-form{flex-direction:column;background:transparent;border:0;box-shadow:none;padding:0;gap:10px}
.widget-newsletter .newsletter-form input{border:1px solid var(--color-hairline);border-radius:var(--radius-full);background:var(--color-card);padding:11px 16px}
.widget-newsletter .btn{width:100%;padding:12px 22px}

/* Advertisement */
.widget-advertisement .widget-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-bottom:var(--spacing-sm)}
.widget-advertisement .ad-code{border:1px dashed var(--color-hairline);border-radius:var(--radius);padding:var(--spacing-md);text-align:center;background:var(--color-cream)}
.ad-image{width:100%;height:auto;border-radius:var(--radius);display:block}

/* ==========================================================================
   Single post extras
   ========================================================================== */
.post-badges{display:flex;gap:8px;margin-bottom:var(--spacing-sm)}
.badge{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:5px 12px;border-radius:var(--radius-full)}
.badge-featured{background:var(--color-primary);color:#fff}
.badge-editors-pick{background:var(--color-ink);color:#fff}

/* Breadcrumb - Home / Category / Current title, truncated on one line. */
.breadcrumb{margin:0 0 var(--spacing-lg)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0;margin:0;font-size:.82rem;line-height:1.4;color:var(--color-muted)}
.breadcrumb li{display:flex;align-items:center;gap:7px;min-width:0}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--color-hairline);flex-shrink:0}
.breadcrumb a{color:var(--color-muted);text-decoration:none;transition:color .2s ease}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb-current{color:var(--color-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
@media (max-width:640px){ .breadcrumb-current{max-width:170px} }

/* Article header - category pill, editorial H1, subtitle, meta row. */
.entry-header{margin-bottom:0}

.entry-category-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cat-color);color:#fff;
  text-decoration:none;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  padding:8px 16px;
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--spacing-md);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.entry-category-pill:hover{background:color-mix(in srgb, var(--cat-color) 85%, black);transform:translateY(-1px);box-shadow:var(--shadow-card)}

.article-title{
  font-size:2.1rem;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 var(--spacing-md);
  text-wrap:balance;
}
@media (min-width:768px){ .article-title{font-size:3rem} }
@media (min-width:1100px){ .article-title{font-size:3.5rem;line-height:1.06} }

.entry-subtitle{
  font-family:var(--font-display);
  font-size:1.22rem;
  line-height:1.6;
  color:var(--color-muted);
  font-weight:400;
  max-width:62ch;
  margin:0 0 var(--spacing-lg);
}

.entry-meta-article{
  font-size:.9rem;
  gap:10px;
  margin-top:var(--spacing-md);
  padding-top:var(--spacing-md);
  border-top:1px solid var(--color-hairline);
}
.entry-author{display:inline-flex;align-items:center;gap:9px;color:var(--color-text);text-decoration:none;font-weight:600}
.entry-author .author-avatar{width:26px;height:26px;font-size:.68rem}
.author-name{transition:color .2s ease}
.entry-author:hover .author-name{color:var(--color-primary)}
.meta-dot{color:var(--color-hairline);font-size:.7rem}
.comment-count-link{color:var(--color-muted);text-decoration:none;font-weight:500;transition:color .2s ease}
.comment-count-link:hover{color:var(--color-primary)}

/* Featured image - large, rounded, soft shadow, stable (no zoom). Ratio is
   taller than a typical inline/card image (3:2 rather than 16:9) so it reads
   as a dominant magazine hero rather than a thumbnail, at whatever width
   .single-main resolves to (see the layout wrapper section further down).
   No top margin - it's the first element in .single-main, so its top-side
   spacing comes from .single-layout's own row-gap instead (see below),
   which is what keeps it level with the sidebar's top edge. The bottom
   margin is the gap before the table of contents / article body. */
.entry-thumbnail{margin:0 0 var(--spacing-lg)}
.entry-thumbnail-frame{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--color-hairline);
  box-shadow:var(--shadow-card);
  background:var(--color-cream);
  aspect-ratio:3/2;
  transition:box-shadow .3s ease;
}
.entry-thumbnail:hover .entry-thumbnail-frame{box-shadow:var(--shadow-lift)}
.entry-thumbnail-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;transition:none}
.entry-thumbnail-frame .featured-image-placeholder{position:absolute;inset:0;aspect-ratio:auto}
.entry-thumbnail figcaption{margin-top:10px;font-size:.82rem;color:var(--color-muted);text-align:center}

@media (max-width:640px){
  .entry-thumbnail-frame{aspect-ratio:4/3}
  .entry-thumbnail{margin-bottom:20px}
  .entry-category-pill{padding:7px 14px;font-size:.68rem}
  .entry-meta-article{font-size:.84rem}
}

/* Simple static table of contents, generated from the article's own H2s. */
.entry-toc{background:var(--color-cream);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}
.entry-toc-title{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink);margin-bottom:var(--spacing-sm)}
.entry-toc-title::before{content:"";width:14px;height:2px;background:var(--color-primary);flex-shrink:0}
.entry-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.entry-toc li{counter-increment:toc;font-size:.9rem;display:flex;align-items:baseline}
.entry-toc li::before{content:counter(toc) ".";color:var(--color-primary);font-weight:700;margin-right:6px;flex-shrink:0}
.entry-toc a{display:block;flex:1;min-width:0;padding:6px 8px;margin:0 -8px;border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none;transition:background .2s ease,color .2s ease}
.entry-toc a:hover{background:rgba(79,70,229,.08);color:var(--color-primary)}

/* Article body typography. */
.entry-content{font-size:1.08rem;line-height:1.8;color:var(--color-text)}
.entry-content > *:first-child{margin-top:0}
.entry-content > *:last-child{margin-bottom:0}
.entry-content p{margin:0 0 var(--spacing-lg)}
.entry-content h2{font-size:1.65rem;line-height:1.25;font-weight:800;letter-spacing:-0.01em;margin:var(--spacing-xl) 0 var(--spacing-md);scroll-margin-top:100px}
.entry-content h3{font-size:1.32rem;line-height:1.3;font-weight:700;margin:var(--spacing-lg) 0 var(--spacing-sm);scroll-margin-top:100px}
.entry-content h4{font-size:1.12rem;line-height:1.35;font-weight:700;margin:var(--spacing-lg) 0 var(--spacing-xs)}
.entry-content h2 + h3{margin-top:var(--spacing-sm)}
.entry-content ul,.entry-content ol{margin:0 0 var(--spacing-lg);padding-left:1.4em}
.entry-content li{margin-bottom:12px;line-height:1.75}
.entry-content li:last-child{margin-bottom:0}
.entry-content li > ul,.entry-content li > ol{margin-top:10px;margin-bottom:0}
.entry-content ul li::marker{color:var(--color-primary)}
.entry-content ol li::marker{color:var(--color-primary);font-weight:700}
.entry-content a{color:var(--color-primary);font-weight:500;text-decoration:underline;text-decoration-color:rgba(79,70,229,.35);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s ease,text-decoration-color .2s ease}
.entry-content a:hover{color:var(--color-primary-dark);text-decoration-color:currentColor}
.entry-content strong,.entry-content b{font-weight:700;color:var(--color-ink)}
.entry-content blockquote{
  position:relative;
  margin:var(--spacing-xl) 0;
  padding:var(--spacing-md) var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + 20px);
  border-left:4px solid var(--color-primary);
  background:var(--color-cream);
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);
  font-size:1.18rem;
  line-height:1.6;
  color:var(--color-ink);
  font-style:italic;
}
.entry-content blockquote::before{
  content:"\201C";
  position:absolute;
  top:2px;left:14px;
  font-family:var(--font-display);
  font-size:2.6rem;
  font-style:normal;
  line-height:1;
  color:rgba(79,70,229,.25);
}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content img{border-radius:var(--radius-lg);border:1px solid var(--color-hairline);box-shadow:var(--shadow-sm);display:block;margin:var(--spacing-xl) auto}
.entry-content figure{margin:var(--spacing-xl) 0}
.entry-content figcaption{margin-top:10px;font-size:.85rem;color:var(--color-muted);text-align:center}
.entry-content hr{border:0;border-top:1px solid var(--color-hairline);margin:var(--spacing-xl) 0}
.entry-content table{width:100%;border-collapse:collapse;margin:var(--spacing-xl) 0;font-size:.94rem;display:block;overflow-x:auto}
.entry-content th,.entry-content td{padding:10px 14px;border:1px solid var(--color-hairline);text-align:left}
.entry-content th{background:var(--color-cream);font-weight:700;color:var(--color-ink)}
.entry-content code{background:var(--color-cream);color:var(--color-primary-dark);padding:2px 6px;border-radius:4px;font-size:.88em}
.entry-content pre{background:var(--color-ink);color:#f4f4f7;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius);overflow-x:auto;margin:var(--spacing-xl) 0}
.entry-content pre code{background:none;color:inherit;padding:0}

/* Mobile reading: font-size stays put (already a comfortable, non-tiny
   1.08rem) but line-height opens up a touch further for a narrow column,
   and heading/list spacing gets slightly more (not less) room to breathe -
   narrow columns actually need clearer breaks between blocks, not tighter
   ones, to stay easy to scan. */
@media (max-width:640px){
  .entry-content{line-height:1.85}
  .entry-content h2{margin:var(--spacing-xl) 0 var(--spacing-md)}
  .entry-content h3{margin:var(--spacing-lg) 0 var(--spacing-sm)}
  .entry-content ul,.entry-content ol{margin-bottom:var(--spacing-lg)}
  .entry-content li{margin-bottom:14px}
}

/* FAQ - native <details>/<summary> accordion, answers stay in the HTML
   (crawlable) regardless of open/closed state, no JS required. */
.entry-faq{margin-top:var(--spacing-2xl)}
.entry-faq-heading{font-size:1.5rem;font-weight:800;margin-bottom:var(--spacing-md)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);overflow:hidden}
.faq-question{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;font-weight:700;color:var(--color-ink);font-size:.98rem}
.faq-question::-webkit-details-marker{display:none}
.faq-icon{flex-shrink:0;position:relative;width:18px;height:18px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--color-primary);transform:translate(-50%,-50%)}
.faq-icon::before{width:12px;height:2px}
.faq-icon::after{width:2px;height:12px;transition:transform .2s ease}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-answer{padding:0 var(--spacing-lg) var(--spacing-md);color:var(--color-muted);line-height:1.7}

/* Tags + share row. */
.entry-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-2xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-hairline)}
.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.post-tags-label,.share-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-right:2px}
.share-links{display:flex;align-items:center;gap:10px}
.share-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--color-cream);color:var(--color-text);border:1px solid var(--color-hairline);box-shadow:var(--shadow-sm);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.share-link svg{width:16px;height:16px}
.share-link:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.share-copy.is-copied{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}

@media (max-width:480px){
  .entry-footer{flex-direction:column;align-items:flex-start}
}

/* Author box. */
.author-box{display:flex;align-items:flex-start;gap:var(--spacing-lg);margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--color-cream);border-radius:var(--radius-xl);border:1px solid var(--color-hairline);box-shadow:var(--shadow-sm)}
.author-box-avatar{flex-shrink:0}
.author-avatar-lg{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:rgba(79,70,229,.14);color:var(--color-primary);font-size:1.15rem;font-weight:700;border:3px solid var(--color-card);box-shadow:var(--shadow-sm)}
.author-box-content{min-width:0}
.author-box-label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-bottom:4px}
.author-box-name{font-size:1.3rem;margin:0 0 6px}
.author-box-name a{color:var(--color-ink);text-decoration:none;transition:color .2s ease}
.author-box-name a:hover{color:var(--color-primary)}
.author-box-bio{color:var(--color-muted);font-size:.92rem;line-height:1.65;margin:0 0 var(--spacing-sm)}
.author-box-link{display:inline-flex;color:var(--color-primary);font-weight:600;font-size:.88rem;text-decoration:none;transition:color .2s ease}
.author-box-link:hover{color:var(--color-primary-dark);text-decoration:underline}
@media (max-width:560px){ .author-box{flex-direction:column;align-items:flex-start} }

.related-posts{margin-top:var(--spacing-2xl)}
.related-posts h2{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;margin-bottom:var(--spacing-lg)}
.related-posts h2::before{content:"";width:20px;height:2px;background:var(--color-primary);flex-shrink:0}

/* Related-post cards: 3 across only when the column is actually wide enough
   to fit them comfortably (container query on .single-main, not the
   viewport, since the available width also depends on whether the sidebar
   is present) - 2 across at medium widths, 1 at narrow/mobile. Grid's
   default align-items:stretch already gives every card equal height. Cards
   reuse the same .post-card component as the homepage, scoped-overridden
   here only for the slightly narrower column this section renders in. */
.related-posts .posts-list{grid-template-columns:1fr}
.related-posts .entry-title{font-size:1.08rem}
@container single-main (min-width:560px){
  .related-posts .posts-list{grid-template-columns:repeat(2,1fr)}
}
/* Only stretch to 3 columns when a 3rd card actually exists - with just 2
   related posts, a forced 3-column track would leave an empty, lopsided gap
   on the right instead of two evenly balanced cards. */
@container single-main (min-width:820px){
  .related-posts .posts-list:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   Single post: layout wrapper
   ==========================================================================
   .single-layout is a two-column, two-row grid:
     row 1, col 1: .single-hero  (breadcrumb, category pill, H1, meta row)
     row 2, col 1: .single-main  (featured image, TOC, article body,
                                   tags/share, author box, related posts,
                                   comments)
     row 2, col 2: the sidebar
   Row 1's height is whatever .single-hero's own content needs - it's never
   a fixed/guessed pixel value, so it naturally matches a short or long
   title, with or without a subtitle, on any given post. Because the
   sidebar and .single-main are BOTH placed in row 2 (nothing sits in row 1
   / column 2), row 2 starts immediately after row 1 for both columns alike -
   which puts the sidebar's top edge exactly level with the featured
   image's top edge (the featured image is .single-main's first child),
   leaving the right column empty alongside the header block above it,
   without any fragile fixed offset. .single-main itself caps at a
   comfortable reading width (720px) while the grid column stays fluid, so
   the sidebar never drifts away from a hard-coded content width on very
   wide screens. Scoped to .single-layout (only used by single.php) so
   archive.php/search.php's own .content-layout is untouched. */
.single-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  column-gap:48px;
  row-gap:var(--spacing-lg);
  align-items:start;
  margin-top:var(--spacing-md);
}
.single-hero{grid-column:1;grid-row:1}
.single-main{grid-column:1;grid-row:2;min-width:0;max-width:720px;container-type:inline-size;container-name:single-main}
.single-layout > .sidebar{grid-column:2;grid-row:2;min-width:0}

@media (max-width:980px){
  .single-layout{grid-template-columns:1fr;row-gap:var(--spacing-xl)}
  .single-hero,.single-main,.single-layout > .sidebar{grid-column:auto;grid-row:auto}
  .single-main{max-width:none}
  /* Once the sidebar drops below the article, each widget card needs to
     read as its own clearly separated block rather than a continuous
     column - a bit more gap than the desktop side-column spacing. */
  .single-layout > .sidebar{gap:var(--spacing-xl)}
}

/* Sticky positioning on both the site header and this sidebar was disabled
   below (see body.single .site-header, further down) because some
   full-page screenshot tools render position:sticky elements "stuck" at an
   arbitrary offset partway down the composited image instead of their true
   in-flow position - which is what showed up as the header/sidebar
   appearing to float mid-article. Plain grid-flow positioning (above) has
   no such failure mode: the sidebar starts exactly at the top of the grid
   row it's placed in, every time, in every capture method. */
body.single .site-header{
  position:relative;
  top:auto;
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area{margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-hairline)}
.comments-title{font-size:1.4rem;font-weight:800;margin-bottom:var(--spacing-lg)}
.comment-list{list-style:none;margin:0 0 var(--spacing-xl);padding:0;display:flex;flex-direction:column;gap:var(--spacing-lg)}
.comment-list .children{list-style:none;margin:var(--spacing-lg) 0 0;padding-left:var(--spacing-lg);border-left:2px solid var(--color-hairline);display:flex;flex-direction:column;gap:var(--spacing-lg)}
.comment-body{background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg)}
.comment-author.vcard{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.comment-author .avatar{width:36px;height:36px;border-radius:50%;display:block}
.comment-author .fn{font-style:normal;font-weight:700;color:var(--color-ink);font-size:.94rem}
.comment-metadata{font-size:.78rem}
.comment-metadata a{color:var(--color-muted);text-decoration:none}
.comment-metadata a:hover{color:var(--color-primary)}
.comment-content p{margin:0 0 8px;line-height:1.7;color:var(--color-text)}
.comment-content p:last-child{margin-bottom:0}
.comment .reply{margin-top:8px}
.comment .reply a{font-size:.8rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.comment .reply a:hover{text-decoration:underline}
.no-comments{color:var(--color-muted);margin-bottom:var(--spacing-lg)}

#respond{margin-top:var(--spacing-lg)}
#reply-title{font-size:1.15rem;font-weight:800;margin-bottom:var(--spacing-md)}
.comment-form p{margin-bottom:var(--spacing-md)}
.comment-form label{display:block;font-size:.82rem;font-weight:600;color:var(--color-text);margin-bottom:6px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;padding:11px 14px;border:1px solid var(--color-hairline);border-radius:var(--radius);background:var(--color-card);font-family:var(--font-sans);font-size:.92rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.comment-form input:focus,.comment-form textarea:focus{border-color:rgba(79,70,229,.5);box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form .form-submit{margin-bottom:0}
.comment-form #submit{background:var(--color-ink);color:#fff;padding:11px 26px;border-radius:var(--radius-full);border:0;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .2s ease}
.comment-form #submit:hover{background:var(--color-primary)}
@media (max-width:640px){ .comment-list .children{padding-left:var(--spacing-md)} }

/* ==========================================================================
   Blog archive page (home.php - the WordPress "Posts page")
   ==========================================================================
   Scoped under .blog-archive (a wrapper div only used in home.php) plus a
   handful of new .blog-* classes - never the shared h1/h2/.entry-title/
   .posts-list selectors globally, so nothing here can affect the homepage,
   category/tag/author archives (archive.php), search, or single posts.
   .archive-title / .archive-description / .hero-featured-post / .hero-
   content / .hero-excerpt / .entry-category / .post-thumb / .post-card /
   .entry-title / .entry-summary / .entry-meta / .posts-list / .pagination
   are all reused as-is from elsewhere in this file - most of this page's
   look comes from that reuse; the rules below only add what those don't
   already cover (page width, the category pill row, and the featured
   article's desktop side-by-side split). */

/* Page width, and a bit of top/bottom breathing room since no .site-main
   rule exists site-wide (same reasoning as .write-for-us-page below). */
.blog-archive{max-width:1120px;margin-inline:auto;padding-block:var(--spacing-2xl)}
@media (max-width:640px){
  .blog-archive{padding-block:var(--spacing-xl)}
}

.blog-archive-header{margin-bottom:var(--spacing-xl)}

/* Category filter row: understated pills in the same visual language as
   the footer's .social-link pills (border, pill radius, subtle hover) -
   not a copy of that component, just the same tokens or a consistent
   look. "All" is always the active pill here, since this template only
   ever renders on the blog archive itself. Wraps naturally, no scroll. */
.blog-category-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--spacing-2xl)}
.blog-category-pill{
  display:inline-flex;align-items:center;
  padding:8px 16px;
  border:1px solid var(--color-hairline);
  background:var(--color-card);
  border-radius:var(--radius-full);
  color:var(--color-text);
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.blog-category-pill:hover{background:var(--color-cream);border-color:var(--color-primary);color:var(--color-primary)}
.blog-category-pill.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Featured article: reuses .hero-featured-post (border/radius/shadow/
   hover-lift, and its default flex-direction:column - i.e. image above
   content, already correct for mobile with zero extra CSS) plus
   .hero-content/.hero-excerpt/.post-thumb/.entry-category/.entry-meta.
   .blog-featured only adds the desktop-only side-by-side split (~55/45
   via 1.2fr/1fr) and the title size, since .hero-featured-post's own
   title styling targets an <h3> and this page's title is an <h2> (this
   article sits at the same outline level as "Latest Articles" below it). */
.blog-featured{margin-bottom:var(--spacing-2xl)}
.blog-featured .post-thumb{border-radius:0}
.blog-featured h2{font-size:1.9rem;line-height:1.15;font-weight:800;margin:0 0 10px}
.blog-featured h2 a{color:var(--color-ink);text-decoration:none}
.blog-featured h2 a:hover{color:var(--color-primary)}
@media (min-width:768px){
  .blog-featured h2{font-size:2.4rem}
}
@media (min-width:768px){
  .blog-featured{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch}
  .blog-featured .hero-content{display:flex;flex-direction:column;justify-content:center}
}

.blog-grid-heading{margin-top:0}

/* 3 columns desktop, 2 tablet, 1 mobile - reusing the theme's own existing
   1100px/800px breakpoints (already used for .category-grid and the hero/
   posts-list stacking respectively) rather than new ones. */
.blog-grid{grid-template-columns:repeat(2,1fr)}
@media (min-width:1100px){
  .blog-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
  .blog-grid{grid-template-columns:1fr}
}
/* Titles get 3 lines here (vs. the shared 2-line clamp used by every
   other .entry-title on the site) so they read less aggressively cut off
   in a 3-column grid - scoped to this page only, the shared rule that
   the homepage/archive/search/related-posts still use is untouched. */
.blog-grid .entry-title a{-webkit-line-clamp:3}

/* ==========================================================================
   Write For Us page
   ==========================================================================
   Everything below is scoped under .write-for-us-page (added to the
   <article> only for this one page, see page.php) so none of it can ever
   affect the homepage, archives, single posts, search, or any other page -
   it only ever touches this page's own .entry-content, never the shared
   h2/p/ul/section selectors globally. The .wfu-guidelines-grid / .wfu-
   guideline / .wfu-cta wrapper divs are added by a the_content filter (see
   blogbars_write_for_us_content_layout() in inc/template-functions.php),
   not stored in the page content itself - the copy stays 100% editable
   from Pages > Write For Us exactly as before. */

/* A little more top/bottom breathing room than the site's other pages get
   by default (no .site-main rule exists site-wide), reduced on mobile. */
.write-for-us-page{padding-block:var(--spacing-2xl)}
@media (max-width:640px){
  .write-for-us-page{padding-block:var(--spacing-xl)}
}

/* Page width: the theme's .container already caps this at 1280px:
   narrowed further here to a more intentional 1120px, centered. Flowing
   text (headings/paragraphs/lists that are direct children of
   .entry-content) is narrower still, for a comfortable reading line
   length - the two structural blocks below (guidelines grid, categories
   grid) are what actually use the full 1120px. */
.write-for-us-page .entry-content{max-width:1120px;margin-inline:auto}
.write-for-us-page .entry-content > h2,
.write-for-us-page .entry-content > p,
.write-for-us-page .entry-content > ul{
  max-width:780px;
}

/* Intro heading hierarchy: the H1 ("Write For Us") already gets the
   theme's large .article-title treatment via page.php (font-size only -
   see main.css's existing .article-title rule, reused as-is). The first
   H2 right beneath it ("Blog Bars Guest Blogging Guidelines") reads as
   its subtitle - a little larger than a normal section heading and
   muted, clearly secondary to the H1 but still more prominent than body
   text - while every other H2 on the page keeps its normal styling. */
.write-for-us-page .entry-header{padding-top:var(--spacing-sm)}
.write-for-us-page .entry-content > h2:first-child{
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-muted);
  margin-top:0;
}
@media (min-width:768px){
  .write-for-us-page .entry-content > h2:first-child{font-size:1.75rem}
}

/* Categories We Are Looking For -> compact pill grid instead of a long
   bullet list. There's exactly one <h3> on this page, so "the <ul> right
   after it" unambiguously targets this list - no wrapper markup needed.
   The items are plain text (not links) in the page content, so there's no
   hover/link state to add. 3 columns desktop, 2 tablet, 1 on small phones. */
.write-for-us-page .entry-content h3,
.write-for-us-page .entry-content h3 + ul{
  max-width:none;
}
.write-for-us-page .entry-content h3 + ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-sm);
  padding-left:0;
}
.write-for-us-page .entry-content h3 + ul li{
  margin-bottom:0;
  padding:10px 16px;
  background:var(--color-cream);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius);
  font-size:.92rem;
  font-weight:600;
  color:var(--color-text);
  text-align:center;
  line-height:1.4;
}
@media (max-width:900px){
  .write-for-us-page .entry-content h3 + ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .write-for-us-page .entry-content h3 + ul{grid-template-columns:1fr}
}

/* Writing Guidelines -> a 2-column grid of understated editorial cards
   (Word Count / No Promotion / Media / Original Content). align-items:
   start deliberately does NOT stretch cards to match row height - a
   longer section (e.g. No Promotion, which has a bullet list) is allowed
   to simply be taller than its row partner instead of forcing extra empty
   space into the shorter one. */
.write-for-us-page .entry-content .wfu-guidelines-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--spacing-lg);
  margin:var(--spacing-xl) 0;
}
.write-for-us-page .entry-content .wfu-guideline{
  background:var(--color-cream);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-lg);
  padding:var(--spacing-lg);
}
.write-for-us-page .entry-content .wfu-guideline > *:last-child{margin-bottom:0}
/* Sized down to the theme's existing h3 scale (still a real <h2> - only
   its visual size changes, so the page's heading outline stays intact). */
.write-for-us-page .entry-content .wfu-guideline > h2{
  font-size:1.32rem;
  margin-top:0;
}
@media (max-width:800px){
  .write-for-us-page .entry-content .wfu-guidelines-grid{grid-template-columns:1fr}
}

/* Guest Blogging Submission -> a highlighted but neutral CTA panel,
   centered as its own block. Widened from 780px to 960px so it reads
   closer to the page's wider structural blocks (categories/guidelines
   grid, both effectively ~1120px) instead of matching the narrower
   ~780px reading-width column used by plain paragraphs - still well
   short of the full content area, never full-page-width.
   mailto:editor@blogbars.com is already a real link in the page content
   (see .entry-content a for its styling) - untouched here. */
.write-for-us-page .entry-content .wfu-cta{
  max-width:960px;
  margin:var(--spacing-xl) auto 0;
  background:var(--color-cream);
  border:1px solid var(--color-hairline);
  border-radius:var(--radius-xl);
  padding:var(--spacing-xl);
}
.write-for-us-page .entry-content .wfu-cta > h2{margin-top:0}
.write-for-us-page .entry-content .wfu-cta > *:last-child{margin-bottom:0}
@media (max-width:640px){
  .write-for-us-page .entry-content .wfu-cta{padding:var(--spacing-lg)}
}

/* Slightly more breathing room between bullet points inside the
   guideline cards and the CTA panel specifically (the base site-wide
   .entry-content li spacing, used by every blog article, is untouched). */
.write-for-us-page .entry-content .wfu-guideline li,
.write-for-us-page .entry-content .wfu-cta li{
  margin-bottom:14px;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Safety net: hover transforms/scaled images are all clipped by their own
   overflow:hidden containers, but this guarantees no stray horizontal
   scrollbar can ever appear regardless of content length. Scoped to <html>
   only (not <body>) so it can't turn body into its own scroll container,
   which would risk breaking the sticky header. */
html{overflow-x:hidden}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width:900px){
  /* Tablet: brand takes its own full-width row (it carries more content -
     logo, description, newsletter - than a single nav column should be
     squeezed into). Explore/Follow sit in the row below - 1fr for Explore
     (always present, takes whatever space there is) plus a bare `auto`
     for Follow (collapses to 0 width when that column doesn't exist in
     the markup at all, same reasoning as the desktop .footer-inner rule
     above), so Explore isn't stuck at a fixed half-width with empty
     space next to it when Follow is absent. Explore's own .footer-menu
     multi-column list (see above) is what actually reduces its column
     count at this narrower width, per the "reduce columns on tablet"
     requirement - not this outer grid. */
  .footer-inner{grid-template-columns:1fr auto;column-gap:var(--spacing-lg);row-gap:var(--spacing-lg)}
  .footer-brand{grid-column:1/-1}
  /* Was only using --spacing-section (68px) here on every viewport - every
     other homepage section already drops to --spacing-2xl (64px) on mobile
     just below, so this brings the footer in line with that same rhythm
     instead of leaving Newsletter-to-Footer as the one oversized gap. */
  .site-footer{margin-top:var(--spacing-2xl)}
}
@media (max-width:800px){
  .posts-list{grid-template-columns:1fr;gap:var(--spacing-md)}
  .hero-grid{grid-template-columns:1fr}
  .content-layout{grid-template-columns:1fr}
  /* A touch more room inside each Latest Articles / Editor's Picks / related-
     post card once it's full width on its own row - the same padding felt
     tighter next to a neighbor in a multi-column grid than it does alone. */
  .entry-body{padding:var(--spacing-lg);gap:12px}
  .section-heading{font-size:1.6rem}
}
@media (max-width:600px){
  /* Mobile: everything stacks in one column, in source order - logo,
     newsletter (both inside .footer-brand), Explore, Follow (if present),
     then the copyright row - comfortably spaced without the tablet grid's
     side-by-side columns. */
  .footer-inner{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .footer-newsletter{max-width:100%;margin-top:var(--spacing-lg)}
  .footer-description{max-width:none}
  /* Footer Menu: switch off the multi-column flow from a "readable list"
     as much as a "compact block" - a real single column, full natural
     height, so every link stays easy to read and tap on a small screen. */
  .footer-menu{columns:auto;height:auto}
}