/*
Theme Name: AI Custom Theme
Theme URI: https://effutudiaspora.org
Author: Effutu Diaspora Advocate Group
Author URI: https://effutudiaspora.org
Description: Custom WordPress theme converted from an existing HTML website for the Effutu Diaspora Advocate Group. Preserves exact design, SPA routing, animations, and interactions.
Version: 1.0.1
Requires at least: 5.8
Tested up to: 6.7
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: ai-custom-theme
*/

:root{ --gold:#E9B44C; --oxblood:#8C2F1D; --forest:#1F5C4A; }
html{scroll-behavior:smooth}
body{background:#F7F1E3;color:#14100D;font-family:'Inter',sans-serif;overflow-x:hidden}
::selection{background:var(--gold);color:#14100D}

/* WordPress Admin bar offset */
.admin-bar #hdr {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #hdr {
    top: 46px;
  }
}

/* ---------- Kente stripe motif ---------- */
.kente{
  background-image:
    repeating-linear-gradient(90deg,#8C2F1D 0 14px,#14100D 14px 22px,#E9B44C 22px 34px,#1F5C4A 34px 44px,#14100D 44px 50px,#C4703A 50px 60px);
}
.kente-v{
  background-image:
    repeating-linear-gradient(0deg,#8C2F1D 0 14px,#14100D 14px 22px,#E9B44C 22px 34px,#1F5C4A 34px 44px,#14100D 44px 50px,#C4703A 50px 60px);
}
.kente-thin{
  background-image:repeating-linear-gradient(90deg,#E9B44C 0 8px,#8C2F1D 8px 14px,#14100D 14px 18px,#1F5C4A 18px 26px);
}

/* ---------- Motion language: "The Procession" ---------- */
[data-reveal]{opacity:0;transform:translateY(26px) scale(.988);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="mask"]{clip-path:inset(0 100% 0 0);opacity:1;transform:none;transition:clip-path 1.05s cubic-bezier(.76,0,.24,1);transition-delay:var(--d,0ms)}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}

.mask-rise{overflow:hidden;display:block}
.mask-rise > span{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.is-in .mask-rise > span, .mask-rise.is-in > span{transform:none}

/* light sweep across gold surfaces */
.sweep{position:relative;overflow:hidden}
.sweep::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.sweep:hover::after{transform:translateX(120%)}

.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;font-weight:600;letter-spacing:.01em;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .3s,color .3s;will-change:transform}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:linear-gradient(120deg,#E9B44C,#D89B2C 55%,#F2C866);color:#14100D;box-shadow:0 10px 26px -12px rgba(185,133,36,.9)}
.btn-gold:hover{box-shadow:0 20px 40px -16px rgba(185,133,36,.95)}
.btn-ink{background:#14100D;color:#F7F1E3}
.btn-ox{background:#8C2F1D;color:#F7F1E3;box-shadow:0 10px 26px -14px rgba(140,47,29,.9)}
.btn-ghost{border:1.5px solid rgba(20,16,13,.28);color:#14100D}
.btn-ghost:hover{border-color:#14100D;background:rgba(20,16,13,.05)}
.btn-outline-light{border:1.5px solid rgba(247,241,227,.4);color:#F7F1E3}
.btn-outline-light:hover{background:rgba(247,241,227,.12);border-color:#F7F1E3}

/* marquee */
.marquee{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* pages */
.page{display:none}
.page.active{display:block;animation:pageIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* hero */
.hero-img{will-change:transform}
.kb{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
.spotlight{background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(233,180,76,.28),transparent 62%);transition:background .18s}

.drum-ring{position:absolute;border:1px solid rgba(233,180,76,.55);border-radius:999px;animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.7);opacity:.9}80%{transform:scale(1.9);opacity:0}100%{opacity:0}}

.akw span{display:inline-block;opacity:0;transform:translateY(30px) rotate(6deg);animation:akw .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes akw{to{opacity:1;transform:none}}

/* progress */
.bar{height:100%;width:0;transition:width 1.6s cubic-bezier(.16,1,.3,1);background-image:linear-gradient(90deg,#B98524,#E9B44C,#F2C866)}

/* cards */
.card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;will-change:transform}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 48px -28px rgba(20,16,13,.5)}
.card-img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.card:hover .card-img{transform:scale(1.08)}

.imgwrap{background:linear-gradient(135deg,#8C2F1D,#221C17 45%,#1F5C4A)}

.navlink{position:relative;padding:.35rem 0}
.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);transition:width .35s cubic-bezier(.16,1,.3,1)}
.navlink:hover::after,.navlink.active::after{width:100%}

.chip{transition:all .25s}
.chip.sel{background:#14100D;color:#F7F1E3;border-color:#14100D}

.field{width:100%;background:#fff;border:1.5px solid rgba(20,16,13,.16);border-radius:.85rem;padding:.8rem 1rem;transition:border-color .25s,box-shadow .25s;font-size:.95rem}
.field:focus{outline:none;border-color:#B98524;box-shadow:0 0 0 4px rgba(233,180,76,.22)}

/* Form error states */
.field.is-invalid {
  border-color: #8C2F1D !important;
  background-color: rgba(140, 47, 29, 0.04) !important;
}
.field.is-invalid:focus {
  border-color: #8C2F1D !important;
  box-shadow: 0 0 0 4px rgba(140, 47, 29, 0.22) !important;
}
.field-error-msg {
  color: #8C2F1D;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.35rem;
  display: block;
}

.gal-item{overflow:hidden;border-radius:1rem;position:relative;cursor:pointer}
.gal-item img{transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s}
.gal-item:hover img{transform:scale(1.09)}
.gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,13,.7),transparent 55%);opacity:.65;transition:opacity .4s}
.gal-item:hover::after{opacity:.9}

#lightbox{position:fixed;inset:0;z-index:130;background:rgba(12,9,7,.95);display:none;align-items:center;justify-content:center}
#lightbox.on{display:flex;animation:pageIn .35s ease}

.ticker-num{font-variant-numeric:tabular-nums}

.noise{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

.stripe-line{background:repeating-linear-gradient(90deg,#E9B44C 0 26px,transparent 26px 34px,#8C2F1D 34px 54px,transparent 54px 62px,#1F5C4A 62px 82px,transparent 82px 90px)}

/* WordPress content styling for page.php and single.php */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(20, 16, 13, 0.85);
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: #14100D;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.entry-content p {
  margin-bottom: 1.25rem;
}
.entry-content a {
  color: #8C2F1D;
  text-decoration: underline;
  font-weight: 600;
}
.entry-content ul, .entry-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.entry-content blockquote {
  border-left: 4px solid #E9B44C;
  padding-left: 1rem;
  font-style: italic;
  margin: 1.5rem 0;
  color: rgba(20, 16, 13, 0.75);
}
.entry-content img {
  border-radius: 1rem;
  margin: 1.5rem 0;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .mask-rise > span{transform:none!important}
}