/*
Theme Name: EmmaChinedu
Theme URI: https://emmachinedu.com
Author: Emma Chinedu
Description: A calm, idea-led block theme in warm stone with one clay accent. Tokens live in theme.json; shapes, cards and the Footprint web live in this file.
Version: 0.1.9
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: emmachinedu
*/

:root{
  --ec-card:var(--wp--custom--radius--card,40px);
  --ec-panel:var(--wp--custom--radius--panel,44px);
  --ec-pill:var(--wp--custom--radius--pill,999px);
  --ec-gutter:var(--wp--custom--layout--gutter,40px);
  --ec-ink:#3A3430;        /* fixed dark surface: band, hovered node, tooltip */
  --ec-on-ink:#F8F5F0;     /* text on the dark surface */
  --ec-on-ink-soft:#ECE8E2;
}
/* Dark mode: follows the visitor's device. Only the neutral tokens change; clay and the dark surfaces stay as they are. */
@media (prefers-color-scheme:dark){
  html:root{
    --wp--preset--color--paper:#1F1C19;
    --wp--preset--color--stone-50:#25221F;
    --wp--preset--color--stone-100:#2E2A26;
    --wp--preset--color--stone-200:#3A3530;
    --wp--preset--color--stone-300:#4A443D;
    --wp--preset--color--stone-400:#6B645A;
    --wp--preset--color--stone-500:#A39A8C;
    --wp--preset--color--stone-700:#CFC8BD;
    --wp--preset--color--stone-800:#3A3430;
    --wp--preset--color--stone-900:#F4F0EA;
    --ec-ink:#2E2A26;
  }
  .ec-band::before{background:#3A3530}
  .ec-band::after{background:#443D37}
}
body{-webkit-font-smoothing:antialiased}
a{text-underline-offset:3px}
.ec-wrap{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--ec-gutter);padding-right:var(--ec-gutter);box-sizing:border-box}
.ec-section{padding-top:104px;padding-bottom:104px}
.ec-eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--wp--preset--color--clay)}

/* Header */
.ec-header .wp-block-site-title a{text-decoration:none;font-weight:700}
/* Front page: header floats over the cover photo (keyed to the body class, not to the template part) */
.wp-site-blocks>*{margin-block-start:0}
body.home .wp-site-blocks>header,.ec-header-overlay{position:absolute;left:0;right:0;top:0;z-index:10;width:100%}
body.home .wp-site-blocks>header,body.home .wp-site-blocks>header a,body.home .wp-site-blocks>header .wp-block-navigation-item__content,body.home .wp-site-blocks>header .wp-block-navigation__responsive-container-open{color:var(--ec-on-ink-soft)!important}
body.home .wp-site-blocks>header .wp-block-site-title a{color:var(--ec-on-ink)!important}
body.home .wp-site-blocks>header .wp-block-navigation__responsive-container-open svg{fill:currentColor}
.ec-header .wp-block-navigation a{text-decoration:none;font-weight:500}
.ec-header .wp-block-navigation a:hover{text-decoration:underline}

/* Hero: black-and-white cover photo, tinted warm */
.ec-hero{min-height:680px;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;color:var(--ec-on-ink-soft);background:#1E1A16}
/* Layer 1: the photo (mirrored in the file) fills the full width; you stand right of the headline */
.ec-hero::before{content:"";position:absolute;inset:-4%;z-index:-2;
  background-color:#1E1A16;
  background-image:radial-gradient(ellipse 80% 90% at 62% 52%,rgba(20,17,14,0) 38%,rgba(20,17,14,.55) 78%,rgba(20,17,14,.9) 100%),linear-gradient(90deg,rgba(30,26,22,.8) 0%,rgba(30,26,22,.35) 45%,rgba(30,26,22,0) 75%),url(assets/hero.jpg);
  background-size:cover,cover,cover;background-position:center,center,center 70%;background-repeat:no-repeat;
  filter:sepia(.3) saturate(.85);
  }
/* Layer 2: soft shapes floating over the photo, the same family as the cards */
.ec-hero::after{content:"";position:absolute;inset:-6%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(circle at 90% 20%,rgba(217,211,202,.10) 0 150px,transparent 151px),
   radial-gradient(circle at 97% 66%,rgba(217,211,202,.08) 0 90px,transparent 91px),
   radial-gradient(circle at 46% 86%,rgba(181,98,63,.12) 0 60px,transparent 61px),
   radial-gradient(circle at 80% 12%,rgba(217,211,202,.07) 0 40px,transparent 41px)}
.ec-hero>.wp-block-group{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:120px var(--ec-gutter) 96px;box-sizing:border-box}
.ec-hero h1{color:var(--ec-on-ink);max-width:520px;margin:0 0 26px}
.ec-hero p{color:var(--ec-on-ink-soft);max-width:480px;margin:0 0 26px}

/* Cards: soft shapes behind, never outlines */
.ec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ec-grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ec-card{position:relative;overflow:hidden;border-radius:var(--ec-card);padding:34px;min-height:340px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;color:var(--wp--preset--color--stone-900)}
.ec-card.ec-short{min-height:240px}
.ec-card>*{position:relative;z-index:1;margin:0}
.ec-card h3{margin-top:14px;font-size:28px;line-height:1.1;letter-spacing:-.5px;color:var(--wp--preset--color--stone-900)}
.ec-card p{font-size:16px;line-height:1.55;color:var(--wp--preset--color--stone-700)}
.ec-card::after{content:"";position:absolute;z-index:0;pointer-events:none}
.ec-t1{background:var(--wp--preset--color--stone-100)}
.ec-t2{background:var(--wp--preset--color--stone-200)}
.ec-t3{background:var(--wp--preset--color--stone-300)}
.ec-t4{background:var(--wp--preset--color--stone-50)}
.ec-circle::after{right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:var(--wp--preset--color--stone-200)}
.ec-t2.ec-circle::after{background:var(--wp--preset--color--stone-300)}
.ec-arc::after{right:-20px;bottom:0;width:230px;height:115px;border-radius:115px 115px 0 0;background:var(--wp--preset--color--stone-300)}
.ec-t3.ec-arc::after{background:var(--wp--preset--color--stone-400)}
.ec-diamond::after{right:-60px;bottom:-60px;width:190px;height:190px;border-radius:36px;background:var(--wp--preset--color--stone-400);transform:rotate(45deg)}
.ec-quarter::after{left:-60px;bottom:-60px;width:200px;height:200px;border-radius:0 100% 0 0;background:var(--wp--preset--color--stone-100)}
.ec-icon{width:34px;height:34px;display:block;stroke:var(--wp--preset--color--stone-900);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Wide panel (Footprint teaser, CTA) */
.ec-panel{position:relative;overflow:hidden;border-radius:var(--ec-panel);padding:48px;box-sizing:border-box;background:var(--wp--preset--color--stone-200)}
.ec-panel>*{position:relative;z-index:1}
.ec-panel::before,.ec-panel::after{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.ec-panel::before{right:-60px;top:-90px;width:300px;height:300px;background:var(--wp--preset--color--stone-300)}
.ec-panel::after{right:190px;bottom:-60px;width:150px;height:150px;background:var(--wp--preset--color--stone-100)}
.ec-panel .ec-dot{position:absolute;right:70px;bottom:40px;width:70px;height:70px;border-radius:50%;background:var(--ec-ink);z-index:0}
.ec-panel a.ec-more{font-weight:700;text-decoration:none;color:var(--wp--preset--color--stone-900)}

/* Dark band */
.ec-band{position:relative;overflow:hidden;background:var(--ec-ink);color:var(--ec-on-ink)}
.ec-band::before,.ec-band::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ec-band::before{right:-120px;top:-120px;width:420px;height:420px;background:#4A433D}
.ec-band::after{right:140px;bottom:-110px;width:240px;height:240px;background:#554D46}
.ec-band>.wp-block-group{position:relative;z-index:1}
.ec-band h2{color:var(--ec-on-ink);max-width:520px}
.ec-band p{color:#E6E0D6;max-width:480px}
.ec-list{display:flex;flex-wrap:wrap;gap:24px;max-width:760px}
.ec-list-item{flex:1 1 200px;display:flex;align-items:center;gap:16px;font-size:18px;font-weight:600}
.ec-band .ec-icon,.ec-list-item .ec-icon{stroke:var(--wp--preset--color--stone-200);width:30px;height:30px}

/* Pills */
.ec-pills{display:flex;flex-wrap:wrap;gap:12px}
.ec-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--ec-pill);background:var(--wp--preset--color--stone-100);font-weight:600;color:var(--wp--preset--color--stone-900)}
.ec-pill .ec-icon{width:22px;height:22px}

/* Buttons: clay is for the one main button only */
.wp-block-button__link{border-radius:var(--ec-pill)}
.is-style-outline>.wp-block-button__link{background:transparent}

/* Footer */
.ec-footer{font-size:14px;color:var(--wp--preset--color--stone-500)}
.ec-footer a{color:inherit;text-decoration:none}
.ec-footer a:hover{text-decoration:underline}

/* Footprint web */
.ec-legend{display:flex;gap:12px;flex-wrap:wrap}
.ec-chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:8px 16px;border-radius:var(--ec-pill);background:var(--wp--preset--color--stone-100);color:var(--wp--preset--color--stone-700)}
.ec-chip i{width:12px;height:12px;border-radius:50%;display:inline-block}
.ec-web{position:relative;width:100%;aspect-ratio:1200/560;margin-top:24px}
.ec-web svg.ec-lines{position:absolute;inset:0;width:100%;height:100%}
.ec-line{stroke:var(--wp--preset--color--stone-400);stroke-width:1.5;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;animation:ec-flow 2.4s linear infinite}
.ec-node{position:absolute;width:112px;height:112px;transform:translate(-50%,-50%)}
.ec-node:hover,.ec-node:focus-within{z-index:5}
.ec-nin{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:13px;font-weight:600;line-height:1.15;color:var(--wp--preset--color--stone-900);transition:transform .25s ease,background .25s ease,color .25s ease;cursor:pointer;animation:ec-drift 6s ease-in-out infinite alternate;outline:none}
.ec-node:nth-child(odd) .ec-nin{animation-duration:7s}
.ec-sector .ec-nin{background:var(--wp--preset--color--stone-200)}
.ec-skill .ec-nin{background:var(--wp--preset--color--stone-300)}
.ec-me{width:150px;height:150px}
.ec-me .ec-nin{background:var(--ec-ink);color:var(--ec-on-ink);font-size:20px;font-weight:700;cursor:default}
.ec-node .ec-icon{width:26px;height:26px;stroke-width:1.6}
.ec-node:hover .ec-nin,.ec-node:focus-within .ec-nin{transform:scale(1.14);background:var(--ec-ink);color:var(--ec-on-ink)}
.ec-node:hover .ec-icon,.ec-node:focus-within .ec-icon{stroke:var(--ec-on-ink)}
.ec-tip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;white-space:nowrap;background:var(--ec-ink);color:var(--ec-on-ink);padding:8px 14px;border-radius:var(--ec-pill);font-size:14px;font-weight:400;opacity:0;pointer-events:none;transition:opacity .2s ease}
.ec-node:hover .ec-tip,.ec-node:focus-within .ec-tip{opacity:1}
@keyframes ec-drift{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
@keyframes ec-flow{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.ec-nin,.ec-line{animation:none}}

/* Small screens: the web becomes a tidy grid, notes always visible */
@media (max-width:760px){
  :root{--ec-gutter:20px}
  .ec-section{padding-top:64px;padding-bottom:64px}
  .ec-hero{min-height:640px;align-items:flex-start}
  .ec-hero::before{background-size:cover,cover,auto 112%;background-position:center,center,67% 100%;-webkit-mask-image:none;mask-image:none;background-image:radial-gradient(ellipse 90% 80% at 50% 62%,rgba(20,17,14,0) 40%,rgba(20,17,14,.8) 100%),linear-gradient(180deg,rgba(30,26,22,.85) 0%,rgba(30,26,22,.45) 55%,rgba(30,26,22,.1) 100%),url(assets/hero.jpg)}
  .ec-hero h1{font-size:40px!important}
  .ec-web{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ec-web svg.ec-lines,.ec-node.ec-me{display:none}
  .ec-web{gap:16px}
  .ec-node{position:static;width:auto;height:auto;transform:none;min-width:0;display:flex;flex-direction:column;gap:10px}
  .ec-nin{animation:none;border-radius:28px;padding:18px 14px;height:auto;min-height:120px;box-sizing:border-box}
  .ec-tip{position:static;transform:none;margin:0;white-space:normal;background:none;color:inherit;opacity:.8;padding:0;border-radius:0;font-size:13px}
  .ec-node:hover .ec-nin,.ec-node:focus-within .ec-nin{transform:none}
  .ec-panel{padding:32px}
}

/* ---- Motion: gentle, CSS only, switched off for visitors who prefer reduced motion ---- */
@media (prefers-reduced-motion:no-preference){
  /* Header links: underline draws in */
  .ec-header .wp-block-navigation a,body.home .wp-site-blocks>header .wp-block-navigation a{text-decoration:none!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:4px;transition:background-size .3s ease,opacity .2s ease}
  .ec-header .wp-block-navigation a:hover,.ec-header .wp-block-navigation a:focus-visible{background-size:100% 1.5px}
  .ec-header .wp-block-site-title a{transition:opacity .2s ease}
  .ec-header .wp-block-site-title a:hover{opacity:.7}

  /* Buttons: lift and settle */
  .wp-block-button__link{transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
  .wp-block-button__link:hover{transform:translateY(-2px);filter:brightness(.94);box-shadow:0 10px 24px rgba(42,38,35,.18)}
  .wp-block-button__link:active{transform:translateY(0)}

  /* Cards: lift, and the shape behind grows a little */
  .ec-card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .ec-card::after{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .ec-card:hover{transform:translateY(-6px)}
  .ec-circle:hover::after,.ec-arc:hover::after,.ec-quarter:hover::after{transform:scale(1.15)}
  .ec-diamond:hover::after{transform:rotate(45deg) scale(1.15)}
  .ec-pill{transition:transform .2s ease,background .2s ease}
  .ec-pill:hover{transform:translateY(-2px);background:var(--wp--preset--color--stone-200)}

  /* Panels and band: the shapes drift slowly */
  .ec-panel::before{animation:ec-float 9s ease-in-out infinite alternate}
  .ec-panel::after{animation:ec-float 11s ease-in-out infinite alternate-reverse}
  .ec-band::before{animation:ec-float 12s ease-in-out infinite alternate}
  .ec-band::after{animation:ec-float 10s ease-in-out infinite alternate-reverse}
  .ec-panel a.ec-more{display:inline-block;transition:transform .2s ease}
  .ec-panel a.ec-more:hover{transform:translateX(6px)}

  /* Hero: fades up on load */
  .ec-hero h1,.ec-hero p,.ec-hero .wp-block-buttons{animation:ec-slide-left 1s cubic-bezier(.2,.7,.2,1) both}
  .ec-hero h1{animation-delay:.15s}
  .ec-hero p{animation-delay:.4s}
  .ec-hero .wp-block-buttons{animation-delay:.65s}
  .wp-site-blocks>header{animation:ec-slide-down .8s cubic-bezier(.2,.7,.2,1) both}

  /* Scroll reveal (reveal.js adds the classes): things slide in as you reach them */
  .js .ec-rv{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-delay,0ms)}
  .js .ec-rv[data-rv="left"]{transform:translateX(-80px)}
  .js .ec-rv[data-rv="right"]{transform:translateX(80px)}
  .js .ec-rv[data-rv="up"]{transform:translateY(70px)}
  .js .ec-rv[data-rv="pop"]{transform:scale(.92)}
  .js .ec-rv.is-in{opacity:1;transform:none}

}
@keyframes ec-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ec-slide-left{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes ec-slide-down{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@keyframes ec-fade{from{opacity:0}to{opacity:1}}
@keyframes ec-float{from{transform:translate(0,0)}to{transform:translate(-14px,12px)}}

/* ---- Spacing fixes ---- */
.ec-header{padding-top:28px;padding-bottom:28px;align-items:center!important}
.ec-header .wp-block-navigation,.ec-header .wp-block-navigation__container{gap:32px;column-gap:32px;align-items:center}
.ec-header .wp-block-navigation-item{margin:0}
.ec-header .wp-block-site-title{margin:0}
.ec-footer{padding-top:32px;padding-bottom:40px;gap:16px 32px}
.ec-section>h1,.ec-section>h2{margin-bottom:8px}
.ec-section>h1+p,.ec-section>h2+p{margin-top:16px}
.ec-band .ec-section>.ec-list{margin-top:32px}
.ec-hero .wp-block-buttons{margin-top:8px}
.ec-main>.ec-section+.ec-wrap{margin-top:0}
.ec-wrap+.ec-section,.ec-wrap+.ec-wrap{margin-top:0}
.wp-block-buttons{margin-top:8px}

/* Hero loop: the photo drifts slowly, the shapes float across it */
@media (prefers-reduced-motion:no-preference){
  .ec-hero::before{animation:ec-drift-photo 32s ease-in-out infinite alternate;will-change:transform}
  .ec-hero::after{animation:ec-drift-shapes 22s ease-in-out infinite alternate;will-change:transform}
}
@keyframes ec-drift-photo{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
@keyframes ec-drift-shapes{from{transform:translate(0,0)}to{transform:translate(-3%,4%)}}