/*
Theme Name: PluginLab
Theme URI: https://pluginlab.dev/
Description: F2b Spotlight. Dark, cursor-lit panels for a small plugin brochure site. Locked dark, one accent, one radius.
Author: Mac
Author URI: https://profiles.wordpress.org/macvej/
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pluginlab
*/

/* ---------- self-hosted type ---------- */
/* font-display:optional, not swap. The two hero buttons need 363px in the
   fallback face but 335px in Manrope, against 339px available at 375px, so a
   swap flipped .cta-row between two lines and one and moved everything below
   it by 61.5px. That single reflow was the whole mobile CLS. The fonts are
   preloaded and served from disk, so they are effectively always ready inside
   the 100ms block window; optional just removes the late-swap case. */
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional;}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:optional;}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:optional;}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional;}

/* F2b: Spotlight. Variation on Glass Frost where the tiles light up under the
   cursor. The spotlight is the whole point of the surface here, so the panels
   are flatter and darker to let it read. Locked dark. */
:root{
  color-scheme: dark;
  --bg:#0a0c11;
  --panel:#12151c;
  --text:#eef1f6;
  --muted:#939cab;
  --accent:#7c9cff;
  --accent-ink:#060c22;
  --edge:rgba(160,180,225,.14);
  --edge-soft:rgba(160,180,225,.08);
  --r:14px;
  --maxw:1220px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:"Manrope","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px;}
.sec-pad{padding-block:90px;}
.single-plugin .sec-pad{padding-block:80px;}
a{color:inherit;}
img{max-width:100%;}

/* ---------- the spotlight surface ---------- */
.card{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--edge-soft);background:var(--panel);
  transition:border-color .3s ease;
}
/* wash that follows the pointer, painted from two CSS variables */
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
             rgba(124,156,255,.16), transparent 68%);
}
@media (hover:hover){
  .card:hover::before{opacity:1;}
  .card:hover{border-color:rgba(124,156,255,.4);}
}

/* ---------- nav ---------- */
.navbar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--edge-soft);background:rgba(10,12,17,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none;}
.brand span{color:var(--accent);}
.navlinks{display:flex;gap:26px;align-items:center;}
.navlinks a{text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s ease;white-space:nowrap;}
.navlinks a:hover,.navlinks a:focus-visible,.navlinks a[aria-current="page"]{color:var(--text);}

/* ---------- headings ---------- */
h1{margin:0 0 20px;font-size:clamp(33px,3.9vw,46px);line-height:1.1;letter-spacing:-.032em;font-weight:700;max-width:20ch;}
h1 em{font-style:normal;color:var(--accent);}
.post-type-archive-plugin h1{margin:0 0 14px;max-width:18ch;}
.single-plugin h1{margin:0 0 12px;font-size:clamp(30px,3.5vw,42px);max-width:16ch;}
h2{margin:0 0 10px;font-size:clamp(25px,2.9vw,34px);letter-spacing:-.03em;font-weight:700;line-height:1.16;}
.single-plugin h2{font-size:clamp(24px,2.8vw,32px);}
.lede{margin:0 0 30px;font-size:18px;color:var(--muted);max-width:42ch;}
.post-type-archive-plugin .lede{margin:0;max-width:52ch;}
.sec-sub{margin:0 0 42px;color:var(--muted);font-size:17px;max-width:54ch;}
.single-plugin .sec-sub{margin:0 0 40px;max-width:56ch;}

/* ---------- buttons ---------- */
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:14.5px;font-weight:700;padding:13px 25px;border-radius:9px;transition:filter .2s ease,transform .1s ease;}
.btn:hover,.btn:focus-visible{filter:brightness(1.1);}
.btn:active{transform:translateY(1px);}
.ghost{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500;padding:12px 23px;border-radius:9px;border:1px solid var(--edge);transition:border-color .2s ease;}
.ghost:hover,.ghost:focus-visible{border-color:var(--accent);}

/* ---------- front hero ---------- */
.hero{display:grid;grid-template-columns:1fr .95fr;gap:52px;align-items:center;padding-block:76px;}
.hero-card{padding:12px;}
.hero-card img{display:block;width:100%;height:auto;border-radius:8px;position:relative;}

/* ---------- front bento ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.tile{padding:28px;display:flex;flex-direction:column;}
.tile > *{position:relative;}
.t-lead{grid-column:span 4;}
.t-side{grid-column:span 2;}
.t-half{grid-column:span 3;}
.t-wide{grid-column:span 6;}
.tile h3{margin:0 0 9px;font-size:18.5px;font-weight:700;letter-spacing:-.02em;}
.tile p{margin:0;color:var(--muted);font-size:14.8px;}
.tile-shot{margin-top:20px;border-radius:8px;overflow:hidden;border:1px solid var(--edge-soft);}
.tile-shot img{display:block;width:100%;height:auto;}
.plink{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;color:var(--accent);text-decoration:none;font-size:14px;font-weight:700;transition:gap .2s ease;}
.plink:hover,.plink:focus-visible{gap:12px;}

/* icon row, sized per context */
.ptop{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.tile .ptop img,.tile .pglyph{width:40px;height:40px;border-radius:10px;}
.tile .pglyph{font-size:20px;}
.item .ptop{gap:13px;}
.item .ptop img,.item .pglyph{width:46px;height:46px;border-radius:11px;}
.item .pglyph{font-size:23px;}
.ptop img{display:block;}
.pglyph{flex:none;display:flex;align-items:center;justify-content:center;color:var(--accent);background:rgba(124,156,255,.1);border:1px solid var(--edge-soft);}
.tag{margin-left:auto;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--edge-soft);border-radius:999px;padding:4px 10px;}

/* ---------- facts strip, lifted from the Dense Grid variation ---------- */
/* It carries .card, so it picks up the spotlight like everything else here.
   .stat needs position:relative to sit above the card's pointer wash. */
.strip{display:grid;grid-template-columns:repeat(4,1fr);}
.post-type-archive-plugin .strip{margin-top:16px;}
.strip .stat{position:relative;padding:18px 22px;border-right:1px solid var(--edge-soft);}
.strip .stat:last-child{border-right:0;}
.strip .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:23px;color:var(--accent);line-height:1.2;display:block;}
.strip .l{color:var(--muted);font-size:12.8px;margin-top:4px;display:block;}

/* ---------- front: what the shopper sees ---------- */
.look{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;}
.look-card{padding:12px;}
.look-card img{display:block;width:100%;height:auto;border-radius:8px;position:relative;}
.look p{margin:0 0 16px;color:var(--muted);font-size:16px;}
.caption{font-size:13px;color:var(--muted);margin-top:14px;}

/* ---------- front: why it is free ---------- */
.freecard{padding:46px 48px;}
.freecard > *{position:relative;}
.freecard .big{margin:0 0 24px;font-size:clamp(21px,2.5vw,30px);line-height:1.26;letter-spacing:-.025em;font-weight:700;max-width:22ch;}
.freecard .big b{color:var(--accent);font-weight:700;}
.freecols{display:grid;grid-template-columns:1fr 1fr;gap:42px;}
.freecols p{margin:0 0 16px;color:var(--muted);font-size:16px;}
.freecols p:last-child{margin-bottom:0;}

/* ---------- front: what you are not signing up for ---------- */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.not{padding:24px;}
.not > *{position:relative;}
.not i{color:var(--accent);font-size:21px;display:block;margin-bottom:12px;}
.not h4{margin:0 0 5px;font-size:15.8px;font-weight:700;}
.not p{margin:0;color:var(--muted);font-size:14.6px;}

/* ---------- breadcrumbs and page head ---------- */
.crumbs{padding-top:34px;font-size:13.5px;color:var(--muted);}
.crumbs a{text-decoration:none;transition:color .2s ease;}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--accent);}
.crumbs i{font-size:12px;opacity:.6;margin-inline:6px;vertical-align:-1px;}
.post-type-archive-plugin .phead{padding-block:22px 54px;}

/* ---------- archive list, scales to any number ---------- */
.list{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.item{padding:28px;display:flex;flex-direction:column;}
.item > *{position:relative;}
.item h2{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.022em;line-height:1.25;}
.item .kind{margin:0 0 12px;font-size:13px;color:var(--muted);letter-spacing:.02em;}
.item p{margin:0;color:var(--muted);font-size:15px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.chips .chip{font-size:12px;border-radius:6px;padding:4px 9px;}
.acts{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.go{display:inline-flex;align-items:center;gap:7px;color:var(--accent);text-decoration:none;font-size:14.5px;font-weight:700;transition:gap .2s ease;}
.go:hover,.go:focus-visible{gap:12px;}
.alt{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s ease;}
.alt:hover,.alt:focus-visible{color:var(--text);}

/* ---------- single plugin header ---------- */
.single-plugin .phead{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:center;padding-block:26px 64px;}
.idrow{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.idrow img,.idrow .pglyph{width:64px;height:64px;border-radius:15px;}
.idrow img{display:block;}
.idrow .pglyph{font-size:32px;}
.tagline{margin:0 0 26px;font-size:18px;color:var(--muted);max-width:44ch;}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.chip{font-size:12.5px;color:var(--muted);border:1px solid var(--edge-soft);border-radius:7px;padding:5px 11px;}
.chip b{color:var(--text);font-weight:500;}
.chip.soon{color:var(--accent);border-color:rgba(124,156,255,.35);}
.lead-shot{padding:12px;}
.lead-shot img{display:block;width:100%;height:auto;border-radius:8px;position:relative;}
.notice{padding:22px 24px;margin-bottom:0;}
.notice > *{position:relative;}
.notice h3{margin:0 0 6px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px;}
.notice h3 i{color:var(--accent);font-size:18px;}
.notice p{margin:0;color:var(--muted);font-size:14.8px;}

/* ---------- three product types ---------- */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.type{padding:26px;}
.type > *{position:relative;}
.type i{color:var(--accent);font-size:23px;display:block;margin-bottom:14px;}
.type h3{margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.02em;}
.type p{margin:0;color:var(--muted);font-size:14.8px;}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.feat{padding:26px;}
.feat > *{position:relative;}
.feat i{color:var(--accent);font-size:21px;display:block;margin-bottom:13px;}
.feat h3{margin:0 0 7px;font-size:17px;font-weight:700;letter-spacing:-.018em;}
.feat p{margin:0;color:var(--muted);font-size:14.8px;}

/* ---------- screenshot gallery ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.shot{padding:10px;}
.shot > *{position:relative;}
.shot img{display:block;width:100%;height:auto;border-radius:7px;}
.shot figcaption{color:var(--muted);font-size:13.2px;padding:12px 8px 4px;}
.shot.full{grid-column:span 2;}

/* ---------- what gets recorded: fields, not a drawing of a screen ---------- */
.fields{padding:8px 32px 30px;}
.fields > *{position:relative;}
.frow{display:grid;grid-template-columns:190px 1fr;gap:16px;padding-block:14px;border-top:1px solid var(--edge-soft);}
.frow:first-of-type{border-top:0;}
.frow .k{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.8px;color:var(--accent);}
.frow .v{margin:0;color:var(--muted);font-size:14.8px;}

/* ---------- requirements ledger ---------- */
.reqs{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;}
.req{padding-block:16px;border-top:1px solid var(--edge-soft);display:grid;grid-template-columns:150px 1fr;gap:14px;}
.req:nth-child(-n+2){border-top:1px solid var(--edge);}
.req .k{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;color:var(--accent);}
.req .v{margin:0;color:var(--muted);font-size:14.8px;}

.nextprev{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:40px 0;}
.np{display:inline-flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none;font-size:14.8px;transition:color .2s ease;}
.np:hover,.np:focus-visible{color:var(--accent);}

/* ---------- footer ---------- */
footer{padding-block:50px 64px;border-top:1px solid var(--edge-soft);}
.post-type-archive-plugin footer{margin-top:90px;}
.single-plugin footer{margin-top:80px;}
.fgrid{display:grid;grid-template-columns:1.9fr 1fr 1fr;gap:42px;}
.fgrid h5{margin:0 0 14px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.fgrid ul{list-style:none;margin:0;padding:0;}
.fgrid li{margin-bottom:9px;}
.fgrid a{font-size:14.8px;color:var(--muted);text-decoration:none;transition:color .2s ease;}
.fgrid a:hover,.fgrid a:focus-visible{color:var(--accent);}
.fbrand{font-weight:700;font-size:16px;margin:0 0 10px;}
.fnote{margin:0;color:var(--muted);font-size:14.2px;max-width:34ch;}

/* ---------- scroll reveal ---------- */
/* Hidden ONLY when JS is confirmed running. If the script dies, content stays visible. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);}
.js .rv.in{opacity:1;transform:none;}

@media (max-width:980px){
  .wrap{padding-inline:18px;}
  .sec-pad{padding-block:58px;}
  .single-plugin .sec-pad{padding-block:56px;}
  .hero{grid-template-columns:1fr;gap:34px;padding-block:44px;}
  h1{max-width:none;}
  .single-plugin h1,.post-type-archive-plugin h1{max-width:none;}
  .tiles{grid-template-columns:1fr;}
  .t-lead,.t-side,.t-half,.t-wide{grid-column:auto;}
  .strip{grid-template-columns:1fr 1fr;}
  .strip .stat{border-right:0;border-bottom:1px solid var(--edge-soft);}
  .strip .stat:nth-child(odd){border-right:1px solid var(--edge-soft);}
  .strip .stat:nth-last-child(-n+2){border-bottom:0;}
  .look{grid-template-columns:1fr;gap:30px;}
  .freecard{padding:30px 22px;}
  .freecols{grid-template-columns:1fr;gap:0;}
  .nots{grid-template-columns:1fr;}
  .list{grid-template-columns:1fr;}
  .post-type-archive-plugin .phead{padding-block:16px 36px;}
  .single-plugin .phead{grid-template-columns:1fr;gap:32px;padding-block:18px 44px;}
  .types{grid-template-columns:1fr;}
  .feats{grid-template-columns:1fr;}
  .shots{grid-template-columns:1fr;}
  .shot.full{grid-column:auto;}
  .fields{padding:8px 22px 24px;}
  .frow{grid-template-columns:1fr;gap:3px;}
  .reqs{grid-template-columns:1fr;}
  .req:nth-child(2){border-top:1px solid var(--edge-soft);}
  .req{grid-template-columns:1fr;gap:3px;}
  .fgrid{grid-template-columns:1fr;gap:30px;}
  .post-type-archive-plugin footer{margin-top:60px;}
  .single-plugin footer{margin-top:56px;}
  .navlinks{gap:16px;}
}
@media (max-width:560px){ .navlinks a:nth-child(3){display:none;} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} .js .rv{opacity:1;transform:none;} }