:root{
    --navy:#203656;
    --pink:#FFC107;
    --peach:#FFD666;
    --muted:#8F9BAD;
    --meta:#9faabb;
    --nav-link:#79889e;
    --border:#EBEBEB;
    --site-width:1200px;
    --sidebar-width:33%;
    --font-heading:"Poppins", sans-serif;
    --font-body:"Roboto", sans-serif;
    --base-font-size:15px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    color:var(--muted);
    background:#fff;
    font-family:var(--font-body);
    font-size:var(--base-font-size);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;height:auto;display:block;}
  a{color:var(--pink);text-decoration:none;transition:all .2s ease-in-out;}
  a:hover{color:var(--navy);}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3,h4,h5,h6{color:var(--navy);font-family:var(--font-heading);font-weight:700;line-height:1.4;margin:0;}

  .container-xl{width:100%;margin:0 auto;padding:0 30px;}
  @media (min-width:1200px){.container-xl{max-width:var(--site-width,1140px);}}
  /* Boxed/Framed/Bordered's Hero Grid uses a deliberately wider 46px inset
     (below) — every OTHER section (nav, logo row, Editor's Pick, Trending,
     Trending Now...) sits inside a plain .container-xl at 30px, which reads
     as narrower/misaligned once Hero Grid sets the visual left/right edge
     everyone else is compared against. Matching container-xl itself to 46px
     in these three layout modes is the one change that widens every section
     consistently instead of patching each one separately. */
  body.quickpress-layout-boxed .container-xl,
  body.quickpress-layout-framed .container-xl,
  body.quickpress-layout-bordered .container-xl{padding:0 46px;}
  @media (max-width:767px){
    body.quickpress-layout-boxed .container-xl,
    body.quickpress-layout-framed .container-xl,
    body.quickpress-layout-bordered .container-xl{padding:0 12px;}
  }
  /* container-xl is what EVERY section's inner content sits inside — the
     header rows, every homepage block, single-post content, all of it —
     so tightening its 30px side padding here is the one change that widens
     the whole site consistently on phones instead of patching each section
     separately (and drifting out of sync with each other over time). */
  @media (max-width:767px){.container-xl{padding:0 14px;}}

  /* ===== THEME LAYOUT ===== */
  /* Unconditional, not just inside the boxed/framed rules below — the
     content column needs its own opaque surface in EVERY layout mode, or
     Theme Options' custom body background (color/image) bleeds straight
     through behind actual page content instead of staying confined to the
     outer margins boxed/framed reveal (matching Jannah's own pattern: the
     backdrop is only ever visible in the margins around the white column,
     never behind the content itself). */
  .site-wrapper{background:#fff;}
  /* No hardcoded background here — Boxed/Framed's neutral-gray backdrop is
     a fallback computed in quickpress_output_color_variables() (functions.php)
     instead, since a class selector here would always outrank that inline
     block's plain `body{background-color:...}` on specificity alone,
     permanently hiding any custom color/image the user sets. */
  body.quickpress-layout-boxed .site-wrapper{max-width:var(--site-width,1200px);margin:0 auto;background:#fff;box-shadow:0 0 40px rgba(32,54,86,.08);}

  body.quickpress-layout-framed{padding:24px 0;}
  body.quickpress-layout-framed .site-wrapper{max-width:var(--site-width,1200px);margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(32,54,86,.12);}

  body.quickpress-layout-bordered .site-wrapper{max-width:var(--site-width,1200px);margin:24px auto;border:1px solid var(--border);}

  /* ===== HEADER ===== */
  /* Bottom border — matches the reference, and gives the header a defined
     edge against whatever section follows it instead of just ending in
     blank white space. Layout 2 opts back out (below) since its own
     .header-l2-nav already has a full border of its own directly under it;
     adding this too would double up into two parallel lines. */
  .header-default{padding:22px 0;position:relative;width:100%;border-bottom:1px solid var(--border);}
  .navbar{display:flex;align-items:center;padding:0;}
  .navbar-brand{display:inline-flex;align-items:center;}
  /* Safety net for "Use the logo's original size" (Theme Options -> Header
     & Logo) — that mode renders the uploaded file with no width/height/max-
     attributes of its own, so this is the only thing left stopping an
     unexpectedly huge upload from blowing out the header row. Harmless
     otherwise: the normal scale-to-fit mode sets its own inline max-height
     (38px by default), and inline styles always win over this class rule
     regardless of source order. */
  .navbar-brand img{max-height:60px;width:auto;}
  .site-title-text{
    font-family:var(--font-heading);font-weight:700;font-size:26px;color:var(--navy);
    white-space:nowrap;
  }
  .site-title-text .site-title-accent{
    background:linear-gradient(90deg,var(--pink,#FFC107),var(--peach,#FFD666));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--pink,#FFC107);
  }
  /* vertical-align:super, not a flex align-self trick — the flex line's cross
     size (and so a flex-start position) is based on Poppins' full font-metric
     ascent, which sits well above the glyphs' actual cap-height, leaving a
     visible gap no amount of line-height/margin tuning closes. super shifts
     up from the text's own baseline instead, which tracks the glyphs. */
  .site-title-text .site-title-dot{
    display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;
    background:linear-gradient(90deg,var(--pink,#FFC107),var(--peach,#FFD666));
    vertical-align:super;
  }
  /* Sticky Header (Theme Options -> Header & Logo) */
  body.quickpress-sticky-header .header-default{
    position:sticky;top:0;z-index:99;background:#fff;
  }
  /* min-width:0, not the flex-item default of auto — a flex item won't
     shrink narrower than its content's own intrinsic width otherwise, so a
     long menu (below) had nowhere to go but push .navbar wider than the
     header and overflow past the logo/search/burger on the right instead
     of actually wrapping inside its own box. */
  .navbar-collapse{display:flex;align-items:center;flex:1;min-width:0;}
  /* flex-wrap:wrap — too many top-level items to fit one row now drop to a
     second line inside the header instead of overflowing past the edge of
     the page (the header's own height is auto, so a wrapped second row just
     grows it, nothing else on the page needs to know). row-gap wider than
     the tight inter-item column-gap so two wrapped rows don't read as
     cramped together. */
  .navbar-nav{display:flex;align-items:center;flex-wrap:wrap;margin-left:50px;font-family:"Poppins", sans-serif;font-size:14px;gap:2px;row-gap:10px;}
  .navbar-nav .nav-item{position:relative;}
  /* Thin divider between items, matching the reference nav — skipped before
     the first item (nothing to divide there) and around .active (a colored
     pill already reads as its own distinct segment; a line butting straight
     into its rounded edge on either side looked like a stray mark, not a
     divider), via the override right below. */
  .navbar-nav .nav-item:not(:first-child):not(.active)::before{
    content:"";display:inline-block;width:1px;height:16px;vertical-align:middle;
    background:var(--border);margin-right:.85rem;
  }
  .navbar-nav .nav-item.active + .nav-item::before{content:none;}
  .navbar-nav .nav-link{display:inline-block;padding:.439rem .85rem;color:var(--nav-link);cursor:pointer;white-space:nowrap;}
  .navbar-nav .nav-link:hover{color:var(--navy);}
  .navbar-nav li.active .nav-link{
    color:#fff;
    border-radius:25px;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 100%);
  }
  .navbar-nav .dropdown-toggle::after{content:"";display:inline-block;margin-left:5px;vertical-align:middle;
    border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent;opacity:.6;
    transition:transform .25s cubic-bezier(.16,1,.3,1);}
  /* Caret flips to point up while its own submenu is open — the same visual
     cue the katen reference uses, confirming "this one expands" instead of a
     static arrow that never reflects the open/closed state. */
  .navbar-nav .nav-item:hover > .dropdown-toggle::after{transform:rotate(180deg);opacity:1;}
  .navbar-nav .sub-menu{
    position:absolute;top:100%;left:0;min-width:220px;z-index:20;margin:0;padding:6px 0;list-style:none;
    background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(32,54,86,.18);
    opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top center;
    /* Longer + eased-out, not the old flat .18s linear-ish ease — a snap
       toggle read as broken/glitchy next to how deliberate the rest of the
       theme's motion already is (builder panels, card hovers). */
    transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .28s;
  }
  /* A long leaf list (e.g. all 12 zodiac signs under one 3rd-level item)
     could otherwise render taller than the viewport with no way to reach
     whatever fell below the fold — no page scroll gets you there (this box
     doesn't grow the page's own scroll height) and it had no scroll of its
     own either. :not(:has(.sub-menu)) is deliberate, not every .sub-menu —
     a level that DOES contain a further nested flyout (e.g. the 2nd-level
     list containing "Horóscopo Anual", which opens a 3rd level of its own)
     must stay overflow:visible, or capping ITS height would clip that child
     flyout the moment it tried to escape sideways past this box. Only a
     leaf level (nothing nested inside it left to escape) is safe to cap. */
  .navbar-nav .sub-menu:not(:has(.sub-menu)){
    max-height:70vh;overflow-y:auto;
    /* filter:drop-shadow, not the box-shadow above — box-shadow gets
       clipped by this same element's own overflow (a well-known CSS
       interaction: overflow other than visible clips a box's own shadow
       along with its content), which would've cut the shadow off the
       moment scrolling actually kicked in. drop-shadow is a filter effect
       applied to the whole rendered element instead, so overflow here
       doesn't touch it — and it still follows the rounded corners
       correctly, since it shapes itself to the actual rendered (alpha)
       shape rather than a plain rectangle. */
    box-shadow:none;
    filter:drop-shadow(0 16px 40px rgba(32,54,86,.18));
    /* Slim, brand-tinted scrollbar instead of the browser's bulky default —
       only visible once max-height above actually forces a scrollbar. */
    scrollbar-width:thin;scrollbar-color:var(--pink) transparent;
  }
  .navbar-nav .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar{width:6px;}
  .navbar-nav .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-thumb{background:var(--pink);border-radius:6px;}
  .navbar-nav .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-track{background:transparent;}
  .navbar-nav .nav-item:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
  .navbar-nav .sub-menu .nav-item{display:block;}
  /* Divider between rows (not after the last) — same "distinct rows in one
     card" read as the reference, using this theme's own --border color
     rather than copying its exact gray. */
  .navbar-nav .sub-menu .nav-item:not(:last-child){border-bottom:1px solid var(--border);}
  .navbar-nav .sub-menu .nav-link{
    display:flex;align-items:center;padding:13px 22px;border-radius:0;white-space:nowrap;
    color:var(--navy);font-weight:500;border-left:3px solid transparent;
    transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out,padding-left .2s ease-in-out;
  }
  /* Rounds only the two corners that actually sit at the container's own
     rounded edge — border-radius on every row plus overflow:hidden on the
     container would also clip the container's own box-shadow, since a
     shadow renders outside the box the same overflow rule cuts along. */
  .navbar-nav .sub-menu .nav-item:first-child .nav-link{border-top-left-radius:14px;border-top-right-radius:14px;}
  .navbar-nav .sub-menu .nav-item:last-child .nav-link{border-bottom-left-radius:14px;border-bottom-right-radius:14px;}
  /* Soft pink-to-transparent wash + a left accent bar that slides the label
     in slightly — brand gradient colors instead of a flat gray hover, with
     enough motion to read as alive without being distracting. */
  .navbar-nav .sub-menu .nav-link:hover{
    background:linear-gradient(to right,rgba(255,193,7,.1),rgba(255,193,7,0) 80%);
    border-left-color:var(--pink);color:var(--pink);padding-left:28px;
  }
  .navbar-nav .sub-menu li.active .nav-link{background:none;color:var(--pink);border-left-color:var(--pink);}
  .navbar-nav .sub-menu .sub-menu{top:0;left:100%;}
  /* A nested item's own flyout opens to the RIGHT (left:100% above), not
     below it — so it gets a right-pointing arrow instead of inheriting the
     top-level down/up caret, and that arrow stays put on hover instead of
     rotating. The top-level rotate-to-up cue means "this now expands
     upward from here"; reusing it here was actively wrong, implying the
     flyout was about to appear ABOVE the item when it actually opens to
     the side. Higher specificity than the general rules above (extra
     .sub-menu ancestor) is what lets this win without !important. */
  .navbar-nav .sub-menu .dropdown-toggle::after{
    border-top:4px solid transparent;border-bottom:4px solid transparent;
    border-left:4px solid;border-right:0;
  }
  .navbar-nav .sub-menu .nav-item:hover > .dropdown-toggle::after{transform:none;opacity:1;}
  /* Layout 2's own accent is cyan, not the pink/peach gradient — matching
     its hover/underline color here instead of the base pink keeps a
     submenu from reading like it belongs to the other header layout. */
  .header-layout-2 .navbar-nav .sub-menu .nav-link:hover{
    background:linear-gradient(to right,rgba(0,180,216,.1),rgba(0,180,216,0) 80%);
    border-left-color:#00B4D8;color:#00B4D8;
  }
  .header-layout-2 .navbar-nav .sub-menu li.active .nav-link{color:#00B4D8;border-left-color:#00B4D8;}

  .header-right{display:flex;align-items:center;}
  .social-icons{display:inline-flex;align-items:center;gap:14px;}
  .social-icons a{color:var(--navy);font-size:14px;}
  .social-icons a:hover{color:var(--pink);}
  .header-buttons{display:inline-flex;align-items:center;margin-left:50px;gap:10px;}
  .icon-button{
    width:37px;height:37px;border-radius:50%;border:0;
    background:linear-gradient(to top,var(--peach) 0%,var(--pink) 51%,var(--peach) 100%);
    background-size:auto 200%;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;color:#fff;font-size:15px;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);
    transition:all .2s ease-in-out;
  }
  .icon-button:hover{background-position:bottom center;}
  .burger-icon{display:block;width:15px;position:relative;}
  .burger-icon:before,.burger-icon:after{content:"";background:currentColor;display:block;margin:auto;height:1px;width:15px;}
  .burger-icon:before{margin-bottom:5px;}
  .burger-icon:after{margin-top:5px;}

  /* ===== HEADER LAYOUT 2 (templates/header/layout-2.php) =====
     General concept only (logo+banner row, nav-below row) — own spacing/
     sizing/colors throughout, not measured from any reference. Everything
     here is scoped under .header-layout-2 so it can never leak into or
     conflict with Layout 1's plain .header-default rules above. */
  .header-layout-2{padding:0;border-bottom:0;}
  .header-l2-top{padding:8px 0;}
  .header-l2-top-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;}
  /* margin:0, not the shared .quickpress-ad-slot's own 24px top+bottom
     (site.css, used everywhere else an ad slot appears) — that alone was
     adding 48px of extra height inside an otherwise-compact header row. A
     capped max-height also keeps this row's height predictable regardless
     of whatever image dimensions get uploaded as the actual ad.
     90px, not 50 — that matches the standard 728x90 "leaderboard" ad
     banner size (the most common header-banner format), which at 50px
     was being squeezed down to barely a fifth of its real height, cramming
     any text/logo inside it into an illegible strip. */
  .header-l2-top-inner .quickpress-ad-slot{flex:none;margin:0;max-height:90px;}
  .header-l2-top-inner .quickpress-ad-slot img{max-height:90px;width:auto;max-width:100%;}
  /* Open nav bar — white background, a thin neutral gray border all
     around, with the top edge upgraded to a bolder blue accent line
     (the bottom/sides stay plain gray — the active tab gets its own
     separate blue underline instead of a bar-wide bottom accent).
     Circular blue search button. Own spacing/colors/values. */
  /* Matches the main container's own width exactly (no side inset, but never
     wider than .site-wrapper/.container-xl either) — the menu items inside
     (.header-l2-nav-inner, a .container-xl) sit at the same position they
     always did since this bar is now the same width as everything else on
     the page, just without the extra 30px margin narrowing it further. */
  .header-l2-nav{background:#fff;border:1px solid var(--border);border-top:3px solid #00B4D8;}
  /* Same left/right padding as every other .container-xl on the page (logo
     row, hero section) — zeroing it out here was what made the menu/search
     start and end inside those edges instead of lining up with them. */
  .header-l2-nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;}
  .header-layout-2 .navbar-nav{margin-left:0;gap:4px;}
  .header-layout-2 .navbar-nav .nav-item{border-right:0;}
  .header-layout-2 .navbar-nav .nav-link{
    display:flex;align-items:center;padding:10px 18px;color:var(--navy);font-weight:600;font-size:13px;
    text-transform:uppercase;letter-spacing:.03em;position:relative;
  }
  .header-layout-2 .navbar-nav .nav-link:hover{color:#00B4D8;}
  /* Blue underline under the active item instead of a filled pill — keeps
     the same "active state as accent, not a solid block" approach used
     elsewhere in this header, just recolored for the white pill bg. Also
     shown on hover (not just active) — bottom:0, flush with the nav's own
     gray bottom border, no gap between them. */
  .header-layout-2 .navbar-nav li.active .nav-link{background:none;border-radius:0;color:var(--navy);}
  .header-layout-2 .navbar-nav li.active .nav-link:after,
  .header-layout-2 .navbar-nav .nav-link:hover:after{
    content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:#00B4D8;border-radius:2px;
  }
  .header-layout-2 .header-right{gap:10px;}
  .header-layout-2 .social-icons a{color:var(--muted);}
  .header-layout-2 .social-icons a:hover{color:#00B4D8;}
  /* No burger on desktop — the full menu is already visible right there in
     the nav, so it's a redundant control taking up space the search field
     can use instead. Still needed on mobile (the nav collapses below
     991px), so it comes back in the breakpoint underneath. */
  .header-layout-2 #burgerBtn{display:none;}
  @media (max-width:991px){
    .header-l2-nav .navbar-collapse{display:none;}
    .header-layout-2 #burgerBtn{display:inline-flex;}
    /* Logo stacks above the ad banner instead of squeezing beside it —
       side-by-side only worked with room to spare on desktop; below 991px
       the banner was crowding the logo into a sliver. */
    .header-l2-top-inner{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:10px;}
    .header-l2-top-inner .quickpress-ad-slot{flex:none;width:100%;display:flex;justify-content:center;}
    /* Breathing room on all sides — with the text input gone the row
       collapsed to exactly the 30px icon size, leaving both buttons flush
       against the nav's own edges (top/bottom AND, since the base rule
       zeroes this element's own left/right padding to avoid double-inset
       with the outer margin trick, left/right too) instead of sitting
       inside it. */
    .header-l2-nav-inner{padding:10px 12px;}
    /* Social icons drop — the burger also needs room here, and the search
       trigger is already just an icon regardless of breakpoint now, so the
       row is just search (left) and burger (right) at opposite ends. */
    .header-layout-2 .social-icons{display:none;}
    .header-layout-2 .header-right{flex:1;justify-content:space-between;}
    /* margin-left:0 — the shared .header-buttons{margin-left:50px} (site.css
       above) and Layout 1's own mobile override (margin-left:20px, further
       below) both existed to push this group away from the social icons
       next to it; neither applies here since social icons are hidden
       entirely, but left unset either one was still shifting the search
       icon 20px off the row's true left edge while the burger sat flush
       right — an asymmetric gap only one side had. */
    .header-layout-2 .header-buttons{width:100%;display:flex;justify-content:space-between;align-items:center;margin-left:0;}
    /* Matches the burger's own shrink here — same 30px compact size for
       both icons in this now-cramped row instead of one shrinking and the
       other staying full-size. */
    .header-layout-2 #headerSearchTrigger.icon-button,
    .header-layout-2 #burgerBtn.icon-button{width:30px;height:30px;}
  }

  /* "Trending Now" ticker strip — light gray band, dark flag-style badge,
     one headline at a time sliding via the shared .widget-carousel JS
     (main.js), round prev/next arrows instead of the widget's usual dot nav. */
  .header-trending{background:none;}
  /* padding-top/-bottom only, not the padding:_ 0 shorthand — that
     silently zeroed out .container-xl's own 30px left/right padding (same
     specificity, this rule came later in the file), which is exactly why
     the prev/next icons sat flush at the true edge instead of matching
     where the search input (correctly still padded) ends. */
  .header-trending-inner{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px;width:100%;}
  /* Dark flag/ribbon shape — a plain rounded rect read as just another
     category-badge pill, indistinguishable from the ones already sitting on
     every post card. The pointed right edge (clip-path, a rectangle with
     its right side pulled into a triangle tip) is what actually reads as
     "ticker flag" rather than "generic label", matching the reference. */
  .header-trending-badge{
    flex:none;background:var(--navy);color:#fff;font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;padding:8px 22px 8px 14px;white-space:nowrap;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
  }
  @media (max-width:767px){
    .header-trending-badge{font-size:10px;padding:6px 18px 6px 10px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);}
  }
  .header-trending .widget-carousel{flex:1;min-width:0;border-radius:0;}
  .header-trending-item{color:var(--navy);font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .header-trending-item:hover{color:var(--pink);}
  .header-trending-nav{flex:none;display:flex;gap:8px;}
  .header-trending-nav button{
    width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;
    color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    transition:all .2s ease-in-out;
  }
  .header-trending-nav button:hover,
  .header-trending-nav button.active{background:var(--pink);border-color:var(--pink);color:#fff;}

  /* ===== HERO / GRID ===== */
  #hero{padding-bottom:0;}
  /* minmax(0,...), not bare percentages — same pitfall as fr tracks: a grid
     item's default min-width:auto respects its content's min-content size
     regardless of whether the track is defined in fr or %, so .post-tabs
     (nav-tabs buttons + post list inside) was overflowing its 33.33% column
     at viewport widths where that content's natural width exceeded it. */
  .row-hero{display:grid;grid-template-columns:minmax(0,66.6667%) minmax(0,33.3333%);gap:24px;align-items:start;}
  @media (max-width:991px){.row-hero{grid-template-columns:minmax(0,1fr);}}

  .rounded{border-radius:10px !important;}
  .bordered{border:solid 1px var(--border);}

  /* featured post large */
  .featured-post-lg{position:relative;}
  .featured-post-lg .thumb{position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(32,54,86,.3);}
  .featured-post-lg .thumb .inner{
    height:533px;background-size:cover;background-position:center center;
    transition:all .3s ease-in-out;
  }
  .featured-post-lg .thumb:after{content:"";background:var(--navy);display:block;position:absolute;inset:0;opacity:.6;}
  .featured-post-lg:hover .thumb .inner{transform:scale(1.05);}
  .featured-post-lg .details{position:absolute;left:50px;right:50px;bottom:50px;z-index:1;}
  .category-badge{
    color:#fff;font-size:13px;border-radius:25px;display:inline-block;padding:6px 11px;line-height:1;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 51%,var(--pink) 100%);
    background-size:200% auto;transition:all .3s ease-in-out;
  }
  .category-badge:hover{background-position:right center;}
  .featured-post-lg .post-title{font-size:32px;margin:16px 0;}
  .featured-post-lg .post-title a{color:#fff;}
  .featured-post-lg .post-title a:hover{color:#fff;opacity:.85;}
  .meta{font-size:14px;color:var(--meta);display:flex;flex-wrap:wrap;align-items:center;}
  .meta li{display:inline-flex;align-items:center;}
  .meta li:not(:last-child){margin-right:.8rem;}
  .meta li:not(:last-child):after{
    content:"";display:inline-block;background-color:var(--pink);border-radius:50%;
    margin-left:1rem;height:3px;width:3px;
  }
  .meta a{color:var(--meta);font-weight:400;display:inline-flex;align-items:center;}
  .meta a:hover{color:var(--pink);}
  .meta .author{width:24px;height:24px;border-radius:50%;margin-right:8px;object-fit:cover;flex-shrink:0;}
  /* quickpress_get_avatar() (inc/template-tags.php) renders this instead of
     a real <img> whenever there's no real uploaded photo to show — a plain
     circle with our own yellow user glyph drawn on top, so "the icon itself"
     is guaranteed yellow rather than depending on which of Gravatar's own
     default styles happens to come back. */
  .avatar-fallback{
    display:inline-block;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23FFC107'/%3E%3Cpath d='M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='%23FFC107'/%3E%3C/svg%3E");
    background-size:62%;background-position:center;background-repeat:no-repeat;
  }
  .featured-post-lg .meta{color:rgba(255,255,255,.6);}
  .featured-post-lg .meta a{color:rgba(255,255,255,.6);}
  .featured-post-lg .meta li:not(:last-child):after{background:rgba(255,255,255,.6);}

  /* post tabs widget */
  .post-tabs{padding:30px;}
  .nav-tabs{display:flex;border-bottom:0;gap:10px;}
  .nav-tabs .nav-link{
    flex:1;min-width:0;text-align:center;padding:.6rem 1rem;border:solid 1px var(--border);border-radius:30px;
    background:transparent;color:var(--muted);font-family:"Poppins", sans-serif;font-size:14px;
    cursor:pointer;font-weight:400;
  }
  .nav-tabs .nav-link.active{
    color:#fff;background:linear-gradient(to right,var(--pink) 0%,var(--peach) 51%,var(--pink) 100%);
    background-size:200% auto;border-color:transparent;
  }
  .tab-content{margin-top:30px;}
  .tab-pane{display:none;}
  .tab-pane.active{display:block;}

  /* display:flow-root (not overflow:hidden) contains the floated .thumb below —
     overflow:hidden had the side effect of clipping the circle badge's number,
     which deliberately sits at top:-10px to hang over the thumbnail's corner. */
  .post-list-sm{clear:both;display:flow-root;}
  .post-list-sm .thumb{float:left;max-width:60px;position:relative;}
  .post-list-sm.circle .thumb .inner{overflow:hidden;border-radius:50%;}
  /* Reference's circle thumbs (tabs-1.jpg etc.) are pre-cropped perfectly
     square (60x60) — real uploaded featured images rarely are, so without
     this they render as ovals, not circles. */
  .post-list-sm.circle .thumb img{aspect-ratio:1/1;object-fit:cover;}
  .post-list-sm .details{margin-left:80px;}
  .post-list-sm .post-title{font-size:15px;margin:0;}
  .post-list-sm .post-title a{color:var(--navy);}
  .post-list-sm .post-title a:hover{color:var(--pink);}
  /* Date now renders first (above the title, not below it) — margin-bottom
     spaces it from the title that follows, not margin-top from a title above. */
  .post-list-sm .meta{margin-top:0;margin-bottom:.4rem;}
  /* Matches the reference exactly: a faded gradient line (not a solid border)
     after every item except the last, OR — for items marked before-seperator —
     that same line above instead of below. Both variants share one rule so
     the fade direction/thickness/spacing can't drift apart by accident. */
  .post-list-sm::after,
  .post-list-sm.before-seperator::before{
    content:"";display:block;height:1px;margin-top:20px;margin-bottom:20px;width:100%;
    background:linear-gradient(to left,var(--border) 0%,transparent 100%);
  }
  .post-list-sm.before-seperator::after{content:none;}
  .post-list-sm:last-child::after{content:none;}

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

  /* ===== MAIN CONTENT SECTIONS ===== */
  .main-content{margin-top:60px;}
  /* Templates with a .page-header band (category/page/404) already get
     visual separation from that band's own padding + colored background —
     this margin-top stacks on top of it there. single.php has no such
     band (the breadcrumb sits directly in .main-content), so the same
     60px reads as a large dead gap of plain white space right under the
     header, with nothing to break it up. */
  .single .main-content{margin-top:24px;}
  /* align-items:start (not the grid default of stretch) — a CSS grid row is
     always exactly as tall as its tallest column either way, so the next
     section's position still ends up gated by whichever of main-col/sidebar
     is taller. Taking the sidebar out of flow entirely (position:absolute)
     was tried and reverted — it let one section's sidebar visually overlap
     the NEXT section's sidebar whenever it ran long. Natural height is the
     safe middle ground: no overlap, and an empty sidebar still gets a
     visible placeholder via its own min-height. */
  .row-main{display:grid;grid-template-columns:calc(100% - var(--sidebar-width,33%) - 24px) var(--sidebar-width,33%);gap:24px;align-items:start;}
  @media (max-width:991px){.row-main{grid-template-columns:minmax(0,1fr);}}
  /* Phones only (not tablets, which still get the stacked-below sidebar from
     the 991px rule above) — sidebar widgets add scroll length without much
     value on a narrow screen, so they're dropped entirely rather than stacked. */
  @media (max-width:767px){.row-main .sidebar{display:none;}}
  /* Default sidebar position (Theme Options -> General). 'right' (the
     default) needs no override — .main-col/.sidebar already lay out that
     way in source order. */
  body.quickpress-sidebar-left .main-col{order:2;}
  body.quickpress-sidebar-left .sidebar{order:1;}
  body.quickpress-sidebar-none .row-main{grid-template-columns:minmax(0,1fr);}
  body.quickpress-sidebar-none .sidebar{display:none;}
  /* Full-width single post only (not category/homepage grids, which want the
     full row for their multi-column card layouts) — .main-col otherwise
     stretches to the full 1200px site width with no sidebar to bound it,
     which makes article paragraphs unreadably wide. Centered at a normal
     reading measure instead. body.single is WP core's own class, always
     present on a single post view. */
  /* justify-self:center, not just margin:auto — a grid item's default
     stretch behavior means margin:auto alone doesn't reliably resolve to
     centering once max-width caps it below the track's full size. */
  body.single.quickpress-sidebar-none .main-col{max-width:900px;margin:0 auto;justify-self:center;}
  /* Full-width single post centers the whole header block as a unit
     (breadcrumb, title, meta) rather than staying left-aligned inside the
     centered column — matches the reference's full-width post layout. The
     with-sidebar layout is untouched (stays left-aligned, the normal blog
     convention). .breadcrumb/.meta are flex rows, so centering them takes
     justify-content, not text-align. */
  body.single.quickpress-sidebar-none .breadcrumb{justify-content:center;}
  body.single.quickpress-sidebar-none .post-header{text-align:center;}
  body.single.quickpress-sidebar-none .post-header .meta{justify-content:center;}
  /* The separator dot (.meta li:not(:last-child):after) is meant to sit
     BETWEEN two pieces of visible text — here it renders directly after
     the bare avatar icon with no author name next to it (single_show_author
     shows the icon only, no name), so it reads as a stray dot stuck to the
     icon rather than a separator between two things. */
  .post-header .meta li:not(:last-child):after{content:none;}
  /* Consecutive sidebar-paired sections stack directly in one shared
     .main-col now (see front-page.php) — without this they'd butt straight
     up against each other with zero gap between them. */
  .main-col > .quickpress-stacked-block + .quickpress-stacked-block{margin-top:60px;}

  /* Matches the reference exactly: a plain block, no flex row — the wave PNG
     is a separate block-level child that naturally sits on its own line
     below the title (not beside it), and this component provides no
     top-margin of its own (the section's own wrapper, e.g. .main-content,
     already spaces it from whatever came before). */
  .section-header{margin-bottom:30px;position:relative;}
  .section-title{font-size:24px;margin:0;}
  .section-header img.wave{margin-top:10px;}
  /* Our base img reset forces display:block (needed elsewhere so real photos
     don't leave a stray baseline gap) — but a block element ignores the
     parent's text-align:center, which is how this icon is meant to end up
     centered under a centered widget title. inline-block restores that
     without touching the global reset. */
  .widget-header .wave{margin-top:10px;display:inline-block;}

  .bordered.rounded.padding-30{padding:30px;}
  /* minmax(0,1fr) — same fix as .row-hero/.hero-grid/.news-grid above: bare
     minmax(0,1fr) is minmax(auto,minmax(0,1fr)), so a wide-content item (post-lg's image) still
     won't shrink below its own min-content width even in the single-column
     mobile layout, and overflows the viewport instead of fitting it. */
  .grid-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 24px;}
  @media (max-width:575px){.grid-2col{grid-template-columns:minmax(0,1fr);}}
  /* Zero horizontal padding (tried earlier, matching Hero's full-bleed width)
     left posts sitting flush against the card's own border with no breathing
     room at all on mobile — reduced but non-zero padding instead, applied to
     every .bordered.rounded.padding-30 box alike (Editor's Pick, Trending,
     Latest Posts) so they all get the same treatment, not just Editor's Pick. */
  @media (max-width:575px){
    .bordered.rounded.padding-30{padding:16px;}
    .post-lg .excerpt{font-size:14px;}
  }

  /* large post (editor / trending) */
  .post-lg{position:relative;}
  .post-lg .thumb{position:relative;}
  .post-lg .thumb .inner{overflow:hidden;}
  /* Corner Style (Square) — radius lives here, on .inner, not on .thumb
     itself, so it must be scoped to .thumb.rounded (the class the Settings
     panel actually toggles) rather than applied unconditionally. */
  .post-lg .thumb.rounded .inner{border-radius:10px;}
  .post-lg .thumb .category-badge{position:absolute;left:20px;top:20px;z-index:1;}
  .post-lg .thumb img{width:100%;transition:all .3s ease-in-out;}
  .post-lg .thumb:hover img{transform:scale(1.07);}
  /* Editor's Pick's featured image had no height cap at all, so it rendered at
     whatever height the source photo's natural aspect ratio produced — wildly
     inconsistent with Trending News' featured image (fixed 250px) right above it. */
  .editors-pick-box .post-lg .thumb img{height:250px;object-fit:cover;}
  .post-format{
    color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;
    font-size:20px;height:50px;width:50px;position:absolute;right:20px;bottom:-25px;z-index:1;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);
    background:linear-gradient(to top,var(--pink) 0%,var(--peach) 100%);
  }
  .post-lg .meta{margin-top:16px;}
  .post-lg .meta .author{width:26px;height:26px;border-radius:50%;margin-right:10px;vertical-align:middle;}
  .post-lg .post-title{font-size:20px;margin:12px 0;}
  .post-lg .post-title a{color:var(--navy);}
  .post-lg .post-title a:hover{color:var(--pink);}
  .post-lg .excerpt{font-size:16px;margin:0;}
  /* Trending's two big posts sit side by side — a low-res source photo that
     WordPress can't upscale to the registered crop size falls back to its
     raw original dimensions, throwing off the match with whatever's next to
     it. Locking the display ratio keeps both columns visually consistent
     regardless of what any given source file can actually support. Ratio
     taken from the reference theme's actual trending-lg-*.jpg assets
     (550x395px, measured directly — not guessed from the crop-size setting). */
  .trending-col .post-lg .thumb img{aspect-ratio:550/395;object-fit:cover;width:100%;height:auto;}
  /* Real post titles/excerpts are never the same length — reserving space for
     the maximum allowed (rather than letting each post's real, shorter text
     leave the small-post list to start higher) is what keeps the two columns
     level regardless of which post happens to have less to say. */
  .trending-col .post-lg .post-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;}
  .trending-col .post-lg .excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6;min-height:4.8em;}

  .post-list-sm.square .thumb{max-width:110px;}
  .post-list-sm.square .details{margin-left:130px;}
  .post-list-sm.square .thumb .inner{overflow:hidden;}
  .post-list-sm.square .thumb.rounded .inner{border-radius:10px;}
  /* Reference's trending-sm-*.jpg assets measure 110x80px exactly — locking
     to that ratio here instead of trusting whatever aspect ratio the actual
     uploaded source photo happens to have. */
  .post-list-sm.square .thumb img{aspect-ratio:110/80;object-fit:cover;}
  /* Tighter thumb-to-title gap on phones (20px desktop -> 12px) — the 110px
     thumb + wide margin-left left title text cramped into too little width
     on a narrow screen. */
  @media (max-width:575px){
    .post-list-sm.square .thumb{max-width:90px;}
    .post-list-sm.square .details{margin-left:102px;}
  }

  .editor-right,.trending-col{display:flex;flex-direction:column;}

  .ads-horizontal{text-align:center;margin:50px 0;}
  .ads-title{color:#C0C0C0;font-family:"Poppins",sans-serif;font-size:12px;display:block;margin-bottom:10px;text-transform:uppercase;}
  .ads-horizontal img{margin:0 auto;border-radius:10px;}

  /* ===== SINGLE POST ===== */
  .post-header{margin-bottom:24px;}
  .post-header-category{margin-bottom:14px;}
  .post-header .title{font-size:44px;margin-bottom:16px;}
  @media (max-width:575px){.post-header .title{font-size:26px;}}

  .featured-image{margin-bottom:30px;border-radius:14px;overflow:hidden;}
  .featured-image img{width:100%;aspect-ratio:16/9;object-fit:cover;}

  /* #707A88 — measured directly off the reference theme's single-post body
     copy; darker than --muted (#8F9BAD), which is used for lighter meta/
     excerpt text elsewhere, not long-form reading content. */
  .post-content{font-size:16px;line-height:1.9;color:#707A88;}
  .post-content > * + *{margin-top:22px;}
  .post-content h2,.post-content h3,.post-content h4{margin-top:36px;margin-bottom:0;}
  .post-content h2{font-size:26px;}
  .post-content h3{font-size:22px;}
  .post-content h4{font-size:18px;}
  .post-content a{text-decoration:underline;}
  .post-content img{border-radius:10px;}
  .post-content ul,.post-content ol{padding-left:22px;}
  .post-content ul{list-style:disc;}
  .post-content ol{list-style:decimal;}
  .post-content li + li{margin-top:8px;}
  .post-content blockquote{
    margin:0;padding:20px 24px;border-left:4px solid var(--pink);background:#FAFAFC;
    border-radius:0 10px 10px 0;color:var(--navy);font-style:italic;font-size:18px;
  }
  .post-content figcaption,.post-content .wp-caption-text{font-size:14px;color:#6C757D;text-align:center;margin-top:6px;}
  .post-content .alignleft{float:left;margin:6px 24px 16px 0;}
  .post-content .alignright{float:right;margin:6px 0 16px 24px;}
  /* width:fit-content, not just display:block — a <figure> is already
     block-level and stretches to fill the full column by default, so
     margin:auto has zero extra space to distribute either side and visibly
     does nothing until the box is told to shrink to its (narrower) content
     first. */
  .post-content .aligncenter{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;}
  .post-content .wp-caption{max-width:100%;}
  .post-content .wp-caption img{margin:0;}
  .post-content pre{background:var(--navy);color:#fff;padding:20px;border-radius:10px;overflow:auto;}
  .post-content code{background:#F3F4F7;padding:2px 6px;border-radius:4px;font-size:14px;}
  .post-content pre code{background:none;padding:0;}

  .post-bottom-single{margin-top:36px;padding-top:24px;border-top:1px solid var(--border);}
  .row-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}

  .about-author{
    display:flex;gap:20px;align-items:flex-start;background:#F1F8FF;
    border-radius:10px;padding:30px;
  }
  .about-author .thumb img,.about-author .thumb .author{width:80px;height:80px;border-radius:50%;object-fit:cover;flex:none;}
  .about-author .details .name{margin:0 0 8px;font-size:18px;}
  .about-author .details .name a{color:var(--navy);}
  .about-author .details .name a:hover{color:var(--pink);}
  .about-author .details p{margin:0 0 14px;font-size:14px;}
  @media (max-width:575px){.about-author{flex-direction:column;align-items:center;text-align:center;}}

  /* WordPress core comment markup (wp_list_comments/comment_form output —
     unstyled by default, so every selector below targets core's own classes). */
  .comment-list,.comment-list .children{list-style:none;margin:0;padding:0;}
  .comment-list > li.comment + li.comment{margin-top:28px;padding-top:28px;border-top:1px solid var(--border);}
  .comment-list .children{margin:24px 0 0 60px;}
  .comment-list .children > li.comment + li.comment{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);}
  .comment-body{position:relative;padding-left:76px;min-height:56px;}
  .comment-author .avatar{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;}
  .comment-author .fn{font-weight:700;color:var(--navy);font-size:15px;font-style:normal;}
  .comment-author .says{display:none;}
  .comment-metadata{font-size:13px;color:var(--muted);margin-top:2px;}
  .comment-metadata a{color:var(--muted);}
  .comment-metadata .edit-link{margin-left:8px;}
  .comment-content{margin-top:10px;}
  .comment-content p{margin:0 0 10px;}
  .comment-content p:last-child{margin-bottom:0;}
  .comment-reply-link{
    display:inline-block;margin-top:14px;color:#fff;border:0;border-radius:25px;
    font-family:var(--font-body);font-size:12px;font-weight:400;padding:7px 20px;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 51%,var(--pink) 100%);
    background-size:200% auto;transition:all .3s ease-in-out;
  }
  .comment-reply-link:hover{background-position:right center;color:#fff;}
  .comment-awaiting-moderation{display:block;margin-top:8px;font-size:13px;font-style:italic;}
  @media (max-width:575px){
    .comment-list .children{margin-left:20px;}
    .comment-body{padding-left:60px;}
    .comment-author .avatar{width:44px;height:44px;}
  }

  /* ===== SIDEBAR / WIDGETS ===== */
  .widget{border:solid 1px var(--border);padding:35px 30px;margin-bottom:40px;}
  .widget:last-child{margin-bottom:0;}
  .widget.no-container{padding:0;border:0;text-align:center;}
  .widget-header{margin-bottom:30px;position:relative;text-align:center;}
  .widget-title{font-size:20px;margin:0;}

  .widget-about{
    background:url('../images/map-bg.png') center center / cover no-repeat;
    text-align:center;margin:-35px -30px;padding:45px 30px;border-radius:10px;
  }
  .widget-about img{margin:0 auto 20px;}
  .widget-about p{margin:0 0 20px;font-size:14.5px;}
  .widget-about .social-icons{justify-content:center;}

  .widget-content .post-list-sm.circle{position:relative;}
  .widget-content .post-list-sm.circle .thumb .number{
    color:#fff;display:flex;align-items:center;justify-content:center;
    border:solid 2px #fff;border-radius:50%;font-size:12px;font-family:"Poppins",sans-serif;font-weight:700;
    height:24px;width:24px;position:absolute;left:0;top:-10px;z-index:1;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);
    background:linear-gradient(to top,var(--pink) 0%,var(--peach) 100%);
    /* Forces its own GPU compositing layer so the browser always paints this
       badge as one complete unit instead of occasionally compositing it
       mid-scroll against the circular image beneath it (a known class of
       browser rendering glitch for absolutely-positioned elements overlapping
       a border-radius-clipped sibling). */
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  ul.widget-list{list-style:none;padding:0;margin:0;}
  ul.widget-list li{
    display:flex;align-items:center;justify-content:space-between;
    line-height:2.8rem;border-bottom:1px solid var(--border);
  }
  ul.widget-list li:last-child{border-bottom:0;}
  ul.widget-list li a{color:var(--navy);font-weight:700;}
  ul.widget-list li a:before{content:"\2022";color:var(--pink);font-size:11px;margin-right:14px;}
  ul.widget-list li a:hover{color:var(--pink);}
  ul.widget-list li span{color:var(--meta);font-size:14px;}

  .newsletter-headline{font-size:15px;font-weight:bold;color:var(--navy);display:block;text-align:center;margin-bottom:16px;}
  .newsletter-privacy{font-size:13px;display:block;text-align:center;margin-top:14px;}
  .form-control{
    display:block;border-radius:25px;width:100%;padding:8px 24px;font-size:14px;line-height:1.6;
    color:var(--muted);background:#fff;border:solid 1px var(--border);outline:0;text-align:center;font-family:inherit;
  }
  .form-control:focus{border-color:var(--pink);}
  .btn{color:#fff;border:0;border-radius:25px;font-family:"Roboto",sans-serif;font-size:14px;font-weight:400;
    display:inline-block;text-align:center;cursor:pointer;transition:all .3s ease-in-out;}
  .btn-default{padding:9.5px 36px;background:linear-gradient(to right,var(--pink) 0%,var(--peach) 51%,var(--pink) 100%);background-size:200% auto;}
  .btn-default:hover{background-position:right center;}
  .btn-simple{color:var(--muted);padding:9.5px 36px;background:transparent;border:solid 1px var(--border);}
  .btn-simple:hover{color:var(--pink);border-color:var(--pink);}
  .btn-full{width:100%;}

  .widget-carousel-item{position:relative;}
  .widget-carousel-item .thumb{position:relative;border-radius:10px;overflow:hidden;}
  /* aspect-ratio + cover, matching the quickpress-medium (400x300) crop this
     pulls from — without it, a source image WP couldn't hard-crop to that
     size (e.g. smaller than 400x300) falls back to 'full' and renders at
     whatever aspect ratio it happens to have. */
  .widget-carousel-item .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
  .widget-carousel-item .category-badge{position:absolute;left:20px;top:20px;z-index:1;}
  .widget-carousel-item .post-title{font-size:17px;margin:16px 0 8px;}
  .widget-carousel-item .post-title a{color:var(--navy);}
  .widget-carousel-item .post-title a:hover{color:var(--pink);}
  /* Track slides via transform, not a display:none/block swap — a swap
     can't be transitioned at all, so this is what makes it an actual
     sliding motion instead of an instant cut between slides. */
  /* overflow:hidden lives on the outer, non-transformed wrapper — putting it
     on the track itself (the element that actually gets transform:translateX)
     would clip every slide but the first to the track's own static box
     BEFORE the transform is even applied, since an element clips its own
     overflow based on its layout box, independent of any transform on it. */
  .widget-carousel{overflow:hidden;border-radius:10px;}
  .widget-carousel-track{
    display:flex;
    transition:transform .5s cubic-bezier(.4,0,.2,1);
  }
  .widget-carousel-item{flex:0 0 100%;min-width:0;}
  .widget-carousel-nav{display:flex;justify-content:center;gap:12px;margin-top:20px;}
  .widget-carousel-nav button{
    display:flex;align-items:center;justify-content:center;width:36px;height:36px;
    border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--muted);
    cursor:pointer;transition:all .2s ease-in-out;padding:0;
  }
  .widget-carousel-nav button:hover,.widget-carousel-nav button.active{
    background:var(--pink);border-color:var(--pink);color:#fff;
  }
  .slick-arrows-top{position:absolute;top:50%;right:0;transform:translateY(-50%);display:flex;gap:8px;}
  .slick-arrows-bot{display:flex;gap:8px;justify-content:center;margin-top:20px;}
  .slick-custom-buttons{
    width:30px;height:30px;border-radius:50%;border:solid 1px var(--border);background:#fff;
    display:inline-flex;align-items:center;justify-content:center;color:#909090;font-size:10px;cursor:pointer;padding:0;
    transition:all .3s ease-in-out;
  }
  .slick-custom-buttons:hover{color:var(--pink);border-color:var(--pink);}

  .widget-ads{display:block;text-align:center;}
  .widget-ads img{border-radius:10px;margin:0 auto;}

  .tag{color:var(--muted);border:solid 1px var(--border);border-radius:25px;font-size:13px;display:inline-block;padding:3px 14px;margin:4px 4px 0 0;}
  .tag:hover{border-color:var(--pink);color:var(--pink);}

  /* ===== INSPIRATION CAROUSEL ===== */
  .carousel-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
  @media (max-width:575px){.carousel-2col{grid-template-columns:minmax(0,1fr);}}
  .carousel-full{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:991px){.carousel-full{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
  @media (max-width:575px){.carousel-full{grid-template-columns:minmax(0,1fr);}}
  /* Inspiration is the one post-over-content block still requesting the WP
     'large' size, which is uncropped — card height ends up riding on whatever
     aspect ratio the source image happens to have. Every other block pins a
     hard-cropped size instead; do the same here via CSS so it holds for any
     already-uploaded image without needing a thumbnail regen. */
  .carousel-full .post-over-content .thumb img{aspect-ratio:6/5;object-fit:cover;}
  .post-over-content{position:relative;}
  .post-over-content .thumb{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 8px 24px rgba(32,54,86,.2);transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;}
  .post-over-content .thumb:after{content:"";background:var(--navy);display:block;position:absolute;inset:0;opacity:.6;}
  .post-over-content .thumb img{width:100%;display:block;transition:all .3s ease-in-out;}
  .post-over-content:hover .thumb{box-shadow:0 14px 32px rgba(32,54,86,.35);transform:translateY(-4px);}
  .post-over-content:hover .thumb img{transform:scale(1.07);}
  .post-over-content .details{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;}
  .post-over-content .post-title{font-size:22px;margin:12px 0;}
  .post-over-content .post-title a{color:#fff;}
  .post-over-content .post-title a:hover{color:#fff;opacity:.85;}
  .post-over-content .meta{color:rgba(255,255,255,.5);}
  .post-over-content .meta a{color:rgba(255,255,255,.5);}
  .post-over-content .meta li:not(:last-child):after{background:rgba(255,255,255,.5);}

  /* ===== HERO GRID (4 posts: one large + one wide + two small) ===== */
  .hero-grid-section{margin-top:60px;}
  /* minmax(0,1fr), not bare minmax(0,1fr) (= minmax(auto,minmax(0,1fr))) — otherwise a tall image's
     content-based "auto" minimum can force a row past its minmax(0,1fr) share, overflowing
     this fixed-height grid into whatever section follows it. */
  .hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;height:520px;}
  /* Trending Now, the logo row, the nav bar, and Hero Grid all get NO extra
     margin here — their own container-xl (30px padding) is the only inset,
     same as every other body section (Editor's Pick, Trending, Inspiration,
     News Grid all just use plain .container-xl too), so every section's
     left/right edge lines up with every other one's regardless of layout
     mode. Hero Grid has no .container-xl of its own to inherit that from
     (it's a deliberately edge-to-edge grid), so it needs the matching 46px
     as a plain margin instead — same effective inset, same edge as
     everything else, just applied a different way since there's no padded
     wrapper here to piggyback on. */
  body.quickpress-layout-boxed .hero-grid,
  body.quickpress-layout-framed .hero-grid,
  body.quickpress-layout-bordered .hero-grid{margin:0 46px;width:auto;}
  @media (max-width:767px){
    body.quickpress-layout-boxed .hero-grid,
    body.quickpress-layout-framed .hero-grid,
    body.quickpress-layout-bordered .hero-grid{margin:0 12px;}
  }
  .hero-grid-item{height:100%;}
  .hero-grid-item .thumb{height:100%;}
  /* Corner Style (builder block setting) — clean square is the default,
     matching how this block has always looked; opting into "Rounded" adds
     radius + clips the image to it. */
  .hero-grid--rounded .hero-grid-item .thumb{border-radius:10px;overflow:hidden;}
  /* .post-over-content .thumb (shared by every image-overlay card site-wide)
     always applies its own 10px radius — without this, "Square" only ever
     ADDED rounding for the opposite case and never actually removed that
     base radius, so corners stayed rounded regardless of which was picked. */
  .hero-grid--square .hero-grid-item .thumb{border-radius:0;}
  /* Lighter drop shadow than the shared .post-over-content default (site.css
     above) — the standard 0 8px 24px / .2 opacity read as too heavy at this
     block's larger card sizes. */
  .hero-grid-item .thumb{box-shadow:0 4px 12px rgba(32,54,86,.15);}
  .hero-grid-item:hover .thumb{box-shadow:0 8px 20px rgba(32,54,86,.25);transform:none;}
  .hero-grid-item .thumb img{height:100%;object-fit:cover;}
  /* Image Fit: Contain (builder block setting) — the whole image always
     shows, letterboxed, instead of Cover's crop-to-fill. For thumbnails
     that are really infographics (text/numbers right up to the edges),
     Cover regularly crops into real content, not just background — this is
     the escape hatch. Neutral light fill (not pure white) so the letterbox
     bars read as a deliberate mat, not a rendering glitch, and don't clash
     with the color-overlay scrim sitting in front of them. */
  .hero-grid-item .thumb.quickpress-fit-contain img{object-fit:contain;background:#F5F7FA;}
  /* Image Overlay (builder block setting) — a real element with the
     admin-chosen color/opacity, not the shared .post-over-content:after
     pseudo-element (site.css above, fixed navy/60% and un-toggleable). That
     shared one is turned off for this block specifically so the two can't
     both paint at once. */
  .hero-grid-item .thumb:after{content:none;}
  .hero-grid-overlay{position:absolute;inset:0;z-index:0;opacity:.6;pointer-events:none;}
  /* Bottom gradient scrim — separate from the optional flat Image Overlay
     above, always on, so the badge/title/meta stay legible over any photo
     even with that toggle off. Fades from transparent to dark only behind
     the text, not the whole image.
     A real element (.hero-grid-scrim, markup above), sibling to .details
     and to the <a>/.thumb wrapper, not nested inside .thumb. Root cause of
     it randomly losing to the image: .thumb has position:relative, which
     — same as any other positioned-but-z-index:auto element — competes in
     the SAME painting bucket as a z-index:0 sibling, and ties there are
     broken by DOM order. .thumb comes after this element in the markup,
     so at z-index:0 it was always winning and painting over the scrim
     (confirmed via pixel sampling, reproducible with or without hover).
     z-index:1 below (matching .details, which also sits after this in the
     DOM and so still paints above it) puts the scrim in .thumb's bucket
     unambiguously and settles it for good. */
  .hero-grid-scrim{
    position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;
    background:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 20%, rgba(0,0,0,0) 100%);
    pointer-events:none;
  }
  .hero-grid--rounded .hero-grid-scrim{border-radius:0 0 10px 10px;overflow:hidden;}
  .hero-grid-item-main{grid-column:1/3;grid-row:1/3;}
  .hero-grid-item:nth-child(2){grid-column:3/5;grid-row:1/2;}
  .hero-grid-item:nth-child(3){grid-column:3/4;grid-row:2/3;}
  .hero-grid-item:nth-child(4){grid-column:4/5;grid-row:2/3;}
  .hero-grid-item-main .post-title{font-size:26px;margin:6px 0 4px;}
  /* Pushed down closer to the bottom edge (was inheriting the shared
     .post-over-content 20px inset, which sat higher than this denser
     block needs). */
  .hero-grid-item .details{bottom:16px;}
  /* Denser news-grid treatment for this block specifically: a solid,
     sharp-cornered badge instead of the pill/gradient used elsewhere, and
     small chip-style author/date tags sitting directly on the image instead
     of plain dotted meta text — own colors and spacing, not measured from
     anywhere, just a different badge/meta convention for this one block.
     Sized down + bolder — the default pill size read as oversized here,
     eating too much of the card. */
  .hero-grid-item .category-badge{
    border-radius:4px;background:var(--pink);background-size:auto;
    padding:3px 9px;font-size:11px;font-weight:800;
  }
  .hero-grid-item .post-title{font-size:18px;margin:6px 0 4px;}
  /* A safety net for legibility once Image Overlay is turned off — text
     sitting on an unpredictable, possibly-bright photo with no dark wash
     behind it can lose all contrast otherwise. Doesn't reintroduce a visible
     tint, just keeps text readable against whatever the photo happens to be. */
  .hero-grid-item .post-title a,
  .hero-grid-item .meta{text-shadow:0 1px 3px rgba(0,0,0,.5);}
  /* Plain overlay-text meta, matching .featured-post-lg's convention
     (dotted separators, semi-transparent white) instead of a boxed/chip
     treatment that doesn't match the rest of the site. Tighter margin —
     the details block (badge+title+meta) was taking up too much of the
     card; less internal spacing shrinks it and reads as sitting lower. */
  .hero-grid-item .meta{gap:0;margin-top:4px;color:rgba(255,255,255,.7);font-size:12px;}
  .hero-grid-item .meta a{color:rgba(255,255,255,.7);}
  .hero-grid-item .meta li:not(:last-child):after{background:rgba(255,255,255,.7);}
  .hero-grid-item .meta .author{box-shadow:0 0 0 2px rgba(255,255,255,.5);width:20px;height:20px;}
  @media (max-width:991px){
    .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,260px);height:auto;}
    .hero-grid-item-main{grid-column:1/3;grid-row:1/2;}
    .hero-grid-item:nth-child(2){grid-column:1/3;grid-row:2/3;}
    .hero-grid-item:nth-child(3){grid-column:1/2;grid-row:3/4;}
    .hero-grid-item:nth-child(4){grid-column:2/3;grid-row:3/4;}
  }
  /* Paired with a sidebar, .main-col is only ~66% wide regardless of viewport
     — the same 4-col/520px grid used at full width would squeeze each column
     into a narrow, oddly-tall sliver. Collapse to the same 2-col arrangement
     the ≤991px breakpoint already uses, matching how .main-col .tnow-grid
     collapses to 2 columns independent of viewport width. */
  .main-col .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,220px);height:auto;}
  .main-col .hero-grid-item-main{grid-column:1/3;grid-row:1/2;}
  .main-col .hero-grid-item:nth-child(2){grid-column:1/3;grid-row:2/3;}
  .main-col .hero-grid-item:nth-child(3){grid-column:1/2;grid-row:3/4;}
  .main-col .hero-grid-item:nth-child(4){grid-column:2/3;grid-row:3/4;}
  .main-col .hero-grid-section{margin-top:0;}
  /* Phone width: featured post full-width on its own row, the remaining
     three in a 2-column grid below it (item 4 spanning both columns as a
     closing card) — not all four stacked full-width one under another,
     which wasted a lot of scroll for what should read as a compact grid. */
  @media (max-width:575px){
    .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:260px repeat(2,200px);height:auto;gap:4px;}
    .hero-grid-item-main{grid-column:1/3;grid-row:1/2;}
    .hero-grid-item:nth-child(2){grid-column:1/2;grid-row:2/3;}
    .hero-grid-item:nth-child(3){grid-column:2/3;grid-row:2/3;}
    .hero-grid-item:nth-child(4){grid-column:1/3;grid-row:3/4;}
    /* The half-width cards (2 and 3, ~185px wide on a 390px phone) can't
       fit the standard 18px title at full length — it was overflowing the
       card's own bottom-anchored .details box and bleeding into the row
       underneath. Smaller text + a hard 2-line clamp (ellipsis instead of
       a 3rd/4th line) guarantees it never overflows regardless of how long
       the title is, rather than just hoping it happens to fit. */
    .hero-grid-item:nth-child(2) .post-title,
    .hero-grid-item:nth-child(3) .post-title{
      font-size:13px;line-height:1.3;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    }
    .hero-grid-item:nth-child(2) .category-badge,
    .hero-grid-item:nth-child(3) .category-badge{font-size:10px;padding:2px 7px;}
    .hero-grid-item:nth-child(2) .meta,
    .hero-grid-item:nth-child(3) .meta{font-size:10px;}
    /* !important — quickpress_get_avatar() (inc/template-tags.php) renders
       an INLINE style="width:30px;height:30px" on this element, which beats
       any external stylesheet rule regardless of specificity. This is the
       one legitimate case for it: there's no selector-specificity way to
       win against an inline style at all. Smaller than the 20px desktop
       size too — it read as oversized next to the 10-13px text it now
       sits alongside on this block. */
    .hero-grid-item .meta .author{width:16px !important;height:16px !important;}
  }

  /* ===== NEWS GRID ===== */
  /* Even 4-column grid of equal cards — the denser, all-equal counterpart to
     Hero Grid's one-big-plus-three layout. Same badge/meta chip family
     (rectangular badge, icon chips) so the two blocks read as one system. */
  .news-grid-section{margin-top:60px;}
  .news-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;}
  .news-grid-item .thumb{position:relative;display:block;border-radius:10px;overflow:hidden;}
  .news-grid-item .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s ease-in-out;}
  .news-grid-item .thumb:hover img{transform:scale(1.06);}
  .news-grid-item .category-badge{position:absolute;left:16px;top:16px;z-index:1;border-radius:4px;background:var(--pink);background-size:auto;}
  .news-grid-item .details{padding-top:16px;}
  .news-grid-item .post-title{font-size:16px;line-height:1.4;margin:0 0 12px;}
  .news-grid-item .post-title a{color:var(--navy);}
  .news-grid-item .post-title a:hover{color:var(--pink);}
  /* No custom meta styling here — this sits on a plain white card, same
     context as Trending/Editor's Pick/Latest Posts, so it just inherits the
     site's one plain-meta convention (real avatar photo, dot separator)
     instead of introducing a fourth variant. */
  @media (max-width:991px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .main-col .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .main-col .news-grid-section{margin-top:0;}
  /* .main-col .news-grid has no width condition, so it's more specific than
     a bare .news-grid media-query rule and wins at any viewport — these two
     have to target the main-col case explicitly or "With Sidebar" stays
     stuck at 2 columns even on a real phone. */
  @media (max-width:575px){.news-grid,.main-col .news-grid{grid-template-columns:minmax(0,1fr);}}

  /* ===== LATEST POSTS ===== */
  /* Flex, not float+fixed-margin: at the ~66% main-col width this is designed
     for by default, the thumb is pinned to a fixed 265px below. But when
     overridden to Full Width, a fixed thumb + a margin-capped .details left a
     large dead gap on the right instead of using the extra width — flex lets
     the thumb grow to fill that space with a bigger image instead, and
     min-width:0 on .details (the flexbox analog of the grid minmax(0,1fr) fix
     used elsewhere) keeps long titles from forcing the row wider than its box. */
  /* center, not stretch: at 42% width the image's own 4:3 crop renders
     noticeably taller than the text column's natural content height —
     stretch would force .details to that full height and dump all the
     leftover space in one dead gap below the "..." row instead of
     distributing it as balanced breathing room above and below. */
  .post-list{display:flex;gap:32px;align-items:center;margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid var(--border);}
  .post-list:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0;}
  .post-list .thumb{flex:0 0 42%;max-width:480px;position:relative;border-radius:10px;overflow:hidden;}
  .post-list .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .post-list .details{flex:1 1 auto;min-width:0;}
  /* Paired with the sidebar, .row-main caps .main-col to ~66% width — the
     Full Width sizing above would squeeze a 42%-flex thumb down to an oddly
     narrow sliver there, so pin it back to the fixed width this component
     was originally designed around at that column width. */
  .row-main .post-list .thumb{flex:0 0 265px;max-width:265px;}
  @media (max-width:767px){.post-list{flex-direction:column;}.post-list .thumb{flex-basis:auto;max-width:100%;margin-bottom:20px;}}
  .post-list .post-title{margin:9px 0;font-size:20px;}
  .post-list .post-title a{color:var(--navy);}
  .post-list .post-title a:hover{color:var(--pink);}
  .post-format-sm{
    color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;
    font-size:14px;height:30px;width:30px;position:absolute;left:20px;top:20px;z-index:1;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);
    background:linear-gradient(to top,var(--pink) 0%,var(--peach) 100%);
  }
  .post-bottom{margin-top:9px;display:flex;align-items:center;}
  .social-share{margin-right:auto;display:flex;align-items:center;}
  .social-share .toggle-button{
    font-size:16px;color:var(--meta);background:transparent;border:0;padding:0;cursor:pointer;
    display:inline-flex;align-items:center;vertical-align:middle;
  }
  .social-share .icons{list-style:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:.8rem;
    opacity:0;visibility:hidden;transition:all .2s ease-in-out;}
  .social-share .icons:before{content:"";background:#DDD;display:inline-block;height:1px;width:30px;margin-right:.8rem;}
  .post-list:hover .social-share .icons,
  .social-share .icons.show{opacity:1;visibility:visible;}
  .social-share .icons a{color:var(--meta);font-size:14px;}
  .social-share .icons a:hover{color:var(--navy);}
  .more-button a{font-size:16px;font-weight:700;color:var(--meta);display:inline-flex;align-items:center;}
  .more-button a:hover{color:var(--pink);}

  .load-more-wrap{text-align:center;margin-top:10px;}

  /* ===== INSTAGRAM FEED ===== */
  .instagram{margin:60px 0 0;position:relative;}
  .btn-instagram{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;}
  .instagram-feed{display:flex;flex-wrap:wrap;margin:0 -2.5px;}
  .insta-item{width:16.6667%;padding:0 2.5px;overflow:hidden;}
  /* Instagram grids are conventionally square — pin it so this still holds
     up if these demo images are ever swapped for a real feed of arbitrary
     uploaded photos, not just for the bundled square placeholders. */
  .insta-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:10px;}
  @media (max-width:767px){.insta-item{width:33.3333%;margin-bottom:5px;}}

  /* ===== FOOTER ===== */
  footer{margin-top:50px;}
  .footer-inner{border-top:1px solid var(--border);padding:40px 0;}
  .footer-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px;}
  .footer-row>div{flex:1 1 0;min-width:220px;}
  .copyright{color:var(--meta);}
  .footer-social{display:flex;justify-content:center;}
  #return-to-top{
    color:var(--muted);font-size:13px;border:solid 1px var(--border);border-radius:25px;
    padding:6px 20px;display:inline-flex;align-items:center;float:right;transition:all .3s ease-in-out;
  }
  #return-to-top i{font-size:11px;margin-right:10px;}
  #return-to-top:hover{color:var(--pink);border-color:var(--pink);}
  @media (max-width:767px){.footer-row{flex-direction:column;text-align:center;}.footer-row>div{flex:none;}#return-to-top{float:none;}}

  /* ===== MOBILE NAV ===== */
  @media (max-width:991px){
    .navbar-collapse{display:none !important;}
  }
  /* "Show menu button on desktop" (Theme Options -> Header & Logo), Layout 1
     only — Layout 2 already hides #burgerBtn above 991px unconditionally
     (site.css above), so this class has nothing left to override there.
     Desktop-only hide, same 991px collapse breakpoint as .navbar-collapse
     above — the button still has to come back below it, or mobile/tablet
     would lose their only way to open the nav. */
  body.quickpress-hide-desktop-burger #burgerBtn{display:none;}
  @media (max-width:991px){
    body.quickpress-hide-desktop-burger #burgerBtn{display:inline-flex;}
  }
  @media (max-width:1199px){
    .header-right .social-icons{display:none;}
  }
  @media (max-width:575px){
    .header-buttons{margin-left:20px;}
  }

  /* ===== OFF-CANVAS MENU ===== */
  /* z-index:100/101, not 5/6 — the sticky header (Theme Options -> Header &
     Logo) sits at z-index:99, added after these off-canvas values were
     first set. Left as-is, the sticky header rendered ON TOP of this
     overlay + drawer instead of being covered by them, defeating the
     whole point of an off-canvas menu. */
  /* No blur filter — animating a blurred, fixed, full-viewport layer forces
     the browser to repaint the blur every frame instead of just compositing
     an opacity change, which is exactly what made this fade feel janky
     rather than smooth. will-change hints both elements onto their own
     compositor layer ahead of time instead of promoting them mid-animation. */
  .main-overlay{
    opacity:0;visibility:hidden;background:var(--navy);position:fixed;inset:0;
    height:100vh;width:100%;z-index:100;transition:opacity .35s cubic-bezier(.4,0,.2,1),visibility .35s;
    will-change:opacity;
  }
  .main-overlay.active{opacity:.6;visibility:visible;}

  /* The first homepage builder block carries the same margin-top other
     full-width blocks use for spacing BETWEEN sections — right after the
     header that just reads as an oversized gap. Zero it out for whichever
     block happens to render first there. Scoped to body.home only — single.php/
     category.php/page.php reuse the exact same .main-content class for their
     actual content wrapper (not a "between blocks" spacer), and need to keep
     the normal header-to-content gap. */
  body.home .site-wrapper > .main-overlay + *{margin-top:0;}
  /* Hero Grid specifically still wants a small gap even as the first
     homepage block — with the ad banner (that used to sit right under the
     header) removed and its own .container-xl wrapper gone (now edge-to-edge),
     zeroing its margin-top the same as other first-blocks left it flush
     against the header with nothing separating them. More specific than the
     bare *-selector above (extra class), so this wins over it. */
  body.home .site-wrapper > .main-overlay + .hero-grid-section{margin-top:24px;}
  @media (max-width:767px){
    body.home .site-wrapper > .main-overlay + .hero-grid-section{margin-top:10px;}
  }

  .canvas-menu{
    background:#fff;height:100vh;overflow-y:auto;overflow-x:hidden;padding:40px;
    position:fixed;right:0;top:0;width:300px;max-width:85vw;z-index:101;
    box-shadow:-4px 0 20px rgba(32,54,86,.1);
    transform:translateX(110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  .canvas-menu.open{transform:translateX(0);}
  /* A real circular button (matches the .icon-button convention used
     elsewhere), not a bare 50%-opacity "×" character floating with no
     visible shape — that read as barely-there text, not a button. */
  .canvas-menu .btn-close{
    width:34px;height:34px;position:absolute;display:flex;align-items:center;justify-content:center;
    color:var(--navy);border:1px solid var(--border);background:#fff;border-radius:50%;
    opacity:1;right:24px;top:24px;font-size:20px;line-height:1;cursor:pointer;transition:all .2s ease-in-out;
  }
  .canvas-menu .btn-close:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
  .canvas-logo{margin-bottom:60px;margin-top:40px;width:100%;}
  .canvas-menu nav{width:100%;}
  .vertical-menu{list-style:none;padding:0;margin:0;}
  .vertical-menu li{padding:0;position:relative;}
  .vertical-menu li:after{content:"";display:block;height:1px;margin:10px 0;width:100%;background:linear-gradient(to right,var(--border) 0%,transparent 100%);}
  .vertical-menu li.active>a{color:var(--pink);}
  .vertical-menu li>a{color:var(--navy);font-family:"Poppins",sans-serif;font-size:15px;font-weight:400;text-decoration:none;display:inline-block;}
  /* .sub-menu (hyphenated) is what wp_nav_menu() actually outputs for a real
     assigned menu's nested items by default — .submenu alone only ever
     matched a name nothing in this theme's real menu output uses, leaving
     an actual 2nd/3rd-level list here with no default-hidden state and no
     indentation at all. Both selectors kept together so anything already
     relying on the unhyphenated name (if any) keeps working too. */
  .submenu, .vertical-menu .sub-menu{display:none;padding:8px 0 0 16px;list-style:none;margin:0;}
  .submenu li, .vertical-menu .sub-menu li{padding:5px 0;}
  .submenu li:after, .vertical-menu .sub-menu li:after{display:none;}
  .submenu li a, .vertical-menu .sub-menu li a{color:var(--nav-link);font-size:14px;font-weight:400;text-decoration:none;}
  .submenu li a:hover, .vertical-menu .sub-menu li a:hover{color:var(--navy);}
  .canvas-social{margin-top:40px;display:flex;gap:16px;}

  /* ===== SEARCH OVERLAY (header icon opens this instead of an inline input) =====
     z-index:200 — higher than the sticky header (99) and the off-canvas
     menu (100/101), since this has to cover the whole page including both
     of those regardless of what else happens to be open. Same
     opacity+visibility+will-change approach as .main-overlay above, for the
     same reason: a smooth compositor-only fade instead of a jarring cut. */
  .search-overlay{
    position:fixed;inset:0;z-index:200;background:#fff;
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transform:scale(1.03);
    transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1),visibility .35s;
    will-change:opacity,transform;
  }
  .search-overlay.open{opacity:1;visibility:visible;transform:scale(1);}
  .search-overlay-close{
    position:absolute;top:30px;right:30px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;font-size:30px;line-height:1;color:var(--muted);cursor:pointer;
    transition:color .2s ease-in-out,transform .3s cubic-bezier(.4,0,.2,1);
  }
  .search-overlay-close:hover{color:var(--navy);transform:rotate(90deg);}
  .search-overlay-inner{width:100%;max-width:640px;padding:0 24px;text-align:center;}
  .search-overlay-hint{font-family:var(--font-heading);font-weight:700;font-size:24px;color:var(--navy);margin:0 0 30px;}
  .search-overlay-form{display:flex;align-items:center;gap:14px;}
  .search-overlay-form input[type="search"]{
    flex:1;min-width:0;height:56px;border-radius:28px;border:1px solid var(--border);
    padding:0 26px;font-size:16px;color:var(--navy);font-family:var(--font-body);
    transition:border-color .2s ease-in-out;
  }
  .search-overlay-form input[type="search"]:focus{outline:0;border-color:var(--pink);}
  .search-overlay-form input[type="search"]::placeholder{color:var(--muted);}
  .search-overlay-form button{
    flex:none;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 100%);color:#fff;
    display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out;
  }
  .search-overlay-form button:hover{transform:scale(1.06);}
  @media (max-width:575px){
    .search-overlay-hint{font-size:18px;}
    .search-overlay-form input[type="search"]{height:48px;padding:0 20px;}
    .search-overlay-form button{width:48px;height:48px;}
  }

  /* ===== MOBILE CONTENT ADJUSTMENTS (matches theme's max-width:767px rules) ===== */
  @media (max-width:767px){
    .featured-post-lg .thumb .inner{height:425px;}
    .featured-post-lg .post-title{font-size:26px;}
    .featured-post-lg .details{left:30px;right:30px;bottom:30px;}
    .meta li:not(:last-child):after{margin-left:.5rem;}
    .meta li:not(:last-child){margin-right:.3rem;}
    .insta-item{text-align:center;}
    .footer-inner{text-align:center;}
  }

  /* ===== BREADCRUMB (shared across pages) ===== */
  .breadcrumb{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 20px;font-size:14px;}
  .breadcrumb li{display:flex;align-items:center;}
  .breadcrumb li+li:before{content:"/";color:#6C757D;margin:0 8px;}
  .breadcrumb li a{color:var(--meta);}
  .breadcrumb li a:hover{color:var(--pink);}
  .breadcrumb li.active{color:var(--meta);}

  /* ===== TRENDING NEWS BOX ===== */
  .tn-box{background:#FFF9EC;border-radius:10px;padding:30px;}
  .tn-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:20px;margin-bottom:30px;border-bottom:1px solid var(--border);}
  .tn-title{font-size:22px;margin:0;position:relative;padding-bottom:10px;}
  .tn-title:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;background:linear-gradient(to right,var(--pink),var(--peach));}
  .tn-tabs{display:flex;gap:22px;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
  .tn-tabs a{color:var(--muted);font-family:"Poppins",sans-serif;font-size:14px;font-weight:500;}
  .tn-tabs a.active,.tn-tabs a:hover{color:var(--pink);}

  .tn-grid{display:grid;grid-template-columns:minmax(0,1fr) 1.15fr;gap:30px;transition:opacity .2s ease;}
  @media (max-width:767px){.tn-grid{grid-template-columns:minmax(0,1fr);}}

  .tn-featured .thumb{position:relative;border-radius:10px;overflow:hidden;}
  .tn-featured .thumb img{width:100%;height:250px;object-fit:cover;display:block;transition:all .3s ease-in-out;}
  .tn-featured .thumb:hover img{transform:scale(1.07);}
  .tn-bolt{
    position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;
    background:linear-gradient(to top,var(--pink) 0%,var(--peach) 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);z-index:1;
  }
  .tn-featured .category-badge{position:absolute;right:16px;bottom:16px;z-index:1;}
  .tn-featured .tn-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:14px 0 10px;font-size:13px;color:var(--meta);}
  .tn-featured .tn-meta span{display:inline-flex;align-items:center;gap:6px;}
  .tn-featured .tn-meta .tn-views{color:var(--pink);font-weight:600;}
  .tn-featured .post-title{font-size:21px;margin:0 0 10px;}
  .tn-featured .post-title a{color:var(--navy);}
  .tn-featured .post-title a:hover{color:var(--pink);}
  .tn-featured .excerpt{font-size:14.5px;margin:0 0 18px;line-height:1.65;}
  .tn-readmore{
    display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:500;
    padding:10px 24px;border-radius:25px;margin-top:20px;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 51%,var(--pink) 100%);
    background-size:200% auto;transition:all .3s ease-in-out;
  }
  .tn-readmore:hover{background-position:right center;color:#fff;}

  .tn-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;justify-content:center;height:100%;}
  .tn-list li{display:flex;gap:16px;align-items:flex-start;}
  .tn-list li:not(:last-child){margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border);}
  .tn-list .thumb{position:relative;width:110px;min-width:110px;height:90px;border-radius:8px;overflow:hidden;}
  .tn-list .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .tn-list .tn-bolt-sm{
    position:absolute;left:6px;top:6px;width:20px;height:20px;border-radius:50%;
    background:linear-gradient(to top,var(--pink) 0%,var(--peach) 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;z-index:1;
  }
  .tn-list .tn-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--meta);margin-bottom:6px;}
  .tn-list .post-title{font-size:15px;margin:0 0 8px;line-height:1.4;}
  .tn-list .post-title a{color:var(--navy);}
  .tn-list .post-title a:hover{color:var(--pink);}
  .tn-list .tn-excerpt{font-size:13px;color:var(--muted);margin:0;line-height:1.6;}
  @media (max-width:575px){.tn-header{flex-direction:column;align-items:flex-start;}}

  /* ===== WEATHER WIDGET ===== */
  .weather-widget{text-align:center;}
  .weather-row{display:flex;align-items:flex-start;justify-content:center;gap:28px;margin-bottom:28px;}
  .weather-col-left{display:flex;flex-direction:column;align-items:center;}
  .weather-col-right{display:flex;flex-direction:column;align-items:flex-start;padding-top:6px;}
  .sun-icon{width:50px;height:50px;color:var(--pink);flex-shrink:0;animation:sun-spin 16s linear infinite;transform-origin:50% 50%;}
  .weather-temp-now{font-size:40px;font-weight:700;color:var(--pink);line-height:1;margin-bottom:10px;}
  .weather-temp-now sup{font-size:15px;font-weight:500;margin-left:2px;top:-1.2em;}
  .weather-city{font-size:18px;font-weight:700;color:var(--pink);line-height:1.4;margin-top:8px;}
  .weather-desc{font-size:13px;color:var(--pink);opacity:.75;}
  .weather-stats{font-size:13px;color:var(--pink);text-align:left;}
  .weather-stats div{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
  .weather-stats div:last-child{margin-bottom:0;}
  .wstat-icon{width:14px;height:14px;flex-shrink:0;vertical-align:-2px;}
  .weather-forecast{display:flex;justify-content:space-between;gap:4px;}
  .weather-day{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;flex:1;}
  .weather-day .sun-icon{width:46px;height:46px;stroke-width:1.8;animation-duration:10s;}
  .weather-day .wd-temp{font-weight:700;color:var(--navy);font-size:13px;}
  .weather-day .wd-name{color:var(--pink);font-weight:600;}
  @media (max-width:400px){.weather-forecast{flex-wrap:wrap;row-gap:14px;}.weather-day{flex:0 0 20%;}}

  @keyframes sun-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  /* ===== FORM BOX (shared: comment form, contact form) ===== */
  .btn-sm{padding:7px 20px;font-size:12px;}
  .comment-form textarea.form-control,.contact-form textarea.form-control{border-radius:20px;resize:vertical;text-align:left;padding:14px 24px;}
  .comment-form input.form-control,.contact-form input.form-control{text-align:left;}
  .comment-form .form-group,.contact-form .form-group{margin-bottom:20px;}
  .comment-form .form-row,.contact-form .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
  @media (max-width:575px){.comment-form .form-row,.contact-form .form-row{grid-template-columns:minmax(0,1fr);}}
  .form-message{display:none;margin-bottom:20px;padding:14px 20px;border-radius:10px;font-size:14px;}
  .form-message.success{display:block;background:#EAF9EE;color:#1E7B3E;border:1px solid #C7EDD1;}

  /* ===== CONTACT PAGE ===== */
  .contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:24px;margin-bottom:50px;}
  @media (max-width:767px){.contact-row{grid-template-columns:minmax(0,1fr);}}
  .contact-item{display:flex;align-items:center;padding:25px;}
  .contact-item .icon{
    color:#fff;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:23px;height:50px;width:50px;margin-right:20px;
    background:linear-gradient(to right,var(--pink) 0%,var(--peach) 100%);
  }
  .contact-item h3{font-size:18px;margin:0 0 4px;}
  .contact-item p{margin:0;color:var(--muted);}

  /* ===== PAGE HEADER (shared across inner pages) ===== */
  .page-header{background:#FFF6E6;padding:40px 0;text-align:center;}
  .page-header h1{font-size:30px;margin:0 0 10px;}
  .page-header .breadcrumb{justify-content:center;margin:0;}

  /* ===== EDITOR'S PICK BOX ===== */
  .editors-pick-box{background:#F2F5FA;border-color:#E4EAF4;margin-top:50px;}

  /* ===== TRENDING NOW (full width) ===== */
  .trending-now-box{background:#FFF9EC;padding:40px 0;margin-top:50px;}
  .tnow-title{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:30px;}
  .tnow-title h3{
    font-size:18px;letter-spacing:1px;text-transform:uppercase;margin:0;white-space:nowrap;color:var(--navy);
  }
  .tnow-line{flex:1;max-width:280px;height:2px;background:linear-gradient(to right,transparent,var(--pink),var(--peach));}
  .tnow-line:last-child{background:linear-gradient(to left,transparent,var(--pink),var(--peach));}
  .tnow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;}
  @media (max-width:767px){.tnow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
  @media (max-width:575px){.tnow-grid{grid-template-columns:minmax(0,1fr);}}
  .tnow-item{display:flex;gap:16px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--border);}
  .tnow-item img{width:80px;height:70px;object-fit:cover;border-radius:8px;flex-shrink:0;}
  .tnow-item h6{font-size:14.5px;line-height:1.4;margin:0 0 8px;color:var(--navy);}
  .tnow-item:hover h6{color:var(--pink);}
  .tnow-item span{font-size:12px;color:var(--meta);}

  /* ===== POST GRID (3 columns, no sidebar — category archive) =====
     Grid, not CSS multi-column (column-count) — multi-column layout only
     balances content across columns when the container has a CONSTRAINED
     height; with height:auto (this container has no fixed height, and
     shouldn't need one for a simple list of cards), Chrome doesn't balance
     at all and instead stacks every single item into column 1, leaving
     columns 2 and 3 completely empty — a real, longstanding Chromium
     limitation, not something fixable by tuning column-count/column-gap.
     Grid has no such requirement and distributes items left-to-right,
     wrapping every 3, on every browser. */
  .post-grid-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
  @media (max-width:991px){.post-grid-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:575px){.post-grid-row{grid-template-columns:1fr;}}

  .post-grid{position:relative;width:100%;}
  .post-grid .thumb{position:relative;overflow:hidden;border-top-left-radius:10px;border-top-right-radius:10px;}
  .post-grid .thumb .category-badge{position:absolute;left:20px;top:20px;z-index:1;}
  /* aspect-ratio + cover, matching the quickpress-medium (400x300) crop
     quickpress_post_thumb_url()'s default pulls — the category archive is the one
     view every visitor hits with whatever mix of image shapes gets uploaded,
     so an uncapped ratio here is the one most likely to actually look broken. */
  .post-grid .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:all .3s ease-in-out;}
  .post-grid .thumb:hover img{transform:scale(1.07);}
  .post-grid .details{padding:30px;}
  .post-grid .details .post-title{font-size:20px;margin:16px 0 12px;}
  .post-grid .details .post-title a{color:var(--navy);}
  .post-grid .details .post-title a:hover{color:var(--pink);}
  .post-grid .details .excerpt{font-size:16px;margin:0;}
  .post-grid .post-bottom{border-top:1px solid var(--border);margin:0 30px;padding:20px 0;display:flex;align-items:center;}

  /* ===== PAGINATION (category archive) ===== */
  .pagination{display:flex;list-style:none;padding:0;margin:40px 0 0;justify-content:center;gap:10px;}
  .page-link{
    display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:50%;
    font-size:14px;text-decoration:none;border:solid 1px var(--border);height:45px;width:45px;
    transition:all .15s ease-in-out;
  }
  .page-item.active .page-link{
    color:#fff;border-color:transparent;
    background:linear-gradient(to top,var(--peach) 0%,var(--pink) 51%,var(--peach) 100%);
    background-size:auto 200%;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.15);
  }
  .page-link:hover{
    color:#fff;border-color:transparent;
    background:linear-gradient(to top,var(--peach) 0%,var(--pink) 51%,var(--peach) 100%);
    background-size:auto 200%;
  }

  /* ===== AD SLOTS ===== */
  .quickpress-ad-slot{margin:24px 0;text-align:center;overflow:hidden;}
  .quickpress-ad-slot:empty{display:none;}
  .quickpress-ad-slot img{margin:0 auto;}
  @media (max-width:767px){.quickpress-ad-hide-mobile{display:none;}}

  /* ===== AD BLOCKER DETECTOR ===== */
  .quickpress-adblock-banner{
    position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);
    background:var(--navy);color:#fff;padding:14px 44px 14px 20px;border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:9999;max-width:90vw;font-size:14px;
    display:flex;align-items:center;gap:12px;opacity:0;transition:all .3s ease-in-out;
  }
  .quickpress-adblock-banner.show{opacity:1;transform:translate(-50%,0);}
  .quickpress-adblock-banner button{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;
    color:#fff;opacity:.6;font-size:18px;line-height:1;cursor:pointer;padding:4px;
  }
  .quickpress-adblock-banner button:hover{opacity:1;}

  /* ===== FLOOR AD ===== */
  .quickpress-floor-ad{
    position:fixed;left:0;right:0;bottom:0;width:100%;z-index:9998;
    background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.15);
    display:flex;align-items:center;justify-content:center;padding:6px 40px 6px 6px;
  }
  .quickpress-floor-ad-inner{max-width:100%;overflow:hidden;}
  .quickpress-floor-ad-close{
    position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);border:0;border-radius:50%;
    color:#fff;width:22px;height:22px;line-height:1;font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;z-index:1;
  }
  .quickpress-floor-ad-close:hover{background:rgba(0,0,0,.8);}

  /* ===== LIGHTBOX ===== */
  .quickpress-lightbox{
    position:fixed;inset:0;z-index:10000;background:rgba(21,32,52,.95);
    display:flex;align-items:center;justify-content:center;padding:40px;
    opacity:0;visibility:hidden;transition:all .25s ease-in-out;
  }
  .quickpress-lightbox.open{opacity:1;visibility:visible;}
  .quickpress-lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
  .quickpress-lightbox-close{
    position:absolute;right:24px;top:24px;background:transparent;border:0;color:#fff;opacity:.7;
    font-size:32px;line-height:1;cursor:pointer;padding:4px;
  }
  .quickpress-lightbox-close:hover{opacity:1;}

  /* ===== SECTIONS FORCED INTO THE SIDEBAR-PAIRED COLUMN (Layout: "With Sidebar" override) =====
     Media queries alone only respond to viewport width, not this narrower column, so grids
     designed for full-bleed width need fewer columns here or they'd cram/overlap. */
  .main-col .tnow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  @media (max-width:575px){.main-col .tnow-grid{grid-template-columns:minmax(0,1fr);}}
  .main-col .carousel-full{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  @media (max-width:575px){.main-col .carousel-full{grid-template-columns:minmax(0,1fr);}}
  .main-col .row-hero{grid-template-columns:minmax(0,1fr);}
  .main-col .trending-now-box{padding:30px 0;}

  /* ===== CORNER STYLE (per-block Settings -> Corner Style: Square) =====
     Trending News, Inspiration, Latest Posts, News Grid and Trending Now all
     bake their image radius into an unconditional base rule (unlike Hero /
     Trending / Editor's Pick, which toggle the shared .rounded utility class,
     and Hero Grid, which has its own --square modifier already). This single
     override — added after those base rules, same specificity, so normal
     cascade order lets it win — covers all five at once instead of five
     bespoke modifier classes. */
  .quickpress-square-images .thumb{border-radius:0;}
  .quickpress-square-images .tnow-item img{border-radius:0;}