/*
Theme Name: Eric Gajewski
Template: ekg-base
Theme URI: https://ericgajewski.com/
Author: EKG Marketing
Author URI: https://ekgmarketing.com/
Description: Eric Gajewski child theme (parent: EKG Base). The personal, editorial voice of the EKG brand system — warm paper, the six-hue deep ECG spectrum, Newsreader display / IBM Plex Sans body / IBM Plex Mono data. Chrome per the Family Component Board (Development/Design): light editorial masthead with a faint deep-spectrum pulse (HC), light centered essay colophon with the family strip (FB), and the PC single-post essay design (meta dash, deck, byline, featured image as a framed plate, deep-red drop cap, hairline pull-quotes, signed "— Eric"). Heartbeat rule: the trace appears once per page, big, in the home hero, in the dark rainbow (deep spectrum) — chrome carries only thin pulse RULES, never heartbeats. Sibling of the `ekg-marketing` agency child.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eric
*/

/* ===== Reset + page ground (from the EKG mockup) ===== */
*{ box-sizing:border-box; }
html{ background:#F5F2EB; }
body{
  margin:0;
  background:#F5F2EB;
  color:#15191E;
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height:1.6;
}
::selection{ background:#263D9D; color:#fff; }

/* Page sections own their own full-width bands + a centered 1180px wrap, so don't
   let the editor's constrained layout impose a max-width on the post content. */
.wp-site-blocks, .entry-content, .wp-block-post-content{ max-width:none !important; }

/* ===== Signature motion: the ECG pulse trace draws itself in ===== */
@keyframes ekg-draw{ from{ stroke-dashoffset:1400; } to{ stroke-dashoffset:0; } }
@keyframes ekg-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.eg-trace{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:ekg-draw 2.6s cubic-bezier(.6,.1,.2,1) .3s forwards; }
@media (prefers-reduced-motion:reduce){ .eg-trace{ animation:none; stroke-dashoffset:0; } }

/* ===== Animated underline link (nav + footer) ===== */
.eg-link{ position:relative; }
.eg-link::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:currentColor; transition:width .25s ease; }
.eg-link:hover::after{ width:100%; }

/* ===== CTA + card micro-interactions ===== */
.eg-cta{ transition:transform .12s ease, background .2s ease; }
.eg-cta:hover{ transform:translateY(-1px); }
.eg-cta:active{ transform:translateY(1px); }
.eg-card{ transition:transform .18s ease, box-shadow .18s ease; }
.eg-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(22,38,58,.12); }

/* ===== Responsive collapses (from the build) ===== */
@media (max-width:880px){
  .eg-2col{ grid-template-columns:1fr !important; }
  .eg-3col{ grid-template-columns:1fr 1fr !important; }   /* tablet: 3-up cards → 2-up */
  .eg-hide-sm{ display:none !important; }
}
@media (max-width:600px){
  .eg-3col{ grid-template-columns:1fr !important; }       /* phone: single column */
}

/* ===== Chrome: light editorial masthead (HC — Family Component Board) =====
   Eric leaves the navy entirely: warm-surface sticky masthead, ink Newsreader
   nameplate, hairline bottom edge + a 2px deep-spectrum pulse at 55% opacity.
   The navy chrome is EKG Marketing's move now. */
.eg-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,241,.95);   /* warm surface @ 95% */
  border-bottom:1px solid #D7D2C6;
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
}
/* the faint deep-spectrum pulse under the hairline — a RULE, not a heartbeat */
.eg-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--wp--preset--gradient--pulse); opacity:.55;
}
.eg-headInner{
  max-width:1180px; margin:0 auto; padding:15px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.eg-brand{ display:flex; align-items:center; gap:13px; }
.eg-header .wp-block-site-logo{ margin:0; line-height:0; }
.eg-header .wp-block-site-logo img{ width:34px; height:34px; object-fit:contain; border-radius:0; }
.eg-brandName{ margin:0; }
.eg-brandName a{
  font-family:'Newsreader', Georgia, serif; font-weight:500; font-size:22px;
  color:#15191E; letter-spacing:-.01em; text-decoration:none;
}
.eg-brandName a:hover{ color:#15191E; }
/* primary navigation — quiet ink-sub links; the block's own text-color is set in
   parts/header.html (inline wins specificity), these handle decoration + hover */
.eg-header .wp-block-navigation{ font-size:14.5px; color:#5C5F63; }
.eg-header .wp-block-navigation .wp-block-navigation__container{ gap:28px; }
.eg-header .wp-block-navigation a{ text-decoration:none; }
.eg-header .wp-block-navigation .wp-block-navigation-item__content:hover{ color:#15191E; }
/* mobile: hamburger + warm overlay */
.eg-header .wp-block-navigation__responsive-container-open,
.eg-header .wp-block-navigation__responsive-container-close{ color:#15191E; }
.eg-header .wp-block-navigation__responsive-container.is-menu-open{
  background:#FBF8F1; padding:24px;
}
.eg-header .wp-block-navigation__responsive-container.is-menu-open a{ color:#15191E; }

/* ===== Chrome: light essay colophon (FB — Family Component Board) =====
   The page ends like the last page of an essay: centered on warm sand, the
   blessing gets the closing word, the family strip carries the three circles in
   deep strokes. No dark slab, no footer heartbeat (heartbeat rule). */
.eg-colophon{
  background:#EAE4D8; color:#15191E; text-align:center;
  position:relative; padding:56px 32px 28px; margin-top:0;
}
.eg-colophon::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--wp--preset--gradient--pulse); opacity:.55;
}
.eg-coloTitle{ font-family:'Newsreader', Georgia, serif; font-weight:500; font-size:26px; margin:0 0 8px; }
.eg-coloMission{ font-size:14.5px; color:#5C5F63; max-width:52ch; margin:0 auto; }
.eg-coloBlessing{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-size:17px; color:#5C5F63; margin:22px 0 26px; }
.eg-coloFam{
  display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap;
  border-top:1px solid #D7D2C6; max-width:720px; margin:0 auto; padding-top:22px;
  font-size:14px; color:#5C5F63;
}
.eg-coloFam svg{ flex:0 0 auto; }
.eg-coloFam a{ color:#263D9D; text-decoration:none; }
.eg-coloCopy{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#9b958a; margin-top:22px;
}

/* ===== Single post (PC) — the essay =====
   Template: templates/single.html. Text-first per the image ladder: the featured
   image renders as a framed PLATE under the byline (never a background); skip it
   and the essay still opens complete. */
.eric-postMeta{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:#5C5F63;
}
.eric-postMeta .eric-dash{
  display:inline-block; width:26px; height:2px; flex:0 0 auto;
  background:var(--wp--preset--gradient--pulse);
}
.eric-postMeta a{ color:#5C5F63; text-decoration:none; }
.eric-deck p{
  font-size:1.1rem; line-height:1.6; color:#5C5F63; margin:0;
}
.eric-byline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14px; color:#5C5F63;
  border-bottom:1px solid #D7D2C6; padding-bottom:22px;
}
.eric-byline .eric-pin{
  width:26px; height:26px; border-radius:50%; background:#16263A; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Newsreader', Georgia, serif; font-size:12px; flex:0 0 auto;
}
.eric-byline .wp-block-post-author-name, .eric-byline .wp-block-post-date{ display:inline; }
.eric-byline a{ color:#15191E; text-decoration:none; }
/* the plate — featured image as an editorial figure, never a background */
.eric-plate{ background:#fff; border:1px solid #D7D2C6; padding:8px; }
.eric-plate img{ display:block; width:100%; height:auto; border-radius:0; }
/* drop cap — deep red, Newsreader, on the essay's first paragraph */
.eric-essay .wp-block-post-content > p:first-of-type::first-letter{
  float:left; font-family:'Newsreader', Georgia, serif; font-size:3.4em;
  line-height:.8; padding:.08em .12em 0 0; color:#B62935;
}
/* pull-quote — hairlines, italic Newsreader, no box (the anti-EKG quote) */
.eric-essay .wp-block-post-content blockquote,
.eric-essay .wp-block-post-content .wp-block-quote{
  border:none; border-top:1px solid #D7D2C6; border-bottom:1px solid #D7D2C6;
  background:transparent; padding:24px 6px; margin:38px 0; font-style:italic;
}
.eric-essay .wp-block-post-content blockquote p,
.eric-essay .wp-block-post-content .wp-block-quote p{
  font-family:'Newsreader', Georgia, serif; font-size:1.4rem; line-height:1.45;
  color:#15191E; margin:0;
}
.eric-essay .wp-block-post-content blockquote cite,
.eric-essay .wp-block-post-content .wp-block-quote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#9b958a;
}
/* the signature + next box */
.eric-sig{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-size:1.35rem; }
.eric-next{
  background:#FBF8F1; border:1px solid #D7D2C6; border-radius:4px;
  padding:18px 22px; font-size:14.5px; color:#5C5F63;
}
.eric-next a{ color:#263D9D; text-decoration:none; font-weight:600; }

@media (max-width:600px){
  .eg-headInner{ padding-left:18px !important; padding-right:18px !important; }
  .eg-colophon{ padding-left:18px; padding-right:18px; }
}

/* ===== Hero (#top) mobile treatment ===== */
/* The hero is a heavily inline-styled wp:html block; these !important rules
   override those inline values. Targets: the inner card container (#top > div),
   the split-layout (.eg-2col), the text column's desktop min-height, the 7&7
   card's inner two-column grid, and the full-bleed heartbeat trace. */
@media (max-width:880px){
  #top > div{ margin:18px auto !important; padding:44px 30px 56px !important; }
  #top .eg-2col{ gap:38px !important; }
  /* kill the 480px min-height that leaves a huge gap once the column stacks */
  #top .eg-2col > div:first-child{ min-height:0 !important; gap:30px !important; }
  /* The hero pulse SVG is preserveAspectRatio:none + drawn for the wide desktop
     aspect ratio. Once the hero stacks it squeezes into a stray vertical streak
     through the headline, so retire it below 880 — the pulse motif still lives in
     the header spectrum rule. (Verified at 768px and 375px.) */
  #top .eg-trace{ display:none !important; }
}
@media (max-width:600px){
  #top > div{ margin:14px auto !important; padding:30px 20px 40px !important; border-radius:14px !important; }
  #top .eg-2col{ gap:28px !important; }
  /* 7 & 7 card: stack its two halves so the type isn't cramped at phone widths */
  #top .eg-2col > div:last-child > div:nth-child(2){ grid-template-columns:1fr !important; }
  #top .eg-2col > div:last-child > div:nth-child(2) > div:first-child{
    border-right:none !important; border-bottom:1px solid #E2DCCF !important;
  }
}