/* ============================================================
   SIKAT Aurora — responsive.css
   Phone / tablet / laptop adjustments for the public site and the
   Volunteer Portal. Loaded LAST on every user page so these win over
   the page stylesheets (home.css, about.css, portal.css ...).

   Breakpoints:  <= 1024px small laptop / landscape tablet
                 <=  900px tablet
                 <=  600px phone
                 <=  420px small phone

   A recurring cause of the big empty gaps on phones: blocks sized with
   `flex: 1 1 300px` (meaning "about 300px WIDE" when side by side)
   become "about 300px TALL" once a phone layout stacks them in a column.
   Those are reset to `flex: none` where they stack.
   ============================================================ */

img { max-width: 100%; }

/* ---------------- NAVIGATION BAR (public pages) ---------------- */
@media (max-width: 860px) {
    nav.uh-navbar .uh-volunteer-btn {
        width: auto;            /* base style fixes it at 176 x 53px */
        height: auto;
        padding: 9px 14px;
        font-size: 12px;
        border-radius: 8px;
        white-space: nowrap;
    }
    nav.uh-navbar .uh-login-link { font-size: 14px; }
}
@media (max-width: 600px) {
    /* Icon (or profile photo) only: the word "Login" / the name no
       longer squeezes the logo off the bar. */
    nav.uh-navbar .uh-login-link { font-size: 0; gap: 0; }
    nav.uh-navbar .uh-login-link > span:not(:first-child) { display: none; }
    nav.uh-navbar .uh-volunteer-btn { padding: 8px 11px; font-size: 11px; }
    nav.uh-navbar .uh-logo { gap: 8px; }
}

/* ---------------- HOMEPAGE HERO ---------------- */
@media (max-width: 600px) {
    .uh-cover { min-height: 360px; }
    .uh-cover-content { padding: 40px 20px; }
    .uh-cover-overlay {
        /* Full-width shade so the white text stays readable over any photo. */
        background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%);
    }
    .uh-cover-title { letter-spacing: -1.2px; }
    .uh-cover-text { max-width: 100%; letter-spacing: -0.2px; font-size: 13px; }
    .uh-cover-btn-row { flex-wrap: wrap; gap: 10px; }
}

/* ---------------- HOMEPAGE: WHO WE ARE / MISSION / VISION / VALUES ---------------- */
@media (max-width: 900px) {
    .uh-who-we-are { margin: 48px auto; gap: 32px; }
    .uh-wwa-left { gap: 24px; }
    .uh-wwa-photo { flex: none; width: 100%; max-width: 440px; height: 220px; margin: 0 auto; }
    .uh-wwa-content, .uh-wwa-mvv { flex: none; }
    .uh-wwa-desc { max-width: 560px; margin: 0 auto; }
    .uh-wwa-right { gap: 0; }
    .uh-wwa-mvv { gap: 20px; width: 100%; max-width: 560px; margin: 0 auto; text-align: left; }
    .uh-mvv-text { min-width: 0; }
    /* Icon beside its text again (it was dropped below it). */
    .uh-mvv-row { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; text-align: left; gap: 14px; }
    .uh-mvv-desc { max-width: none; margin: 0; }
}
@media (max-width: 600px) {
    .uh-who-we-are { margin: 36px auto; padding: 0 20px; }
    .uh-wwa-photo { height: 190px; }
    .uh-mvv-icon { width: 40px; height: 40px; }
}

/* ---------------- HOMEPAGE: PROGRAM CARDS ---------------- */
@media (max-width: 900px) {
    .uh-program-card { flex: none; min-width: 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
    /* Tablet: the three programs side by side instead of one long column. */
    .uh-programs-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .uh-program-card { padding: 24px 18px; }
}
@media (max-width: 600px) {
    .uh-programs-row { gap: 16px; }
}

/* ---------------- SPONSORSHIP: "100% TRANSPARENT" BOX ---------------- */
@media (max-width: 900px) {
    /* The page's own styles sit in a <style> block after this file, so this needs the extra class to win. */
    .pg-transparency-banner .pg-transparency-text { flex: none; }
}

/* ---------------- HOMEPAGE METRICS: 2 x 2 on tablet and phone ---------------- */
@media (max-width: 900px) {
    .uh-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
        margin: 40px auto;
        padding: 32px 5%;
    }
    .uh-stat-divider { display: none; }
    .uh-stat-item { flex: none; min-width: 0; justify-content: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
    .uh-stats { gap: 22px 12px; padding: 28px 16px; margin: 28px auto; }
    .uh-stat-icon { width: 48px; height: 48px; }
    .uh-stat-icon svg { width: 26px; max-height: 26px; }
    .uh-stat-number { font-size: 20px; }
    .uh-stat-label { font-size: 12px; line-height: 1.35; }
    .uh-stat-item { gap: 10px; }
}
@media (max-width: 420px) {
    /* Very narrow: icon above the number, centered, so labels like
       "Partner Communities" don't get squeezed. */
    .uh-stat-item { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 8px; }
    .uh-stat-text { align-items: center; }
}

/* ---------------- "BE THE SPARK OF CHANGE" BANNER (all public pages) ---------------- */
@media (max-width: 900px) {
    .uh-cta { padding: 36px 6%; gap: 14px; align-items: center; }
    .uh-cta-title, .uh-cta-desc { flex: none; max-width: 540px; margin: 0; }
}
@media (max-width: 600px) {
    .uh-cta { padding: 32px 20px; }
    .uh-cta-title { font-size: 26px; }
    .uh-cta-btn { padding: 13px 28px; font-size: 15px; }
}

/* ---------------- FOOTER (all public pages) ---------------- */
@media (max-width: 900px) {
    .uh-footer { padding: 40px 6% 22px; }
    .uh-footer-top {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 20px;
    }
    .uh-footer-brand { grid-column: 1 / -1; flex: none; }
    .uh-footer-desc { max-width: 560px; }
    .uh-footer-col { flex: none; gap: 10px; min-width: 0; }
    .uh-footer-divider { margin: 28px auto 16px; }
    .uh-footer-bottom { gap: 10px; }
}
@media (max-width: 600px) {
    .uh-footer { padding: 32px 20px 20px; }
    .uh-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .uh-footer-col:last-child { grid-column: 1 / -1; }   /* Contact Us: full width */
    .uh-footer-logo { margin-bottom: 10px; }
    .uh-footer-logo-icon { width: 36px; height: 36px; }
    .uh-footer-heading { font-size: 13px; }
    .uh-footer-col a, .uh-footer-contact-item { font-size: 12.5px; }
    .uh-footer-contact-item { word-break: break-word; }
    .uh-footer-divider { margin: 22px auto 14px; }
    .uh-footer-copyright { font-size: 12px; }
    .uh-footer-legal { gap: 18px; flex-wrap: wrap; }
    .uh-footer-legal a { font-size: 12px; }
}

/* ---------------- ABOUT PAGE ---------------- */
@media (max-width: 900px) {
    /* The three header photos sat half outside the dark header with a
       big overlap offset; on narrow screens that left a large empty
       block. They now sit inside it as one row. */
    .ab-hero { padding-bottom: 28px; }
    .ab-hero-photos { margin: 0 auto; transform: none; flex-wrap: nowrap; gap: 12px; }
    .ab-hero-photo { flex: 1 1 0; height: 180px; }
    .ab-mv { padding: 56px 0; }
    .ab-mv-inner { gap: 32px; }
    .ab-mv-col { flex: none; }
    .ab-values { padding: 56px 5% 64px; }
    .ab-values-row { gap: 36px; }
    .ab-value-card { flex: none; width: 100%; max-width: 420px; }
    .ab-history { padding: 24px 5% 56px; gap: 28px; }
    .ab-history-photo, .ab-history-content { flex: none; width: 100%; }
    .ab-programs { padding: 56px 0; }
    .ab-programs-row { justify-content: center; }
}
@media (max-width: 600px) {
    .ab-hero { padding: 40px 20px 22px; }
    .ab-hero-photos { gap: 8px; }
    .ab-hero-photo { height: 110px; border-radius: 10px; }
    .ab-mv { padding: 44px 0; }
    .ab-mv-text, .ab-history-text { font-size: 15px; }
    .ab-values { padding: 44px 20px 48px; }
    .ab-values-row { gap: 28px; }
    .ab-value-icon { width: 70px; height: 70px; margin-bottom: 14px; }
    .ab-prog-card { flex: none; width: 100%; max-width: none; }
}

/* ---------------- VOLUNTEER PORTAL: ATTENDANCE HISTORY TABLE ---------------- */
/* On phones each row becomes a small card (event, date, then Time In /
   Time Out / Hours side by side, then status) instead of six squeezed
   columns that cut off the status badge. */
@media (max-width: 600px) {
    .port-attendance-history-panel .port-table thead { display: none; }
    .port-attendance-history-panel .port-table,
    .port-attendance-history-panel .port-table tbody { display: block; width: 100%; }
    .port-attendance-history-panel .port-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 10px;
        padding: 12px 0;
        border-bottom: 1px solid #EDF2F7;
    }
    .port-attendance-history-panel .port-table tr:last-child { border-bottom: none; }
    .port-attendance-history-panel .port-table td {
        display: block;
        padding: 0;
        border: none;
        font-size: 12px;
        min-width: 0;
    }
    .port-attendance-history-panel .port-table td:nth-child(1),
    .port-attendance-history-panel .port-table td:nth-child(2),
    .port-attendance-history-panel .port-table td:nth-child(6),
    .port-attendance-history-panel .port-table td[colspan] { grid-column: 1 / -1; }
    .port-attendance-history-panel .port-table td:nth-child(3)::before,
    .port-attendance-history-panel .port-table td:nth-child(4)::before,
    .port-attendance-history-panel .port-table td:nth-child(5)::before {
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #A0AEC0;
        margin-bottom: 2px;
    }
    .port-attendance-history-panel .port-table td:nth-child(3)::before { content: 'Time In'; }
    .port-attendance-history-panel .port-table td:nth-child(4)::before { content: 'Time Out'; }
    .port-attendance-history-panel .port-table td:nth-child(5)::before { content: 'Hours'; }
    .port-attendance-history-panel .port-table td:nth-child(2) br { display: none; }
    .port-attendance-history-panel .port-table td:nth-child(2) .port-table-meta::before { content: ' · '; }
}

/* ---------------- VOLUNTEER PORTAL: general phone polish ---------------- */
@media (max-width: 600px) {
    .port-table { font-size: 12px; }
    .port-table th, .port-table td { padding-left: 6px; padding-right: 6px; }
    .port-panel { padding: 16px; }
    .sik-toast-container { top: 12px; }
}

/* ================================================================
   v2 — Gallery, Login / Create Account, Volunteer Application and
   Donate pop-ups
   ================================================================ */

/* ---------------- GALLERY PHOTOS ---------------- */
@media (min-width: 601px) and (max-width: 900px) {
    /* Tablet: two small photos, then one wide one - no empty holes. */
    .gl-gallery-grid { gap: 18px; grid-auto-rows: 230px; }
    .gl-gallery-grid .gl-photo { grid-column: span 1; }
    .gl-gallery-grid .gl-photo:nth-child(3n) { grid-column: span 2; }
}
@media (max-width: 600px) {
    /* Phone: one photo per row with real space between them. (Each
       photo used to be taller than its row, so it spilled into the gap.) */
    .gl-gallery-grid { grid-auto-rows: auto; gap: 18px; padding: 0 20px 56px; }
    .gl-gallery-grid .gl-photo { aspect-ratio: 4 / 3; height: auto; border-radius: 14px; }
    .gl-filter-row { padding: 36px 20px 22px; }
}

/* ---------------- LOGIN / CREATE ACCOUNT ---------------- */
.branding-panel > * { flex-shrink: 0; }   /* never squash the logo or divider */

@media (max-width: 900px) {
    /* Stacked: a compact header on top, the form below it. Before, both
       were squeezed into one screen height, so the logo was cut off and
       the Create Account form slid up over the Back button. */
    .auth-container { overflow: visible; min-height: 100vh; min-height: 100dvh; }
    .branding-panel, .form-wrapper { flex: none; }
    .branding-panel { min-height: 0; padding: 60px 20px 30px; }
    .back-link {
        position: absolute; top: 16px; left: 16px; margin: 0;
        font-size: 13px; padding: 6px 14px; background: #FFFFFF;
    }
    .branding-logo { width: 76px; height: 76px; margin-bottom: 8px; }
    .branding-welcome { font-size: 20px; }
    .branding-title { font-size: 60px; letter-spacing: 4px; }
    .branding-subtitle { font-size: 26px; }
    .branding-divider { width: 150px; height: 2px; margin: 10px 0 12px; }
    .branding-tagline { font-size: 15px; }
    .form-wrapper {
        flex: 1 0 auto; min-height: 0; align-items: flex-start;
        border-radius: 36px 36px 0 0; padding: 32px 24px 48px;
    }
    .auth-container.signup-mode .form-wrapper { border-radius: 36px 36px 0 0; }
    .form-panel { max-width: 520px; margin: 0 auto; padding: 36px 32px; }
}
@media (max-width: 600px) {
    .branding-panel { padding: 56px 16px 24px; }
    .branding-logo { width: 62px; height: 62px; }
    .branding-welcome { font-size: 16px; }
    .branding-title { font-size: 44px; letter-spacing: 3px; }
    .branding-subtitle { font-size: 20px; }
    .branding-divider { width: 120px; margin: 8px 0 10px; }
    .branding-tagline { font-size: 13px; }
    .form-wrapper { padding: 20px 14px 32px; border-radius: 28px 28px 0 0; }
    .auth-container.signup-mode .form-wrapper { border-radius: 28px 28px 0 0; }
    .form-panel { padding: 26px 18px 22px; border-radius: 22px; }
    .auth-title { font-size: 25px; }
    .auth-subtext { font-size: 14px; margin-bottom: 22px; }
    .input-group { padding: 11px 14px; border-radius: 14px; margin-bottom: 14px; gap: 10px; }
    .input-group svg { width: 20px; height: 20px; }
    .input-group input { font-size: 16px; letter-spacing: 0.3px; min-width: 0; } /* 16px stops iPhones zooming in */
    .form-options { margin-bottom: 18px; }
    .terms-check { align-items: flex-start; justify-content: flex-start; margin-bottom: 20px; }
    .terms-text { font-size: 12px; letter-spacing: 0.3px; line-height: 1.45; }
    .terms-link { white-space: normal; }
    .btn-login, .btn-create { width: 100%; font-size: 17px; padding-top: 15px; padding-bottom: 15px; }
    .switch-text { line-height: 1.5; }
    .fp-modal-box { padding: 26px 20px; }
    #legalModalOverlay { padding: 10px !important; }
}

/* ---------------- VOLUNTEER APPLICATION + DONATE POP-UPS ---------------- */
/* (".pub-modal-overlay" in front makes these win over the pages' own styles.) */

/* All sizes: start each step at the top. Centering it made the top of
   tall steps unreachable (e.g. the "Become a Volunteer" title on phones,
   and the Payment step's heading and buttons on laptops). */
.pub-modal-overlay .pub-donate-body { justify-content: flex-start; }
.pub-modal-overlay .pub-modal-box--donate.pub-modal-box--donate-payment {
    height: min(770px, calc(100vh - 40px));
    overflow: hidden;
}

@media (max-width: 640px) {
    /* Phone: full screen, with the step bar pinned at the top and only
       the form scrolling. */
    .pub-modal-overlay.pub-modal-overlay--open { padding: 0; }
    .pub-modal-overlay .pub-modal-box--donate,
    .pub-modal-overlay .pub-modal-box--volapp,
    .pub-modal-overlay .pub-modal-box--donate.pub-modal-box--donate-payment {
        width: 100%; max-width: 100%;
        height: 100vh; height: 100dvh; max-height: none;
        border-radius: 0; padding: 0; overflow: hidden;
        display: flex; flex-direction: column;
    }
    .pub-modal-overlay .pub-donate-topbar {
        margin: 0; padding: 12px 10px; gap: 6px;
        border-bottom: 1px solid #EDF2F7; background: #FFFFFF;
    }
    .pub-modal-overlay .pub-donate-back { font-size: 20px; padding: 6px 10px; }
    .pub-modal-overlay .pub-modal-close { font-size: 18px; padding: 6px 10px; }
    /* Show the name of the current step only. */
    .pub-modal-overlay .pub-donate-progress-step.is-active .pub-donate-progress-label { display: inline; font-size: 9.5px; }
    .pub-modal-overlay .pub-donate-progress { gap: 4px; justify-content: flex-start; }
    .pub-modal-overlay .pub-donate-progress > :first-child { margin-left: auto; }
    .pub-modal-overlay .pub-donate-progress > :last-child { margin-right: auto; }
    .pub-modal-overlay .pub-donate-progress-step { gap: 4px; }
    .pub-modal-overlay .pub-donate-progress-line { width: 6px; }

    .pub-modal-overlay .pub-donate-body { padding: 20px 18px 28px; -webkit-overflow-scrolling: touch; }
    .pub-modal-overlay .pub-vol-success-topbar { margin: -20px -18px 20px; }
    .pub-modal-overlay .pub-donate-body > :first-child .pub-modal-close,
    .pub-modal-overlay .pub-donate-body > .pub-modal-close { top: 12px; right: 12px; }
    .pub-modal-overlay .pub-donate-title { font-size: 21px; line-height: 1.25; }
    .pub-modal-overlay .pub-donate-subtitle { font-size: 13px; margin-bottom: 16px; }
    .pub-modal-overlay .pub-form-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
    .pub-modal-overlay .pub-form-input,
    .pub-modal-overlay .pub-form-select { font-size: 16px; }   /* stops iPhones zooming in */

    /* Back / Continue: side by side, same width, full row. */
    .pub-modal-overlay .pub-donate-footer-nav { gap: 10px; margin-top: 22px; }
    .pub-modal-overlay .pub-donate-footer-nav .pub-donate-btn { flex: 1 1 0; padding: 14px 12px; font-size: 14.5px; }

    /* Donate step 1: photo on top of the program text. */
    .pub-modal-overlay .pub-donate-program-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .pub-modal-overlay .pub-donate-program-img { width: 100%; height: 150px; }
    .pub-modal-overlay .pub-donate-program-name { font-size: 16px; }
    .pub-modal-overlay .pub-donate-program-desc { font-size: 13px; }
    .pub-modal-overlay .pub-donate-allocation-row { gap: 10px; }
    .pub-modal-overlay .pub-donate-allocation-card { padding: 14px; }

    /* Donate step 2: the "donate anonymously" line was in large default text. */
    .pub-modal-overlay .pub-donate-anon-check {
        display: flex; align-items: flex-start; gap: 10px;
        font-size: 13px; line-height: 1.45; color: #1A202C; margin: 4px 0 14px;
    }
    .pub-modal-overlay .pub-donate-anon-check input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
    .pub-modal-overlay .pub-donate-privacy-box { font-size: 12.5px; }

    /* Donate step 3 */
    .pub-modal-overlay .pub-donate-amount-row { gap: 10px; margin-bottom: 18px; }
    .pub-modal-overlay .pub-donate-amount-card { padding: 18px 8px; font-size: 18px; }
}
@media (min-width: 641px) and (max-width: 900px) {
    /* Tablet: roomy but not edge to edge. */
    .pub-modal-overlay .pub-modal-box--donate,
    .pub-modal-overlay .pub-modal-box--volapp { width: 92vw; padding: 28px 28px 30px; }
}
@media (min-width: 641px) {
    .pub-donate-anon-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; margin: 4px 0 14px; }
    .pub-donate-anon-check input { margin-top: 2px; flex-shrink: 0; }
}
@media (max-width: 360px) {
    .pub-modal-overlay .pub-donate-progress-step.is-active .pub-donate-progress-label { display: none; }
}

/* ================================================================
   v3 — VOLUNTEER PORTAL on laptops and desktops
   ================================================================ */

/* ---- Laptop screens that aren't very tall (a 1366x768 laptop, or a
   1920x1080 one at 125%, leaves only ~610-730px inside the browser).
   Each portal page was locked to the screen height with the lists
   scrolling inside their boxes, so on these screens My Attendance,
   Badges, Attendance History and "Upcoming This Month" were squeezed
   to a sliver and "View Full Profile" was cut off. The boxes now keep
   their natural size and the page scrolls instead. ---- */
@media (min-width: 901px) and (max-height: 820px) {
    body.port-body .port-content { overflow-y: auto; }
    body.port-body .port-content > *,
    body.port-body .port-col > * { flex: none; }
    body.port-body .port-row { flex: none; overflow: visible; }
    body.port-body .port-attendance-scroll,
    body.port-body .port-badges-scroll,
    body.port-body .port-this-month-scroll,
    body.port-body .port-attendance-history-scroll {
        flex: none; min-height: 0; max-height: 420px; overflow-y: auto;
    }
    body.port-body .port-content > :last-child { margin-bottom: 8px; }
}
@media (min-width: 901px) and (max-height: 700px) {
    body.port-body .port-sidebar { padding-top: 18px; padding-bottom: 18px; }
    body.port-body .port-nav-item { padding-top: 9px; padding-bottom: 9px; }
    body.port-body .port-header { padding-top: 16px; padding-bottom: 16px; }
}

/* ---- Large screens (1700px+): slightly larger text and a wider menu,
   instead of everything drawn at laptop size. ---- */
@media (min-width: 1700px) {
    body.port-body .port-sidebar { width: 270px; padding-left: 22px; padding-right: 22px; }
    body.port-body .port-nav-item { font-size: 14.5px; padding: 12px 16px; }
    body.port-body .port-header-title { font-size: 25px; }
    body.port-body .port-header-subtitle { font-size: 14px; }
    body.port-body .port-panel { padding: 24px; }
    body.port-body .port-panel-title { font-size: 17px; }
    body.port-body .port-hero-title { font-size: 21px; }
    body.port-body .port-table { font-size: 14px; }
    body.port-body .port-table-name { font-size: 14px; }
    body.port-body .port-table-meta { font-size: 12px; }
    body.port-body .port-info-value { font-size: 14px; }
    body.port-body .port-info-label { font-size: 12px; }
}

/* ---- Very wide monitors (2200px+): content in a centred column
   instead of stretched edge to edge. ---- */
@media (min-width: 2200px) {
    body.port-body .port-header,
    body.port-body .port-content {
        padding-left: max(40px, calc((100% - 1720px) / 2));
        padding-right: max(40px, calc((100% - 1720px) / 2));
    }
    body.port-body .port-header-title { font-size: 27px; }
    body.port-body .port-panel-title { font-size: 18px; }
    body.port-body .port-table { font-size: 15px; }
}

/* ---- Phones and tablets: the portal pages were still locked to the
   screen height with scrolling switched off, so on General the panels
   were crushed (My Attendance cut in half) and Profile Summary / Badges
   Earned below the screen couldn't be reached at all. The page now
   scrolls normally and every box keeps its natural size. ---- */
@media (max-width: 900px) {
    body.port-body { height: auto; min-height: 100vh; overflow-y: auto; }
    body.port-body.port-drawer-locked { overflow: hidden; }
    body.port-body .port-layout { height: auto; min-height: 100vh; }
    body.port-body .port-main { height: auto; min-height: 100vh; overflow: visible; }
    body.port-body .port-content { flex: none; overflow: visible; min-height: 0; }
    body.port-body .port-content > *,
    body.port-body .port-col > * { flex: none; }
    body.port-body .port-row { flex: none; overflow: visible; min-height: 0; }
    body.port-body .port-col { min-height: 0; }
    body.port-body .port-attendance-scroll,
    body.port-body .port-badges-scroll,
    body.port-body .port-this-month-scroll,
    body.port-body .port-attendance-history-scroll {
        flex: none; min-height: 0; max-height: 440px; overflow-y: auto;
    }
    body.port-body .port-panel--fixed { min-height: 0; }
}

/* ============================================================
   SIKAT_IPAD_V1 — phone side menu, password eye, iPad / tablet layout
   ============================================================ */

/* Volunteer Portal side menu on phones / iPad portrait: exactly as tall
   as the visible screen (not the taller "100vh" phone browsers use), and
   it scrolls, so Log out is always reachable. */
@media (max-width: 900px) {
    body.port-body .port-sidebar {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    body.port-body .port-sidebar > * { flex-shrink: 0; }
    body.port-body .port-sidebar .port-nav { flex: 1 0 auto; }
}

/* Show / hide password (Profile > Security) */
.port-input-wrap .port-form-input.port-pw-input { padding-right: 44px; }
.port-pw-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
}
.port-pw-eye:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }
.port-pw-eye svg { width: 20px; height: 20px; }

/* ---------------- iPad / tablet: public pages ---------------- */
/* Top menu: smaller type and spacing so the logo, links, Login and
   Volunteer button fit on one line without touching. */
@media (min-width: 901px) and (max-width: 1280px) {
    nav.uh-navbar { padding: 0 3%; gap: 16px; }
    nav.uh-navbar .uh-logo { gap: 10px; flex-shrink: 0; }
    nav.uh-navbar .uh-logo-icon { width: 50px; height: 50px; }
    nav.uh-navbar .uh-logo-text { font-size: 17px; letter-spacing: 0.06em; white-space: nowrap; }
    nav.uh-navbar .uh-nav-links { gap: 24px; }
    nav.uh-navbar .uh-nav-link,
    nav.uh-navbar .uh-login-link { font-size: 15px; white-space: nowrap; }
    nav.uh-navbar .uh-nav-right { gap: 16px; flex-shrink: 0; }
    nav.uh-navbar .uh-login-link { gap: 8px; }
    nav.uh-navbar .uh-login-link svg { width: 28px; height: 28px; }
    nav.uh-navbar .uh-volunteer-btn { width: auto; height: 46px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1060px) {
    nav.uh-navbar .uh-logo-icon { width: 42px; height: 42px; }
    nav.uh-navbar .uh-logo-text { font-size: 15px; letter-spacing: 0.04em; }
    nav.uh-navbar .uh-nav-links { gap: 16px; }
    nav.uh-navbar .uh-nav-link,
    nav.uh-navbar .uh-login-link { font-size: 14px; }
    nav.uh-navbar .uh-nav-right { gap: 12px; }
    nav.uh-navbar .uh-volunteer-btn { height: 42px; padding: 0 16px; font-size: 14px; }
}

/* Home > Who We Are: photo and intro side by side, then Mission /
   Vision / Values as three columns underneath (instead of three narrow
   squeezed columns). */
@media (min-width: 901px) and (max-width: 1199px) {
    .uh-who-we-are { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .uh-wwa-left { gap: 40px; }
    .uh-wwa-content { flex: 1 1 0; min-width: 0; }
    .uh-wwa-desc { max-width: none; font-size: 14px; letter-spacing: -0.3px; }
    .uh-wwa-right { gap: 0; }
    .uh-wwa-divider { display: none; }
    .uh-wwa-mvv { flex-direction: row; gap: 28px; width: 100%; }
    .uh-wwa-mvv > .uh-mvv-row { flex: 1 1 0; min-width: 0; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 12px; }
}

/* ---------------- iPad / touch screens: Volunteer Portal ---------------- */
@media (min-width: 601px) and (max-width: 1366px) and (pointer: coarse) {
    body.port-body input,
    body.port-body select,
    body.port-body textarea,
    body .pub-form-input,
    body .pub-form-select,
    body .pub-form-textarea,
    html body #donateBody .pub-form-input,
    html body #volunteerAppBody .pub-form-input { font-size: 16px; }   /* stops iPad Safari zooming in on tap */
    body.port-body .port-nav-item { min-height: 44px; }
}

/* iPad portrait: Profile details and the password boxes in two columns
   (the phone layout stacked them in one long column). */
@media (min-width: 700px) and (max-width: 900px) {
    body.port-body .port-info-grid,
    body.port-body .port-security-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

/* ============================================================
   SIKAT_PUBLIC_MENU_V1 — signed-in extras on the public pages
   ============================================================ */
/* Browsers' own "show password" eye (Microsoft Edge) — the page has its
   own eye button, so hide the browser's to avoid two. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* Already signed in: no "Become a Volunteer" buttons / links. */
html.sik-signed-in [onclick^="openVolunteerApplicationModal"] { display: none !important; }

/* Bell beside the profile picture */
.uh-nav-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.uh-nav-bell:hover { background: #F1F5F9; }
.uh-nav-bell:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.uh-nav-bell svg { width: 24px; height: 24px; }
.uh-nav-bell .uh-nav-bell-dot {
    display: none;
    position: absolute;
    top: 8px;
    right: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F04438;
    border: 2px solid #FFFFFF;
}
nav.uh-navbar .uh-login-link { cursor: pointer; }

/* Profile menu */
.uh-account-menu {
    position: fixed;
    z-index: 600;
    min-width: 210px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
    padding: 6px;
    font-family: 'Montserrat', sans-serif;
    animation: uhMenuIn 0.15s ease;
}
@keyframes uhMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.uh-account-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px; border-bottom: 1px solid #F1F2F4; margin-bottom: 4px; }
.uh-account-menu-name { font-weight: 700; font-size: 14px; color: #1A202C; }
.uh-account-menu-role { font-size: 12px; color: #8A94A6; }
.uh-account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1C486D;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
.uh-account-menu-item:hover, .uh-account-menu-item:focus-visible { background: #F1F5F9; outline: none; }
.uh-account-menu-item--logout { color: #D92D20; }

/* Log out confirmation */
.uh-logout-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(16, 24, 40, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.uh-logout-box {
    width: 100%; max-width: 360px; background: #FFFFFF; border-radius: 16px;
    padding: 26px 24px 22px; text-align: center; font-family: 'Montserrat', sans-serif;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.uh-logout-title { font-size: 20px; font-weight: 800; color: #101828; margin: 0 0 8px; }
.uh-logout-text { font-size: 14px; color: #667085; margin: 0 0 20px; }
.uh-logout-actions { display: flex; gap: 10px; }
.uh-logout-btn { flex: 1; height: 44px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
.uh-logout-btn--cancel { background: #FFFFFF; border: 1px solid #D0D5DD; color: #344054; }
.uh-logout-btn--primary { background: #002148; border: 1px solid #002148; color: #FFFFFF; }

/* Notification panel + pop-ups on the public pages (the Volunteer
   Portal has these in portal.css). */
body:not(.port-body) .port-notif-panel {
    position: fixed; width: 340px; max-height: 420px; overflow-y: auto;
    background: #FFFFFF; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 500; font-family: 'Montserrat', sans-serif;
}
body:not(.port-body) .port-notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F1F2F4; }
body:not(.port-body) .port-notif-panel-title { font-weight: 700; font-size: 14px; color: #1A202C; }
body:not(.port-body) .port-notif-clear-btn { background: none; border: none; color: #3B5EFF; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Montserrat', sans-serif; }
body:not(.port-body) .port-notif-list { display: flex; flex-direction: column; }
body:not(.port-body) .port-notif-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid #F7F8FA; cursor: pointer; transition: background 0.15s ease; }
body:not(.port-body) .port-notif-item:hover { background: #FAFBFC; }
body:not(.port-body) .port-notif-item--unread { background: #FFF8F0; }
body:not(.port-body) .port-notif-item-title { font-weight: 700; font-size: 13px; color: #1A202C; }
body:not(.port-body) .port-notif-item-message { font-size: 12.5px; color: #5C616E; line-height: 1.4; }
body:not(.port-body) .port-notif-item-time { font-size: 11px; color: #8A94A6; margin-top: 2px; }
body:not(.port-body) .port-empty { font-size: 13px; color: #8A94A6; }
.uh-notif-panel-footer { display: block; padding: 12px 16px; font-size: 12.5px; font-weight: 700; color: #2563EB; text-decoration: none; border-top: 1px solid #F1F2F4; }
.uh-notif-panel-footer:hover { background: #F8FAFC; }

body:not(.port-body) .sik-toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 16px; width: 380px;
}
body:not(.port-body) .sik-toast {
    background: #FFFFFF; border-radius: 16px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    padding: 22px 44px 20px 24px; position: relative; font-family: 'Montserrat', sans-serif;
    animation: uhToastIn 0.25s ease;
}
body:not(.port-body) .sik-toast--leaving { animation: uhToastOut 0.3s ease forwards; }
@keyframes uhToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uhToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
body:not(.port-body) .sik-toast-title { font-size: 18px; font-weight: 800; color: #101828; margin: 0 0 8px; line-height: 1.3; }
body:not(.port-body) .sik-toast-message { font-size: 14px; color: #667085; line-height: 1.5; margin: 0; }
body:not(.port-body) .sik-toast-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #2563EB; text-decoration: none; cursor: pointer; }
body:not(.port-body) .sik-toast-time { font-size: 12px; color: #98A2B3; margin: 16px 0 0; }
body:not(.port-body) .sik-toast-close {
    position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: #667085; cursor: pointer; padding: 0;
}
body:not(.port-body) .sik-toast-close:hover { background: #F2F4F7; }
@media (max-width: 600px) {
    body:not(.port-body) .sik-toast-container { top: 80px; left: 10px; right: 10px; width: auto; }
    .uh-nav-bell { width: 38px; height: 38px; }
    .uh-nav-bell .uh-nav-bell-dot { top: 6px; right: 7px; }
}


/* ============================================================
   SIKAT_PUBLIC_MENU_V2 — signed-in profile button in the top menu:
   bell (left) · name (middle) · photo (right), shaped as a button
   with a small arrow so it's clearly clickable; its menu hangs right
   under it.
   ============================================================ */
html.sik-signed-in nav.uh-navbar .uh-login-link {
    gap: 10px !important;
    padding: 4px 4px 4px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #FFFFFF;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
html.sik-signed-in nav.uh-navbar .uh-login-link:hover { background: #F8FAFC; border-color: #CBD5E1; }
html.sik-signed-in nav.uh-navbar .uh-login-link:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
html.sik-signed-in nav.uh-navbar .uh-login-link.uh-login-link--open {
    background: #F1F5F9;
    border-color: #94A3B8;
    box-shadow: 0 0 0 3px rgba(59, 94, 255, 0.12);
}
html.sik-signed-in nav.uh-navbar .uh-login-link > span:first-child { order: 3; }        /* photo: right */
html.sik-signed-in nav.uh-navbar .uh-login-link > span:not(:first-child) { order: 1; }  /* name: middle */
html.sik-signed-in nav.uh-navbar .uh-login-link::after {                                /* arrow */
    content: '';
    order: 2;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 0 2px 0 -2px;
    border-right: 2px solid #64748B;
    border-bottom: 2px solid #64748B;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}
html.sik-signed-in nav.uh-navbar .uh-login-link.uh-login-link--open::after { transform: translateY(2px) rotate(-135deg); }

.uh-account-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--caret-x, calc(100% - 24px));
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -2px -2px 4px rgba(16, 24, 40, 0.06);
}

@media (max-width: 600px) {
    html.sik-signed-in nav.uh-navbar .uh-login-link { padding: 3px 3px 3px 10px; gap: 8px !important; }
}


/* ============================================================
   SIKAT_TOAST_V1 — smaller notification pop-ups on phones, tablets
   and iPads (the computer size was too big for them). #toastContainer
   is used so these win over each page's own pop-up styles.
   ============================================================ */
@media (max-width: 1180px), (pointer: coarse) {
    #toastContainer.sik-toast-container { width: 320px; gap: 10px; }
    #toastContainer .sik-toast { padding: 12px 36px 12px 14px; border-radius: 12px; }
    #toastContainer .sik-toast-title { font-size: 14px; margin: 0 0 4px; line-height: 1.3; }
    #toastContainer .sik-toast-message { font-size: 12.5px; line-height: 1.45; }
    #toastContainer .sik-toast-link { font-size: 12px; margin-top: 6px; }
    #toastContainer .sik-toast-time { font-size: 11px; margin: 6px 0 0; }
    #toastContainer .sik-toast-close { top: 9px; right: 9px; width: 22px; height: 22px; }
    #toastContainer .sik-toast-close svg { width: 12px; height: 12px; }
}
@media (max-width: 600px) {
    #toastContainer.sik-toast-container { width: auto; left: 10px; right: 10px; gap: 8px; }
    #toastContainer .sik-toast { padding: 10px 34px 10px 12px; }
    #toastContainer .sik-toast-title { font-size: 13.5px; }
    #toastContainer .sik-toast-message {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* ============================================================
   SIKAT_DONATE_FLOW_V2 — Donate pop-up: QR + amount on the Amount step,
   receipt upload with Your Donation on the last step.
   ============================================================ */
.pub-donate-amount-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.pub-donate-amount-grid .pub-donate-pay-strip--amount { margin-top: 0; flex-direction: column; align-items: stretch; gap: 14px; }
.pub-donate-amount-grid .pub-donate-qr-card { align-self: center; }
.pub-donate-amount-grid .pub-donate-pay-strip-right { width: 100%; }
.pub-donate-amount-grid .pub-donate-pay-methods { justify-content: center; }
.pub-donate-amount-grid .pub-donate-instructions-panel { margin: 0; }
.pub-donate-pay-strip--amount .pub-donate-other-amount input { font-size: 16px; }
.pub-donate-prefill-note { margin: 0 0 14px; }
.pub-donate-receipt-panel { border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px; }
.pub-donate-receipt-panel .pub-form-label { display: block; margin-bottom: 10px; }
.pub-donate-receipt-preview {
    display: block;
    max-width: 220px;
    max-height: 260px;
    margin-top: 14px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    object-fit: contain;
    background: #F7F8FA;
}
@media (max-width: 640px) {
    .pub-donate-amount-grid { grid-template-columns: minmax(0, 1fr); }
    .pub-donate-receipt-preview { max-width: 100%; }
}

/* ============================================================
   SIKAT_PROFILE_MENU_V1 — profile button + menu (reference design):
   name and role, photo in an orange ring, a small arrow; the menu
   shows the name / role, then Profile, Log out and Settings.
   ============================================================ */
.sik-profile-menu {
    position: fixed;
    z-index: 600;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
    padding: 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    animation: sikProfileMenuIn 0.14s ease;
}
@keyframes sikProfileMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sik-profile-menu-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 8px;
}
.sik-profile-menu-name { font-size: 16px; font-weight: 700; color: #2D3142; line-height: 1.25; }
.sik-profile-menu-role { font-size: 13.5px; font-weight: 500; color: #6B7280; }
.sik-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 22px;
    border: none;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1C3552;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.sik-profile-menu-item svg { flex-shrink: 0; color: #1C3552; }
.sik-profile-menu-item:hover, .sik-profile-menu-item:focus-visible { background: #FFF4EB; color: #C2410C; outline: none; }
.sik-profile-menu-item:hover svg, .sik-profile-menu-item:focus-visible svg { color: #F47A20; }
/* Public top menu: bell · name / role · photo (orange ring) · arrow */
html.sik-signed-in nav.uh-navbar .uh-login-link {
    gap: 12px !important;
    padding: 4px 8px 4px 10px;
    border: none;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}
html.sik-signed-in nav.uh-navbar .uh-login-link:hover,
html.sik-signed-in nav.uh-navbar .uh-login-link.is-open { background: rgba(28, 72, 109, 0.06); border: none; box-shadow: none; }
html.sik-signed-in nav.uh-navbar .uh-login-link > span:first-child {
    order: 3;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 3px #F47A20;
}
html.sik-signed-in nav.uh-navbar .uh-login-link > span:not(:first-child) {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-weight: 700 !important;
    font-size: 15px;
    color: #3A3F4B;
    line-height: 1.2;
}
html.sik-signed-in nav.uh-navbar .uh-login-link > span:not(:first-child)::after {
    font-size: 12.5px;
    font-weight: 500;
    color: #6B7280;
    line-height: 1.3;
}
html[data-sik-role="user"] nav.uh-navbar .uh-login-link > span:not(:first-child)::after { content: 'Volunteer'; }
html[data-sik-role="admin"] nav.uh-navbar .uh-login-link > span:not(:first-child)::after { content: 'Administrator'; }
html[data-sik-role="superadmin"] nav.uh-navbar .uh-login-link > span:not(:first-child)::after { content: 'Super Admin'; }
html[data-sik-role="moderator"] nav.uh-navbar .uh-login-link > span:not(:first-child)::after { content: 'Moderator'; }
html.sik-signed-in nav.uh-navbar .uh-login-link::after {
    order: 4;
    width: 8px;
    height: 8px;
    margin: 0 2px 4px 0;
    border-color: #4B5563;
}
html.sik-signed-in nav.uh-navbar .uh-login-link.is-open::after { transform: translateY(4px) rotate(-135deg); }
@media (max-width: 600px) {
    html.sik-signed-in nav.uh-navbar .uh-login-link { padding: 3px 6px; gap: 8px !important; }
    html.sik-signed-in nav.uh-navbar .uh-login-link > span:not(:first-child) { display: none; }
}

/* SIKAT_SIDE_PANEL_V1: side panel keeps only "Back to Home Page";
   name/photo and Log out are in the top-right profile menu. */
.sik-sidebar-footer .sik-user-mini { display: none !important; }
.sik-sidebar-footer a.sik-logout[onclick*="confirmLogout"] { display: none !important; }
.port-sidebar-footer a[onclick*="confirmLogout"] { display: none !important; }
.sik-sidebar-footer a.sik-logout { margin-bottom: 0 !important; }
.sik-port-chip-btn { cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid transparent; transition: background .15s, border-color .15s; user-select: none; }
.sik-port-chip-btn:hover, .sik-port-chip-btn.is-open { background: #FFF6EC; border-color: #FDDCB5; }
.sik-port-chip-btn:focus-visible { outline: 2px solid #F79009; outline-offset: 2px; }
.sik-port-chip-btn .port-avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F79009; }
.sik-port-chip-btn .port-user-name { font-weight: 700; }
.sik-port-chip-caret { display: inline-flex; color: #667085; transition: transform .15s; }
.sik-port-chip-btn.is-open .sik-port-chip-caret { transform: rotate(180deg); color: #DC6803; }

/* SIKAT_PHONE_HOME_V1: on phones "Back to Home Page" is in the profile
   menu instead of the side panel. Tablets and computers are unchanged. */
.sik-profile-menu-item--home { display: none !important; }
@media (max-width: 600px) {
    .sik-profile-menu-item--home { display: flex !important; }
    .sik-sidebar-footer, .port-sidebar-footer { display: none !important; }
}

/* SIKAT_PROFILE_POP_V1: no grey box on hover; the photo pops and glows
   for a moment when the profile button is clicked. */
.sik-hdr-profile:hover, .sik-hdr-profile.is-open,
.sik-port-chip-btn:hover, .sik-port-chip-btn.is-open,
html.sik-signed-in nav.uh-navbar .uh-login-link:hover,
html.sik-signed-in nav.uh-navbar .uh-login-link.is-open { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.sik-hdr-profile, .sik-port-chip-btn, html.sik-signed-in nav.uh-navbar .uh-login-link { transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sik-hdr-profile:active, .sik-port-chip-btn:active, html.sik-signed-in nav.uh-navbar .uh-login-link:active { transform: scale(0.97); }
.sik-hdr-profile.sik-pop .sik-hdr-profile-avatar,
.sik-port-chip-btn.sik-pop .port-avatar,
html.sik-signed-in nav.uh-navbar .uh-login-link.sik-pop > span:first-child { animation: sikProfilePop .6s ease-out; }
@keyframes sikProfilePop {
    0%   { transform: scale(1);    filter: brightness(1); }
    35%  { transform: scale(1.14); filter: brightness(1.15); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F79009, 0 0 18px 6px rgba(247, 144, 9, 0.55); }
    100% { transform: scale(1);    filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    .sik-hdr-profile.sik-pop .sik-hdr-profile-avatar,
    .sik-port-chip-btn.sik-pop .port-avatar,
    html.sik-signed-in nav.uh-navbar .uh-login-link.sik-pop > span:first-child { animation: none; }
}

/* ============================================================
   SIKAT_UPDATE14_V1
   ============================================================ */
/* Notification panels: never taller than this (they scroll inside). */
.sik-notif-panel, .port-notif-panel { max-height: min(480px, calc(100vh - 140px)) !important; max-height: min(480px, calc(100dvh - 140px)) !important; }
.port-notif-panel { overflow-y: auto; }
@media (max-width: 600px) {
    .sik-notif-panel, .port-notif-panel { max-height: min(420px, calc(100vh - 150px)) !important; max-height: min(420px, calc(100dvh - 150px)) !important; }
}

/* Volunteer Portal header: the name/photo button has its final size
   from the first frame, so it no longer jumps when the page loads. */
.port-header .port-user-chip { cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid transparent; user-select: none; -webkit-tap-highlight-color: transparent; }
.port-header .port-user-chip .port-avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F79009; }
.port-header .port-user-chip .port-user-name { font-weight: 700; }
.port-header .port-user-chip::after { content: ''; width: 7px; height: 7px; margin: 0 4px 3px 2px; border-right: 2px solid #667085; border-bottom: 2px solid #667085; transform: rotate(45deg); transition: transform .15s; flex-shrink: 0; }
.port-header .port-user-chip.is-open::after { transform: translateY(3px) rotate(-135deg); border-color: #DC6803; }
.port-header .port-user-chip .sik-port-chip-caret { display: none !important; }
.port-header .port-user-chip:hover, .port-header .port-user-chip.is-open { background: transparent !important; border-color: transparent !important; }

/* Volunteer Portal: content slides in on each page, like the admin side. */
.port-header ~ .port-content { animation: sikPortContentIn 0.5s ease; }
@keyframes sikPortContentIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .port-header ~ .port-content { animation: none; } }

/* Certification: Customize / Generate Certificates on phones */
@media (max-width: 600px) {
    body .sik-cc-modal-box { height: auto !important; max-height: calc(100vh - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: hidden !important; display: flex; flex-direction: column; padding: 18px 16px 14px !important; }
    body .sik-cc-modal-box > .sik-event-modal-header { margin-bottom: 10px; }
    body .sik-cc-body { display: block !important; overflow-y: auto; flex: 1 1 auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
    body .sik-cc-form-col { overflow: visible !important; padding-right: 0 !important; gap: 10px !important; }
    body .sik-cc-form-col .sik-form-group { margin-bottom: 0 !important; }
    body .sik-cc-form-col .sik-form-label { margin-bottom: 4px; font-size: 12px; }
    body .sik-cc-form-col .sik-form-input, body .sik-cc-form-col .sik-form-select { height: 42px; padding-top: 8px; padding-bottom: 8px; }
    body .sik-cc-preview-col { margin-top: 16px; }
    body .sik-cc-preview-box { min-height: 150px !important; flex: none !important; padding: 8px; }
    body .sik-cc-preview-img { max-height: 180px !important; }
    body .sik-cc-footer { margin-top: 10px !important; padding-top: 10px !important; flex-wrap: wrap; gap: 8px; }
    body .sik-cc-status { width: 100%; }
    body .sik-cc-footer-btns { width: 100%; }
    body .sik-cc-footer-btns .sik-modal-btn { flex: 1; }
}
/* Certificate designer on phones: every top button fits and wraps. */
@media (max-width: 650px) {
    body .top-actions { flex-wrap: wrap !important; justify-content: flex-start !important; }
    body .back-admin-btn::before { content: 'Back' !important; }
    body .icon-button { min-width: 0; padding: 0 10px; height: 34px; font-size: 12px; }
    body .download-button { height: 34px; padding: 0 12px; font-size: 12px; }
    body .top-actions .download-button { flex: 1 1 auto; }
}

/* Edit Content: a section someone else is editing */
.sik-content-card.sik-ec-locked { border: 1.5px solid #F04438 !important; background: #FEF3F2 !important; box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12) !important; }
.sik-ec-lock-note { margin: 6px 0 0; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #B42318; }
.sik-content-card.sik-ec-locked .sik-edit-btn { background: #FEE4E2 !important; color: #B42318 !important; border: 1px solid #FDA29B !important; cursor: not-allowed; }
.sik-ec-lost-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318; font: 600 13px/1.5 'Montserrat', sans-serif; }

/* Email change requests */
.sik-ecr-form { display: grid; gap: 12px; margin: 14px 0 6px; text-align: left; }
.sik-ecr-form label { display: grid; gap: 6px; font: 600 13px 'Montserrat', sans-serif; color: #344054; }
.sik-ecr-form input, .sik-ecr-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; padding: 10px 12px; font: 500 14px 'Montserrat', sans-serif; color: #101828; background: #FFFFFF; outline: none; }
.sik-ecr-form input:focus, .sik-ecr-form textarea:focus { border-color: #F79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.15); }
.sik-ecr-form input[readonly] { background: #F2F4F7; color: #667085; }
.sik-ecr-form textarea { min-height: 70px; resize: vertical; }
.sik-ecr-error { margin: 0; font: 600 12px 'Montserrat', sans-serif; color: #B42318; }
.sik-ecr-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFFAEB; color: #B54708; font: 500 12px/1.5 'Montserrat', sans-serif; text-align: left; }
.sik-ecr-status { display: block; margin-top: 4px; font: 500 12px/1.4 'Montserrat', sans-serif; }
.sik-ecr-status--pending { color: #B54708; }
.sik-ecr-status--denied { color: #B42318; }
.sik-ecr-locked-input { background: #F2F4F7 !important; color: #667085 !important; cursor: not-allowed; }
.sik-ecr-btn { margin-top: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid #F79009; background: #FFFFFF; color: #DC6803; font: 600 12px 'Montserrat', sans-serif; cursor: pointer; }
.sik-ecr-btn:hover { background: #FFF6EC; }
.sik-ecr-panel { margin-bottom: 18px; padding: 18px 20px; border: 1px solid #FEDF89; }
.sik-ecr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sik-ecr-count { padding: 3px 10px; border-radius: 999px; background: #FFF6EC; color: #B54708; font: 700 12px 'Montserrat', sans-serif; }
.sik-ecr-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #F2F4F7; font-family: 'Montserrat', sans-serif; }
.sik-ecr-info { min-width: 0; font-size: 13px; color: #344054; }
.sik-ecr-role { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #F2F4F7; color: #475467; font-size: 11px; font-weight: 600; }
.sik-ecr-emails { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.sik-ecr-to { color: #98A2B3; font-size: 12px; }
.sik-ecr-reason, .sik-ecr-date { margin-top: 3px; font-size: 12px; color: #667085; }
.sik-ecr-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sik-ecr-actions button { height: 36px; padding: 0 16px; border-radius: 8px; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.sik-ecr-deny { background: #FFFFFF; border: 1px solid #FDA29B; color: #B42318; }
.sik-ecr-approve { background: #002148; border: 1px solid #002148; color: #FFFFFF; }
@media (max-width: 600px) {
    .sik-ecr-item { flex-direction: column; align-items: stretch; }
    .sik-ecr-actions button { flex: 1; }
}

/* SIKAT_UPDATE16_V1: Volunteer Portal profile button laid out like the
   admin side - name and role, then the photo, then the arrow. */
.port-header .port-user-chip .port-user-text { order: 1; align-items: flex-end; text-align: right; }
.port-header .port-user-chip .port-avatar { order: 2; }
.port-header .port-user-chip::after { order: 3; }


/* SIKAT_UPDATE27_V1 - phone / tablet: the name and photo sit on the right
   of the header on every Volunteer Portal page, Profile included (its
   title is already in the top bar), so nothing jumps when changing pages. */
@media (max-width: 900px) {
    body.port-body .port-header { flex-wrap: nowrap; }
    body.port-body .port-header > div:first-child:not(.port-header-right) { display: none; }
    body.port-body .port-header-right { margin-left: auto; }
}

/* SIKAT_UPDATE90_V1: staff role + position under the name in the top bar -
   a long one wraps to 2 lines (set by js/sikat-shell.js and js/script.js) */
html.sik-has-pos.sik-signed-in nav.uh-navbar .uh-login-link > span:not(:first-child)::after {
    content: var(--sik-role-label);
    white-space: normal;
    max-width: 260px;
    text-align: right;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
html.sik-has-pos.sik-signed-in nav.uh-navbar .uh-login-link { white-space: normal; }