/*
Theme Name: NestSMS Blog
Theme URI: https://nestsms.com
Author: NestNepal
Author URI: https://nestsms.com
Description: The official blog theme for Nest SMS. A clean, fast and fully responsive blog that looks like part of nestsms.com: the same floating navbar (which shrinks to a pill as you scroll) and footer, a card-style post listing with category filters and live search, and article pages with a sticky table of contents, share buttons and a sidebar. The header, footer, logos, links and contact details are all editable from Appearance → Menus and Appearance → Customize.
Version: 2.6.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nestsms
Tags: blog, news, custom-menu, featured-images, theme-options, right-sidebar, three-columns
*/

/* ============================================================
   TOKENS — every value below was read out of the Figma file,
   not eyeballed. Frame is 1440 wide with a 1216 content column.
   ============================================================ */
:root {
  /* colour */
  /* All of these are pulled from dev.nestsms.com's own CSS variables
     (--primary, --foreground, --muted-foreground, --border), read directly
     off the live site rather than approximated, so this theme's palette
     matches it exactly. */
  --blue:        #0EA5E9; /* Get Started button — matches --primary */
  --blue-chip:   #0EA5E9; /* active filter chip — matches --accent-foreground */
  --blue-deep:   #0EA5E9; /* card cover art + footer band */
  --blue-link:   #0EA5E9; /* Load More label */
  --green:       #00C11F; /* logo mark + whatsapp — no equivalent token on the main site; left as the fixed brand-icon color */
  --ink:         #0A0A0A; /* card titles — already matched --foreground */
  --ink-900:     #0A0A0A; /* page h1 — matches --foreground */
  --ink-800:     #0A0A0A; /* footer text */
  --gray-900:    #0A0A0A; /* nav links — matches --foreground */
  --gray-700:    #0A0A0A; /* body copy, inactive chips — matches --foreground */
  --gray-500:    #737373; /* post meta — matches --muted-foreground */
  --gray-400:    #808080; /* input placeholder — no confirmed sample on the main site, left as-is */
  --line:        #E5E5E5; /* matches --border */
  --line-soft:   #E5E5E5; /* matches --border */

  /* radius */
  --r-sm:  7px;   /* Get Started */
  --r:     8px;   /* chips, buttons, inputs, navbar */
  --r-md: 12px;   /* card image, footer card */
  --r-lg: 24px;   /* hero shell */

  /* layout */
  --container: 1216px;
  --gutter: 24px;
  /* How far down sticky things must sit to clear the fixed header. Phone/tablet
     bar is 60px tall; from 1024px the bar (or its scroll-collapsed pill) ends at
     92px. The WordPress toolbar adds 32px for logged-in editors. */
  --sticky-top: 84px;
  --card-gap: 32px;
  --row-gap: 60px;

  /* type — Helvetica Now Display in the file is a licensed Monotype
     face; Geist is substituted at the same weights/sizes. Drop the real
     woff2 into assets/fonts and swap this one line if you own it. */
  --font-ui:   "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-meta: "Figtree", var(--font-ui);
  --font-mark: "Inter", var(--font-ui);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--gray-700);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   PAGE TOP — rounded sky shell holding nav + hero + filters.
   Figma: 1424x1052 container, r24, cloud photo 1424x338 at top,
   gradient fading to white.
   ============================================================ */
/* No overflow:hidden here — it would clip the live-search dropdown, which
   hangs below the filter row. The background is clipped by border-radius on
   its own; only ::after needs a matching radius. */
.page-top {
  position: relative;
  isolation: isolate;
  margin: 8px;
  padding-top: 60px;            /* the navbar is fixed, so reserve its height */
  border-radius: var(--r-lg);
  /* hero-bg.png is the Figma group 353:17513 exported already composited —
     gradient + cloud photo + its SCREEN blend baked in by Figma itself.
     Re-creating that blend in CSS never matched, so we don't. The colour
     underneath is the gradient's end stop, for when the image is taller
     than the section. */
  background: url(assets/img/hero-bg.png) center top / 100% auto no-repeat, #FFF9EE;
}
/* white wash so the gradient reaches white before the card grid starts */
.page-top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
  border-radius: 0 0 var(--r-lg) var(--r-lg); /* stands in for the removed overflow:hidden */
  pointer-events: none;
  z-index: 0;
}
.page-top > * { position: relative; z-index: 1; }


@media (min-width: 768px)  { .page-top { padding-top: 72px; } }
@media (min-width: 1024px) { .page-top { padding-top: 96px; } :root { --sticky-top: 108px; } }
@media (min-width: 783px)  { .admin-bar { --sticky-top-extra: 32px; } }
:root { --sticky-top-extra: 0px; }

/* ============================================================
   BLOG HERO — Figma: row 1216x51, h1 40/28 ls-0.4, copy 16/17.4
   ============================================================ */
.blog-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
  padding: 56px 0 40px;
}
.blog-hero h1 {
  margin: 0;
  font-size: 40px; line-height: 1.1; font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink-900);
}
.blog-hero p {
  margin: 0;
  max-width: 482px;
  font-size: 16px; line-height: 17.4px; font-weight: 500;
  letter-spacing: -0.16px;
  color: var(--gray-700);
  text-align: right;
}

/* ============================================================
   FILTER ROW — chips 36 high, pad 10/16, r8, gap 7
   search input 351x40, r8
   ============================================================ */
.blog-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-bottom: 56px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center;
  height: 36px; padding: 10px 16px;
  border-radius: var(--r);
  background: #fff;
  color: var(--gray-700);
  font-size: 14px; line-height: 16px; font-weight: 500;
  white-space: nowrap;
}
/* Hover / keyboard focus draw an outline and leave the background alone. It is
   an inset box-shadow rather than a border so the chip never changes size. */
.chip { transition: box-shadow .15s ease; }
.chip:hover,
.chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue-chip); }
.chip.is-active { background: var(--blue-chip); color: #fff; }

.search-form {
  position: relative; /* anchors the live-results dropdown */
  display: flex; align-items: center; gap: 12px;
  width: 351px; height: 40px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: #fff;
}

/* ---- live search results ---- */
.search-results {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  z-index: 60;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(8, 61, 186, 0.14);
  text-align: left;
}
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results a {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px; line-height: 19px; font-weight: 500;
  color: var(--ink);
}
.search-results a:hover,
.search-results a.is-active { background: #F2F7FF; color: var(--blue-link); }
.search-date {
  display: block; margin-top: 2px;
  font-family: var(--font-meta);
  font-size: 12px; font-weight: 400;
  color: var(--gray-500);
}
.search-empty {
  margin: 0; padding: 10px;
  font-size: 13px; color: var(--gray-500);
}
.search-form svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gray-400); }
.search-form input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; line-height: 16px;
  color: var(--gray-700);
}
.search-form input::placeholder { color: var(--gray-400); }

/* ============================================================
   CARD GRID — 3 columns, gap 32; card design in the block below
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--card-gap);
  row-gap: 32px;
  padding-bottom: 56px;
}

/* Cards follow the main site's tiles: white surface, hairline border, soft
   radius, sky-blue accent, frosted pill over the image. */
.card {
  position: relative;               /* anchors the stretched title link */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: #d4d4d8;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .18), 0 4px 12px -6px rgba(0, 0, 0, .08);
}

.card-media {
  position: relative;
  aspect-ratio: 1200 / 630;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blue-deep);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }

/* Placeholder for posts with no featured image: the site's sky gradient with
   a soft highlight and two faint rings, so a text-only post still looks intentional. */
.card-media.is-empty {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 12% 110%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, #38bdf8 0%, #0ea5e9 45%, #0284c7 100%);
}
.card-media.is-empty::before,
.card-media.is-empty::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  pointer-events: none;
}
.card-media.is-empty::before { width: 46%; aspect-ratio: 1; right: -8%; bottom: -30%; }
.card-media.is-empty::after  { width: 30%; aspect-ratio: 1; right: 4%;  bottom: -16%; }

/* category: frosted pill, same treatment as the site's navbar */
.card-cat {
  position: absolute; top: 12px; left: 12px;
  z-index: 2;                       /* above the stretched title link */
  display: inline-block;
  height: 28px; padding: 0 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #0284c7;
  font-size: 12px; line-height: 28px; font-weight: 600; letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease;
}
.card-cat::first-letter { text-transform: uppercase; }   /* "sms type" -> "Sms type" without mangling "SMS" */
.card-cat:hover { color: var(--blue-link); }

.card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 14px 12px 12px; }
.card-title {
  margin: 0;
  font-size: 20px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
/* the whole card is the click target */
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.card-title a:focus-visible { outline: none; }
.card:has(.card-title a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.card:hover .card-title a { color: var(--blue-link); }

.card-excerpt {
  margin: 0;
  font-size: 14px; line-height: 22px;
  color: var(--gray-500);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto;                 /* pins the footer to the bottom so cards in a row line up */
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-author { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.card-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.card-author-text { display: flex; flex-direction: column; min-width: 0; }
.card-author-name { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-author:hover .card-author-name { color: var(--blue-link); }
.card-date { font-size: 12px; line-height: 16px; color: var(--gray-500); }
.card-read {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #F0F9FF;
  color: #0284c7;
  font-size: 12px; line-height: 16px; font-weight: 500;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-media img { transition: none; }
  .card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
}

/* ============================================================
   LOAD MORE — 99x36, r8, 1px blue border, label #146DE1
   ============================================================ */
.load-more-wrap { display: flex; justify-content: center; padding-bottom: 80px; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 10px 16px;
  border: 1px solid var(--blue-link);
  border-radius: var(--r);
  color: var(--blue-link);
  background: #fff;
  font-size: 14px; line-height: 16px; font-weight: 500;
}
.btn-outline:hover { background: #F2F7FF; }

/* solid button, used by the 404 page */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.btn-cta:hover { background: color-mix(in srgb, var(--blue) 90%, #fff); }

.empty-state { padding: 40px 0 100px; color: var(--gray-500); }

/* ============================================================
   SINGLE / ARTICLE — Figma frame 353:22220
   ============================================================ */
/* .article-top is also a .container — keep its horizontal padding or the
   search row breaks out of the page grid and sits left of the navbar. */
.article-top { padding: 24px var(--gutter) 8px; }
.article-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-bottom: 24px;
}
.article-tools .search-form { width: 600px; max-width: 100%; }
.share { display: flex; align-items: center; gap: 12px; }
.share-label { font-size: 13px; color: var(--gray-500); }
.share a,
.share button {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0; border: 0;
  border-radius: 6px;
  background: var(--blue-chip);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.share svg { width: 16px; height: 16px; fill: currentColor; }

/* copy-link button: line icon, swaps to a tick and shows a short tooltip */
.share-copy { position: relative; }
.share .share-copy svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-copy .icon-check { display: none; }
.share-copy.is-copied .icon-link { display: none; }
.share-copy.is-copied .icon-check { display: block; }
.share-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.share-copy.is-tip .share-tip { opacity: 1; transform: translate(-50%, 0); }

/* On mobile, JS (see functions.php) moves .share to just after
   .article-content, so it reads as part of the end of the post instead of
   sitting up in the tools row. This only ever matches that moved position —
   the desktop layout never puts .share directly after .article-content. */
.article-content + .share {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line);
}

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0 20px;     /* ~16px above the text (with the shell's edge) and 20px below */
  font-size: 14px; line-height: 20px; color: #919191;
}


/* single.php renders Rank Math's own breadcrumb shortcode (falling back to
   .breadcrumbs above only if Rank Math is deactivated) — its markup uses
   its own class, so it needs its own rule to pick up the same styling. */
.rank-math-breadcrumb {
  padding: 8px 0 20px;     /* ~16px above the text (with the shell's edge) and 20px below */
  font-size: 14px; line-height: 20px; color: #919191;
}
/* Rank Math wraps the trail in a <p>. The spacing belongs to the <nav> above —
   applying it here as well doubled the padding and added the default paragraph
   margins on top. */
.rank-math-breadcrumb p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.rank-math-breadcrumb a { color: inherit; }

/* Separator: a chevron, not the " - " / "/" text. Rank Math prints the separator
   as text inside <span class="separator">; the theme's own fallback trail uses
   span[aria-hidden]. Both are turned into the same icon: the text is hidden
   (font-size 0) and a chevron is painted with a mask so it takes the trail's colour. */
.rank-math-breadcrumb .separator,
.breadcrumbs span[aria-hidden] {
  display: inline-block;
  width: 16px; height: 16px;
  margin: 0 6px;
  vertical-align: middle;   /* centred on the text's x-height; keeps the 20px line box */
  font-size: 0; line-height: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* every link in the trail turns --blue-link on hover */
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover { color: var(--blue-link); }

/* Three columns: contents rail | article | sidebar.
   200 + 40 + 628 + 40 + 260 = 1168, the container's inner width, so the
   middle column keeps a ~628px measure rather than being squeezed. */
.article-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 260px;
  gap: 40px;
  padding-bottom: 80px;
}

/* shared heading for both side rails */
.rail-heading {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.article-header h1 {
  margin: 0 0 12px;
  font-size: 33px; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.article-dek {
  margin: 0 0 20px;
  font-size: 15px; line-height: 24px;
  color: var(--gray-500);
}
.article-byline { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.article-byline img { width: 36px; height: 36px; border-radius: 50%; }
.article-byline .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.article-byline .name a:hover { color: var(--blue-link); }
.article-byline .date { font-family: var(--font-meta); font-size: 13px; color: var(--gray-500); }

.article-content { font-size: 16px; line-height: 26px; font-weight: 400; color: var(--gray-700); }
.article-content > * + * { margin-top: 18px; }
.article-content h2 {
  margin: 40px 0 8px;
  font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--ink);
}
.article-content h3 {
  margin: 28px 0 6px;
  font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.article-content h4 {
  margin: 24px 0 6px;
  font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.article-content h5 {
  margin: 20px 0 6px;
  font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.article-content a { color: var(--blue-link); text-decoration: underline; }
.article-content a:hover { color: var(--blue-link); }
.article-content ul, .article-content ol { padding-left: 22px; }
.article-content li + li { margin-top: 6px; }
.article-content img { border-radius: var(--r-md); }
.article-content blockquote {
  margin: 24px 0; padding: 16px 20px;
  border-left: 3px solid var(--blue);
  background: #F5F8FF; border-radius: 0 var(--r) var(--r) 0;
}
.article-content pre {
  padding: 16px; overflow-x: auto;
  background: #F6F7F9; border-radius: var(--r);
  font-size: 13px; line-height: 20px;
}
.article-content code { font-size: 13px; }
.article-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* callout boxes from the design */
.article-content .callout {
  padding: 16px 20px;
  border-radius: var(--r);
  background: #F1F5FE;
  border: 1px solid #DCE6FA;
}
.article-content .callout-tip {
  background: #FFF8E3;
  border-color: #F3E3AE;
}

/* sticky "on this page" rail */
.article-toc {
  /* Sits near the top of the window: the header's collapsed pill is at the
     right, so nothing covers this left rail (the right-hand sidebar below is the
     one that has to clear the header). Only the WordPress toolbar pushes it down. */
  position: sticky; top: calc(24px + var(--sticky-top-extra));
  align-self: start;
  /* The rule between the rail and the article is drawn INSIDE the box (inset
     shadow) rather than as a border: the blue "current section" marker sits on
     that rule, and with a border it poked 1px past the scrollable area, which
     is what produced a horizontal scrollbar. */
  padding-right: 21px;
  box-shadow: inset -1px 0 0 var(--line);
  font-size: 13px; line-height: 20px;
}
/* A long contents list would otherwise run past the bottom of the viewport
   and be unreachable, since the rail is sticky. */
.article-toc {
  max-height: calc(100vh - 48px - var(--sticky-top-extra));
  overflow-y: auto;                 /* still scrolls (wheel / touch / keyboard) ... */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;            /* ... but no scrollbar is drawn */
  -ms-overflow-style: none;
}
.article-toc::-webkit-scrollbar { display: none; }
/* The heading lives inside the scrolling rail, so pin it: however far the list
   has scrolled (the scroll-spy below keeps the active entry in view) the title
   stays put and the links slide underneath it. Padding, not margin, so its
   background covers the gap and nothing shows through above the list. */
.article-toc .rail-heading {
  position: sticky; top: 0; z-index: 2;
  margin: 0; padding: 0 0 14px;
  background: #fff;
}
.article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-toc li { position: relative; margin-bottom: 10px; }
.article-toc li.lvl-3 { padding-left: 12px; }
.article-toc a { display: block; color: var(--gray-500); transition: color .15s ease; }
.article-toc a:hover { color: var(--blue-link); }

/* the section currently under the reader */
.article-toc a.is-current { color: var(--blue-link); font-weight: 600; }
.article-toc a.is-current::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -21px;   /* sits on the rail's own border */
  width: 2px;
  background: var(--blue-link);
  border-radius: 2px;
}

/* anchor jumps land just below the top edge rather than flush against it */
.article-content h2,
.article-content h3 { scroll-margin-top: calc(var(--sticky-top) + var(--sticky-top-extra)); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* right-hand widget column */
.article-sidebar {
  position: sticky; top: calc(var(--sticky-top) + var(--sticky-top-extra));
  align-self: start;
  /* a tall stack of widgets (posts, calendar, video) must stay reachable, so
     the rail scrolls inside the space below the header instead of running off-screen */
  max-height: calc(100vh - var(--sticky-top) - var(--sticky-top-extra) - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: 13px; line-height: 20px;
}
.article-sidebar::-webkit-scrollbar { display: none; }

/* Each widget is its own card — background + border + radius — so the rail
   reads as clearly separate from the article measure next to it, instead of
   a plain text column with a single hairline rule. */
.article-sidebar .widget {
  background: #F6F7F9;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 20px;
}
.article-sidebar .widget + .widget { margin-top: 20px; }

.rail-posts { list-style: none; margin: 0; padding: 0; }
.rail-posts li + li { margin-top: 16px; }
.rail-posts a {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--ink);
}
.rail-posts a:hover { color: var(--blue-link); }
.rail-date {
  display: block; margin-top: 2px;
  font-family: var(--font-meta);
  font-size: 12px; color: var(--gray-500);
}

.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-chips .chip {
  height: 28px; padding: 6px 10px;
  font-size: 12px;
  background: #F4F6FA;
}

/* generic widget lists, so core widgets look right in the rail */
.article-sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.article-sidebar .widget li + li { margin-top: 10px; }
.article-sidebar .widget a { color: var(--gray-500); }
.article-sidebar .widget a:hover { color: var(--blue-link); }

/* ---- author page header ---- */
.author-hero { align-items: center; }
.author-card { display: flex; align-items: center; gap: 18px; }
.author-card img {
  width: 88px; height: 88px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.author-card h1 {
  margin: 0;
  font-size: 32px; line-height: 1.15; font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink-900);
}
/* Scoped under .blog-hero so it out-ranks the hero's own right-aligned `.blog-hero p`
   (the bio paragraph on the right) — this line belongs under the name, on the left. */
.blog-hero .author-count {
  margin: 4px 0 0;
  max-width: none;
  text-align: left;
  font-family: var(--font-meta);
  font-size: 14px; line-height: 20px; font-weight: 400;
  letter-spacing: 0;
  color: var(--gray-500);
}

.post-navigation { display: flex; justify-content: space-between; gap: 24px; padding-top: 40px; }
.post-navigation a { color: var(--blue-link); font-size: 14px; }
.post-navigation a:hover { color: var(--blue-link); }

/* pagination (fallback when JS load-more is unused) */
.pagination { display: flex; justify-content: center; gap: 8px; padding-bottom: 80px; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--r);
  font-size: 14px; color: var(--gray-700);
}
.pagination .page-numbers.current { background: var(--blue-chip); color: #fff; }
.pagination a.page-numbers:hover { color: var(--blue-link); }

/* ============================================================
   RESPONSIVE — the Figma file is desktop-only at 1440.
   Breakpoints below are additions, not from the design.
   ============================================================ */
/* Three columns need ~1200px to breathe. Below that the sidebar drops
   under the article rather than squeezing the measure; below 1080 the
   contents rail goes too. */
@media (max-width: 1200px) {
  .article-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .article-sidebar {
    grid-column: 1 / -1;
    position: static;
    max-height: none;        /* only the sticky version scrolls inside itself */
    overflow: visible;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    margin-top: 8px;
  }
  .article-sidebar .widget { display: inline-block; vertical-align: top; width: 48%; }
  .article-sidebar .widget + .widget { margin-top: 0; }
}

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { display: none; }
}

@media (max-width: 860px) {
  .blog-hero { flex-direction: column; gap: 16px; padding: 40px 0 28px; }
  .blog-hero h1 { font-size: 32px; }
  .blog-hero p { text-align: left; }

  .blog-filters { flex-direction: column; align-items: stretch; gap: 16px; }
  .search-form { width: 100%; }

  .post-grid { column-gap: 20px; row-gap: 20px; }   /* stays two columns; one column only on phones, below */

  .article-tools { flex-direction: column; align-items: stretch; }
  /* Share row at the end of the post: 20px between its top rule and the icons,
     and the same 20px between the icons and the sidebar's rule below. That gap
     was 48px (40px grid gap + 8px sidebar margin), which is what looked uneven. */
  .article-layout { row-gap: 0; }
  .article-sidebar { margin-top: 20px; }

  /* tighter rhythm on phones: search row -> breadcrumb -> title */
  .article-tools { padding-bottom: 12px; }
  .article-top { padding-bottom: 0; }
  .breadcrumbs,
  .rank-math-breadcrumb { padding: 4px 0 16px; }
  .article-header h1 { font-size: 28px; }
  .article-content h2 { font-size: 24px; }
  .article-content h3 { font-size: 21px; }
  .article-content h4 { font-size: 19px; }
  .article-content h5 { font-size: 17px; }
  .article-sidebar .widget { display: block; width: 100%; }
  .article-sidebar .widget + .widget { margin-top: 28px; }
  .author-hero { flex-direction: column; align-items: flex-start; }
  .author-card img { width: 64px; height: 64px; }
  .author-card h1 { font-size: 26px; }
}

/* phones: one card per row */
@media (max-width: 620px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}

/* Phones: centre the article search box in the sky-blue band under the header.
   The header is 60px tall, so 12px + the shell's 60px top padding puts the box 20px
   below it; 20px of padding under the box gives the same 20px at the bottom. */
@media (max-width: 767px) {
  .article-top { padding-top: 12px; }
  .article-tools { padding-bottom: 20px; }
}