/* ==========================================================================
   LAYOUT: top bar, header, navigation, mobile bar, footer, WhatsApp button
   ========================================================================== */

/* ---- Top info bar (desktop only) ---- */
.topbar { display: none; background: var(--blue-900); color: #dce8f6; font-size: .85rem; }
.topbar a { color: #dce8f6; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 1rem; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 1.25rem; }
.topbar__left a { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__badge { display: inline-flex; align-items: center; gap: .4rem; color: #bfe3a4; font-weight: 600; }
.topbar__social { display: inline-flex; }
@media (min-width: 960px) { .topbar { display: block; } }

/* ---- Header ---- */
.header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.header.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 128px; height: auto; }
@media (min-width: 960px) { .brand img { width: 158px; } }

.nav { display: none; }
@media (min-width: 960px) {
    .nav { display: block; margin-left: auto; }
    .nav__list { display: flex; gap: .25rem; }
    .nav__link { display: block; padding: .55rem .85rem; border-radius: 99px; color: var(--ink); font-weight: 600; font-size: .96rem; text-decoration: none; transition: background .15s, color .15s; }
    .nav__link:hover { background: var(--blue-50); color: var(--blue); }
    .nav__link.is-active { color: var(--blue); background: var(--blue-50); }
}

.header__actions { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 960px) { .header__actions { margin-left: .5rem; } }

.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--blue-50); color: var(--blue); }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }
@media (min-width: 960px) { .menu-btn { display: none; } }

/* Mobile menu panel */
.mobile-menu { position: fixed; z-index: 90; inset: var(--header-h) 0 0 0; background: #fff; overflow-y: auto; padding: 1rem var(--gutter) calc(var(--bar-h) + 2rem); animation: menu-in .18s ease-out; }
.mobile-menu li a { display: flex; align-items: center; gap: .85rem; padding: .95rem .25rem; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.mobile-menu li a .i { color: var(--green-text); }
.mobile-menu li a.is-active { color: var(--blue); }
.mobile-menu .btn { margin-top: 1.5rem; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }
@media (min-width: 960px) { .mobile-menu { display: none !important; } }

/* ---- Mobile bottom bar ---- */
.bar { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(1, 42, 88, .08); padding-bottom: env(safe-area-inset-bottom); }
.bar__list { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: var(--bar-h); }
.bar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--bar-h); color: var(--muted); font-size: .72rem; font-weight: 600; text-decoration: none; }
.bar__link .i { width: 1.45rem; height: 1.45rem; }
.bar__link.is-active { color: var(--blue); }
.bar__link:active { background: var(--blue-50); }
.bar__center { display: flex; justify-content: center; }
.bar__donate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; height: 64px; margin-top: -22px; border-radius: 50%; background: var(--green-btn); color: #fff; font-size: .7rem; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(63, 132, 25, .45); border: 4px solid #fff; }
.bar__donate:hover { color: #fff; background: var(--green-btn-h); }
.bar__donate .i { width: 1.3rem; height: 1.3rem; }
@media (min-width: 960px) { .bar { display: none; } }

/* ---- WhatsApp floating button ---- */
.wa-float { position: fixed; z-index: 94; right: 14px; bottom: calc(var(--bar-h) + 18px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1fa855; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.wa-float .i { width: 1.6rem; height: 1.6rem; }
.wa-float:hover { color: #fff; background: #178a45; }
@media (min-width: 960px) { .wa-float { bottom: 24px; right: 24px; width: 56px; height: 56px; } }

/* ---- Footer ---- */
.footer { background: var(--blue-900); color: #c9d8ec; padding: clamp(40px, 7vw, 72px) 0 1.25rem; margin-top: 0; }
.footer a { color: #c9d8ec; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr; gap: 2.5rem; } }
.footer__logo { display: inline-block; background: #fff; padding: .55rem .9rem; border-radius: 12px; margin-bottom: 1rem; }
.footer__logo img { width: 150px; height: auto; }
.footer__about p { max-width: 36ch; }
.footer__title { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.footer__col li { margin-bottom: .1rem; }
.footer__col li a { display: inline-block; padding: .55rem 0; }  /* comfortable tap target */
.footer__social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.footer__social a:hover { background: var(--green); text-decoration: none; }
.footer__contact li { display: flex; gap: .65rem; align-items: flex-start; }
.footer__contact .i { margin-top: .2rem; color: #9fd37a; }
.footer__secure { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: .88rem; color: #9fd37a; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; }
.footer__bottom p { margin: 0; }
.footer__regs { display: block; margin-top: .25rem; }
.footer__regs span + span::before { content: "\00b7"; margin: 0 .5rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer__legal a { display: inline-block; padding: .6rem 0; }
body.menu-open .wa-float { display: none; }
@media (min-width: 960px) { .footer__bottom { padding-right: 72px; } }

.wa-float { transition: transform .25s, opacity .25s; }
.wa-float.is-away { transform: translateY(90px); opacity: 0; pointer-events: none; }