/*
Theme Name: Judith Ajama Tribute
Theme URI: https://example.com
Author: Family of Judith Ajama
Author URI: https://example.com
Description: A commemorative tribute theme celebrating the 60th Birthday and Retirement of Mrs. Judith Ajama. Manage the Timeline, Counters, Achievements, Quotes, Gallery, Family & Colleague tributes, and Guestbook wishes from the WordPress admin.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: judith-tribute
*/

:root{
  --ivory:#FBF7EE;
  --ivory-deep:#F4EDDD;
  --royal:#16234F;
  --royal-deep:#0B1330;
  --royal-soft:#2C3D74;
  --gold:#C7A046;
  --gold-light:#E8D9A8;
  --gold-deep:#8F7326;
  --burgundy:#6E1E2B;
  --burgundy-deep:#4A121C;
  --charcoal:#2A2420;
  --paper:#FFFDF8;
}
.dark{
  --ivory:#0B1330;
  --ivory-deep:#0F1A3D;
  --paper:#111c40;
  --charcoal:#EDE6D6;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:'Inter', sans-serif;
  transition:background .4s ease, color .4s ease;
  overflow-x:hidden;
}
h1,h2,h3,.font-display{ font-family:'Playfair Display', serif; }
.font-script{ font-family:'Cormorant Garamond', serif; }
::selection{ background:var(--gold); color:var(--royal-deep); }

.vine-wrap{ position:relative; }
.vine-svg{ position:absolute; left:50%; top:0; transform:translateX(-50%); height:100%; width:60px; z-index:0; pointer-events:none; opacity:.55;}
@media (max-width:768px){ .vine-svg{ width:34px; left:18px; transform:none; } }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-left{ opacity:0; transform:translateX(-36px); transition:opacity .9s ease, transform .9s ease;}
.reveal-left.in{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(36px); transition:opacity .9s ease, transform .9s ease;}
.reveal-right.in{ opacity:1; transform:translateX(0); }

.glass{
  background:rgba(255,253,248,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(199,160,70,0.25);
}
.dark .glass{ background:rgba(17,28,64,0.55); border:1px solid rgba(199,160,70,0.18); }

.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:var(--royal-deep);
  font-weight:600;
  letter-spacing:.04em;
  box-shadow:0 8px 24px -8px rgba(199,160,70,.6);
  transition:transform .35s ease, box-shadow .35s ease;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(199,160,70,.75); }
.btn-outline{
  border:1px solid var(--gold);
  color:var(--gold-light);
  transition:all .35s ease;
}
.btn-outline:hover{ background:rgba(199,160,70,.12); }

.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%, var(--royal-soft) 0%, var(--royal) 45%, var(--royal-deep) 100%);
  overflow:hidden;
}
.hero-particles{ position:absolute; inset:0; }
.particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--gold-light), transparent 70%);
  opacity:.55; animation:float-up linear infinite;
}
@keyframes float-up{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}
.hero-glow{
  position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(199,160,70,.28), transparent 60%);
  top:-15%; left:50%; transform:translateX(-50%);
  filter:blur(10px); animation:pulse-glow 8s ease-in-out infinite;
}
@keyframes pulse-glow{ 0%,100%{ opacity:.5; } 50%{ opacity:.9; } }

.wreath{ position:relative; }
.wreath svg{ position:absolute; inset:-26px; width:calc(100% + 52px); height:calc(100% + 52px); }

#mainNav{ transition:background .4s ease, box-shadow .4s ease, padding .4s ease; }
#mainNav.scrolled{ background:rgba(11,19,48,0.85); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.25); }

.tl-node{
  width:16px; height:16px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(199,160,70,.18);
}

.counter-card{
  background:linear-gradient(160deg, rgba(255,253,248,.9), rgba(255,253,248,.55));
  border:1px solid rgba(199,160,70,.35);
}
.dark .counter-card{ background:linear-gradient(160deg, rgba(20,30,66,.85), rgba(20,30,66,.55)); }

.gallery-item{ break-inside:avoid; margin-bottom:1rem; overflow:hidden; border-radius:.9rem; position:relative; cursor:pointer; }
.gallery-item img{ transition:transform .6s ease, filter .6s ease; display:block; width:100%; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
  background:linear-gradient(to top, rgba(11,19,48,.85), transparent);
  color:#F4EDDD; font-size:.85rem; opacity:0; transition:opacity .4s ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; }

.quote-slide{ display:none; }
.quote-slide.active{ display:block; animation:fadeQuote .8s ease; }
@keyframes fadeQuote{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.divider-gold{ height:1px; background:linear-gradient(to right, transparent, var(--gold), transparent); }
.section-eyebrow{ letter-spacing:.28em; font-size:.72rem; font-weight:600; color:var(--gold-deep); }
.dark .section-eyebrow{ color:var(--gold-light); }

input, textarea{ background:transparent; }
input::placeholder, textarea::placeholder{ color:rgba(42,36,32,.45); }
.dark input::placeholder, .dark textarea::placeholder{ color:rgba(237,230,214,.4); }

.gform-notice{ border-radius:.75rem; padding:.9rem 1.2rem; margin-bottom:1.25rem; font-size:.9rem; }
.gform-success{ background:rgba(58,140,90,.12); border:1px solid rgba(58,140,90,.4); color:#2f6b47; }
.gform-error{ background:rgba(190,60,60,.1); border:1px solid rgba(190,60,60,.4); color:#a33; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}