/*
Theme Name: Graig.net — Search Intelligence
Theme URI: https://www.graig.net/
Author: Graig Upton
Description: Bespoke lightweight theme for Graig.net. Dark dossier aesthetic, inline critical CSS per template, zero page-builder overhead. Built for Core Web Vitals and structured data.
Version: 5.5.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: graignet
*/


/* ============ GLOBAL BASE (nav + footer on every page) ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:root{--ink:#0a0a0a;
    --coal:#16181b;
    --paper:#f4f4f2;
    --white:#ffffff;
    --steel:#b6b8bc;
    --line:#303338;
    --line-light:#dcdcd8;
    --sight:#01ffff; /* the single red accent — used like a laser dot */
    --display:'Michroma', sans-serif;
    --body:'Archivo', system-ui, sans-serif;
    --mono:'IBM Plex Mono', monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
    height:86px;}
.nav-links{display:flex;gap:34px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.nav-links a{color:var(--steel);transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--sight);color:var(--sight);padding:11px 20px;transition:background .2s,color .2s}
.nav-cta:hover{background:var(--sight);color:var(--ink)}
.nav-item{position:relative}
.nav-drop{position:absolute;top:100%;left:0;margin-top:18px;
    background:var(--coal);border:1px solid var(--line);min-width:236px;padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
    z-index:60;}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{display:block;padding:11px 20px;font-family:var(--mono);font-size:.7rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--steel);white-space:nowrap;}
.nav-drop a:hover,.nav-drop a.current{color:var(--white);background:rgba(200,16,46,.08)}
.nav-caret{font-size:.55rem;margin-left:5px;color:var(--steel);display:inline-block}
.menu-toggle{display:none;background:none;border:1px solid var(--line);width:44px;height:44px;cursor:pointer;position:relative;flex:none}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:11px;width:22px;height:2px;background:var(--paper);transition:transform .25s ease,opacity .2s ease}
.menu-toggle span{top:21px}
.menu-toggle span::before{left:0;top:-7px}
.menu-toggle span::after{left:0;top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;background:var(--coal);border-bottom:1px solid var(--line);padding:10px 0 22px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 28px;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.04)}
.mobile-nav a:hover{color:var(--sight)}
.mobile-nav .group{padding:14px 28px 6px;font-size:.62rem;letter-spacing:.24em;color:var(--sight);font-family:var(--mono);text-transform:uppercase}
.site-wordmark .period{color:var(--sight)}
.site-wordmark .ai{position:relative;display:inline-block}
.site-wordmark .ai::after{content:"";position:absolute;
    left:6%;right:6%;bottom:-0.22em;height:2px;
    background:var(--sight);}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;align-items:start}
.site-wordmark{font-family:var(--display);font-size:1.25rem;letter-spacing:.1em;display:inline-flex;align-items:baseline}
.site-wordmark .period{color:var(--sight)}
.site-wordmark .ai{position:relative;display:inline-block}
.site-wordmark .ai::after{content:"";position:absolute;left:6%;right:6%;bottom:-0.22em;height:2px;background:var(--sight)}
.foot-meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--steel);line-height:1.9;text-transform:uppercase}
.foot-meta a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--sight);text-underline-offset:4px}
.foot-col .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sight);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.foot-col .k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sight);flex:none}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:12px}
.foot-col a{font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);transition:color .2s}
.foot-col a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--sight);text-underline-offset:3px}
.foot-col a.more{color:var(--sight)}
.socials{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-top:20px}
.socials a{color:var(--steel)}
.socials a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--sight);text-underline-offset:4px}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#e4e4e0;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom .rdash{color:var(--sight)}
.foot-bottom .eyes{display:inline-flex;align-items:center;gap:9px}
.foot-bottom .eyes::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sight);flex:none;animation:pulse 2.6s ease-in-out infinite}
.foot-col .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sight);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.foot-col .k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sight);flex:none}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:12px}
.foot-col ul a{font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);transition:color .2s}
.foot-col ul a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--sight);text-underline-offset:3px}
.foot-col a.more{color:var(--sight)}
.cred-badges img{height:30px;width:auto}
.cred-badges{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}
.badge-tile{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);padding:7px 11px;color:var(--steel);transition:color .2s,border-color .2s}
.badge-tile:hover{color:var(--paper);border-color:var(--sight)}
.badge-tile svg{width:17px;height:17px;flex:none}
.badge-tile em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.cred-rating{display:flex;align-items:center;gap:9px}
.cred-stars{display:flex;gap:2px}
.cred-stars svg{width:11px;height:11px;fill:var(--sight)}
.cred-text{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--steel);text-transform:uppercase}
.cred-text b{color:#fff;font-weight:500}
footer .socials{margin-top:20px}
@media (max-width:920px){.menu-toggle{display:block}}
@media (max-width:920px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px 28px}.nav-links{display:none}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
@media (max-width:920px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px 28px}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* WordPress content compatibility (post body) */
.post-body article img{max-width:100%;height:auto}
.post-body article .wp-caption{max-width:100%}
.post-body article .wp-caption-text{font-size:.8rem;color:#e4e4e0;margin-top:6px}
.post-body article .alignleft{float:left;margin:0 20px 12px 0}
.post-body article .alignright{float:right;margin:0 0 12px 20px}
.post-body article .aligncenter{display:block;margin:16px auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- footer logo badge (transparent, white text, cyan AI + underline) ---- */
.footer-logo-badge{display:inline-block;text-decoration:none}
.footer-logo-badge .plate{
  display:inline-block;background:transparent;border:none;border-radius:0;
  padding:0;box-shadow:none;
}
.footer-logo-badge .wm{
  font-family:var(--display);font-size:1.4rem;letter-spacing:.08em;color:#fff;
  display:block;line-height:1;text-transform:none;
}
.footer-logo-badge .wm .ai{position:relative;display:inline-block;color:var(--sight)}
.footer-logo-badge .wm .period{color:#fff}
.footer-logo-badge .accent{display:block;height:3px;border-radius:2px;background:var(--sight);margin-top:12px}

/* ---- footer credential badges with visible labels ---- */
.cred-badge-row{display:flex;align-items:center;gap:10px}
.cred-badge-row img,.cred-badge-row .badge-tile{height:30px;width:auto;flex:none}
.cred-badge-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* ---- site-wide section rhythm: divider + reduced padding, applied everywhere ----
   !important is deliberate here: every page template embeds its own copy
   of "section{padding:...}" inline (for fast, dependency-free rendering),
   and those inline blocks are printed after this stylesheet, so they win
   the cascade on equal specificity. This is the one override in the theme
   that needs !important to guarantee the "reduce spacing + add a divider
   between every segment" rule actually applies site-wide rather than
   template-by-template. */
section{padding:46px 0 !important; border-top:1px solid var(--line);}
section:first-of-type,header.phero + section{border-top:none}
.cta{border-top:1px solid var(--line)}
@media (max-width:860px){
  section{padding:34px 0 !important}
}

/* ---- defensive: prevent stray browser-default link colours inside
   bullet/point lists from ever showing a different red/blue ---- */
.why-item a,.svc-card li a,.pain li a,.step li a{color:inherit;text-decoration:underline;text-decoration-color:var(--sight)}

/* ---- base nav element + monogram (fallback for any page-level style
   that doesn't define its own copy — e.g. template-case-studies.php) ---- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.monogram{font-family:var(--display);font-size:2.4rem;letter-spacing:.05em;display:flex;align-items:baseline;gap:2px}
.monogram span{color:var(--sight);font-size:1.76rem}

/* ---- nav active-state highlighting ---- */
.nav-links a.nav-active,
.nav-links .nav-item > a.nav-active{
  color: var(--sight) !important;
}
.mobile-nav a.nav-active{
  color: var(--sight) !important;
}

/* ---- footer base rule (fallback for any page missing its own local
   copy — same architectural gap that caused the Case Studies nav bug.
   Bottom padding increased so the copyright/eyes-only line has proper
   breathing room instead of sitting cramped at the very edge). ---- */
footer{border-top:1px solid var(--line);padding:60px 0 56px;background:var(--coal)}
.foot-bottom{margin-top:44px}

/* ---------------------------------------------------------------------
 * LIGHT-SECTION TEXT CONTRAST — category fix.
 *
 * Root cause of the repeated "grey text is invisible" reports: some
 * components carry their OWN dark background (.svc-card, .price-card,
 * .audit-panel, .client-quote) so near-white text inside them is always
 * correct. Others have NO background of their own and simply inherit
 * whatever section they sit in (.stat, .step, .why-item, .lead-note,
 * .stats-note) — so the same near-white text is correct on a dark
 * section and invisible on a .light one.
 *
 * These rules darken ONLY that second group, and only inside .light
 * sections. Higher specificity than the per-template inline rules, so
 * no !important needed. Components with their own dark background are
 * deliberately untouched.
 * ------------------------------------------------------------------- */
.light .stat .lbl,
.light .stats-note,
.light .stats-note a,
.light .step p,
.light .step ul,
.light .step li,
.light .why-item p,
.light .lead-note,
.light .who-note,
.light .cred-note,
.light blockquote{
  color:#3a3b3c;
}
.light .stat .big{color:var(--ink)}