/* =============================================================================
   A.M. Medical & Welfare Association — custom styles
   (Plain CSS — the Tailwind Play CDN cannot compile @apply, so helper classes
    and components beyond utilities live here.)
   ============================================================================= */

:root{
    --navy:#0e8c83;
    --navy-dark:#083f3a;
    --accent:#f57c1f;
    --accent-light:#ffa64d;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{ font-family:'Mulish',sans-serif; max-width:100%; overflow-x:hidden; }
img,svg,video,canvas{ max-width:100%; }
h1,h2,h3,h4,.font-display{ font-family:'Poppins',sans-serif; }
a,button{ max-width:100%; }

@media (max-width:1023px){
    body{ padding-bottom:4.75rem; }
    main{ overflow-x:hidden; }
    #mobile-menu{ height:100dvh; max-width:100vw; }
}

@media (max-width:420px){
    .hero-slider .inline-flex,
    section .inline-flex{ justify-content:center; }
}

/* sections jumped to via #anchors clear the sticky header */
section[id]{ scroll-margin-top:96px; }

::selection{ background:var(--accent); color:#fff; }

/* Tidy scrollbar (desktop) */
@media (min-width:1024px){
    ::-webkit-scrollbar{ width:11px; }
    ::-webkit-scrollbar-track{ background:#eef1f7; }
    ::-webkit-scrollbar-thumb{ background:#b9c2d6; border-radius:9px; border:3px solid #eef1f7; }
    ::-webkit-scrollbar-thumb:hover{ background:var(--navy); }
}

/* unify the vintage archive photos a touch */
.photo-tone{ filter:saturate(1.08) contrast(1.04) brightness(1.02); }

/* ----------------------------------------------------------- sticky header */
#site-header.scrolled{ box-shadow:0 10px 30px -14px rgba(22,36,76,.35); background:rgba(255,255,255,.97); }

/* --------------------------------------------------------------- footer bits */
.footer-head{
    color:#fff; font-family:'Poppins',sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;
    margin-bottom:1.25rem; position:relative; padding-bottom:.6rem;
}
.footer-head::after{
    content:""; position:absolute; left:0; bottom:0; width:34px; height:3px;
    background:var(--accent-light); border-radius:3px;
}
.footer-link{ color:rgba(255,255,255,.7); transition:.2s; display:inline-block; }
.footer-link:hover{ color:#fff; transform:translateX(4px); }

/* --------------------------------------------------------------- hero slider */
.hero-slider{ position:relative; }
.hero-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity 1.1s ease, visibility 1.1s ease;
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide .hero-img{
    width:100%; height:100%; object-fit:cover; transform:scale(1.08);
    transition:transform 7s ease-out;
}
.hero-slide.active .hero-img{ transform:scale(1); }

/* staggered text reveal inside the active slide */
.hero-slide .hero-anim{ opacity:0; transform:translateY(26px); }
.hero-slide.active .hero-anim{ animation:heroUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-slide.active .hero-anim.d1{ animation-delay:.15s; }
.hero-slide.active .hero-anim.d2{ animation-delay:.3s; }
.hero-slide.active .hero-anim.d3{ animation-delay:.45s; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

.hero-dot{
    width:11px; height:11px; border-radius:50%; background:rgba(14,140,131,.28);
    transition:.3s; cursor:pointer;
}
.hero-dot.active{ background:var(--accent); width:30px; border-radius:6px; }

/* split-hero: organic photo frame + warm accent rim */
.hero-frame{
    position:relative; height:380px; overflow:hidden;
    border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
    box-shadow:0 30px 60px -25px rgba(14,140,131,.45);
}
@media (min-width:1024px){ .hero-frame{ height:520px; } }
.hero-rim{
    position:absolute; inset:0; z-index:0;
    border-radius:55% 45% 58% 42% / 52% 48% 55% 45%;
    background:linear-gradient(140deg,#ffb74d,#f57c1f);
    transform:translate(-16px,-14px) rotate(-3deg);
}
@media (max-width:640px){
    .hero-rim{ transform:translate(-8px,-8px) rotate(-2deg); }
    .hero-frame{ height:320px; }
    .hero-frame.is-compact{ height:260px; }
}
/* compact variant for inner-page heroes */
.hero-frame.is-compact{ height:300px; }
@media (min-width:1024px){ .hero-frame.is-compact{ height:400px; } }

/* --------------------------------------------------- scroll reveal (general) */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.12s; }
[data-reveal][data-delay="2"]{ transition-delay:.24s; }
[data-reveal][data-delay="3"]{ transition-delay:.36s; }
[data-reveal][data-delay="4"]{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){
    [data-reveal]{ opacity:1 !important; transform:none !important; }
    .hero-slide .hero-img{ transition:none; transform:none; }
}

/* ------------------------------------------------------------- program cards */
.prog-card{ transition:transform .35s ease, box-shadow .35s ease; }
.prog-card:hover{ transform:translateY(-8px); }
.prog-card .prog-icon{ transition:.35s ease; }
.prog-card:hover .prog-icon{ background:var(--accent); color:#fff; transform:rotate(-6deg); }

/* ------------------------------------------------------------ partner slider */
.partner-carousel{ --partner-gap:1rem; }
.partner-viewport{
    overflow:hidden; position:relative; padding:.25rem;
}
.partner-viewport::before,
.partner-viewport::after{
    content:""; position:absolute; top:0; bottom:0; z-index:2; width:42px; pointer-events:none;
}
.partner-viewport::before{ left:0; background:linear-gradient(90deg,#f1f7f6,rgba(241,247,246,0)); }
.partner-viewport::after{ right:0; background:linear-gradient(270deg,#f1f7f6,rgba(241,247,246,0)); }
.partner-track{
    display:flex; flex-wrap:nowrap; gap:var(--partner-gap); align-items:stretch;
    transition:transform .45s cubic-bezier(.2,.7,.2,1); will-change:transform;
}
.partner-track.no-transition{ transition:none; }
.partner-slide{
    flex:0 0 calc((100% - var(--partner-gap)) / 2);
    min-height:154px; padding:1.25rem;
    background:#fff; border:1px solid rgba(14,140,131,.1); border-radius:1rem;
    box-shadow:0 10px 40px -12px rgba(14,140,131,.18);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.partner-slide:hover{ transform:translateY(-4px); box-shadow:0 18px 50px -20px rgba(14,140,131,.28); border-color:rgba(245,124,31,.35); }
.partner-logo-box{ height:82px; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.partner-logo-box img{ max-height:82px; max-width:100%; object-fit:contain; }
.partner-slide h3{
    font-family:'Poppins',sans-serif; font-size:.875rem; line-height:1.3; font-weight:700; color:#2b3338;
}
.partner-controls{
    display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem;
}
.partner-nav{
    width:2.75rem; height:2.75rem; border-radius:999px;
    display:grid; place-items:center; color:var(--navy); background:#fff;
    border:1px solid rgba(14,140,131,.16); box-shadow:0 10px 40px -12px rgba(14,140,131,.18);
    transition:.2s ease;
}
.partner-nav:hover{ color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.partner-dots{ display:flex; align-items:center; justify-content:center; gap:.45rem; min-width:6.5rem; }
.partner-dots span{ width:.45rem; height:.45rem; border-radius:999px; background:rgba(14,140,131,.22); transition:.25s; }
.partner-dots span.active{ width:1.35rem; background:var(--accent); }
@media (min-width:640px){
    .partner-carousel{ --partner-gap:1.25rem; }
    .partner-slide{ flex-basis:calc((100% - (var(--partner-gap) * 2)) / 3); min-height:160px; }
}
@media (min-width:1024px){
    .partner-slide{ flex-basis:calc((100% - (var(--partner-gap) * 3)) / 4); min-height:170px; }
}
@media (prefers-reduced-motion:reduce){
    .partner-track{ transition:none; }
}

/* --------------------------------------------------------------- gallery */
.gallery-item{ cursor:pointer; }
.gallery-item img{ transition:transform .6s ease; }
.gallery-item:hover img{ transform:scale(1.1); }

/* lightbox (built by JS) */
#lightbox{
    position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
    background:rgba(8,13,30,.92); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:.3s;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:90vw; max-height:80vh; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
#lightbox .lb-cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#fff; font-weight:600; padding:0 1rem; }
#lightbox button{
    position:absolute; color:#fff; width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:1.25rem; transition:.25s;
}
#lightbox button:hover{ background:var(--accent); }
#lb-close{ top:22px; right:22px; }
#lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
#lb-next{ right:18px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
    #lightbox button{ width:44px; height:44px; }
    #lb-prev{ left:8px; } #lb-next{ right:8px; }
}

/* ------------------------------------------------------------- form states */
.field-error{ border-color:var(--accent) !important; }
.field-msg{ color:var(--accent); font-size:.8rem; margin-top:.3rem; display:none; }
.field-error + .field-msg{ display:block; }

/* decorative pulse ring for stat icons */
.stat-ring{ position:relative; }
.stat-ring::before{
    content:""; position:absolute; inset:-6px; border-radius:inherit;
    border:1px solid rgba(255,166,77,.45); animation:ring 2.4s ease-out infinite;
}
@keyframes ring{ 0%{ transform:scale(.9); opacity:.8; } 100%{ transform:scale(1.25); opacity:0; } }