/*
Theme Name: 5centsCDN Help Center
Theme URI: https://www.5centscdn.net/help/
Author: 5centsCDN
Author URI: https://www.5centscdn.net/
Description: Knowledge base / help center theme for 5centsCDN. Searchable category landing page, article, category and search templates. Built on the 5centsCDN "Website 2026 — Light Theme" design system: Montserrat headings, Noto Sans body, #F4F5F7 canvas, #FAFAFA cards and the dark #0D0E10 header.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fivecents-help
*/

/* ==========================================================================
   1. Design tokens
   ==========================================================================
   Mirrors the "Website 2026 — Light Theme" Figma library
   (file ugfQbv9hnzwiph7K3nz5xU). The comment after each token names the Figma
   variable it carries, so the two can be diffed when the library moves.

   Deliberate deviation: the library sets lineHeight 100 (= 1.0) on every text
   style. 1.0 is fine for the single-line UI chrome it was measured on, but it
   collides on wrapped body copy, so multi-line text uses the library's own
   "Line Hight" token (24px / ~1.45) instead. Single-line chrome keeps ~1.15.
   ========================================================================== */

:root{
  /* --- Colour ------------------------------------------------------------ */
  --primary:#4fa83d;          /* Colors/Main colors/Primary */
  --primary-deep:#316526;     /* Colors/Gradient/1 */
  --primary-bright:#4fa83d;   /* Colors/Gradient/2 */
  --ink:#0d0e10;              /* Colors/Main colors/Secondary */
  --background:#f4f5f7;       /* Colors/Main colors/Background */
  --card:#fafafa;             /* Container\Card/White */
  --border:#e1e1e1;           /* Colors/Border/Primary */
  --text:#252525;             /* Colors/Text/Primary */
  --text-2:#535765;           /* Colors/Text/Secondary */
  --text-3:#747887;           /* Colors/Text/Subtle */
  --on-ink:#fafafa;           /* Colors/Text/On Black */
  --on-ink-pure:#fdfffd;      /* Color/Text/Primary — header chrome */

  /* --- Gradients --------------------------------------------------------- */
  /* Gradient/Gradient — green ramp, used on solid CTAs and the active pill. */
  --grad:linear-gradient(93.1deg,var(--primary-deep) .97%,var(--primary-bright) 98.6%);
  /* Color/Gradient Fill/Button/1-3 — the header's Login button: black for the
     first half of the sweep, breaking to green at the trailing edge. */
  --grad-btn:linear-gradient(98.452deg,#0d0e10 2.114%,#0d0e10 50.151%,#4fa83d 98.188%);

  /* --- Radius ----------------------------------------------------------- */
  --radius-xs:6px;            /* Cornor Radius/Extra Small */
  --radius-sm:10px;           /* Cornor Radius/Small */
  --radius-full:500px;        /* Cornor Radius/Max */

  /* --- Elevation --------------------------------------------------------
     Primary Shadow, verbatim from the library: 0 10px 30px 0 #00000008.
     Every box — panels, cards, the search bars, the prose card — carries this
     one shadow; --shadow-hover is the same ramp lifted for pointer feedback. */
  --shadow:0px 10px 30px 0px #00000008;        /* Primary Shadow */
  --shadow-hover:0px 14px 34px 0px #00000014;
  --ring:0 0 0 3px rgba(79,168,61,.15);

  /* --- Type ------------------------------------------------------------- */
  --font-heading:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;  /* Typeface/Family/Heading */
  --font-body:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;      /* Typeface/Family/Paragraph */
  --font-mono:'Roboto Mono',ui-monospace,monospace;

  /* Fluid type. Each token interpolates between a 360px and a 1280px viewport
     and tops out at exactly the library's value, so a 1280-wide window renders
     the Figma sizes and narrower windows scale down instead of stepping at
     breakpoints. The intercept is in rem, not px, so the whole scale still
     responds to the reader's browser font-size setting.
                                      360px      1280px (Figma) */
  --fs-xs:0.75rem;                                      /* 12 → 12  P4-Body */
  --fs-s:clamp(0.8125rem,0.788rem + 0.109vw,0.875rem);  /* 13 → 14  P3-Body */
  --fs-m:clamp(0.9375rem,0.913rem + 0.109vw,1rem);      /* 15 → 16  P2-Body */
  --fs-l:clamp(1rem,0.951rem + 0.217vw,1.125rem);       /* 16 → 18  P1/Button */
  --fs-xl:clamp(1.1875rem,1.041rem + 0.652vw,1.5625rem);/* 19 → 25  H3 */
  --fs-h1:clamp(1.75rem,1.456rem + 1.304vw,2.5rem);     /* 28 → 40  page H1 */
  --lh:24px;                  /* Line Hight */

  --w-regular:400;            /* Typeface/Weight/Regular */
  --w-medium:500;             /* Typeface/Weight/Medium */
  --w-semi:600;               /* Typeface/Weight/Semi-Bold */

  /* --- Spacing ---------------------------------------------------------- */
  --pad-header-x:80px;        /* Padding/Header/Horizontal Padding — realised by
                                 .wrap: a 1120px column centred in the 1280px
                                 frame leaves exactly 80px each side. */
  --pad-header-y:30px;        /* Padding/Header/Vertical Padding */
  --gap-panel:30px;           /* gutter between the guides panel and content */
  --panel-w:300px;            /* Left Panel/Guides width */
  --sec-gap:80px;             /* vertical rhythm between page sections */

  --t:.2s ease;

  /* --- Back-compat aliases ----------------------------------------------
     Older markup and a few inline styles still reference the v1 token names.
     Kept pointing at their design-system equivalents so nothing resolves to
     an empty custom property. */
  --foreground:var(--text);
  --muted:#eceef1;
  --muted-foreground:var(--text-3);
  --muted-foreground-invert:#cacdd4;
  --secondary:#e4f1de;
  --secondary-foreground:var(--primary-deep);
  --primary-foreground:var(--on-ink-pure);
  --radius-md:var(--radius-xs);
  --radius-lg:var(--radius-sm);
  --shadow-card:var(--shadow-hover);
  --fs-badge:var(--fs-xs);
  --fs-meta:var(--fs-s);
  --fs-ui:var(--fs-m);
  --fs-body:var(--fs-l);
  --fs-lead:var(--fs-l);
  --fs-title:var(--fs-l);
  --fs-prose:var(--fs-m);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--fs-m);
  font-weight:var(--w-regular);
  line-height:1.45;
  color:var(--text);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--w-semi);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}

/* 1280px frame − 2×80px page padding = a 1120px content column. */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media(min-width:1200px){.wrap{padding:0}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.label{font-size:var(--fs-s);font-weight:var(--w-semi);text-transform:uppercase;letter-spacing:.05em}

/* Exported Figma icon: fixed outer box, leaf inset exactly as designed.
   Never size the leaf with `auto` — the asset carries its own aspect ratio. */
.fig-ic{position:relative;flex:none;display:block;overflow:hidden}
.fig-ic>img{position:absolute;display:block;max-width:none}

/* ==========================================================================
   3. Header — Figma "Header/Header" 296:700
   ========================================================================== */

header.site{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  box-shadow:var(--shadow);
}
/* Vertical padding only — this element is also a .wrap, and a shorthand
   `padding: Y 0` here would override .wrap's horizontal gutter (same
   specificity, later in the file) and pin the logo to the viewport edge. */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:var(--pad-header-y);
  padding-bottom:var(--pad-header-y);
}
.logo{display:flex;align-items:center;gap:10px;flex:none}
/* LOGO frame is 120×44 in the design. */
.logo-img{display:block;width:120px;height:auto;flex:none}
.logo-img-light{width:120px}
.logo small{
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-medium);
  color:var(--on-ink-pure);opacity:.62;
  border-left:1px solid rgba(255,255,255,.2);padding-left:10px;
}

/* Menus: 5px between items, 20px padding inside each — Figma 123:833 / 83:388. */
.nav-links{display:flex;align-items:center;gap:5px;list-style:none}
.nav-links a{
  display:flex;align-items:center;justify-content:center;padding:12px 20px;
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  line-height:1.15;white-space:nowrap;
  color:var(--on-ink-pure);
  border-radius:var(--radius-full);
  transition:color var(--t),background var(--t);
}
.nav-links a:hover,.nav-links li.current-menu-item>a{color:var(--primary);background:rgba(255,255,255,.05)}

/* Container 123:844 — menus and the CTA sit 10px apart. */
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}

.badge-new{
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--w-semi);
  color:var(--on-ink-pure);background:var(--primary);
  padding:2px 7px;border-radius:var(--radius-full);margin-left:7px;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:2px;
}

/* ---- Mobile nav: hamburger + drawer, ported from the blog theme --------
   Same markup, class names and state hooks as 5centscdn-blog-theme so both
   sites open and close identically. Colours are remapped onto this theme's
   tokens; --header-h is measured by help-center.js so the drawer always sits
   flush under the bar whatever the current header height is. */

.navbar-menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
}
.navbar-menu-toggle-bars{position:relative;display:block;width:26px;height:18px}
.navbar-menu-toggle-bars span{
  position:absolute;left:0;width:100%;height:2.5px;
  border-radius:99px;background:var(--on-ink-pure);
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.navbar-menu-toggle-bars span:nth-child(1){top:0}
.navbar-menu-toggle-bars span:nth-child(2){top:50%;transform:translateY(-50%)}
.navbar-menu-toggle-bars span:nth-child(3){top:auto;bottom:0}
/* Bars morph to an X. */
.navbar-menu-toggle.is-active .navbar-menu-toggle-bars span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.navbar-menu-toggle.is-active .navbar-menu-toggle-bars span:nth-child(2){opacity:0}
.navbar-menu-toggle.is-active .navbar-menu-toggle-bars span:nth-child(3){top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}

.nav-drawer{
  position:fixed;inset:0;top:var(--header-h,104px);z-index:55;
  display:none;background:#0a0b0d;
}
.nav-drawer.is-open{display:block}
body.nav-open{overflow:hidden}
/* Belt-and-braces alongside the JS resize handler: above the breakpoint the
   drawer can never show, even if it was left open. */
@media(min-width:641px){.nav-drawer{display:none!important}}

.nav-drawer-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:28px 0 32px}
/* Fills the viewport so the CTA's margin-top:auto pins it to the bottom. */
.nav-drawer-inner{display:flex;flex-direction:column;gap:22px;min-height:calc(100vh - var(--header-h,104px) - 60px)}
.nav-drawer-groups{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}

/* Row pill. Also matches `.nav-drawer-groups a` so a real WP menu renders
   the same component without needing the class on every item. */
.nav-drawer-pill,.nav-drawer-groups a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:56px;padding:0 20px;
  border:0;border-radius:12px;background:#1a1b1d;
  color:var(--on-ink-pure);text-decoration:none;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  cursor:pointer;transition:background var(--t),color var(--t);
}
.nav-drawer-pill:hover,.nav-drawer-groups a:hover{background:#222327;color:var(--primary)}

.nav-drawer-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.nav-drawer-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 24px;border:0;border-radius:var(--radius-full);
  font-family:var(--font-heading);font-size:var(--fs-l);font-weight:var(--w-semi);
  cursor:pointer;transition:filter var(--t);
}
.nav-drawer-btn.is-primary{
  background-image:var(--grad-btn);
  border:2px solid var(--primary);color:var(--on-ink-pure);
}
.nav-drawer-btn.is-primary:hover{filter:brightness(1.12)}

/* ==========================================================================
   4. Buttons — Figma "Button/Try Now" 123:932 + B1-Button type style
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 26px;
  font-family:var(--font-heading);font-size:var(--fs-m);font-weight:var(--w-semi);
  line-height:1.15;white-space:nowrap;
  border:none;border-radius:var(--radius-full);cursor:pointer;
  transition:filter var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn.primary,.btn-solid{background:var(--grad);color:var(--on-ink-pure)}
.btn.primary:hover,.btn-solid:hover{filter:brightness(1.07)}
.btn.outline,.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.outline:hover,.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn.bg-white{background:var(--card);color:var(--text)}
.btn.outline-inverse{background:transparent;border:1px solid rgba(255,255,255,.24);color:var(--on-ink-pure)}
.btn.outline-inverse:hover{border-color:var(--primary)}

/* The header CTA: 141×61, 2px green rim, black→green sweep. */
.btn.cta-pill{
  width:141px;height:61px;padding:0;
  border:2px solid var(--primary);border-radius:var(--radius-full);
  background-image:var(--grad-btn);
  color:var(--on-ink-pure);font-size:var(--fs-l);
}
.btn.cta-pill:hover{filter:brightness(1.12)}
.btn.pill-cta{height:56px;padding:0 30px;font-size:var(--fs-l)}
.btn:disabled{filter:grayscale(.3) brightness(.95);cursor:not-allowed}

/* Pill label / chip. */
.tab,.blog-tab{
  display:inline-flex;align-items:center;height:38px;padding:0 20px;
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-medium);
  color:var(--text-2);background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-full);
}
.tab a,.blog-tab a{color:inherit}

/* ==========================================================================
   5. Breadcrumb line — Figma "Path" 435:3320
   ========================================================================== */

.crumbline{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:40px 0 30px;
  font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-regular);
  color:var(--text-3);
}
.crumbline a{transition:color var(--t)}
.crumbline a:hover{color:var(--primary)}
.crumbline .sep{color:var(--border);user-select:none}
.crumbline .here{color:var(--text);font-weight:var(--w-medium)}

/* ==========================================================================
   6. Guides layout — Figma 296:699
      Left Panel/Guides (381px) + Content (709px), 30px gutter.
   ========================================================================== */

.guides{
  display:grid;grid-template-columns:var(--panel-w) minmax(0,1fr);
  gap:var(--gap-panel);align-items:start;
  padding-bottom:var(--sec-gap);
}

/* ---- Left panel (425:320) ---- */
.gpanel{
  display:flex;flex-direction:column;gap:20px;
  background:var(--card);border-radius:var(--radius-sm);padding:20px;
  box-shadow:var(--shadow);
  /* 190px, not 120px: the category screen now carries the same sticky
     sub-bar as the article screen (104px header + 68px bar), and at 120px the
     panel head scrolled up underneath it. */
  position:sticky;top:190px;
  /* Grid items default to min-width:auto, so without this the panel refuses to
     shrink below the widest category name and pushes the page sideways. */
  min-width:0;
}

/* Search bar (538:4551): 50px tall, fully rounded, 25px side padding. */
.gsearch{
  display:flex;align-items:center;gap:10px;
  height:50px;padding:8px 25px;width:100%;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-full);box-shadow:var(--shadow);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t);
}
.gsearch:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.gsearch input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  color:var(--text);
}
.gsearch input::placeholder{color:var(--text-3);font-weight:var(--w-medium)}
/* Keyboard Shortcut (538:4555): two 24px keycap glyphs, 6px apart. */
.gsearch-keys{display:flex;align-items:center;gap:6px;flex:none}
.gsearch-keys .fig-ic{width:24px;height:24px}
.gsearch-keys .fig-ic>img{inset:0;width:24px;height:24px}

/* Category group (425:325) */
.gnav-group{display:flex;flex-direction:column;width:100%}
/* The library draws this at XL/25px. Stepped down to L/18px — still on the
   type scale, and the Montserrat Semi-Bold #252525 title stays clearly above
   the Noto Sans Medium #535765 rows beneath it. */
.gnav-title{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:46px;padding:10px;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font-heading);font-size:var(--fs-l);font-weight:var(--w-semi);
  line-height:1.2;color:var(--text);
  transition:color var(--t);
}
.gnav-title:hover{color:var(--primary)}
.gnav-title>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
/* Icon: General 466:3516 — 22px box, chevron leaf on the designed insets.
   Rotated 180° while the group is open, as the design shows it. */
.gnav-chev{width:22px;height:22px;transition:transform var(--t)}
.gnav-chev>img{top:34.17%;right:17.5%;bottom:30.83%;left:20.84%;width:auto;height:auto}
.gnav-title[aria-expanded="true"] .gnav-chev{transform:scaleY(-1)}

/* Container (425:328) — items 5px apart. */
.gnav-list{display:flex;flex-direction:column;gap:5px;width:100%;list-style:none}
.gnav-group[hidden],.gnav-list[hidden]{display:none}
/* Categories name (425:329) */
.gnav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 15px;border-radius:var(--radius-xs);
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  line-height:1.35;
  color:var(--text-2);background:var(--card);
  transition:background var(--t),color var(--t);
}
.gnav-item>span:first-child{min-width:0;overflow-wrap:anywhere}
.gnav-item:hover{background:#eff5ed;color:var(--primary-deep)}
.gnav-item.current{background:var(--primary);color:var(--on-ink)}
/* A row on the path to the current category: named, not selected. */
.gnav-item.in-path{color:var(--text);font-weight:var(--w-semi)}
/* Third level, present only along the path being viewed (see
   fivecents_help_guides_tree). Indented and rail-marked so the nesting reads
   without introducing a second row style. */
.gnav-sub{margin:5px 0 0 15px;padding-left:12px;border-left:2px solid var(--border)}
.gnav-sub .gnav-item{font-size:var(--fs-m)}
.gnav-item .n{margin-left:auto;flex:none;font-size:var(--fs-xs);font-weight:var(--w-regular);opacity:.7}
.gnav-item.current .n{opacity:.85}
.gpanel .gnav-empty{padding:10px 15px;font-size:var(--fs-s);color:var(--text-3)}

/* ---- Content column (477:596) — stacks 30px apart ---- */
.gcontent{display:flex;flex-direction:column;gap:var(--gap-panel);min-width:0}

/* Heading card (477:597) */
.ghead{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card);border-radius:var(--radius-sm);padding:20px;
  box-shadow:var(--shadow);
}
.ghead h1,.ghead h2{
  font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--w-semi);
  line-height:1.2;color:var(--text);
}
.ghead p{
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  line-height:1.45;color:var(--text-2);
}
.ghead .ghead-meta{font-size:var(--fs-s);font-weight:var(--w-regular);color:var(--text-3)}

/* Cards stack (477:600) — 20px apart. */
.gcards{display:flex;flex-direction:column;gap:20px}

/* How cards/Guides (477:601) — 4px green rail on the leading edge. */
.gcard{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card);border-left:4px solid var(--primary);
  border-radius:var(--radius-sm);padding:20px;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t),border-left-width var(--t);
}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.gcard-title{
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  line-height:1.35;color:var(--text);transition:color var(--t);
}
.gcard:hover .gcard-title{color:var(--primary-deep)}
.gcard-desc{
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-regular);
  line-height:1.5;color:var(--text-3);
}
.gcard-meta{
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--w-regular);
  line-height:1.4;color:var(--primary);
}

/* ==========================================================================
   7. Article sub-bar — Figma guides detail screen
   ========================================================================== */

.subbar{
  position:sticky;top:120px;z-index:50;
  background:var(--card);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.subbar-in{display:flex;align-items:center;gap:20px;min-height:68px;padding:14px 0}
.back-pill{
  display:inline-flex;align-items:center;gap:12px;flex:none;
  font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-medium);
  color:var(--text);transition:color var(--t);
}
.back-pill .dot{
  width:40px;height:40px;border-radius:var(--radius-full);flex:none;
  display:grid;place-items:center;background:var(--ink);color:var(--on-ink-pure);
  transition:background var(--t);
}
.back-pill:hover{color:var(--primary)}
.back-pill:hover .dot{background:var(--primary)}

/* Segmented control: track pill + one active segment. */
.seg{
  display:inline-flex;align-items:center;gap:4px;margin:0 auto;flex:none;
  padding:5px;background:var(--background);border:1px solid var(--border);
  border-radius:var(--radius-full);
}
.seg-item{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 34px;border:none;background:none;cursor:pointer;
  font-family:var(--font-heading);font-size:var(--fs-m);font-weight:var(--w-semi);
  color:var(--text-2);border-radius:var(--radius-full);
  transition:background var(--t),color var(--t);
}
.seg-item:hover{color:var(--primary-deep)}
.seg-item.is-active{background:var(--grad);color:var(--on-ink-pure)}

/* ==========================================================================
   8. Steps panel — the design's numbered "Steps" card
   ========================================================================== */

.steps-panel{
  background:var(--card);border-radius:var(--radius-sm);padding:20px;
  box-shadow:var(--shadow);
}
/* The panel's column is what pins — `align-items:start` on .layout collapses
   the aside to its content height, leaving a sticky child nothing to travel in. */
.layout>aside{position:sticky;top:190px}
.steps-panel h4{
  font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--w-semi);
  line-height:1.15;color:var(--text);padding:10px;margin-bottom:6px;
}
.steps-list{display:flex;flex-direction:column;gap:5px;list-style:none}
.steps-list a{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 15px;border-radius:var(--radius-xs);
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-medium);
  line-height:1.4;color:var(--text-2);background:var(--card);
  transition:background var(--t),color var(--t);
}
.steps-list a:hover{background:#eff5ed;color:var(--primary-deep)}
.steps-num{
  width:22px;height:22px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-full);
  background:var(--background);color:var(--text-3);
  font-size:var(--fs-xs);font-weight:var(--w-semi);line-height:1;
  transition:background var(--t),color var(--t);
}
.steps-list a:hover .steps-num{background:#dcecd7;color:var(--primary-deep)}
.steps-list a.current{background:var(--primary);color:var(--on-ink);font-weight:var(--w-semi)}
.steps-list a.current .steps-num{background:var(--on-ink);color:var(--primary)}

/* ==========================================================================
   9. Landing intro + search console
   ========================================================================== */

.intro{padding:52px 0 36px}
.intro .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.intro-text{min-width:0}
.intro-art{flex:none;width:320px;max-width:36vw}
.intro-art svg,
.intro-art img{width:100%;height:auto;display:block}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-semi);
  letter-spacing:.04em;text-transform:uppercase;color:var(--primary);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(79,168,61,.18);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(79,168,61,.22)}50%{box-shadow:0 0 0 8px rgba(79,168,61,0)}}
.intro h1{
  font-family:var(--font-heading);font-weight:var(--w-semi);
  font-size:var(--fs-h1);line-height:1.15;color:var(--text);max-width:680px;
}
.intro p.sub{
  margin:16px 0 0;max-width:600px;
  font-size:var(--fs-l);font-weight:var(--w-regular);line-height:1.5;color:var(--text-2);
}

/* Wide search console — the panel search bar at page scale. */
.console{position:relative;max-width:640px;margin:30px 0 0}
.console-bar{
  display:flex;align-items:center;gap:10px;
  height:60px;padding:10px 25px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-full);box-shadow:var(--shadow);
  transition:border-color var(--t),box-shadow var(--t);
}
.console-bar:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.console-bar svg.search-ic{flex:none;color:var(--text-3)}
.console-bar input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);color:var(--text);
}
.console-bar input::placeholder{color:var(--text-3);font-weight:var(--w-medium)}
.kbd{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--w-semi);
  color:var(--text-3);border:1px solid var(--border);border-radius:var(--radius-xs);
  padding:4px 8px;background:var(--background);white-space:nowrap;
}
.console-bar .gsearch-keys{margin-left:auto}

/* ==========================================================================
   10. Category tab strip (kept for the landing filter row)
   ========================================================================== */

.sticky-nav{padding:6px 0 10px}
.sticky-nav.is-sticky{position:sticky;top:104px;z-index:40;background:var(--background)}
.sticky-nav-container{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.category-scroller{flex:1 1 auto;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:8px}
.category-list{display:flex;align-items:center;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;width:100%;padding:2px 0;scrollbar-width:none}
.category-list.is-scrollable{cursor:grab}
.category-list::-webkit-scrollbar{display:none}
.category-list.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.category-list.is-dragging a,.category-list.is-dragging button{cursor:grabbing}
.category-list.scroll-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.category-list.scroll-left{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.category-list.scroll-left.scroll-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

.category-item,.pill{
  display:inline-flex;align-items:center;flex:none;
  height:52px;padding:0 24px;border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-medium);
  color:var(--text-2);background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.category-item:hover,.pill:hover{color:var(--primary-deep);border-color:var(--primary)}
.category-item.active,.category-item.current-cat,.pill.active,.pill.current-cat{background:var(--grad);border-color:transparent;color:var(--on-ink-pure)}
.category-item .n,.pill .n{font-size:var(--fs-xs);font-weight:var(--w-regular);opacity:.7;margin-left:7px}
.category-item.active .n,.pill.active .n{opacity:.85}

.category-scrollbar{position:relative;height:29px;flex:0 0 auto}
.category-scrollbar[hidden]{display:none}
.category-scrollbar-track{position:absolute;top:50%;left:0;right:0;height:5px;margin-top:-1px;border-radius:var(--radius-full);background:var(--border)}
.category-scrollbar-handle{position:absolute;top:0;left:0;width:29px;height:29px;display:grid;place-items:center;border-radius:var(--radius-full);background:transparent;cursor:grab;touch-action:none;will-change:transform}
.category-scrollbar-handle img{display:block;width:29px;height:29px;pointer-events:none}
.category-scrollbar-handle:active,.category-scrollbar-handle.is-dragging{cursor:grabbing}
.category-scrollbar-handle:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ==========================================================================
   11. Landing category grid
   ========================================================================== */

.section{padding:10px 0 var(--sec-gap)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--radius-sm);padding:20px;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ic{
  width:42px;height:42px;border-radius:var(--radius-xs);flex:none;
  /* Icon box (Colors/Main colors/Background) holds its surface on hover — the
     exported artwork is a dark fill, so flooding the box green fought it. Only
     the glyph tints. */
  display:grid;place-items:center;background:var(--background);color:var(--text);
  transition:color var(--t);
}
.card:hover .ic{color:var(--primary)}
.card-top h3{
  flex:1;display:flex;align-items:center;
  /* H3: Heading / SemiBold / XL (25px). The library sets line-height 100%, but
     branch names wrap ("WHMCS Reseller Module"), and 1.0 collides on two
     lines — 1.15 per the deviation noted at the top of this file. */
  font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--w-semi);line-height:1.15;
}
.card-top h3 a{color:inherit}
.tag-legacy{
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--w-regular);
  color:var(--text-3);background:var(--background);border:1px solid var(--border);
  border-radius:var(--radius-full);padding:2px 8px;margin-left:7px;
  letter-spacing:.04em;text-transform:uppercase;
}
/* Heading / SemiBold / L (18px) on a Colors/Main colors/Background chip,
   matching the icon box on the same row. */
.count{
  font-family:var(--font-heading);font-size:var(--fs-l);font-weight:var(--w-semi);
  line-height:1;color:var(--text-3);flex:none;
  background:var(--background);border-radius:var(--radius-full);padding:6px 11px;
}
.card ul{list-style:none;border-top:1px solid var(--border);padding-top:12px}
.card li a{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  /* Paragraph / Regular / M in Colors/Text/Subtle. Line-height stays at 1.4
     rather than the library's 100%: article titles wrap. */
  font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-regular);
  line-height:1.4;color:var(--text-3);
  transition:color var(--t);
}
.card li a:hover{color:var(--primary)}
.card .empty{border-top:1px solid var(--border);padding-top:12px;color:var(--text-3);font-size:var(--fs-s)}
.card .viewall{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
  font-size:var(--fs-s);font-weight:var(--w-semi);color:var(--primary);transition:opacity var(--t);
}
.card .viewall:hover{opacity:.8}
.no-results{display:none;text-align:center;padding:48px 0;font-size:var(--fs-l);color:var(--text-3)}
.no-results.show{display:block}
.no-results b{color:var(--text)}

/* ==========================================================================
   12. Article page
   ========================================================================== */

.page-head{padding:40px 0 8px}
.page-head .crumb{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  font-size:var(--fs-m);font-weight:var(--w-regular);color:var(--text-3);
}
.page-head .crumb a{transition:color var(--t)}
.page-head .crumb a:hover{color:var(--primary)}
.page-head .crumb .sep{color:var(--border)}
.page-head .cat-badge{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;margin-bottom:16px;
  font-family:var(--font-body);font-size:var(--fs-s);font-weight:var(--w-medium);
  color:var(--primary-deep);background:#e4f1de;border-radius:var(--radius-full);
}
.page-head h1{
  font-family:var(--font-heading);font-weight:var(--w-semi);
  font-size:clamp(1.625rem,1.472rem + 0.679vw,2.125rem);line-height:1.22;max-width:820px;
}
.page-head p.lead{margin:12px 0 0;max-width:700px;color:var(--text-2);font-size:var(--fs-l);line-height:1.5}

/* Panel on the left, matching the guides layout on the category pages.
   The DOM keeps <main> before <aside> and the two are placed into columns
   explicitly, so when this collapses to one column on tablet/mobile the
   article still comes before the 20-row steps panel rather than after it. */
.layout{display:grid;grid-template-columns:var(--panel-w) minmax(0,1fr);gap:var(--gap-panel);padding:30px 0 var(--sec-gap);align-items:start}
.layout>.article{grid-column:2;grid-row:1}
/* Spans both rows: the aside is sticky and its grid area is the travel it
   gets, so confining it to row 1 would unpin it as soon as the article body
   ended, short of the prev/next row. */
.layout>aside{grid-column:1;grid-row:1/-1}
/* Prev/next lives outside <main> so it is not inside the article card. It
   tracks the content column and takes its spacing from the grid gap. */
.layout>.article-nav{grid-column:2;grid-row:2;margin-top:0}
/* The article body itself gets the card treatment, matching the design's
   step cards sitting on the #F4F5F7 canvas. */
.article{min-width:0}
/* Both sub-bar segments scroll to a target that must clear the sticky header
   (104px) and sub-bar (68px). */
#article-body{scroll-margin-top:190px}
.article .prose{
  background:var(--card);border-radius:var(--radius-sm);padding:30px;
  box-shadow:var(--shadow);
  font-size:var(--fs-m);font-weight:var(--w-regular);line-height:1.7;color:var(--text-2);
}
.article .prose>*:first-child{margin-top:0}
.article .prose h2{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--w-semi);line-height:1.25;color:var(--text);margin:32px 0 12px}
.article .prose h3{font-family:var(--font-heading);font-size:var(--fs-l);font-weight:var(--w-semi);line-height:1.3;color:var(--text);margin:26px 0 10px}
.article .prose p{margin:0 0 16px}
.article .prose ul,.article .prose ol{margin:0 0 16px 22px}
.article .prose li{margin:0 0 8px}
.article .prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:opacity var(--t)}
.article .prose a:hover{opacity:.8}
.article .prose img{border-radius:var(--radius-xs);border:1px solid var(--border);margin:8px 0}
.article .prose pre{background:var(--ink);color:#e7f6e2;padding:18px;border-radius:var(--radius-xs);overflow:auto;font-family:var(--font-mono);font-size:var(--fs-s);margin:0 0 18px}
.article .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--background);border:1px solid var(--border);border-radius:4px;padding:1px 6px}
.article .prose pre code{background:none;border:0;padding:0}
.article .prose blockquote{border-left:4px solid var(--primary);background:var(--background);padding:14px 18px;border-radius:0 var(--radius-xs) var(--radius-xs) 0;margin:0 0 18px;color:var(--text-2)}
/* Ratio box for the first embed (see fivecents_help_tag_first_embed) — also
   the scroll target for the sub-bar's Video segment. */
/* min-height as well as the ratio: several articles embed a Scribehow
   walkthrough rather than a video, and a bare 16:9 box squashes those on
   narrow viewports. */
.prose-embed{position:relative;margin:0 0 18px;border-radius:var(--radius-xs);overflow:hidden;background:var(--ink);aspect-ratio:16/9;min-height:420px;scroll-margin-top:190px}
.prose-embed>iframe,.prose-embed>video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.article .prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:var(--fs-s)}
.article .prose th,.article .prose td{border:1px solid var(--border);padding:10px 12px;text-align:left}
.article .prose th{background:var(--background);font-weight:var(--w-semi);color:var(--text)}

/* Legacy sidebar list, restyled onto the panel spec. */
.sidebar{position:sticky;top:190px}
.sidebar h4{font-family:var(--font-heading);font-size:var(--fs-l);font-weight:var(--w-semi);color:var(--text);margin-bottom:12px}
.sidebar .side-list{list-style:none;background:var(--card);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow)}
.sidebar .side-list li{border-bottom:1px solid var(--border)}
.sidebar .side-list li:last-child{border-bottom:0}
.sidebar .side-list a{display:block;padding:12px 16px;font-size:var(--fs-s);color:var(--text-2);transition:background var(--t),color var(--t)}
.sidebar .side-list a:hover{background:#eff5ed;color:var(--primary-deep)}
.sidebar .side-list a.current{background:var(--primary);color:var(--on-ink);font-weight:var(--w-semi)}

.article-nav{display:flex;justify-content:space-between;gap:16px;margin-top:30px;flex-wrap:wrap}
.article-nav a{
  max-width:48%;flex:1 1 240px;
  background:var(--card);border-radius:var(--radius-sm);padding:16px 20px;
  box-shadow:var(--shadow);
  font-size:var(--fs-s);color:var(--text-3);transition:transform var(--t);
}
.article-nav a:hover{transform:translateY(-2px)}
.article-nav a b{display:block;font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-medium);color:var(--text);margin-top:4px;transition:color var(--t)}
.article-nav a:hover b{color:var(--primary)}

/* Row-card article list (search / archive fallbacks). */
.article-list{display:flex;flex-direction:column;gap:20px;padding:8px 0}
.row-card{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border-left:4px solid var(--primary);
  border-radius:var(--radius-sm);padding:16px 20px;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t);
}
.row-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.row-card .ic{width:38px;height:38px}
.row-card:hover .ic{background:var(--primary);color:var(--on-ink)}
.row-card .rc-body{flex:1;min-width:0}
.row-card .rc-body .rc-cat{font-size:var(--fs-xs);font-weight:var(--w-regular);color:var(--primary)}
.row-card .rc-body h3{font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);line-height:1.35;color:var(--text);margin-top:6px;transition:color var(--t)}
.row-card:hover .rc-body h3{color:var(--primary-deep)}
.row-card .rc-body p{margin-top:6px;font-size:var(--fs-s);color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-card .arw{flex:none;color:var(--border);transition:color var(--t),transform var(--t)}
.row-card:hover .arw{color:var(--primary);transform:translateX(2px)}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;padding:30px 0 8px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border-radius:var(--radius-full);
  font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-medium);
  color:var(--text-2);background:var(--card);transition:background var(--t),color var(--t);
}
.pagination .page-numbers:hover{background:#eff5ed;color:var(--primary-deep)}
.pagination .page-numbers.current{background:var(--grad);color:var(--on-ink-pure)}
.pagination .dots{background:none;color:var(--text-3)}
.pagination .dots:hover{background:none}

/* ==========================================================================
   13. Newsletter
   ========================================================================== */

.newsletter-section{padding:0;background:transparent;margin-bottom:var(--sec-gap)}
.newsletter-card{
  position:relative;display:flex;align-items:center;gap:48px;overflow:hidden;
  background-color:var(--background);border:1px solid var(--border);
  border-radius:20px;padding:80px 40px;box-shadow:var(--shadow);
}
.newsletter-card::before{content:"";position:absolute;inset:0;background:url('assets/img/newsletter-bg.jpg') center / cover no-repeat;opacity:.4;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.newsletter-card>*{position:relative;z-index:1}
.newsletter-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:28px}
.newsletter-text h3{font-family:var(--font-heading);font-size:clamp(1.5rem,1.206rem + 1.304vw,2.25rem);font-weight:var(--w-semi);line-height:1.15;color:var(--text)}
.newsletter-text p{margin:12px 0 0;font-size:var(--fs-l);font-weight:var(--w-regular);color:var(--text-2)}
.newsletter-form{width:100%;max-width:620px}
.newsletter-fields{display:flex;align-items:stretch;gap:16px}
.newsletter-fields input{
  flex:1 1 auto;min-width:0;height:64px;padding:0 26px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);outline:none;
  font-family:var(--font-body);font-size:var(--fs-m);color:var(--text);
  transition:border-color var(--t),box-shadow var(--t);
}
.newsletter-fields input::placeholder{color:var(--text-3)}
.newsletter-fields input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.newsletter-submit{
  flex:0 0 auto;height:64px;padding:0 40px;border:0;border-radius:var(--radius-sm);
  background:var(--grad);color:var(--on-ink-pure);cursor:pointer;
  font-family:var(--font-heading);font-size:var(--fs-m);font-weight:var(--w-semi);
  transition:filter var(--t),transform .1s ease;
}
.newsletter-submit:hover{filter:brightness(1.07)}
.newsletter-submit:active{transform:translateY(1px)}
.newsletter-submit:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.newsletter-submit:disabled{filter:grayscale(.3) brightness(.95);cursor:not-allowed}
.newsletter-signup-message{margin:12px 0 0;font-size:var(--fs-s);line-height:1.4}
.newsletter-signup-message.is-success{color:var(--primary-deep)}
.newsletter-signup-message.is-error{color:#d1242f}

/* Side illustration (Figma "Join our Newsletter"), matching the blog theme:
   the mockup is pulled out of flow and bled off the right edge, which
   .newsletter-card overflow:hidden clips to the rounded corner. Because it no
   longer occupies a flex slot, .newsletter-body has to be capped or the
   heading and form would run underneath it. */
.newsletter-card.has-media .newsletter-body{max-width:56%}
.newsletter-media{
  position:absolute;
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  width:44%;
  max-width:450px;
}
.newsletter-media img{width:100%;height:auto;display:block;border-radius:10px}

/* ==========================================================================
   14. Footer — light surface, copyright + socials left, links right
   ========================================================================== */

footer.site{background:var(--background);border-top:1px solid var(--border);padding:30px 0}
.foot-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-left{display:flex;flex-direction:column;gap:18px;min-width:0}
.foot-copy{font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-medium);color:var(--text-2)}
.foot-social{display:flex;align-items:center;gap:12px;list-style:none}
.foot-social a{
  width:36px;height:36px;border-radius:var(--radius-full);
  display:grid;place-items:center;flex:none;
  background:var(--primary);color:var(--on-ink-pure);
  transition:background var(--t),transform var(--t);
}
.foot-social a:hover{background:var(--primary-deep);transform:translateY(-2px)}
.foot-social svg{display:block;width:17px;height:17px}
.foot-links{display:flex;align-items:center;flex-wrap:wrap;list-style:none}
.foot-links li{display:flex;align-items:center}
.foot-links li+li::before{content:"";width:1px;height:16px;background:var(--border);margin:0 16px}
.foot-links a{font-family:var(--font-body);font-size:var(--fs-m);font-weight:var(--w-regular);color:var(--text-2);transition:color var(--t)}
.foot-links a:hover{color:var(--primary)}

/* v1 footer markup, kept resolvable if a child theme still emits it. */
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-col h4{font-family:var(--font-heading);font-size:var(--fs-s);font-weight:var(--w-semi);text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:14px}
.foot-col a{display:block;font-size:var(--fs-s);color:var(--text-2);padding:5px 0;transition:color var(--t)}
.foot-col a:hover{color:var(--primary)}
.foot-col ul{list-style:none}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:36px;padding-top:22px;border-top:1px solid var(--border);font-size:var(--fs-s);color:var(--text-2)}

/* ==========================================================================
   15. Responsive + a11y
   ========================================================================== */

@media(max-width:1180px){
  :root{--pad-header-x:32px;--panel-w:260px;--sec-gap:64px}
  .nav-links a{padding:12px 14px;font-size:var(--fs-m)}
}
@media(max-width:1024px){
  :root{--gap-panel:24px}
  /* minmax(0,1fr), not 1fr — a bare 1fr keeps min-width:auto and lets the
     panel's widest row force a horizontal scrollbar on the whole page. */
  .guides{grid-template-columns:minmax(0,1fr)}
  .gpanel{position:static}
  .layout{grid-template-columns:minmax(0,1fr)}
  /* Release the explicit placement so the two stack in DOM order — article
     first, panel after it. */
  .layout>.article,.layout>aside,.layout>.article-nav{grid-column:auto;grid-row:auto}
  .sidebar,.layout>aside{position:static}
  .newsletter-card{flex-direction:column;align-items:flex-start;padding:48px;gap:32px}
  .newsletter-form{max-width:100%;width:100%}
  /* Card has gone column: drop the bleed, return the mockup to flow and
     give the copy its full width back. */
  .newsletter-card.has-media .newsletter-body{max-width:100%}
  .newsletter-media{position:static;transform:none;width:100%;max-width:420px;margin:0 auto}
  .subbar{top:auto;position:static}
}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .intro-art{width:240px}
}
@media(max-width:768px){
  :root{--sec-gap:48px}
  .nav{padding-top:18px;padding-bottom:18px}
  .newsletter-card{padding:32px}
  .sticky-nav-container{flex-direction:column;gap:12px}
  .category-scroller{width:100%}
  .subbar-in{flex-wrap:wrap;gap:14px;padding: 14px;}
  /* Copy and form only below tablet — the mockup adds height and weight
     without earning either on a phone. */
  .newsletter-media{display:none}
  .seg{margin:0}
}
@media(max-width:720px){
  .intro .wrap{grid-template-columns:1fr}
  .intro-art{display:none}
}
@media(max-width:640px){
  :root{--sec-gap:40px}
  /* Bar collapses to the hamburger; the links and CTA move into the drawer. */
  .nav-links,.nav-right .btn{display:none}
  .navbar-menu-toggle{display:inline-flex}
  .grid{grid-template-columns:1fr}
  .kbd,.gsearch-keys{display:none}
  .newsletter-card{padding:24px}
  .newsletter-fields{flex-direction:column}
  .newsletter-submit{width:100%}
  .article-nav a{max-width:100%}
  .article .prose{padding:20px}
  .foot-inner{align-items:flex-start}
  .seg-item{padding:0 20px;font-size:var(--fs-s)}
}
@media(max-width:480px){
  .category-list{gap:6px}
  .category-item,.pill{height:auto;padding:10px 16px;font-size:var(--fs-s)}
  .gpanel{padding:14px}
  .gsearch{padding:8px 18px}
  .gnav-item{padding:10px 12px}
  .gnav-sub{margin-left:8px;padding-left:8px}
  .foot-links li+li::before{margin:0 10px}
}
/* ==========================================================================
   Command-palette search (Ctrl+K / ⌘K)
   Ported from the blog theme, re-pointed at this theme's tokens so the palette
   picks up the light surfaces and green ramp rather than carrying its own hex.
   ========================================================================== */

.search-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px;
}
.search-modal[hidden]{display:none}
.search-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(13,14,16,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
body.search-open{overflow:hidden}

.search-modal-panel{
  position:relative;z-index:1;
  width:100%;max-width:640px;max-height:70vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  color:var(--text);box-shadow:0 32px 90px rgba(0,0,0,.25);
  animation:search-modal-in .16s ease-out;
}
@keyframes search-modal-in{
  from{opacity:0;transform:translateY(-8px) scale(.99)}
  to{opacity:1;transform:none}
}

.search-modal-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.search-modal-icon{flex:none;color:var(--text-3)}
.search-modal-field{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--font-body);font-size:var(--fs-l);font-weight:var(--w-medium);
  color:var(--text);
}
.search-modal-field::placeholder{color:var(--text-3);font-weight:var(--w-regular)}
.search-modal-close{
  flex:none;padding:4px 10px;cursor:pointer;
  background:none;border:1px solid var(--border);border-radius:var(--radius-xs);
  font-family:var(--font-body);font-size:var(--fs-xs);color:var(--text-3);
  transition:color var(--t),border-color var(--t);
}
.search-modal-close:hover{color:var(--text);border-color:var(--text-3)}

.search-modal-results{flex:1;overflow-y:auto;padding:8px}
.search-modal-state{
  margin:0;padding:28px 14px;text-align:center;
  font-size:var(--fs-s);color:var(--text-3);
}
.search-modal-list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.search-modal-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:8px;
  font-size:var(--fs-m);color:var(--text-2);
  transition:background var(--t),color var(--t);
}
/* Hover and keyboard selection are the same state, so the pointer and the
   arrow keys can never disagree about which row is current. */
.search-modal-item.is-active{background:#eff5ed;color:var(--text)}
.search-modal-item-icon{flex:none;display:inline-flex;color:var(--text-3)}
.search-modal-item.is-active .search-modal-item-icon{color:var(--primary)}
.search-modal-item-icon svg{width:18px;height:18px}
.search-modal-item-text{
  flex:1;min-width:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-modal-item-go{flex:none;font-size:20px;line-height:1;color:var(--primary);opacity:0}
.search-modal-item.is-active .search-modal-item-go{opacity:1}

.search-modal-footer{
  display:flex;flex-wrap:wrap;gap:16px;
  padding:12px 18px;border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-3);
}
.search-modal-footer kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;margin-right:2px;
  background:var(--background);border:1px solid var(--border);border-radius:4px;
  font-family:var(--font-body);font-size:11px;
}

/* The keycap hint opens the palette, so it has to read as a control. */
.gsearch-keys[data-search-trigger]{cursor:pointer}
.gsearch-keys[data-search-trigger]:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-xs)}

@media(max-width:768px){
  .search-modal{padding:8vh 12px 12px}
  .search-modal-footer{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs)}