/* =========================================================================
   PrinterDojo NEXT-LEVEL v3 (loaded after modern.css)
   New logo, extraordinary hero animations, premium FAQ, single-post reading
   experience, footer CTA, card micro-interactions. Reduced-motion honored.
   ========================================================================= */

/* ---------------- LOGO v2 ---------------- */
.brand__logo--v2{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand__logo--v2 .brand__mark{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--grad-brand); box-shadow:0 8px 20px -8px var(--ring), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.brand__logo--v2 .brand__mark::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 45%); }
.brand__logo--v2 .brand__mark svg{ position:relative; z-index:1; }
.brand__logo--v2 .brand__text{ font-family:var(--font-heading); font-weight:800; letter-spacing:-.03em; font-size:1.35rem; line-height:1; }
.brand__a{ color:var(--neutral-900); }
.brand__b{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand__logo--v2:hover .brand__mark{ transform:rotate(-5deg) scale(1.06); }

/* ---------------- HERO: extraordinary ---------------- */
.hero{ isolation:isolate; }
.hero__bg::before{ content:""; position:absolute; inset:-20%; z-index:-3;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(20,184,166,.55), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(6,182,212,.5), transparent 60%),
    radial-gradient(50% 60% at 60% 90%, rgba(245,158,11,.28), transparent 60%);
  filter:blur(30px); animation:pd-aurora 22s ease-in-out infinite alternate; }
@keyframes pd-aurora{ 0%{ transform:translate3d(0,0,0) rotate(0deg); } 100%{ transform:translate3d(0,-4%,0) rotate(6deg); } }
.hero__mesh{ position:absolute; inset:0; z-index:-2; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000, transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 35%, #000, transparent 75%); }
.hero__title-accent{ background:linear-gradient(100deg,#5eead4 0%,#22d3ee 35%,#fbbf24 60%,#5eead4 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:pd-shimmer 7s linear infinite; }
@keyframes pd-shimmer{ to{ background-position:220% 0; } }
.hero__title .reveal{ opacity:0; transform:translateY(24px); animation:pd-rise .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0ms); }
.hero__eyebrow.reveal,.hero__subtitle.reveal,.hero__actions.reveal,.hero__search.reveal,.hero__badges.reveal{
  opacity:0; transform:translateY(18px); animation:pd-rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0ms); }
@keyframes pd-rise{ to{ opacity:1; transform:none; } }
.hero__badges li{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); color:#fff; font-weight:600; font-size:.85rem;
  animation:pd-bob 5s ease-in-out infinite; }
.hero__badges li:nth-child(2){ animation-delay:-1.6s; }
.hero__badges li:nth-child(3){ animation-delay:-3.2s; }
@keyframes pd-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }

/* The hero is a fully controlled, always-on-brand animated gradient. We do NOT
   render the newest post's photo (it can be off-brand, carry text, etc.). The
   aurora + mesh grid + floating blobs ARE the hero. */
.hero__image{ display:none !important; }
/* Soft brand spotlight fills the right side where movement lives, plus a vignette
   to seat the content and add depth. */
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 55% at 82% 42%, rgba(20,184,166,.22), transparent 62%),
    radial-gradient(120% 95% at 50% -5%, transparent 52%, rgba(4,8,14,.5) 100%); }
/* Make the mesh grid read a touch more so the hero has fine tactile texture. */
.hero__mesh{ opacity:.7; }

/* ---------------- TESTIMONIAL attribution (no dash) ---------------- */
.testimonial figcaption{ display:flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--font-heading); font-weight:700; font-size:.95rem; color:var(--primary-700); }
.testimonial figcaption::before{ content:""; width:1.5rem; height:2px; background:var(--grad-brand); border-radius:2px; flex:0 0 auto; }

/* ---------------- SECTION HEADERS: eyebrow stacked above title ----------------
   Most section heads put <span.eyebrow> + <h2.title> as direct flex children of a
   space-between head, which flings them to opposite edges. Force each onto its own
   full-width row so the eyebrow sits neatly above a left-aligned title (matching
   the "Latest articles" head, which already wraps them in a div). */
.section__head > .section__eyebrow{ flex:0 0 100%; }
.section__head > .section__title{ flex:0 0 100%; margin-top:.15rem; }

/* ---------------- FIX: tag-archive layout collapse ----------------
   WordPress adds the class `tag` to <body> on tag-archive pages. theme.css has a
   `.tag { display:inline-flex }` chip rule (and `.tag::before{content:"#"}`) that
   therefore matched <body>, laying header/main/footer out as a shrinking flex row
   (main collapsed to ~190px). Nothing in the markup uses class="tag" (tag links
   use rel="tag"), so neutralizing the body-level match is safe and complete. */
body.tag{
  display:block;
  margin:0; padding:0;                 /* .tag chip leaked padding:.5em .9em onto <body> */
  border:0; border-radius:0;           /* ...and a 1px border + pill radius */
  background:var(--bg); color:var(--text);            /* ...and neutral-100 bg / neutral-700 text */
  font-size:var(--step-0); font-weight:400; line-height:var(--leading-body);  /* ...and a smaller/bolder font */
  gap:normal;
}
body.tag::before{ content:none; }

/* Archive layout: kill the large empty gap between the topic hero band and the
   first article grid. The hero had margin-bottom:80px AND the section added
   ~117px top padding = ~197px of dead space. Tighten to one clean gap. */
body.archive .archive-hero{ margin-bottom:0; }
body.archive .site-main .section{ padding-top:2.75rem; }

/* Archive side-space: on wide screens the content sat in a 1200px column with
   ~350px gutters while the hero band was near full-bleed. Widen the content +
   footer container and let the card grid flow into more columns so the page fills
   the screen. Scoped to archives (homepage + single posts keep their widths). */
body.archive .site-main .wrap,
body.archive .site-footer .wrap{ max-width:min(1560px, 92vw); }
body.archive .card-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }

/* Mobile drawer blur fix: the backdrop is after the panel in the DOM and both are
   z-index:auto, so the dark blurred scrim rendered ON TOP of the white menu panel
   (greyed-out, blurry menu). Lift the panel above the scrim so the menu is crisp. */
.mobile-drawer__backdrop{ z-index:1; }
.mobile-drawer__panel{ z-index:2; }

/* ---------------- BREADCRUMBS: modern trail ----------------
   theme.css adds a "/" via li::after AND the function prints a "›" span, so the
   trail rendered "Home /› Paper Jams". Kill the duplicate, keep the chevron, and
   give links a muted hover-pill treatment with a home glyph on the first crumb. */
.breadcrumbs{ font-size:.82rem; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.12rem; list-style:none; margin:0; padding:0; }
.breadcrumbs li{ display:inline-flex; align-items:center; gap:0; margin:0; min-width:0; }
.breadcrumbs li:not(:last-child)::after{ content:none !important; }   /* remove duplicate "/" */
.breadcrumbs__sep{ color:var(--text-muted); opacity:.5; margin:0 .12rem; font-size:1.05em; line-height:1; -webkit-user-select:none; user-select:none; }
.breadcrumbs a{ display:inline-flex; align-items:center; gap:.32rem; color:var(--text-muted); font-weight:600; text-decoration:none;
  padding:.16rem .45rem; border-radius:7px; transition:color .2s ease, background .2s ease; }
.breadcrumbs a:hover{ color:var(--primary-700); background:var(--primary-50); text-decoration:none; }
.breadcrumbs a:focus-visible{ outline:2px solid var(--primary-500); outline-offset:2px; }
.breadcrumbs li:first-child a::before{ content:""; width:.92em; height:.92em; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%2021%2010.5V21H3V10.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%2021%2010.5V21H3V10.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.breadcrumbs [aria-current="page"]{ color:var(--neutral-900); font-weight:700; padding:.16rem .1rem;
  max-width:min(56ch,50vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* On the dark archive hero, invert the palette. */
.archive-hero .breadcrumbs a{ color:rgba(255,255,255,.82); }
.archive-hero .breadcrumbs a:hover{ color:#fff; background:rgba(255,255,255,.14); }
.archive-hero .breadcrumbs [aria-current="page"]{ color:#fff; }
.archive-hero .breadcrumbs__sep{ color:rgba(255,255,255,.65); opacity:.85; }
@media (max-width:520px){ .breadcrumbs{ font-size:.78rem; } .breadcrumbs [aria-current="page"]{ max-width:58vw; } }

/* ---------------- HOMEPAGE FAQ: single chevron indicator ----------------
   The template renders a literal "+" (.faq__icon) AND theme.css draws a chevron
   (.faq__q::after). Two indicators is redundant, and the chevron's open rotation
   was bound to .faq__item[open] (these are <div>s, so [open] never matches). Drop
   the "+" and drive the chevron off aria-expanded instead. */
.faq__q .faq__icon{ display:none; }
.faq__q[aria-expanded="true"]::after{ transform:rotate(-135deg); }
.faq__q::after{ transition:transform .3s ease; }

/* ---------------- READING PROGRESS BAR (single) ---------------- */
.pd-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:var(--grad-brand); box-shadow:0 0 12px var(--ring); transition:width .08s linear; }

/* ---------------- TOC active state ---------------- */
.toc{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem; box-shadow:var(--shadow-xs); }
.toc__title{ font-family:var(--font-heading); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-700); margin:0 0 .6rem; }
.toc__list{ list-style:none; margin:0; padding:0; }
.toc__list a{ display:block; padding:.35rem .75rem; border-left:2px solid transparent; color:var(--text-muted); text-decoration:none; font-size:.9rem; line-height:1.4; transition:all .2s ease; border-radius:0 8px 8px 0; }
.toc__list a:hover{ color:var(--primary-700); background:var(--primary-50); }
.toc__list a.is-active{ color:var(--primary-700); border-left-color:var(--brand-primary); background:var(--primary-50); font-weight:600; }

/* ---------------- CALLOUTS & BLOCKQUOTES (single) ---------------- */
.entry-content .is-style-callout{ border-radius:var(--radius-lg); padding:1.25rem 1.4rem; margin-block:1.6rem; border:1px solid var(--border); }
.entry-content .key-takeaways{ background:var(--grad-brand-soft); border-color:color-mix(in srgb,var(--brand-primary) 22%,#fff); }
.entry-content .key-takeaways h2{ font-size:1.15rem; margin:0 0 .6rem; color:var(--primary-800); }
.entry-content .key-takeaways h2::before{ display:none; }
.entry-content .tip{ background:color-mix(in srgb,#14B8A6 8%,#fff); border-color:color-mix(in srgb,#14B8A6 30%,#fff); }
.entry-content .warning{ background:color-mix(in srgb,#f59e0b 10%,#fff); border-color:color-mix(in srgb,#f59e0b 38%,#fff); }
.entry-content blockquote{ border:0; border-left:4px solid; border-image:var(--grad-brand) 1; padding:.4rem 0 .4rem 1.4rem; margin-inline:0; font-size:1.2rem; font-style:italic; color:var(--neutral-800); }
.entry-content h2{ position:relative; }
.entry-content h2::before{ content:""; display:inline-block; width:.5rem; height:.5rem; border-radius:2px; background:var(--grad-brand); margin-right:.55rem; vertical-align:middle; }

/* ---------------- FAQ: premium accordion ---------------- */
.entry-content .wp-block-details{ border:1px solid var(--border); border-radius:14px; background:var(--bg-elevated); margin-block:.7rem; overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease; }
.entry-content .wp-block-details[open]{ border-color:color-mix(in srgb,var(--brand-primary) 40%,#fff); box-shadow:var(--shadow-md); }
.entry-content .wp-block-details summary{ list-style:none; cursor:pointer; padding:1.05rem 3rem 1.05rem 1.25rem; position:relative; font-family:var(--font-heading); font-weight:600; font-size:1.05rem; color:var(--neutral-900); }
.entry-content .wp-block-details summary::-webkit-details-marker{ display:none; }
.entry-content .wp-block-details summary::after{ content:""; position:absolute; right:1.25rem; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2px solid var(--primary-600); border-bottom:2px solid var(--primary-600); transform:rotate(45deg); transition:transform .3s ease; }
.entry-content .wp-block-details[open] summary::after{ transform:rotate(-135deg); }
.entry-content .wp-block-details summary:hover{ color:var(--primary-700); }
.entry-content .wp-block-details > *:not(summary){ padding:0 1.25rem 1.15rem; margin:0; color:var(--text-soft); animation:pd-fadein .35s ease; }
@keyframes pd-fadein{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }

/* ---------------- CARDS: shine sweep ---------------- */
.post-card__media{ position:relative; overflow:hidden; }
.post-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%); transform:translateX(-120%); transition:transform .7s ease; pointer-events:none; }
.post-card:hover .post-card__media::after{ transform:translateX(120%); }

/* ---------------- FOOTER: pre-footer CTA band + polish ---------------- */
.site-footer__cta{ background:var(--grad-brand); color:#fff; border-radius:var(--radius-xl); padding:clamp(1.5rem,3vw,2.75rem); position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem; box-shadow:var(--shadow-lg); }
.site-footer__cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 15% 0%,rgba(255,255,255,.25),transparent 55%); }
.site-footer__cta-text{ position:relative; z-index:1; }
.site-footer__cta-text h2{ color:#fff; font-size:clamp(1.4rem,1rem+1.6vw,2rem); margin:0; }
.site-footer__cta-text p{ color:rgba(255,255,255,.9); margin:.4rem 0 0; }
.site-footer__cta .btn{ position:relative; z-index:1; background:#fff; color:var(--primary-800); box-shadow:0 14px 30px -12px rgba(0,0,0,.4); }
.site-footer__cta .btn:hover{ transform:translateY(-2px); color:var(--primary-900); background:#fff; }
.site-footer__cta-wrap{ margin-top:var(--space-2xl); }
.site-footer::before{ content:""; display:block; height:3px; background:var(--grad-brand); }
@media (max-width:640px){ .site-footer__cta{ flex-direction:column; align-items:flex-start; text-align:left; } }

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion:reduce){
  .hero__bg::before,.hero__title-accent,.hero__badges li{ animation:none !important; }
  .hero__title .reveal,.hero__eyebrow.reveal,.hero__subtitle.reveal,.hero__actions.reveal,.hero__search.reveal,.hero__badges.reveal{ animation:none !important; opacity:1 !important; transform:none !important; }
  .post-card__media::after{ display:none; }
}