/* style.css — overrides & components on top of Tailwind CDN */

/* ─── Design Tokens (single source of truth) ───────────────────────────────
   Match the Omkareshwar Trust logo exactly:
     primary   = logo crimson red  (figures, ribbon, stars)
     secondary = logo navy blue    (laurel branches, small figures, arc)
     accent    = gold ornament
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --color-primary:   #D22728;
  --color-secondary: #244C64;
  --color-accent:    #B8860B;
  --color-bg:        #FFFDF9;
  --color-text:      #2D3748;
}

html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.35); }
  40% { transform: scale(1); }
  60% { transform: scale(1.25); }
  80% { transform: scale(1); }
}
.btn-donate .fa-heart { display: inline-block; transform-origin: center; }
.btn-donate:hover .fa-heart,
.btn-donate:focus-visible .fa-heart {
  animation: heart-beat .7s ease-in-out;
}

/* Hero slider */
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .45s ease-in-out; background-size:cover; background-position:center; }
.hero-slide.active { opacity:1; }
.hero-overlay { background:linear-gradient(180deg, rgba(192,57,43,.55), rgba(46,80,119,.65)); }

/* Vertical timeline (About) */
.timeline { position:relative; }
.timeline::before { content:''; position:absolute; left:1rem; top:0; bottom:0; width:2px; background:var(--color-accent); }
.timeline-item { position:relative; padding-left:3.25rem; }
.timeline-item::before {
  content:''; position:absolute; left:.625rem; top:.375rem; width:14px; height:14px; border-radius:9999px;
  background:var(--color-primary); border:3px solid var(--color-bg); box-shadow:0 0 0 2px var(--color-accent);
}
@media (min-width:768px) {
  .timeline::before { left:50%; transform:translateX(-50%); }
  .timeline-item { width:50%; padding-left:0; padding-right:3.25rem; text-align:right; }
  .timeline-item:nth-child(even) { margin-left:50%; padding-right:0; padding-left:3.25rem; text-align:left; }
  .timeline-item::before { left:auto; right:-7px; }
  .timeline-item:nth-child(even)::before { left:-7px; right:auto; }
}

/* Gallery category pills — keep label visible on hover when selected */
.gallery-filter {
  background:#fff; color:var(--color-text); border:1px solid rgba(184,134,11,.3);
  padding:.5rem 1.25rem; border-radius:9999px; font-size:.875rem; font-weight:600;
  transition:background-color .2s, color .2s, border-color .2s;
}
.gallery-filter:hover {
  border-color:var(--color-primary); color:var(--color-primary); background:#fff;
}
.gallery-filter.active,
.gallery-filter.active:hover {
  background:var(--color-primary); color:#fff; border-color:var(--color-primary);
}

/* Gallery lightbox */
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; padding:1rem; }
.lightbox.open { display:flex; }
.lightbox img, .lightbox video, .lightbox iframe { max-width:92vw; max-height:85vh; border-radius:.5rem; }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:2.75rem; height:2.75rem; border-radius:9999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .2s, border-color .2s, opacity .2s;
}
.lightbox-nav:hover { background:rgba(210,39,40,.9); border-color:transparent; }
.lightbox-nav:disabled { opacity:.35; cursor:default; pointer-events:none; }
.lightbox-prev { left:1rem; }
.lightbox-next { right:1rem; }
@media (max-width:640px) {
  .lightbox-prev { left:.5rem; }
  .lightbox-next { right:.5rem; }
  .lightbox-nav { width:2.25rem; height:2.25rem; }
}

/* Forms */
.form-input {
  width:100%; border:1px solid #E2E8F0; border-radius:.5rem; padding:.65rem .9rem; font-size:.9rem;
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.form-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(210,39,40,.15); }
.form-label { display:block; font-size:.8rem; font-weight:600; margin-bottom:.25rem; color:var(--color-text); }

/* Modal */
.modal { position:fixed; inset:0; z-index:50; background:rgba(45,55,72,.6); display:none; align-items:center; justify-content:center; padding:1rem; }
.modal.open { display:flex; }

/* Section heading ornament */
.section-title { position:relative; display:inline-block; }
.section-title::after { content:''; display:block; width:64px; height:3px; background:var(--color-accent); margin:.5rem auto 0; border-radius:2px; }

/* Admin tables */
.admin-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#718096; padding:.6rem .9rem; }
.admin-table td { padding:.6rem .9rem; font-size:.85rem; border-top:1px solid #EDF2F7; }

/* Admin floating toast (top-right) */
.admin-toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .85rem 1rem;
  border-radius: .75rem;
  font-size: .875rem;
  line-height: 1.4;
  box-shadow: 0 10px 25px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
  animation: admin-toast-in .35s ease-out;
}
.admin-toast--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.admin-toast--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.admin-toast__icon { flex-shrink: 0; margin-top: .1rem; }
.admin-toast__msg { flex: 1; }
.admin-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: .55;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: -.1rem -.15rem 0 0;
}
.admin-toast__close:hover { opacity: 1; }
.admin-toast.is-hiding {
  animation: admin-toast-out .3s ease-in forwards;
}
@keyframes admin-toast-in {
  from { opacity: 0; transform: translateX(1.25rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes admin-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(1.25rem); }
}