/*
Theme Name: EKG Marketing
Template: ekg-base
Theme URI: https://ekgmarketing.com/
Author: EKG Marketing
Author URI: https://ekgmarketing.com/
Description: EKG Marketing agency child theme (parent: EKG Base). The boutique, human-first agency voice of the EKG brand system — warm paper + navy, the six-hue deep ECG spectrum, Fraunces display / IBM Plex Sans body / IBM Plex Mono data, square 5px buttons, the reusable beating deep-red ECG heartbeat. Chrome per the Family Component Board (Development/Design): sticky navy header over the thin BRIGHT family bar (HB), dark footer with family strip + bright-bar close (FA), and the PB single-post design (navy hero band, one big dark-red trace, "The Signal" pattern). Heartbeat rule: the trace appears once per page, big, in the hero — EKG's is dark red (Clay). Sibling of the `eric` personal child. Colors are driven from theme.json tokens so palette changes propagate.
Version: 0.3.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: ekg-marketing
*/

/* ===== Reset + page ground ===== */
*{ box-sizing:border-box; }
html{ background:var(--wp--preset--color--bg); }
body{
  margin:0;
  background:var(--wp--preset--color--bg);
  color:var(--wp--preset--color--ink);
  font-family:var(--wp--preset--font-family--body);
  line-height:1.6;
}
::selection{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-dark); }

/* Page sections own their own full-width bands + a centered 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; } }

/* ===== Reusable "living" heartbeat — deep-red ECG that draws in, then beats ====
   Drop into any hero: an <svg> with two identical <path> siblings sharing the same
   d + pathLength="1000" — the base .ekg-trace (deep clay red) and a brighter
   .ekg-sweep blip that runs the line on a loop, like a heart monitor. The trace
   also glows on each beat. Fleet-reusable: pair with a floating card + warm band. */
@keyframes ekg-beat-draw{ from{ stroke-dashoffset:1000; } to{ stroke-dashoffset:0; } }
@keyframes ekg-beat-sweep{ from{ stroke-dashoffset:1000; } to{ stroke-dashoffset:0; } }
@keyframes ekg-beat-throb{ 0%,72%,100%{ filter:drop-shadow(0 0 0 rgba(182,41,53,0)); } 80%{ filter:drop-shadow(0 0 7px rgba(182,41,53,.55)); } }
.ekg-trace{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:ekg-beat-draw 2.2s cubic-bezier(.6,.1,.2,1) .2s forwards, ekg-beat-throb 2.2s linear 2.4s infinite; }
.ekg-sweep{ stroke-dasharray:26 974; stroke-dashoffset:1000; animation:ekg-beat-sweep 2.2s linear 2.4s infinite; }
@media (prefers-reduced-motion:reduce){ .ekg-trace{ animation:none; stroke-dashoffset:0; } .ekg-sweep{ display:none; } }

/* ===== The family bar (HB) — ACG's bright spectrum, hard stops, thin =====
   A BAR, not a heartbeat. Opens the page (header bottom edge) and closes it
   (last element of the footer). Gradient lives in theme.json (`bar-bright`). */
.eg-brightBar{ height:3px; background:var(--wp--preset--gradient--bar-bright); }

/* ===== 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); }

/* ===== Generic responsive collapses (page content hooks) ===== */
@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: sticky navy header (native blocks: site-logo + site-title + navigation) ===== */
.eg-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,27,41,.95);   /* footer navy @ 95% — kept literal for the alpha */
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
}
/* HB: the thin bright family bar as the header's bottom edge */
.eg-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--wp--preset--gradient--bar-bright);
}
.eg-header .eg-headInner{
  max-width:1180px; margin:0 auto; padding:16px 32px;
  align-items:center; gap:24px;
}
.eg-header .eg-brand{ align-items:center; gap:13px; }
.eg-header .wp-block-site-logo{ margin:0; line-height:0; }
.eg-header .wp-block-site-logo img{ width:36px; height:36px; object-fit:contain; border-radius:0; }
.eg-header .eg-brandName{ margin:0; }
.eg-header .eg-brandName a{
  font-family:var(--wp--preset--font-family--head); font-weight:600; font-size:22px;
  color:var(--wp--preset--color--on-dark); letter-spacing:-.01em; text-decoration:none;
}
.eg-header .eg-brandName a:hover{ color:var(--wp--preset--color--on-dark); }
/* primary navigation — set color on the container; core makes links inherit it */
.eg-header .wp-block-navigation{ font-size:14.5px; color:rgba(255,255,255,.72); }
.eg-header .wp-block-navigation .wp-block-navigation__container{ gap:30px; }
.eg-header .wp-block-navigation a{ text-decoration:none; }
.eg-header .wp-block-navigation .wp-block-navigation-item__content:hover{ color:var(--wp--preset--color--on-dark); }
/* mobile: hamburger + dark overlay */
.eg-header .wp-block-navigation__responsive-container-open,
.eg-header .wp-block-navigation__responsive-container-close{ color:var(--wp--preset--color--on-dark); }
.eg-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wp--preset--color--footer); padding:24px;
}
.eg-header .wp-block-navigation__responsive-container.is-menu-open a{ color:var(--wp--preset--color--on-dark); }

/* ===== Chrome: dark footer (FA) — columns, family strip, bright-bar close =====
   The old heartbeat SVG rule (.eg-footRule) is gone per the heartbeat rule:
   the trace lives in the hero only. */
.eg-footer{ background:var(--wp--preset--color--footer); color:rgba(255,255,255,.7); }
.eg-footInner{
  max-width:1180px; margin:0 auto; padding:48px 32px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
}
.eg-footTitle{ font-family:var(--wp--preset--font-family--head); font-weight:600; font-size:24px; color:var(--wp--preset--color--on-dark); margin:0 0 10px; }
.eg-footLabel{ font-family:var(--wp--preset--font-family--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px; }
.eg-footMark{ display:flex; align-items:center; gap:9px; }
.eg-footMark img{ display:block; width:28px; height:28px; object-fit:contain; opacity:.85; }
.eg-footMark span{ font-family:var(--wp--preset--font-family--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.eg-footLink{ color:var(--wp--preset--color--on-dark); text-decoration:none; font-size:15px; display:inline-block; }
/* FA: the family strip — the three circles + sibling links, on every page */
.eg-famStrip{
  border-top:1px solid rgba(255,255,255,.10);
}
.eg-famStripInner{
  max-width:1180px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.55);
}
.eg-famStripInner svg{ flex:0 0 auto; }
.eg-famStripInner a{ color:rgba(255,255,255,.85); text-decoration:none; font-size:13.5px; }
.eg-footBar{ border-top:1px solid rgba(255,255,255,.10); }
.eg-footBarInner{
  max-width:1180px; margin:0 auto; padding:20px 32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:rgba(255,255,255,.45);
}

/* ===== Single post (PB) — navy hero band + the one big dark-red trace =====
   Template: templates/single.html. The hero is a cover block set to "use featured
   image" — with an image it renders the navy duotone (the EKG default, per the
   image ladder); without one it falls back to the solid navy motif band. */
.ekgm-postHero{
  background:var(--wp--preset--color--navy);   /* guarantees a full-navy fallback under the dim */
  position:relative;
}
/* blueprint grid texture — fallback (no image) only */
.ekgm-postHero:not(:has(img.wp-block-cover__image-background))::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;
}
.ekgm-postHero .wp-block-cover__inner-container{ z-index:2; }
/* the one big heartbeat — dark red (Clay), monitor style; hides when a hero image runs */
.ekgm-heroTrace{ position:absolute; left:0; right:0; bottom:24px; z-index:1; pointer-events:none; }
.ekgm-heroTrace svg{ display:block; width:100%; height:56px; }
.ekgm-postHero:has(img.wp-block-cover__image-background) .ekgm-heroTrace{ display:none; }
/* hero typography */
.ekgm-postEyebrow, .ekgm-postEyebrow a{
  font-family:var(--wp--preset--font-family--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wp--preset--color--cyan); text-decoration:none;
}
.ekgm-postMeta{
  font-family:var(--wp--preset--font-family--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.ekgm-postMeta .wp-block-post-date, .ekgm-postMeta .wp-block-post-author-name{ display:inline; }
.ekgm-postMeta a{ color:rgba(255,255,255,.6); text-decoration:none; }

/* reading column */
.ekgm-postBody{ }
/* blockquotes — the EKG quote (navy box, signal-cyan spine, Spectral italic) */
.wp-block-post-content blockquote, .wp-block-post-content .wp-block-quote{
  background:var(--wp--preset--color--navy); color:var(--wp--preset--color--on-dark);
  border-left:4px solid var(--wp--preset--color--cyan); border-radius:6px;
  padding:26px 30px; margin:34px 0; font-style:italic;
}
.wp-block-post-content blockquote p, .wp-block-post-content .wp-block-quote p{
  font-family:var(--wp--preset--font-family--head); font-size:1.25rem; line-height:1.5;
  color:var(--wp--preset--color--on-dark); margin:0;
}
.wp-block-post-content blockquote cite, .wp-block-post-content .wp-block-quote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:var(--wp--preset--font-family--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* "The Signal" — the diagnostic takeaway box (insert via the block pattern) */
.ekgm-signal{
  background:var(--wp--preset--color--panel); border:1px solid var(--wp--preset--color--line);
  border-left:4px solid var(--wp--preset--color--clay); border-radius:6px;
  padding:24px 28px; margin:34px 0;
}
.ekgm-signal .ekgm-signalHead{
  font-family:var(--wp--preset--font-family--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wp--preset--color--clay); margin:0 0 14px;
}
.ekgm-signal ul{ list-style:none; margin:0; padding:0; }
.ekgm-signal li{
  position:relative; padding-left:22px; margin-bottom:10px; font-size:.975rem; line-height:1.55;
}
.ekgm-signal li::before{
  content:""; position:absolute; left:0; top:.44em; width:9px; height:9px; border-radius:50%;
}
/* takeaway dots rotate through the deep spectrum */
.ekgm-signal li:nth-child(6n+1)::before{ background:var(--wp--preset--color--clay); }
.ekgm-signal li:nth-child(6n+2)::before{ background:var(--wp--preset--color--teal); }
.ekgm-signal li:nth-child(6n+3)::before{ background:var(--wp--preset--color--indigo); }
.ekgm-signal li:nth-child(6n+4)::before{ background:var(--wp--preset--color--pine); }
.ekgm-signal li:nth-child(6n+5)::before{ background:var(--wp--preset--color--ochre); }
.ekgm-signal li:nth-child(6n+6)::before{ background:var(--wp--preset--color--plum); }

/* post end strip — author + one conversion */
.ekgm-postEnd{
  border-top:1px solid var(--wp--preset--color--line);
  margin-top:56px; padding-top:28px;
}
.ekgm-postEnd .ekgm-postWho{ font-size:.925rem; color:var(--wp--preset--color--sub); margin:0; }
.ekgm-postEnd .ekgm-postWho strong{ color:var(--wp--preset--color--ink); }

@media (max-width:880px){ .eg-footInner{ grid-template-columns:1fr !important; } }
@media (max-width:600px){
  .eg-header .eg-headInner, .eg-footInner, .eg-famStripInner, .eg-footBarInner{ padding-left:18px !important; padding-right:18px !important; }
  .ekgm-heroTrace svg{ height:40px; }
}