/*
Theme Name: AIGuidePro
Theme URI: https://aiguidepro.in
Author: AIGuidePro
Description: Custom theme for AIGuidePro — AI tools indexed by profession. Editorial layout: bold underlined serif headlines, blue category eyebrows, dotted section rules, plain topic-list sidebar.
Version: 1.1.0
Requires PHP: 7.4
Text Domain: proaikit
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --paper-raised:#F8FAFC;
  --ink:#0F172A;
  --ink-soft:#64748B;
  --ink-faint:#94A3B8;
  --accent:#2563EB;
  --accent-strong:#1E3A8A;
  --accent-violet:#7C3AED;
  --accent-ink:#FFFFFF;
  --accent-2:#64748B;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;
  --code-bg:#F8FAFC;
  --shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 22px rgba(15,23,42,0.06);
  --font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-home: "Plus Jakarta Sans", "Inter", ui-sans-serif, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --brand-blue:#0365D7;
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:700px){ .container{ padding:0 20px; } }
h1,h2,h3,h4{ text-wrap:balance; line-height:1.2; margin:0 0 14px; font-family:var(--font-display); font-weight:700; color:var(--ink); }
p{ margin:0 0 16px; max-width:70ch; }

/* Eyebrow: small uppercase red category label, "|" between multiple terms */
.eyebrow-cat{
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:8px;
}
.eyebrow-cat .sep{ color:var(--border-strong); margin:0 6px; font-weight:400; }
.eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:12px;
}
.eyebrow svg{ flex-shrink:0; }

/* Headline: the recurring bold underlined serif link */
.headline{ font-family:var(--font-display); font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.headline:hover{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; letter-spacing:0.03em; text-transform:uppercase;
  padding:13px 26px; border-radius:3px; border:1px solid var(--accent); cursor:pointer;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
}
.btn:hover{ text-decoration:none; background:var(--accent-strong); border-color:var(--accent-strong); }
.btn.btn-outline{ background:transparent; color:var(--ink-soft); border-color:var(--border-strong); text-transform:none; letter-spacing:0; font-weight:500; padding:11px 18px; }
.btn.btn-outline:hover{ color:var(--ink); border-color:var(--ink-faint); }

/* =========================================================
   Section heading: dotted rule, used everywhere a block begins
   ========================================================= */
.section-heading{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  font-family:var(--font-body); font-weight:700; font-size:20px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
  padding-bottom:15px; margin-bottom:30px; border-bottom:3px dotted var(--border-strong);
}
.section-heading .see-all{ font-size:12.5px; font-weight:600; letter-spacing:0.02em; text-transform:none; color:var(--accent); white-space:nowrap; }
.section-heading .section-heading-note{ font-size:12.5px; font-weight:600; letter-spacing:0.02em; text-transform:none; color:var(--ink-faint); white-space:nowrap; }
.recent-tools{ margin:28px 0 8px; }

/* =========================================================
   Header + primary nav
   ========================================================= */
.site-header{ border-bottom:1px solid var(--border); background:var(--paper); position:sticky; top:0; z-index:50; }
.site-header-inner{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 32px; padding:26px 32px; max-width:1180px; margin:0 auto; }
@media (max-width:700px){ .site-header-inner{ padding:18px 20px; } }
.site-branding{ margin:0 auto 0 0; max-width:none; }
.site-branding a{ display:block; text-decoration:none; }
.site-logo{ display:block; height:44px; width:auto; max-width:none; }
@media (max-width:700px){ .site-logo{ height:34px; } }

.primary-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:12px 34px; margin:0; padding:0; }
.primary-nav a{
  position:relative; color:var(--ink); font-size:15.5px; font-weight:500;
  padding-bottom:3px;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent);
  transition:right .18s ease;
}
.primary-nav a:hover{ color:var(--accent); text-decoration:none; }
.primary-nav a:hover::after{ right:0; }

/* Mobile nav toggle (checkbox-driven, no JS) */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:20px; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:1px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle-input:focus-visible + .nav-toggle{ outline:2px solid var(--accent); outline-offset:4px; }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .primary-nav{ flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .primary-nav ul{ flex-direction:column; gap:0; padding:6px 0 4px; }
  .primary-nav li{ width:100%; border-bottom:1px solid var(--border); }
  .primary-nav li:last-child{ border-bottom:none; }
  .primary-nav a{ display:block; padding:13px 2px; }
  .primary-nav a::after{ display:none; }
  .nav-toggle-input:checked ~ .primary-nav{ max-height:460px; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .primary-nav .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
    padding:0; background:transparent;
  }
  .primary-nav .sub-menu li{ border-bottom:none; }
  .primary-nav .sub-menu a{ padding:10px 2px 10px 18px; font-size:12px; }
}

/* Visually hidden but available to assistive tech / search engines */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ border-bottom:1px solid var(--border); background:var(--paper-raised); }
.hero-inner{ padding:64px 32px 56px; text-align:center; }
@media (max-width:700px){ .hero-inner{ padding:44px 20px 40px; } }
.hero .eyebrow{ justify-content:center; }
.hero h1{ font-size:clamp(30px,4.4vw,46px); max-width:20ch; margin:0 auto 18px; }
.hero-sub{ color:var(--ink-soft); font-size:17px; max-width:56ch; margin:0 auto 30px; }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* Homepage, plus the header and footer on every page: Plus Jakarta Sans throughout. */
.site-header, .site-footer,
.home .hero, .home .stats-bar, .home .content-shell{
  --font-display:var(--font-home); --font-body:var(--font-home);
  font-family:var(--font-home);
}

/* Homepage look: solid blue hero with white type, big title-case section
   headings, rounded normal-case buttons, plain (not underlined) headlines. */
.home .hero{ background:var(--brand-blue); border-bottom:none; }
.home .hero-inner{ padding:84px 32px 80px; }
@media (max-width:700px){ .home .hero-inner{ padding:56px 20px 52px; } }
.home .hero .eyebrow{ color:#fff; opacity:.85; }
.home .hero h1{ color:#fff; font-size:clamp(34px,5.2vw,58px); line-height:1.15; letter-spacing:-0.02em; max-width:18ch; margin-bottom:22px; }
.home .hero-sub{ color:#fff; opacity:.92; font-size:18.5px; margin-bottom:36px; }
.home .btn{ font-family:inherit; font-size:16px; font-weight:600; letter-spacing:0; text-transform:none; padding:16px 30px; border-radius:8px; }
.home .hero .btn{ background:#fff; border-color:#fff; color:var(--brand-blue); }
.home .hero .btn:hover{ background:#EAF2FE; border-color:#EAF2FE; }
.home .hero .btn.btn-outline{ background:transparent; border-color:#fff; color:#fff; padding:16px 30px; font-weight:600; }
.home .hero .btn.btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; }
.home .hero a:focus-visible{ outline-color:#fff; }

.home .stat strong{ font-size:36px; font-weight:800; letter-spacing:-0.02em; }

/* Section title bar: blue band, white title, white square "View all" button on the right. */
.home .section-heading{
  align-items:center; background:var(--brand-blue); color:#fff; border-radius:0;
  font-size:clamp(19px,2.2vw,23px); font-weight:700; letter-spacing:-0.01em; text-transform:capitalize; line-height:1.25;
  border-bottom:none; padding:24px 24px 24px 28px; margin:60px 0 28px;
}
.home main > .section-heading:first-child{ margin-top:0; }
.home .section-heading .see-all{
  flex-shrink:0; background:#fff; color:var(--brand-blue); border-radius:0; padding:11px 18px;
  font-size:13.5px; font-weight:700; letter-spacing:0; line-height:1.2; transition:background .15s ease;
}
.home .section-heading .see-all:hover{ background:#DCEBFD; text-decoration:none; }
.home .section-heading .see-all:focus-visible{ outline-color:#fff; }
@media (max-width:480px){ .home .section-heading{ padding:18px 16px 18px 18px; } .home .section-heading .see-all{ padding:9px 12px; font-size:12.5px; } }
/* "Why AIGuidePro": three reason cards under a title bar. */
.why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:700px){ .why-grid{ grid-template-columns:minmax(0,1fr); } }
.why-card{ background:#F1F6FE; border-top:3px solid var(--brand-blue); padding:26px 24px 24px; }
.why-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--brand-blue); color:#fff; margin-bottom:18px; }
.why-card h3{ font-size:18px; letter-spacing:-0.01em; margin:0 0 8px; color:var(--ink); }
.why-card p{ margin:0; font-size:14.5px; line-height:1.6; color:#475569; }
.home .headline{ text-decoration:none; }
.home .feature-item h2, .home .feature-item h3{ letter-spacing:-0.015em; }
.home .home-tool-card{ border-radius:12px; padding:22px; }
.home .home-tool-card h3{ font-size:17.5px; }
/* Newsletter panel: deep navy block, white type, square to match the title bars. */
.home .cta-panel{ background:#0B1F4B; border-radius:0; margin-top:60px; }
.home .cta-panel h2{ color:#fff; letter-spacing:-0.02em; }
.home .cta-panel p{ color:#C7D5F0; }
.home .cta-panel input[type=email]{ border-radius:8px; border-color:#fff; }
.home .cta-panel .btn{ background:var(--brand-blue); border-color:var(--brand-blue); }
.home .cta-panel .btn:hover{ background:#2B82EA; border-color:#2B82EA; }
.home .cta-panel :focus-visible{ outline-color:#fff; }
.home .cta-panel .cta-panel-status{ margin:16px auto 0; }
.home .cta-panel .cta-panel-status--success{ color:#7EE2A8; }
.home .cta-panel .cta-panel-status--invalid, .home .cta-panel .cta-panel-status--error{ color:#FFB4B4; }
.home .cta-panel .cta-panel-status--not-configured{ color:#C7D5F0; }

/* =========================================================
   Stats bar
   ========================================================= */
.stats-bar{ border-bottom:1px solid var(--border); background:var(--paper); }
.stats-bar-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:28px 32px; }
.stat{ flex:1 1 160px; max-width:220px; text-align:center; padding:0 24px; border-left:1px solid var(--border); }
.stat:first-child{ border-left:none; }
.stat strong{ display:block; font-family:var(--font-display); font-size:30px; color:var(--accent); line-height:1; margin-bottom:6px; }
.stat span{ font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:600px){ .stat{ border-left:none; border-top:1px solid var(--border); padding:16px 12px 0; flex:1 1 45%; } .stat:first-child{ border-top:none; } }

/* =========================================================
   Section shell
   ========================================================= */
.section{ padding:52px 0; }
.section-panel{ background:var(--paper-raised); }

/* =========================================================
   Content shell: main column + sidebar (used on homepage too)
   ========================================================= */
.content-shell{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; }
@media (max-width:900px){ .content-shell{ grid-template-columns:minmax(0,1fr); } }
.content-shell.has-top-padding{ padding:44px 0 72px; }

/* =========================================================
   Latest-articles block: one feature item + a stacked list
   ========================================================= */
.latest-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:stretch; gap:44px; margin-bottom:8px; }
@media (max-width:700px){ .latest-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* Feature item (large) — thumb grows to fill the row's height so it matches the 3-item list beside it */
.feature-item{ display:flex; flex-direction:column; height:100%; }
.feature-item .thumb{ flex:1 1 auto; min-height:220px; border-radius:5px; overflow:hidden; margin-bottom:16px; }
.feature-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.feature-item h2, .feature-item h3{ font-size:26px; margin:0 0 10px; }
.feature-item p{ color:var(--ink-soft); font-size:15px; margin-bottom:8px; }
.feature-item .meta{ display:block; text-align:right; font-size:12.5px; color:var(--ink-faint); }

/* Compact list item (small thumb + eyebrow + headline) */
.post-list{ display:flex; flex-direction:column; }
.post-list-item{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border); }
.post-list-item:first-child{ padding-top:0; }
.post-list-item:last-child{ border-bottom:none; padding-bottom:0; }
.post-list-item .thumb{ width:92px; height:72px; flex-shrink:0; border-radius:4px; overflow:hidden; }
.post-list-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-list-item .body{ min-width:0; }
.post-list-item h3{ font-size:16px; margin:0; line-height:1.32; }
.post-list-item.no-thumb .thumb{ display:none; }

/* Row layout for related posts (3 across) */
.post-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:28px; }
@media (max-width:700px){ .post-row{ grid-template-columns:minmax(0,1fr); } }
.post-row .post-list-item{ border-bottom:none; padding:0; flex-direction:column; }
.post-row .post-list-item .thumb{ width:100%; height:auto; aspect-ratio:16/10; }

/* Cover-tile placeholder art (no featured image): a deliberate colored
   cover card, not an empty box — dark ink ground for list items, the red
   accent reserved for the lead "feature" story so it reads as the one
   to look at first. */
.cover-tile{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--paper);
}
.cover-tile::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
  background-size:18px 18px;
  opacity:0.5;
}
.cover-tile .cat-icon{ position:relative; opacity:0.95; }
.feature-item .cover-tile{ background:var(--accent); }

/* =========================================================
   "MORE": text-only two-column list, no thumbnails
   ========================================================= */
.more-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:8px 56px; }
@media (max-width:700px){ .more-grid{ grid-template-columns:minmax(0,1fr); } }
.more-item{ padding:20px 0; border-bottom:1px solid var(--border); }
.more-item h3{ font-size:16.5px; margin:0; line-height:1.32; }

/* =========================================================
   Homepage: Free AI Tools teaser
   ========================================================= */
.home-tools-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:16px; margin:0 0 8px; align-items:stretch; }
.home-tool-card{ display:flex; flex-direction:column; height:100%; padding:18px 20px; border:1px solid var(--border); border-radius:6px; background:var(--paper); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.home-tool-card:hover{ border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.06); transform:translateY(-2px); text-decoration:none; }
.home-tool-card h3{ font-family:var(--font-display); font-size:16.5px; margin:0 0 6px; color:var(--ink); }
.home-tool-card p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }

/* =========================================================
   Ad slots
   ========================================================= */

/* =========================================================
   CTA / membership-style panel
   ========================================================= */
.cta-panel{ background:var(--paper-raised); border-radius:6px; padding:56px 40px; text-align:center; margin:8px 0 52px; }
.cta-panel h2{ color:var(--accent); font-size:clamp(24px,3.4vw,32px); max-width:22ch; margin:0 auto 18px; }
.cta-panel p{ color:var(--ink-soft); font-family:var(--font-body); max-width:56ch; margin:0 auto 28px; font-size:15.5px; }
.cta-panel form{ display:flex; flex-wrap:wrap; gap:10px; max-width:420px; margin:0 auto; }
.cta-panel input[type=email]{ flex:1 1 200px; min-width:0; padding:13px 16px; border:1px solid var(--border-strong); border-radius:3px; background:var(--paper); color:var(--ink); font-family:var(--font-body); }
@media (max-width:480px){
  .cta-panel{ padding:40px 20px; }
  .cta-panel form{ flex-direction:column; }
  .cta-panel input[type=email]{ flex:none; width:100%; }
  .cta-panel .btn{ width:100%; justify-content:center; }
}
.cta-panel-status{ font-size:14px; margin:16px auto 0; max-width:420px; }
.cta-panel-status--success{ color:#2E7D4F; }
.cta-panel-status--invalid,
.cta-panel-status--error{ color:var(--accent); }
.cta-panel-status--not-configured{ color:var(--ink-faint); }
.ad-slot-live{ margin:44px 0; text-align:center; }

/* =========================================================
   Editorial callout
   ========================================================= */
.callout{ border-left:3px solid var(--accent); background:var(--paper-raised); padding:20px 24px; border-radius:0 5px 5px 0; }
.callout p{ margin:0; }

/* =========================================================
   Sidebar
   ========================================================= */
.widget{ margin-bottom:34px; }
.widget-title{
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); margin:0 0 16px; padding-bottom:12px; border-bottom:2px dotted var(--border-strong);
}
.widget .widget-inner > *:last-child{ margin-bottom:0; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ margin:0; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.widget li:last-child{ border-bottom:none; }
.search-form{ display:flex; gap:8px; }
.search-form input[type=search]{
  flex:1; padding:11px 14px; border:1px solid var(--border-strong); border-radius:4px;
  background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.search-form input[type=search]::placeholder{ color:var(--ink-faint); }
.search-form input[type=search]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.search-form button{
  padding:11px 18px; border-radius:4px; border:1px solid var(--accent); background:var(--accent);
  color:var(--accent-ink); cursor:pointer; font-weight:700; font-size:14px; transition:background .15s, border-color .15s;
}
.search-form button:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }

/* The full profession list — mirrors the reference's long topic-link list */
.sidebar-topics{ border:1px solid var(--border); border-radius:5px; padding:24px 26px; }
.sidebar-topics ul{ list-style:none; margin:0; padding:0; }
.sidebar-topics li{ padding:10px 0; border-bottom:1px solid var(--border); }
.sidebar-topics li:last-child{ border-bottom:none; }
.sidebar-topics a{ display:flex; align-items:center; gap:10px; color:var(--accent); font-size:14.5px; font-weight:600; }
.sidebar-topics a:hover{ text-decoration:underline; }
.sidebar-topics .g{ display:flex; color:var(--ink-faint); flex-shrink:0; }

/* Homepage sidebar: blue header bar joined to a bordered list of full-width
   rows (icon tile, name, chevron), plus a search box squared to match. */
.home .content-sidebar .widget-title{
  background:var(--brand-blue); color:#fff; font-size:17px; font-weight:700; letter-spacing:-0.01em;
  text-transform:capitalize; line-height:1.25; margin:0; padding:19px 20px; border-bottom:none;
}
.home .sidebar-topics{ border:1px solid var(--border); border-top:none; border-radius:0; padding:0; }
.home .sidebar-topics li{ padding:0; border-bottom:1px solid var(--border); font-size:14.5px; }
.home .sidebar-topics li:last-child{ border-bottom:none; }
.home .sidebar-topics a{ gap:12px; padding:11px 16px; color:var(--ink); font-weight:600; line-height:1.35; transition:background .15s ease, color .15s ease; }
.home .sidebar-topics a::after{
  content:""; flex-shrink:0; width:7px; height:7px; margin-left:auto; border-top:2px solid var(--border-strong); border-right:2px solid var(--border-strong);
  transform:rotate(45deg); transition:border-color .15s ease, transform .15s ease;
}
.home .sidebar-topics a:hover{ background:#F1F6FE; color:var(--brand-blue); text-decoration:none; }
.home .sidebar-topics a:hover::after{ border-color:var(--brand-blue); transform:translateX(3px) rotate(45deg); }
.home .sidebar-topics .g{ align-items:center; justify-content:center; width:32px; height:32px; background:#EAF2FE; color:var(--brand-blue); }
.home .search-form{ gap:0; }
.home .search-form input[type=search]{ padding:14px 16px; border-radius:0; border-right:none; font-size:15px; }
.home .search-form button{ padding:14px 20px; border-radius:0; background:var(--brand-blue); border-color:var(--brand-blue); font-family:inherit; font-size:15px; }
.home .search-form button:hover{ background:#0B1F4B; border-color:#0B1F4B; }

/* =========================================================
   Category / archive intro
   ========================================================= */
.archive-intro{ max-width:70ch; margin-top:44px; margin-bottom:8px; }
.archive-intro h1{ font-size:34px; }
.archive-intro .dek{ font-family:var(--font-body); color:var(--ink-soft); font-size:16px; }
.archive-updated{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; font-weight:700;
  color:var(--accent-strong); background:var(--paper-raised); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; margin-top:6px;
}
.archive-updated::before{ content:""; width:7px; height:7px; border-radius:50%; background:#2E7D4F; flex-shrink:0; }

.profession-tools, .related-tools{ margin:36px 0 8px; }

/* =========================================================
   Tool "Save for later" toggle
   ========================================================= */
.aigp-save-toggle{
  display:inline-flex; align-items:center; gap:8px; margin:40px 0 0; font-family:var(--font-body); font-size:13.5px; font-weight:700;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--border-strong); border-radius:999px; padding:9px 18px; cursor:pointer;
}
.aigp-save-toggle:hover{ border-color:#F59E0B; color:#F59E0B; }
.aigp-save-toggle.is-saved{ color:#B45309; border-color:#F59E0B; background:#FFFBEB; }
.aigp-save-toggle-icon{ font-size:15px; }

/* =========================================================
   Tool "Was this useful?" vote widget
   ========================================================= */
.aigp-vote-widget{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin:40px 0 0; padding:18px 22px; background:var(--paper-raised); border:1px solid var(--border); border-radius:8px;
}
.aigp-vote-question{ font-weight:700; font-size:14.5px; color:var(--ink); }
.aigp-vote-btn{
  font-family:var(--font-body); font-size:13.5px; font-weight:700; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--border-strong); border-radius:999px; padding:9px 18px; cursor:pointer;
}
.aigp-vote-btn:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); }
.aigp-vote-btn:disabled{ cursor:default; opacity:.75; }
.aigp-vote-count{ font-size:13px; color:var(--ink-faint); }

/* =========================================================
   Tool embed widget
   ========================================================= */
.aigp-embed-widget{
  margin:16px 0 0; padding:16px 22px; background:var(--paper); border:1px solid var(--border); border-radius:8px;
}
.aigp-embed-widget summary{ font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; }
.aigp-embed-note{ margin:10px 0; font-size:13px; color:var(--ink-soft); }
.aigp-embed-code{
  width:100%; box-sizing:border-box; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px;
  color:var(--ink); background:var(--paper-raised); border:1px solid var(--border-strong); border-radius:6px; padding:10px 12px; resize:vertical;
}
.aigp-embed-copy-btn{
  margin-top:10px; font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--accent);
  background:#fff; border:1px solid var(--border-strong); border-radius:7px; padding:8px 16px; cursor:pointer;
}
.aigp-embed-copy-btn:hover{ border-color:var(--accent); }

.related-categories{ margin-top:44px; padding-top:30px; border-top:1px solid var(--border); }
.related-categories .kicker{ font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; display:block; }
.related-categories .list{ display:flex; flex-wrap:wrap; gap:10px; }
.related-categories a{
  font-size:13.5px; font-weight:600; padding:8px 14px; border:1px solid var(--border); border-radius:5px; color:var(--ink);
}
.related-categories a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* =========================================================
   Single post
   ========================================================= */
.post-header{ max-width:760px; margin-bottom:26px; text-align:center; }
.post-breadcrumb{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; max-width:100%;
  margin:0 0 26px; padding:10px 18px; border-radius:999px; background:#F1F3F5;
  font-family:"Outfit", var(--font-body); font-size:14.5px; line-height:1.5; color:var(--ink);
}
.post-breadcrumb a{ color:var(--ink); }
.post-breadcrumb a:hover{ color:var(--accent); }
.post-breadcrumb .sep{ color:var(--ink-soft); }
.post-breadcrumb [aria-current]{ color:var(--ink-soft); }
.post-header h1{
  font-family:"Outfit", var(--font-body); font-weight:700; font-size:clamp(30px,4.6vw,48px);
  line-height:1.15; letter-spacing:-0.015em; margin:0 0 20px;
}
.post-byline{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 20px; padding:13px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  font-family:"Outfit", var(--font-body); font-size:17px; font-weight:600; color:var(--ink);
}
.post-byline .author{ color:var(--ink); }

/* Share buttons: full-width row under the title, plus a floating stack on wide screens. */
.share-btn{ display:flex; align-items:center; justify-content:center; color:#fff; transition:filter .15s ease, transform .15s ease; }
.share-btn:hover{ filter:brightness(1.12); text-decoration:none; }
.share-x{ background:#000; }
.share-facebook{ background:#1877F2; }
.share-linkedin{ background:#0A66C2; }
.share-email{ background:#3A3F47; }
.post-share-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:26px 0 0; }
.post-share-bar .share-btn{ height:42px; }
.post-share-float{ position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:40; display:none; flex-direction:column; gap:12px; }
.post-share-float .share-btn{ width:50px; height:50px; border-radius:50%; box-shadow:0 4px 12px rgba(15,23,42,.15); }
.post-share-float .share-btn:hover{ transform:scale(1.06); }
@media (min-width:1320px){ .post-share-float{ display:flex; } }

.post-thumb{ border-radius:5px; overflow:hidden; margin:26px 0; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; }

.takeaways{ background:var(--paper-raised); border-radius:5px; padding:22px 26px; margin:26px 0; max-width:760px; }
.takeaways .eyebrow{ margin-bottom:12px; }
.takeaways ul{ margin:0; padding-left:1.1em; }
.takeaways li{ margin:7px 0; color:var(--ink-soft); font-size:15px; }

.toc-box{ background:var(--paper-raised); border-radius:5px; padding:20px 24px; margin:26px 0; max-width:760px; }
.toc-box .toc-label{ display:block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.toc-box ol{ margin:0; padding-left:1.2em; }
.toc-box li{ margin:5px 0; font-size:14px; }
.toc-box a{ color:var(--ink-soft); }
.toc-box a:hover{ color:var(--accent); }

/* Article body: text-first editorial rhythm. Whitespace and headings do the
   separating, so posts read well with or without images. */
/* Article typography: geometric sans, large airy body text, plain bold section headings. */
:root{
  --font-article:"Outfit", var(--font-body);
}
.entry-content{ max-width:760px; font-size:19px; line-height:2; font-family:var(--font-article); color:#1F2937; }
.entry-content > *{ margin-top:0; margin-bottom:1.2em; }
.entry-content > :last-child{ margin-bottom:0; }
.entry-content p{ max-width:none; }
.entry-content a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.entry-content a:hover{ color:var(--accent-strong); text-decoration-thickness:2px; }
.entry-content h2,
.faq-block h2{
  font-family:var(--font-article); font-size:34px; font-weight:700; line-height:1.25; letter-spacing:-0.015em; color:var(--ink);
  margin:1.8em 0 .6em; scroll-margin-top:96px;
}
.entry-content h2 a, .faq-block h2 a{ color:inherit; }
.entry-content > h2:first-child{ margin-top:0; }
.entry-content h3{ font-family:var(--font-article); font-size:23px; font-weight:600; line-height:1.35; margin:1.7em 0 .5em; color:var(--ink); }
.entry-content h4{ font-family:var(--font-body); font-size:16px; margin:1.6em 0 .4em; }
.entry-content h2 + h3{ margin-top:.4em; }
.entry-content ul, .entry-content ol{ padding-left:1.3em; }
.entry-content li{ margin:.5em 0; }
.entry-content li::marker{ color:var(--accent); }
.entry-content figure{ margin:2em 0; }
.entry-content img{ border-radius:8px; }
.entry-content figcaption{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink-faint); text-align:center; }
.entry-content hr{ border:0; border-top:1px solid var(--border); margin:2.5em 0; }
/* Tables: full dark grid, bold header row with a heavier rule under it, article-size text. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:2em 0; }
.entry-content figure.wp-block-table{ margin:2em 0; }
.entry-content figure.wp-block-table .table-scroll{ margin:0; }
.entry-content .wp-block-table table{ border-collapse:collapse; }
.entry-content table{
  border-collapse:collapse; width:100%; min-width:560px; margin:0; background:var(--paper);
  font-family:var(--font-article); font-size:18px; line-height:1.85; color:#1F2937;
}
.entry-content th, .entry-content td{ border:1px solid #1F2937; padding:10px 11px; text-align:left; vertical-align:middle; }
.entry-content thead th, .entry-content table tr:first-child th{
  border-bottom:2px solid #1F2937; background:var(--paper); font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0;
}
.entry-content figure.wp-block-table figcaption{ margin-top:10px; }
@media (max-width:600px){ .entry-content table{ font-size:16px; line-height:1.7; } }
.entry-content blockquote{ border-left:3px solid var(--accent); margin:2em 0; padding:4px 22px; color:var(--ink-soft); font-family:var(--font-display); font-style:italic; }

/* Callout boxes for testing articles: Quick Take, Test Result, My Takeaway.
   Available in the editor as Group block styles (see functions.php). */
.entry-content .aigp-box,
.entry-content .wp-block-group.is-style-quick-take,
.entry-content .wp-block-group.is-style-test-result,
.entry-content .wp-block-group.is-style-takeaway{
  margin:2em 0; padding:22px 26px; border:1px solid var(--border); border-radius:12px; background:var(--paper-raised);
  font-size:16.5px; line-height:1.7;
}
.entry-content .aigp-box > *,
.entry-content .wp-block-group[class*="is-style-"] > *{ margin:0 0 .8em; }
.entry-content .aigp-box > :last-child,
.entry-content .wp-block-group[class*="is-style-"] > :last-child{ margin-bottom:0; }
.entry-content .aigp-box::before,
.entry-content .wp-block-group[class*="is-style-"]::before{
  display:block; margin-bottom:10px; font-family:var(--font-body); font-size:11.5px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
}
.entry-content .aigp-box--quick-take, .entry-content .is-style-quick-take{ border-left:3px solid var(--accent); }
.entry-content .aigp-box--quick-take::before, .entry-content .is-style-quick-take::before{ content:"Quick take"; }
.entry-content .aigp-box--test-result::before, .entry-content .is-style-test-result::before{ content:"Test result"; }
.entry-content .aigp-box--takeaway, .entry-content .is-style-takeaway{ background:#F5F3FF; border-color:#E4DEFB; }
.entry-content .aigp-box--takeaway::before, .entry-content .is-style-takeaway::before{ content:"My takeaway"; color:var(--accent-violet); }
.entry-content .aigp-box h3, .entry-content .wp-block-group[class*="is-style-"] h3{ margin-top:0; font-size:18px; }
@media (max-width:600px){
  .entry-content{ font-size:17.5px; line-height:1.9; }
  .entry-content h2, .faq-block h2{ font-size:26px; }
  .entry-content h3{ font-size:20px; }
  .entry-content .aigp-box, .entry-content .wp-block-group[class*="is-style-"]{ padding:18px 18px; }
}

.faq-block{ max-width:760px; margin:56px 0 38px; }
.faq-item{ border-bottom:1px solid var(--border); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-weight:700; font-size:16px; list-style:none; font-family:var(--font-display); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{ content:"+"; color:var(--accent); margin-right:12px; font-family:var(--font-body); }
.faq-item[open] summary::before{ content:"\2212"; }
.faq-item p{ margin-top:12px; color:var(--ink-soft); font-family:var(--font-body); }

.author-card{ display:flex; gap:16px; align-items:flex-start; background:var(--paper-raised); border-radius:5px; padding:22px; margin:38px 0; max-width:760px; }
.author-card .avatar{ width:52px; height:52px; border-radius:50%; flex-shrink:0; }
.author-card h4{ margin:0 0 4px; font-size:14.5px; font-family:var(--font-body); }
.author-card p{ margin:0; font-size:13.5px; color:var(--ink-soft); font-family:var(--font-body); }

.related-posts{ margin-top:50px; }

/* =========================================================
   Footer
   ========================================================= */
/* Black footer: the colour tokens are re-pointed to light-on-dark values here,
   so every rule below picks them up without its own override. */
.site-footer{
  --ink-soft:#CBD5E1; --ink-faint:#94A3B8; --border:#262B33; --border-strong:#3B4350; --accent:#60A5FA;
  background:#000; color:var(--ink-soft); margin-top:20px;
}
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)); gap:32px; padding:60px 0 40px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:minmax(0,1fr); } }
.footer-grid h4{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin:0 0 10px; }
.footer-grid a{ color:var(--ink-soft); font-size:14.5px; transition:color .15s; }
.footer-grid a:hover{ color:var(--accent); text-decoration:underline; }
.footer-brand a{ display:inline-block; text-decoration:none; }
.footer-brand .site-logo{ height:30px; }
.footer-brand p{ color:var(--ink-faint); font-size:14.5px; line-height:1.6; margin:14px 0 0; max-width:26ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:border-color .15s, color .15s;
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); }
.footer-bottom{
  border-top:1px solid var(--border); padding:22px 0; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:var(--ink-faint); font-size:13.5px;
}

/* =========================================================
   Cookie consent banner
   ========================================================= */
.cookie-consent{
  display:none; position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width:560px; margin:0 auto; padding:20px 22px; border-radius:6px;
  background:var(--ink); color:var(--paper); box-shadow:var(--shadow);
}
.cookie-consent.is-visible{ display:block; }
.cookie-consent p{ margin:0 0 14px; font-size:13.5px; line-height:1.5; color:#D8D6D0; max-width:none; }
.cookie-consent a{ color:var(--paper); text-decoration:underline; }
.cookie-consent-actions{ display:flex; justify-content:flex-end; gap:10px; }
.cookie-consent-decline{
  background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--paper);
  border-radius:3px; padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer;
}
.cookie-consent-decline:hover{ border-color:var(--paper); }
.cookie-consent .cookie-consent-accept{ padding:10px 18px; font-size:13px; }
@media (max-width:600px){
  .cookie-consent{ left:12px; right:12px; bottom:12px; padding:16px 18px; }
  .cookie-consent-actions{ justify-content:stretch; }
  .cookie-consent-actions button{ flex:1; }
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination{ display:flex; gap:8px; margin-top:44px; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:8px 14px; border:1px solid var(--border); border-radius:3px; font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.pagination .current{ border-color:var(--accent); color:var(--accent); }
.pagination a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* =========================================================
   Comments
   ========================================================= */
.comments-area{ margin-top:50px; padding-top:38px; border-top:1px solid var(--border); max-width:70ch; }
.comments-area h2, .comments-area h3{ font-family:var(--font-display); }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .comment{ border-bottom:1px solid var(--border); padding:18px 0; }
.comment-form input, .comment-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--border-strong); border-radius:3px; background:var(--paper); color:var(--ink); margin-bottom:12px; font-family:var(--font-body); }
.comment-form textarea{ min-height:120px; }

/* =========================================================
   404 / search
   ========================================================= */
.state-page{ padding:80px 0; text-align:center; }
.state-page .code{ font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:16px; margin-bottom:14px; }
.search-inline{ display:flex; gap:8px; max-width:420px; margin:0 auto; }
.search-inline input{ flex:1; padding:12px 14px; border:1px solid var(--border-strong); border-radius:3px; font-family:var(--font-body); }

/* =========================================================
   Tools hub dashboard (/tools/). Lives here, not inline in the
   page content, because inline <style> tags in that page's Custom
   HTML block have been stripped on save on live, silently killing
   this CSS. A real enqueued stylesheet file can't be stripped that way.
   ========================================================= */
.aigp-dash-intro{ margin:0 0 28px; color:var(--ink-soft); font-size:17px; line-height:1.6; }
.aigp-dash-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 220px); justify-content:flex-start; gap:16px;
  margin:0 0 20px; padding:0; list-style:none;
}
@media (max-width:520px){
  .aigp-dash-grid{ grid-template-columns:1fr; }
}
.aigp-dash-card{
  display:flex; flex-direction:column; width:100%; height:100%; box-sizing:border-box;
  padding:18px 20px; border:1px solid var(--border); border-radius:12px;
  background:var(--paper); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.aigp-dash-card:hover{
  border-color:var(--accent); box-shadow:0 6px 18px rgba(37,99,235,.12); transform:translateY(-2px);
  text-decoration:none;
}
.aigp-dash-card h3{
  font-family:var(--font-display); font-size:17px; margin:0 0 6px; color:var(--ink);
}
.aigp-dash-card p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.aigp-dash-card.is-soon{ opacity:.6; cursor:default; }
.aigp-dash-badge{
  display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); background:var(--paper-raised); border:1px solid var(--border);
  border-radius:999px; padding:2px 9px; margin-bottom:8px;
}
.aigp-dash-section-title{ font-family:var(--font-display); font-size:22px; margin:0 0 6px; }
.aigp-dash-section-sub{ margin:0 0 18px; color:var(--ink-soft); font-size:15px; }

.aigp-filter-bar{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  margin:0 0 34px; box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.aigp-filter-search{ position:relative; margin-bottom:14px; }
.aigp-filter-search input{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--border-strong); border-radius:9px;
  padding:12px 14px 12px 40px;
}
.aigp-filter-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.aigp-filter-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; }
.aigp-filter-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.aigp-filter-pill{
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--border-strong); border-radius:999px;
  padding:7px 15px; cursor:pointer;
}
.aigp-filter-pill.is-active{ color:#fff; background:var(--accent); border-color:var(--accent); }
.aigp-filter-count{ margin-top:12px; font-size:12.5px; color:var(--ink-faint); }
.aigp-filter-empty{ display:none; padding:40px 20px; text-align:center; color:var(--ink-soft); }
.aigp-filter-empty.is-visible{ display:block; }
.aigp-tool-section[hidden]{ display:none; }
.aigp-dash-card[hidden]{ display:none; }

.aigp-dash-grid li{ position:relative; }
.aigp-save-btn{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:var(--paper); color:var(--ink-faint);
  font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.aigp-save-btn:hover{ border-color:#F59E0B; color:#F59E0B; }
.aigp-save-btn.is-saved{ color:#F59E0B; border-color:#F59E0B; background:#FFFBEB; }

/* =========================================================
   Tools hub page shell (page-tools.php): blue hero, full-width
   card grid, then starter kits / how it works / FAQ. Scoped to
   .tools-hub so the card and filter rules above keep working
   wherever else that markup is used.
   ========================================================= */
.tools-hub{ --font-display:var(--font-home); --font-body:var(--font-home); font-family:var(--font-home); }

.tools-hero{ background:var(--brand-blue); color:#fff; }
.tools-hero .container{ padding-top:48px; padding-bottom:78px; }
@media (max-width:700px){ .tools-hero .container{ padding-top:34px; padding-bottom:64px; } }
.tools-crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); }
.tools-crumbs a{ color:#fff; }
.tools-crumbs .sep{ opacity:.6; }
.tools-hero h1{ color:#fff; font-size:clamp(30px,4.6vw,50px); line-height:1.12; letter-spacing:-0.02em; max-width:20ch; margin:0 0 16px; }
.tools-hero-sub{ color:#fff; opacity:.94; font-size:18px; line-height:1.6; max-width:64ch; margin:0 0 26px; }
@media (max-width:700px){ .tools-hero-sub{ font-size:16.5px; } }
.tools-hero-facts{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; }
.tools-hero-facts li{
  font-size:13.5px; font-weight:600; line-height:1.2; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.34);
}
.tools-hero a:focus-visible{ outline-color:#fff; }

.tools-hub-body{ padding-bottom:76px; }

/* Search + filters: a raised card overlapping the hero. Not sticky, the site
   header already is, and two stacked sticky bars ate a third of the screen. */
.tools-hub .aigp-filter-bar{
  position:relative; top:auto; margin:-38px 0 48px; padding:22px 24px;
  border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.10);
}
.tools-hub .aigp-filter-search input{ font-size:16px; padding:14px 16px 14px 44px; border-radius:10px; }
.tools-hub .aigp-filter-search input::placeholder{ color:var(--ink-soft); }
.tools-hub .aigp-filter-search svg{ left:15px; }
.tools-hub .aigp-filter-pill{ font-weight:600; padding:8px 16px; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.tools-hub .aigp-filter-pill:hover{ border-color:var(--accent); color:var(--accent); }
.tools-hub .aigp-filter-pill.is-active, .tools-hub .aigp-filter-pill.is-active:hover{ color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
.tools-hub .aigp-filter-count{ color:var(--ink-soft); }
@media (max-width:700px){
  .tools-hub .aigp-filter-bar{ padding:16px; margin-bottom:38px; }
  .tools-hub .aigp-filter-pills{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none; }
  .tools-hub .aigp-filter-pills::-webkit-scrollbar{ display:none; }
  .tools-hub .aigp-filter-pill{ flex-shrink:0; }
}

.tools-hub .aigp-tool-section, .tools-hub-block, .tools-hub .recent-tools{ margin:0 0 54px; }
.tools-hub h2, .tools-hub .recent-tools .section-heading{
  font-family:var(--font-home); font-size:clamp(22px,2.6vw,27px); font-weight:700; line-height:1.25;
  letter-spacing:-0.015em; text-transform:none; color:var(--ink); margin:0 0 6px;
}
.tools-hub .aigp-dash-section-sub, .tools-hub-block-sub{ margin:0 0 22px; max-width:70ch; color:var(--ink-soft); font-size:15.5px; }
.tools-hub .recent-tools .section-heading{ align-items:baseline; padding:0; border:0; margin-bottom:22px; }

.tools-hub .aigp-dash-grid, .tools-kit-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); justify-content:normal; gap:16px;
  margin:0; padding:0; list-style:none;
}
.tools-hub .aigp-dash-card{ padding:20px; border-radius:12px; }
.tools-hub a.aigp-dash-card:hover{ border-color:var(--brand-blue); box-shadow:0 8px 22px rgba(3,101,215,.13); }
.tools-hub .aigp-dash-card h3{ font-size:16.5px; line-height:1.3; letter-spacing:-0.005em; margin:0 0 7px; padding-right:28px; transition:color .15s ease; }
.tools-hub a.aigp-dash-card:hover h3{ color:var(--brand-blue); }
.tools-hub .aigp-dash-card p{ font-size:14px; line-height:1.55; max-width:none; }
.tools-hub .aigp-save-btn{ top:12px; right:12px; width:32px; height:32px; border-color:transparent; background:transparent; font-size:16px; transition:color .15s ease, background .15s ease; }
.tools-hub .aigp-save-btn:hover{ border-color:transparent; background:#FFFBEB; }
.tools-hub .aigp-save-btn.is-saved{ border-color:transparent; background:#FFFBEB; }
.tools-hub .aigp-filter-empty{ margin-bottom:54px; border:1px dashed var(--border-strong); border-radius:12px; }

.tools-hub .home-tools-grid{ grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); margin:0; }
.tools-hub .home-tool-card{ border-radius:12px; padding:20px; }
.tools-hub .home-tool-card:hover{ border-color:var(--brand-blue); box-shadow:0 8px 22px rgba(3,101,215,.13); }

.tools-kit-card{
  display:flex; align-items:center; gap:14px; height:100%; padding:14px 16px; border:1px solid var(--border); border-radius:12px;
  background:var(--paper); color:var(--ink); font-size:15px; font-weight:600; line-height:1.35;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tools-kit-card:hover{ border-color:var(--brand-blue); color:var(--brand-blue); box-shadow:0 8px 22px rgba(3,101,215,.13); transform:translateY(-2px); text-decoration:none; }
.tools-kit-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; border-radius:10px; background:#EAF2FE; color:var(--brand-blue); }

.tools-steps{ counter-reset:tools-step; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; }
@media (max-width:800px){ .tools-steps{ grid-template-columns:minmax(0,1fr); } }
.tools-steps li{ counter-increment:tools-step; padding:24px; border-radius:12px; background:#F1F6FE; }
.tools-steps li::before{
  content:counter(tools-step); display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:var(--brand-blue); color:#fff; font-size:15px; font-weight:700; margin-bottom:16px;
}
.tools-steps h3{ font-size:17.5px; letter-spacing:-0.01em; margin:0 0 8px; }
.tools-steps p{ margin:0; font-size:14.5px; line-height:1.6; color:#475569; }

.tools-hub .faq-block{ max-width:820px; margin:14px 0 0; }
.tools-hub .faq-item:first-child{ border-top:1px solid var(--border); }
.tools-hub .faq-item summary{ font-size:16.5px; }
.tools-hub .faq-item p{ font-size:15.5px; max-width:none; }
.tools-hub-body > :last-child{ margin-bottom:0; }

/* =========================================================
   Single tool page shell (page-chatgpt-slash-commands.php): the
   tools hub's blue hero, then the tool and its article full width.
   The tool's own layout CSS ships inline with the page content, so
   every rule here is prefixed with .slash-page to win over it.
   ========================================================= */
.tool-page{ --font-display:var(--font-home); --font-body:var(--font-home); font-family:var(--font-home); }
.tool-page .tools-hero h1{ max-width:24ch; }
.tool-page-body{ padding-bottom:76px; }

.slash-page .aigp-sc{ margin:0 0 60px; }
/* The hero already says this. */
.slash-page .aigp-sc-intro{ display:none; }
.slash-page .aigp-sc-note{
  position:relative; margin:-38px 0 22px; padding:18px 22px; max-width:none; font-size:15px; line-height:1.6;
  background:var(--paper); border:1px solid var(--border); border-left:4px solid var(--brand-blue); border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.10);
}
.slash-page .aigp-sc-card{
  background:var(--paper); border-radius:16px; padding:0 24px 28px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.06);
}
.slash-page .aigp-sc-searchbar{ background:var(--paper); padding:22px 0 12px; }
.slash-page .aigp-sc-search{ background:var(--paper-raised); padding:14px 16px 14px 44px; border-radius:10px; }
.slash-page .aigp-sc-search:focus{ outline-color:var(--brand-blue); border-color:var(--brand-blue); }
.slash-page .aigp-sc-search-wrap svg{ left:15px; }
.slash-page .aigp-sc-pills{ padding-bottom:16px; }
.slash-page .aigp-sc-pill:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.slash-page .aigp-sc-pill[aria-pressed="true"]{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.slash-page .aigp-sc-copyall{ color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); padding:11px 18px; transition:background .15s ease; }
.slash-page .aigp-sc-copyall:hover:not(:disabled){ background:#0B1F4B; border-color:#0B1F4B; }
.slash-page .aigp-sc .aigp-sc-group{ margin-top:34px; }
.slash-page .aigp-sc .aigp-sc-group h2{ font-size:clamp(20px,2.4vw,24px); letter-spacing:-0.015em; margin:0 0 6px; }
.slash-page .aigp-sc-group-sub{ margin:0 0 18px; max-width:none; font-size:14.5px; }
.slash-page .aigp-sc .aigp-sc-list{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; }
.slash-page .aigp-sc .aigp-sc-item{ padding:14px 16px; border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease; }
.slash-page .aigp-sc .aigp-sc-item:hover{ border-color:var(--brand-blue); box-shadow:0 6px 18px rgba(3,101,215,.10); }
.slash-page .aigp-sc-item code{ color:var(--brand-blue); font-size:14.5px; }
.slash-page .aigp-sc-item > span{ color:#475569; line-height:1.5; }
.slash-page .aigp-sc-star{ border-color:transparent; background:transparent; }
.slash-page .aigp-sc-star:hover{ border-color:transparent; background:#FFFBEB; color:#B45309; }
.slash-page .aigp-sc-star.is-picked{ border-color:transparent; }
.slash-page .aigp-sc-copy{ color:var(--brand-blue); }
.slash-page .aigp-sc-copy:hover{ border-color:var(--brand-blue); background:#F1F6FE; }
.slash-page .aigp-sc-note code, .slash-page .aigp-faq code, .slash-page .aigp-sc-article code{ color:#0B3F8C; background:#EAF2FE; }
@media (max-width:700px){
  .slash-page .aigp-sc-note{ padding:16px; }
  .slash-page .aigp-sc-card{ padding:0 14px 22px; }
  .slash-page .aigp-sc-searchbar{ padding-top:16px; }
  .slash-page .aigp-sc-pills{ scrollbar-width:none; }
  .slash-page .aigp-sc-pills::-webkit-scrollbar{ display:none; }
  .slash-page .aigp-sc .aigp-sc-list{ grid-template-columns:1fr; }
}

/* The article under the tool: one readable column. */
.slash-page .aigp-sc-article, .tool-page-widgets{ max-width:780px; }
.slash-page .aigp-sc-article h2{ font-size:clamp(22px,2.6vw,27px); line-height:1.25; letter-spacing:-0.015em; margin:44px 0 12px; scroll-margin-top:110px; }
.slash-page .aigp-sc-article > h2:first-child{ margin-top:0; }
.slash-page .aigp-sc-article p, .slash-page .aigp-sc-article li{ font-size:16.5px; line-height:1.75; color:#334155; max-width:none; }
.slash-page .aigp-sc-article ul, .slash-page .aigp-sc-article ol{ margin:0 0 16px; padding-left:1.3em; }
.slash-page .aigp-sc-article li{ margin:.45em 0; }
.slash-page .aigp-sc-article li::marker{ color:var(--brand-blue); font-weight:700; }
.slash-page .aigp-sc-article strong{ color:var(--ink); }
.slash-page .aigp-faq h3{ font-size:17.5px; letter-spacing:-0.005em; margin:0 0 6px; padding-top:20px; border-top:1px solid var(--border); }
.slash-page .aigp-faq h3:first-child{ border-top:0; padding-top:0; }
.slash-page .aigp-faq p{ margin-bottom:20px; }
.slash-page .aigp-cta-card{ margin:48px 0 0; padding:32px 28px; border-radius:16px; background:#F1F6FE; border-color:#D6E6FB; }
.slash-page .aigp-cta-card::before{ background:var(--brand-blue); }
.slash-page .aigp-cta-card p{ font-size:15.5px; color:#475569; }
.slash-page a.aigp-cta-tag{ color:var(--ink); font-size:13.5px; padding:7px 14px; }
.slash-page a.aigp-cta-tag:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.slash-page .aigp-cta-btn{ background:var(--brand-blue); }
.slash-page .aigp-cta-btn:hover{ background:#0B1F4B; }
.tool-page-widgets .aigp-vote-widget, .tool-page-widgets .aigp-embed-widget{ border-radius:12px; }

/* =========================================================
   Content-format archives (taxonomy-content_format.php): the
   tools hub's hero, a switcher between Guides / Comparisons /
   Reviews, and the articles as a card grid (content-card.php).
   ========================================================= */
.format-switch{
  position:relative; display:flex; flex-wrap:wrap; gap:8px; margin:-34px 0 44px; padding:16px 18px;
  background:var(--paper); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.10);
}
.format-pill{
  font-size:13.5px; font-weight:600; line-height:1.2; color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; transition:border-color .15s ease, color .15s ease;
}
.format-pill:hover{ border-color:var(--brand-blue); color:var(--brand-blue); text-decoration:none; }
.format-pill.is-active, .format-pill.is-active:hover{ color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
@media (max-width:700px){
  .format-switch{ flex-wrap:nowrap; overflow-x:auto; padding:14px; scrollbar-width:none; }
  .format-switch::-webkit-scrollbar{ display:none; }
  .format-pill{ flex-shrink:0; }
}

.post-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); gap:24px; }
.post-card{
  display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-card:hover{ border-color:var(--brand-blue); box-shadow:0 10px 26px rgba(3,101,215,.14); transform:translateY(-2px); }
.post-card-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-raised); }
.post-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.post-card:hover .post-card-thumb img{ transform:scale(1.03); }
.post-card-body{ display:flex; flex-direction:column; flex:1; padding:20px 20px 22px; }
.post-card-cat{ align-self:flex-start; margin-bottom:10px; font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand-blue); }
.post-card h2{ font-size:18.5px; line-height:1.32; letter-spacing:-0.01em; margin:0 0 10px; }
.post-card h2 a{ color:var(--ink); }
.post-card h2 a:hover{ color:var(--brand-blue); text-decoration:none; }
.post-card-body p{ flex:1; margin:0 0 16px; max-width:none; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.post-card-meta{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.format-empty{ padding:40px 20px; max-width:none; text-align:center; color:var(--ink-soft); border:1px dashed var(--border-strong); border-radius:12px; }
.format-page .pagination{ margin-top:36px; }
.format-page .tools-hub-block{ margin:64px 0 0; }
.format-page .tools-hub-block h2{ font-size:clamp(22px,2.6vw,27px); line-height:1.25; letter-spacing:-0.015em; margin:0 0 6px; }
/* No featured image: a light brand-tinted tile, so a row of them doesn't read as a wall of black. */
.post-card .cover-tile{ background:#EAF2FE; color:var(--brand-blue); }
.post-card .cover-tile::before{ background-image:radial-gradient(rgba(3,101,215,.22) 1.5px, transparent 1.5px); opacity:1; }

/* =========================================================
   Profession guide (category.php): the tools hub's hero, then
   stacked blocks for tools, articles, FAQ and related professions.
   ========================================================= */
.prof-page .tool-page-body{ padding-top:48px; }
.prof-block{ margin:0 0 64px; }
.prof-block:last-child{ margin-bottom:0; }
.prof-block-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; margin:0 0 22px; }
.prof-block-head h2{ font-size:clamp(22px,2.6vw,27px); line-height:1.25; letter-spacing:-0.015em; margin:0; }
.prof-block-head a{ font-size:14px; font-weight:600; color:var(--brand-blue); white-space:nowrap; }
.prof-page .home-tools-grid{ grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); margin:0; }
.prof-page .home-tool-card{ border-radius:12px; padding:20px; }
.prof-page .home-tool-card:hover{ border-color:var(--brand-blue); box-shadow:0 8px 22px rgba(3,101,215,.13); }
.prof-page .home-tool-card h3{ line-height:1.3; margin:0 0 7px; transition:color .15s ease; }
.prof-page .home-tool-card:hover h3{ color:var(--brand-blue); }
.prof-page .home-tool-card p{ font-size:14px; line-height:1.55; }
.prof-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.prof-cta{
  display:inline-flex; align-items:center; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--brand-blue);
  background:var(--paper); border:1px solid var(--border-strong); border-radius:8px; padding:12px 18px; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.prof-cta:hover{ border-color:var(--brand-blue); background:#F1F6FE; text-decoration:none; }
.prof-cta.is-primary{ color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
.prof-cta.is-primary:hover{ background:#0B1F4B; border-color:#0B1F4B; }
.prof-page .faq-block{ max-width:820px; margin:0; border-top:1px solid var(--border); }
.prof-page .faq-item summary{ font-size:16.5px; }
.prof-page .faq-item p{ font-size:15.5px; max-width:none; }
.prof-page .pagination{ margin-top:36px; }
/* Nothing overlaps the hero on these pages, so it does not need the extra room below. */
.prof-page .tools-hero .container{ padding-bottom:52px; }