/*
Theme Name: Prairie Code AI
Theme URI: https://prairiecode.ai
Author: Prairie Code AI
Author URI: https://prairiecode.ai
Description: Lean, hand-built theme for Prairie Code AI — landing page, Insights blog, and a Projects portfolio. Recreated from the Claude Design handoff (Prairie Code Landing v2) with no page builder: design tokens, GSAP scroll reveals, a WebGL prairie-sunset hero, a shared nav with mobile menu, and ember-spark CTAs.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prairie-code
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --purple-core:#5E17EB; --purple-deep:#4711B8; --purple-tint:#EFE8FD; --purple-faint:#F8F5FE;
  --sunset-plum:#54216D; --sunset-red:#AF384E; --sunset-orange:#FB834B; --soil-dark:#36192C;
  --ink:#1F1633; --gray-700:#4B435E; --gray-500:#756C8A; --gray-300:#C9C3D6; --gray-200:#E4E0EE; --gray-100:#F2F0F7; --white:#FFFFFF;
  --brand:var(--purple-core); --brand-hover:var(--purple-deep);
  --text-heading:var(--ink); --text-body:var(--gray-700); --text-muted:var(--gray-500); --text-on-brand:var(--white); --text-link:var(--purple-core);
  --surface-page:var(--white); --surface-subtle:var(--purple-faint); --surface-card:var(--white); --surface-inverse:var(--ink);
  --border-default:var(--gray-200); --border-strong:var(--gray-300); --focus-ring:rgba(94,23,235,.35);
  --font-display:'Libre Franklin',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-hero:clamp(40px,5vw,64px); --text-h1:48px; --text-h2:36px; --text-h3:26px; --text-h4:20px; --text-lg:18px; --text-base:16px; --text-sm:14px; --text-xs:12px;
  --weight-display:600; --weight-bold:700; --weight-medium:600; --weight-regular:400;
  --leading-tight:1.15; --leading-heading:1.25; --leading-body:1.65; --tracking-display:-0.01em; --tracking-heading:-0.01em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --container-max:1200px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px; --radius-capsule:28px;
  --shadow-card:0 2px 8px rgba(31,22,51,.06),0 8px 24px rgba(31,22,51,.08);
  --shadow-raised:0 4px 12px rgba(94,23,235,.18);
  --shadow-dialog:0 12px 48px rgba(31,22,51,.24);
  --blur-capsule:blur(10px); --capsule-bg:rgba(255,255,255,.72);
  --ease-standard:cubic-bezier(.4,0,.2,1); --dur-fast:150ms; --dur-base:250ms; --overlay-scrim:rgba(31,22,51,.55);
}

/* ============================================================
   Base elements
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--purple-deep)}
img{max-width:100%}
::selection{background:var(--purple-tint)}
:focus-visible{outline:2px solid var(--purple-core);outline-offset:3px;border-radius:2px}
[data-dark] :focus-visible{outline-color:var(--sunset-orange)}

/* ============================================================
   Buttons (design-system Button.jsx)
   ============================================================ */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.pc-btn--sm{padding:8px 18px;font-size:14px}
.pc-btn--md{padding:12px 28px;font-size:16px}
.pc-btn--lg{padding:15px 36px;font-size:17px}
.pc-btn--primary{background:var(--brand);color:var(--text-on-brand)}
.pc-btn--primary:hover{background:var(--brand-hover);color:var(--text-on-brand)}
.pc-btn--inverse{background:var(--white);color:var(--brand)}
.pc-btn--inverse:hover{background:var(--purple-tint);color:var(--brand)}

/* Ignite hover on lead CTAs (paired with ember sparks in site.js) */
.pc-fire{position:relative;transition:background-color .5s var(--ease-standard),box-shadow .35s var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard) !important}
.pc-fire:hover,.pc-fire:focus-visible{background-image:none !important;background-color:var(--sunset-orange) !important;animation:pc-ignite .9s cubic-bezier(.42,.06,.62,.4) forwards !important;color:var(--white) !important;border-color:transparent !important;box-shadow:0 10px 34px -6px rgba(251,131,75,.62),0 0 0 1px rgba(251,131,75,.32)}

/* ============================================================
   Interaction helpers
   ============================================================ */
.pc-skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--white);color:var(--purple-deep);padding:10px 18px;border-radius:var(--radius-sm);font:600 14px var(--font-body);text-decoration:none;box-shadow:var(--shadow-card);transition:top var(--dur-fast) var(--ease-standard)}
.pc-skip:focus{top:16px}
.pc-navlink{font:600 15px var(--font-body);color:var(--white);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.pc-navlink:hover,.pc-navlink[data-active="true"]{color:var(--sunset-orange);text-decoration:none}
.pc-herolink{transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.pc-herolink:hover{color:var(--sunset-orange);border-color:var(--sunset-orange);text-decoration:none}
.pc-buildrow{transition:background var(--dur-base) var(--ease-standard),padding-left var(--dur-base) var(--ease-standard)}
.pc-buildrow:hover{background:var(--purple-faint);padding-left:20px}
.pc-proofcard{transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.pc-proofcard:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.pc-readmore{border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-standard)}
.pc-readmore:hover{border-bottom-color:var(--brand)}
.pc-flink{color:var(--white);font-size:var(--text-sm);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.pc-flink:hover{color:var(--sunset-orange);text-decoration:none}
.pc-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:8px;background:var(--purple-faint);border:1px dashed var(--border-strong);color:var(--brand);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;text-align:center;padding:12px}

/* Blog + project cards */
.pc-postcard{transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.pc-postcard:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:var(--border-strong)}
.pc-projcard{transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.pc-projcard:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:var(--border-strong)}
.pc-projcard:hover .pc-projthumb-img{transform:scale(1.05)}
.pc-projthumb-img{transition:transform var(--dur-base) var(--ease-standard)}

/* Project case-study two-column layout stacks on smaller screens */
@media (max-width:820px){
  .pc-project-grid{grid-template-columns:1fr !important}
  .pc-project-grid aside{position:static !important}
}
@media (max-width:760px){
  .pc-about-intro{grid-template-columns:1fr !important}
}

/* Long-form article body (single post + project case study) */
.pc-article a:not(.pc-btn){color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.pc-article a:not(.pc-btn):hover{color:var(--purple-deep)}
.pc-article h2{font-family:var(--font-display);font-weight:600;font-size:clamp(var(--text-h3),3vw,var(--text-h2));line-height:var(--leading-heading);color:var(--text-heading);letter-spacing:var(--tracking-heading);margin:48px 0 0}
.pc-article h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h4);color:var(--text-heading);margin:36px 0 0}
.pc-article p{margin:18px 0 0;color:var(--text-body);font-size:var(--text-lg);line-height:var(--leading-body)}
.pc-article ul,.pc-article ol{margin:18px 0 0;padding-left:22px;color:var(--text-body);font-size:var(--text-lg);line-height:var(--leading-body)}
.pc-article li{margin:0 0 10px}
.pc-article blockquote{margin:44px 0 0;padding:8px 0 8px 28px;border-left:3px solid var(--sunset-orange);font-family:var(--font-display);font-weight:600;font-size:clamp(var(--text-h4),2.6vw,var(--text-h3));line-height:var(--leading-heading);color:var(--text-heading)}
.pc-article img{border-radius:var(--radius-md);height:auto}
.pc-article > :first-child{margin-top:0}
.pc-article hr{margin:52px 0;border:none;border-top:1px solid var(--border-default)}

/* ============================================================
   Mobile navigation + burger
   ============================================================ */
html[data-narrow] #pc-navlinks,html[data-narrow] #pc-nav-cta{display:none !important}
html[data-narrow] #pc-burger{display:flex !important}
html[data-narrow] #pc-logo{height:60px !important}
html[data-xnarrow] #pc-logo{height:52px !important}
@media (max-width:900px){
  #pc-navlinks,#pc-nav-cta{display:none !important}
  #pc-burger{display:flex !important}
  #pc-logo{height:60px !important}
}
@media (max-width:560px){ #pc-logo{height:52px !important} }
#pc-burger span{display:block;width:26px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease-standard),opacity .2s var(--ease-standard)}
#pc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#pc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#pc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.pc-mlink{font:800 clamp(30px,8vw,44px)/1.05 var(--font-body);color:var(--white);text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pc-mlink:hover,.pc-mlink[data-active="true"]{color:var(--sunset-orange);text-decoration:none}
#pc-mobnav[data-open="true"]{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
#pc-mobnav a.pc-mlink{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease-standard),transform .45s var(--ease-standard),color .2s var(--ease-standard)}
#pc-mobnav .pc-mcta{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-standard) .3s,transform .5s var(--ease-standard) .3s}
#pc-mobnav[data-open="true"] a.pc-mlink,#pc-mobnav[data-open="true"] .pc-mcta{opacity:1;transform:none}
#pc-mobnav[data-open="true"] a.pc-mlink:nth-of-type(1){transition-delay:.10s}
#pc-mobnav[data-open="true"] a.pc-mlink:nth-of-type(2){transition-delay:.16s}
#pc-mobnav[data-open="true"] a.pc-mlink:nth-of-type(3){transition-delay:.22s}
#pc-mobnav[data-open="true"] a.pc-mlink:nth-of-type(4){transition-delay:.28s}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes pc-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes pc-rise{0%{transform:translateY(0);opacity:0}12%{opacity:.45}80%{opacity:.15}100%{transform:translateY(-360px);opacity:0}}
@keyframes pc-fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pc-ignite{0%{background-color:var(--purple-core)}32%{background-color:var(--sunset-plum)}64%{background-color:var(--sunset-red)}100%{background-color:var(--sunset-orange)}}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ===== Pagination (Insights + archives) ===== */
.pc-pagination{margin-top:var(--space-8)}
.pc-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.pc-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 15px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--surface-card);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-body);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.pc-pagination a.page-numbers:hover{color:var(--brand);border-color:var(--border-strong);background:var(--purple-faint)}
.pc-pagination .page-numbers.current{background:var(--brand);color:var(--white);border-color:var(--brand)}
.pc-pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:auto;padding:0 4px}
.pc-pagination .prev.page-numbers,.pc-pagination .next.page-numbers{font-weight:600;gap:6px}