/*
Theme Name: Disk Drill
Theme URI: https://www.cleverfiles.com/
Author: Cleverfiles
Author URI: https://www.cleverfiles.com/
Description: Custom WordPress theme for the Disk Drill / Cleverfiles blog. Built to match disk-drill.com design tokens with an Ahrefs-inspired blog layout.
Version: 0.12.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: disk-drill
Tags: blog, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — pulled from disk-drill.com
   ========================================================= */
:root {
  --color-text:        #2c2c2e;
  --color-text-muted:  rgba(44, 44, 46, 0.7);
  --color-text-soft:   #868688;
  --color-bg:          #f8f8fa;
  --color-card:        #ffffff;
  --color-line:        rgba(44, 44, 46, 0.08);
  --color-pill-bg:     rgba(44, 44, 46, 0.05);
  --color-accent:      #007aff;
  --color-accent-cyan: #01aeb9;
  --color-warn:        #ffca3c;
  --color-danger:      #f35735;

  --gradient-warm: linear-gradient(262.6deg, #ff6196 17.56%, #f19000 88.59%);
  --gradient-cool: linear-gradient(262.6deg, #3966ff 17.56%, #1bc3da 88.59%);
  --gradient-pill: linear-gradient(104.2deg, #29fff6 -6.38%, #eaef00 108.98%);

  --radius-card: 16px;
  --radius-btn:  8px;
  --radius-pill: 40px;

  --container-max: 1320px;
  --grid-max:      1100px;
  --content-max:   720px;

  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, h4, h5, h6, ul, ol, figure { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .7; }

/* =========================================================
   HEADER
   Transparent so it floats over the hero gradient (the hero is
   pulled up beneath it via negative margin below).
   ========================================================= */
.site-header { padding: 28px 48px; position: relative; z-index: 100; background: transparent; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-max); margin: 0 auto; }
.logo { display: inline-flex; align-items: center; color: var(--color-text); }
.logo img { height: 18px; width: auto; display: block; }
.logo .custom-logo { max-height: 32px; width: auto; } /* uploaded via Customizer */
.site-nav ul { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--color-text-muted); }
.site-nav a:hover { color: var(--color-text); opacity: 1; }
@media (max-width: 1024px) {
  .site-header { padding: 20px; }
  .site-nav { display: none; }
}

/* =========================================================
   SHARED HERO BACKGROUND (gradient blobs)
   ========================================================= */
/* =========================================================
   HERO GRADIENT BACKGROUND
   Soft multi-color corner wash matching disk-drill.com, using
   layered radial-gradients over a diagonal base, then blurred +
   saturated. Contained within each hero section (white content
   sits below). Rendered via .hero-bg inside each hero.
   ========================================================= */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-bg);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: -8%;            /* overshoot so the blur doesn't reveal edges */
  width: 116%;
  height: 116%;
  background:
    radial-gradient(circle at 0% 0%,   #f1ba62 0 16%, transparent 38%),
    radial-gradient(circle at 42% 0%,  #ed716e 0 18%, transparent 42%),
    radial-gradient(circle at 100% 0%, #f7acd2 0 18%, transparent 39%),
    radial-gradient(circle at 96% 42%, #c45fc3 0 18%, transparent 44%),
    radial-gradient(circle at 70% 102%,#4d6df1 0 20%, transparent 46%),
    radial-gradient(circle at 0% 96%,  #28c4ce 0 18%, transparent 43%),
    linear-gradient(135deg, #eeb052 0%, #dd7770 28%, #a46c9d 56%, #4d74eb 100%);
  filter: blur(18px) saturate(1.22) contrast(1.08);
  will-change: filter;
}
@media (max-width: 768px) {
  .hero-bg::before { filter: blur(14px) saturate(1.22) contrast(1.08); }
}

/* =========================================================
   ARTICLE HERO (single post)
   ========================================================= */
.article-hero {
  position: relative;
  overflow: hidden;
  margin-top: -90px;
  padding: 122px 20px 60px;
  text-align: center;
}
.article-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.article-hero__crumb {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(44, 44, 46, 0.25);
}
.article-hero__crumb a {
  color: #fff;
  border-bottom: 1px solid transparent;
}
.article-hero__crumb a:hover { opacity: 0.85; border-bottom-color: rgba(255,255,255,0.7); }
.article-hero__crumb-sep { opacity: 0.5; }
.article-hero h1 {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin-bottom: 28px;
}
.byline {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.byline a {
  color: var(--color-text);
  font-weight: 600;
  border-bottom: 1px solid var(--color-line);
}
.byline a:hover { opacity: 1; border-bottom-color: var(--color-text); }
.byline--coauthored { max-width: 600px; margin-left: auto; margin-right: auto; }
.publish-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.publish-meta span + span::before { content: '•'; margin: 0 8px; opacity: .5; color: var(--color-text-soft); }

/* =========================================================
   ARTICLE 3-COLUMN LAYOUT
   [ TOC ][ CONTENT ][ AUTHOR ]
   ========================================================= */
.article-layout {
  max-width: 1440px;
  margin: 64px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 240px minmax(0, var(--content-max)) 280px;
  gap: 56px;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 1439px) {
  .article-layout {
    grid-template-columns: 200px minmax(0, var(--content-max)) 220px;
    gap: 36px;
    padding: 0 24px;
  }
}
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--content-max));
    gap: 24px;
    margin-top: 40px;
    padding: 0 20px;
  }
  .article-toc-wrap, .article-author { position: static !important; }
}

/* ---- LEFT RAIL: TABLE OF CONTENTS -------------------- */
/* Self-contained TOC built by the theme (see functions.php).
   Clean markup: .article-toc > .article-toc__title + .article-toc__list
   with .article-toc__item--h2 / --h3 list items. */

.article-toc-wrap {
  position: sticky;
  top: 32px;
  align-self: start;
}
.article-toc {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 var(--color-line);
}
.article-toc__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 14px;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
  text-transform: none;
}
.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-toc__item { margin: 0; }
.article-toc__list a {
  display: block;
  padding: 8px 0 8px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
  margin-left: -12px;
  transition: color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.article-toc__list a:hover {
  color: var(--color-text);
  opacity: 1;
  border-left-color: var(--color-line);
}
.article-toc__list a.is-active {
  color: var(--color-text);
  font-weight: 600;
  border-left-color: var(--color-accent-cyan);
}
/* Nested (h3) items: indent + lighter */
.article-toc__item--h3 a {
  padding-left: 26px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.article-toc__item--h3 a:hover { color: var(--color-text); }

/* When a post has no TOC, drop the left column and center content */
.article-layout--no-toc {
  grid-template-columns: minmax(0, var(--content-max)) 280px;
}
@media (max-width: 1439px) {
  .article-layout--no-toc {
    grid-template-columns: minmax(0, var(--content-max)) 220px;
  }
}
@media (max-width: 1024px) {
  .article-layout--no-toc { grid-template-columns: minmax(0, var(--content-max)); }
}

/* ---- RIGHT RAIL: AUTHOR CARD ------------------------- */
.article-author {
  position: sticky;
  top: 32px;
  align-self: start;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.article-author__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6196, #f19000);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}
.article-author__avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.article-author__name {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.article-author__name:hover { color: var(--color-accent); opacity: 1; }
.article-author__text {
  font-size: 13px;
  line-height: 21px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.article-author__social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.article-author__social svg { width: 14px; height: 14px; }
.article-author__social:hover { color: var(--color-accent); opacity: 1; }

/* ---- CO-AUTHORED CARD (external contributor + internal author) ---- */
.article-author--coauthored { padding: 20px; }
.article-author__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 16px;
}
.coauthor {
  display: flex;
  gap: 12px;
}
.coauthor + .coauthor {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
.coauthor__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.coauthor__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.coauthor__avatar--external { background: linear-gradient(135deg, #3966ff, #1bc3da); }
.coauthor__avatar--internal { background: linear-gradient(135deg, #515df9, #ce7bdb); }
.coauthor__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.coauthor__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
a.coauthor__name:hover { color: var(--color-accent); opacity: 1; }
.coauthor__role {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.coauthor__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-soft);
}
.coauthor__link svg { width: 14px; height: 14px; }
.coauthor__link:hover { color: var(--color-accent); opacity: 1; }
.article-author__note {
  font-size: 12px;
  line-height: 19px;
  color: var(--color-text-muted);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

/* =========================================================
   ARTICLE BODY (CENTER COLUMN)
   ========================================================= */
.article-body {
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text);
  min-width: 0;
}

/* LEAD PARAGRAPH — auto-styled first paragraph */
.article-body > p:first-of-type {
  font-size: 22px;
  line-height: 34px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 36px;
}

.article-body p { margin: 0 0 24px; }
.article-body > * + h2 { margin-top: 56px; }
.article-body > * + h3 { margin-top: 36px; }
.article-body > * + h4 { margin-top: 28px; }

.article-body h2 {
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.018em;
  color: var(--color-text);
  margin-bottom: 18px;
  scroll-margin-top: 24px;
}
.article-body h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 14px;
}
.article-body h4 {
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
  color: var(--color-text);
  margin-bottom: 10px;
}
.article-body h5 {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.article-body h6 {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 8px;
}

.article-body strong { font-weight: 700; color: var(--color-text); }
.article-body em     { font-style: italic; }

.article-body a {
  color: var(--color-accent);
  border-bottom: 1px solid rgba(0, 122, 255, 0.35);
  transition: all .15s ease;
}
.article-body a:hover {
  opacity: 1;
  border-bottom-color: var(--color-accent);
  background: rgba(0, 122, 255, 0.06);
}
.article-body strong a, .article-body em a { color: var(--color-accent); }

/* Lists */
.article-body ul,
.article-body ol {
  margin: 0 0 28px;
  padding-left: 0;
  list-style: none;
}
.article-body ul li,
.article-body ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.article-body ul > li::before {
  content: '';
  position: absolute;
  left: 8px; top: 13px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
}
.article-body ol { counter-reset: ol-counter; }
.article-body ol > li { counter-increment: ol-counter; }
.article-body ol > li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0; top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.article-body li ul,
.article-body li ol { margin-top: 10px; margin-bottom: 0; }

/* Inline images */
.article-body figure,
.article-body .wp-block-image { margin: 36px 0; }
/* Card treatment for every content image: a captioned image is wrapped in
   <figure>, a plain one is a bare <img> — both should look the same. */
.article-body img {
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(44, 44, 46, 0.08);
}
.article-body figure img,
.article-body .wp-block-image img {
  width: 100%;
}
/* Small images inside tables / callouts stay flat */
.article-body td img,
.article-body th img,
.article-body .callout__body img {
  border-radius: 4px;
  box-shadow: none;
}
.article-body figcaption,
.article-body .wp-block-image figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-soft);
  text-align: center;
}
/* Captions added in the WP editor: WordPress prints an inline `width: NNNpx`
   (the image's native size) on the wrapper, which blows past the content
   column. Cap it and drop the pixel width so captioned images fill the column
   like every other inline image. */
.article-body figure,
.article-body .wp-caption { max-width: 100%; }
.article-body .wp-caption { width: auto !important; }
/* Classic (non-html5) markup uses <p class="wp-caption-text"> — match figcaption */
.article-body p.wp-caption-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-soft);
  text-align: center;
}

/* Blockquote — Sidenote style */
.article-body blockquote,
.article-body .wp-block-quote {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--color-accent-cyan);
}
.article-body blockquote::before,
.article-body .wp-block-quote::before {
  content: 'Sidenote';
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-cyan);
  margin-bottom: 10px;
}
.article-body blockquote p,
.article-body .wp-block-quote p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}
.article-body blockquote p + p,
.article-body .wp-block-quote p + p { margin-top: 12px; }
.article-body blockquote a,
.article-body .wp-block-quote a { color: var(--color-accent); }

/* Table scroll container (added around every table by the_content filter).
   Carries the card frame + horizontal scrollbar. */
.article-body .table-scroll,
.article-body .wp-block-table,
.table-wrap {
  display: block;
  margin: 36px 0;
  border-radius: var(--radius-card);
  overflow-x: auto;            /* wide tables scroll horizontally */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  background: var(--color-card);
  max-width: 100%;
}
/* Gutenberg figure already provides margin; avoid doubling when nested */
.article-body .wp-block-table { padding: 0; }
.article-body .wp-block-table figcaption { padding: 0 18px 14px; }

.article-body .table-scroll table,
.article-body .wp-block-table table,
.article-body table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
  width: 100%;
  /* Fit the container so long cell text wraps instead of stretching the table.
     Genuinely wide / many-column tables still exceed the container via the cell
     min-widths below and scroll horizontally inside the .table-scroll wrapper. */
}
.article-body thead { background: var(--color-bg); }
.article-body th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.article-body td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  color: var(--color-text-muted);
  min-width: 120px;
  overflow-wrap: break-word;   /* break long words/URLs so cells never overflow */
}
/* Force auto layout so column widths follow content (enables scroll) */
.article-body table.has-fixed-layout { table-layout: auto; }
/* First column (labels / product names) a touch wider */
.article-body th:first-child,
.article-body td:first-child { min-width: 150px; }

.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:hover { background: rgba(0, 122, 255, 0.025); }
.article-body td strong { color: var(--color-text); }

/* No-header table variant — add `is-style-table-no-head` to a Table block in Gutenberg */
.article-body .wp-block-table.is-style-table-no-head td:first-child,
.table-wrap--no-head td:first-child {
  width: 34%;
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
  border-right: 1px solid var(--color-line);
}
.article-body .wp-block-table.is-style-table-no-head tbody tr:hover td:first-child,
.table-wrap--no-head tbody tr:hover td:first-child { background: var(--color-bg); }

/* Inline code */
.article-body code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--color-pill-bg);
  border-radius: 4px;
  color: var(--color-text);
}

/* Callouts ([callout] shortcode) */
.callout {
  display: flex;
  gap: 16px;
  padding: 22px 26px;
  border-radius: var(--radius-card);
  margin: 32px 0;
  border: 1px solid;
}
.callout__icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
}
.callout__body strong { display: block; margin-bottom: 4px; font-weight: 700; color: var(--color-text); }
.callout__body p { margin: 0; font-size: 15px; line-height: 24px; color: var(--color-text-muted); }
.callout__body p + p { margin-top: 8px; }
.callout__body a { color: var(--color-accent); }
/* Lists inside a callout: match the callout body text, not the larger article list */
.callout__body ul,
.callout__body ol { margin: 8px 0 0; }
.callout__body ul li,
.callout__body ol li {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.callout__body ul li:last-child,
.callout__body ol li:last-child { margin-bottom: 0; }
.callout__body ul > li::before { top: 10px; }

.callout--warning {
  background: linear-gradient(135deg, rgba(255, 202, 60, 0.10), rgba(255, 202, 60, 0.04));
  border-color: rgba(255, 202, 60, 0.35);
}
.callout--warning .callout__icon { background: var(--color-warn); }

.callout--info {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(0, 122, 255, 0.03));
  border-color: rgba(0, 122, 255, 0.25);
}
.callout--info .callout__icon { background: var(--color-accent); font-family: Georgia, serif; font-style: italic; }

.callout--success {
  background: linear-gradient(135deg, rgba(1, 174, 185, 0.10), rgba(1, 174, 185, 0.04));
  border-color: rgba(1, 174, 185, 0.30);
}
.callout--success .callout__icon { background: var(--color-accent-cyan); }

.callout--danger {
  background: linear-gradient(135deg, rgba(243, 87, 53, 0.10), rgba(243, 87, 53, 0.04));
  border-color: rgba(243, 87, 53, 0.30);
}
.callout--danger .callout__icon { background: var(--color-danger); }

/* =========================================================
   POST NAVIGATION (prev / next within category)
   ========================================================= */
.post-nav {
  max-width: var(--content-max);
  margin: 56px auto 0;
  padding: 36px 20px 80px;
  border-top: 1px solid var(--color-line);
}
.post-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
/* Only one neighbour → single card spans the full width */
.post-nav__inner--single {
  grid-template-columns: 1fr;
}
.post-nav__link {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color .15s ease;
}
.post-nav__link:hover {
  opacity: 1;
  border-color: rgba(44, 44, 46, 0.22);
}
.post-nav__link--next { text-align: right; align-items: flex-end; }
.post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.post-nav__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-nav__link:hover .post-nav__title { color: var(--color-accent); }

@media (max-width: 640px) {
  .post-nav__inner { grid-template-columns: 1fr; gap: 12px; }
  .post-nav__link--next { text-align: left; align-items: flex-start; }
  .post-nav__link--next .post-nav__dir { flex-direction: row; }
}

/* =========================================================
   CTA BLOCK (single post bottom)
   ========================================================= */
.cta-block {
  background: var(--color-bg);
  padding: 72px 20px;
  text-align: center;
  margin-top: 80px;
}
.cta-block__inner { max-width: 640px; margin: 0 auto; }
.cta-icon {
  width: 88px; height: 88px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.cta-icon img {
  width: 88px;
  height: 88px;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(44, 44, 46, 0.20));
}
.cta-block h2 {
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.cta-block p {
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-primary:hover { background: #1a1a1c; opacity: 1; color: #fff; }

/* =========================================================
   BLOG / CATEGORY HERO
   ========================================================= */
.blog-hero {
  position: relative;
  overflow: hidden;
  margin-top: -90px;
  padding: 150px 20px 80px;
  text-align: center;
}
.blog-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.blog-hero__crumb {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(44, 44, 46, 0.25);
}
.blog-hero__crumb a {
  color: #fff;
  border-bottom: 1px solid transparent;
}
.blog-hero__crumb a:hover { opacity: 0.85; border-bottom-color: rgba(255,255,255,0.7); }
.blog-hero__crumb-sep { opacity: 0.5; }
.blog-hero h1 {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 18px;
}
.blog-hero p {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* =========================================================
   POST GRID (blog index + archives)
   ========================================================= */
.post-grid {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 64px 40px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: 1fr;
    padding: 40px 20px 20px;
  }
}

.post-card {
  padding: 36px 32px;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
}
.post-card:nth-child(odd) { border-right: 1px solid var(--color-line); }
.post-card:nth-last-child(-n+2):nth-child(odd),
.post-card:nth-last-child(-n+2):nth-child(odd) ~ .post-card { border-bottom: none; }
@media (max-width: 768px) {
  .post-card { padding: 28px 0; border-right: none !important; }
  .post-card:last-child { border-bottom: none; }
}

.post-card__categories {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 14px;
}
.post-card__categories a {
  color: inherit;
  border-bottom: 1px solid transparent;
}
.post-card__categories a:hover { opacity: 1; border-bottom-color: var(--color-text); }

.post-card__title {
  font-weight: 800;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.post-card__title a { color: var(--color-accent); border-bottom: none; }
.post-card__title a:hover {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (max-width: 1024px) {
  .post-card__title { font-size: 21px; line-height: 28px; }
}

.post-card__excerpt {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  flex-grow: 1;
}

.post-card__author,
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.post-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff6196, #f19000);
}
.post-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-card__author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: none;
}
.post-card__author-name:hover { color: var(--color-accent); opacity: 1; }
.post-card__date,
.post-card__read-time {
  font-size: 14px;
  color: var(--color-text-muted);
}
.post-card__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-soft);
  opacity: 0.6;
}

/* =========================================================
   PAGINATION (WP paginate_links output)
   ========================================================= */
.pagination {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 24px 40px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination ul.page-numbers {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  transition: all .15s ease;
  text-decoration: none;
}
.pagination a.page-numbers:hover {
  border-color: var(--color-text);
  background: var(--color-bg);
  opacity: 1;
}
.pagination .page-numbers.current {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
  cursor: default;
}
.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  cursor: default;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  padding: 0 18px;
  gap: 6px;
}
@media (max-width: 768px) {
  .pagination { padding: 24px 20px 60px; }
  .pagination .page-numbers {
    min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px;
  }
}

/* =========================================================
   AUTHOR HERO (author archive page)
   ========================================================= */
.author-hero {
  position: relative;
  overflow: hidden;
  margin-top: -90px;
  padding: 150px 20px 80px;
}
.author-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 640px) {
  .author-hero { margin-top: -74px; padding: 110px 20px 60px; }
  .author-hero__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
    justify-items: center;
  }
}
.author-hero__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6196, #f19000);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 6px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 640px) {
  .author-hero__avatar { width: 120px; height: 120px; font-size: 42px; }
}
.author-hero__role {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.author-hero h1 {
  font-weight: 800;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 16px;
}
.author-hero__bio {
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text);
  margin-bottom: 20px;
  max-width: 580px;
}
.author-hero__stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 14px;
}
.author-hero__stat strong {
  display: block;
  font-weight: 800;
  font-size: 20px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.author-hero__stat span { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .author-hero__stats { justify-content: center; gap: 24px; }
}
.author-hero__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 640px) { .author-hero__socials { justify-content: center; } }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  transition: all .15s ease;
}
.social-btn:hover {
  opacity: 1;
  background: #fff;
  transform: translateY(-1px);
}
.social-btn svg { width: 14px; height: 14px; }

.posts-section-header {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 64px 40px 16px;
  border-bottom: 1px solid var(--color-line);
}
.posts-section-header h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  padding-bottom: 16px;
}
@media (max-width: 768px) {
  .posts-section-header { padding: 40px 20px 16px; }
}

/* =========================================================
   404 / NO RESULTS placeholder
   ========================================================= */
.no-results {
  max-width: 600px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}
.no-results h1 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.no-results p {
  font-size: 17px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { padding: 56px 20px 40px; text-align: center; background: #fff; border-top: 1px solid var(--color-line); }
.site-footer .logo { margin-bottom: 14px; }
.site-footer p { font-size: 13px; color: var(--color-text-muted); margin: 6px 0; }
.footer-nav { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 18px 0; list-style: none; padding: 0; }
.footer-nav a { color: var(--color-text); font-size: 13px; }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 768px) {
  .article-hero { margin-top: -74px; padding: 96px 20px 40px; }
  .article-body { font-size: 17px; line-height: 28px; }
  .article-body > p:first-of-type { font-size: 19px; line-height: 30px; }
  .article-body h2 { font-size: 26px; line-height: 34px; }
  .article-body h3 { font-size: 21px; line-height: 30px; }
  .article-body th, .article-body td { padding: 11px 14px; font-size: 13px; }
  .article-body blockquote { padding: 18px 20px; }
  .article-toc-wrap, .article-author { padding: 18px; }
  .blog-hero { margin-top: -74px; padding: 110px 20px 60px; }
  .blog-hero h1 { font-size: 36px; }
}

/* WP admin bar fix */
.admin-bar .article-toc-wrap,
.admin-bar .article-author { top: 64px; }