:root{
    /* Fallback palette (kept in sync with theme.css) */
    --primary: #00CCCC;
    --dark: #024A26;
    --white: #FFFFFF;
    --muted: #f3f7f6;
}

/* Relative gradient background using CSS color-mix when available. Falls back to a safe gradient. */
body{
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--white)), color-mix(in srgb, var(--dark) 6%, var(--muted) 94%));
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--dark);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Fallback for browsers that don't support color-mix */
@supports not (color: color-mix(in srgb, var(--primary) 50%, var(--white))) {
    body{
        background: linear-gradient(135deg, rgba(0,204,204,0.08), rgba(2,74,38,0.02));
    }
}

/* Mobile-first: base spacing & layout tweaks */
header, .school-footer{ padding-left: 1rem; padding-right: 1rem }
.container{ max-width:100%; padding:0 1rem }

/* Stack utility rows on small screens */
.u-row{ display:flex; flex-direction:column; gap:.6rem }
.u-col{ width:100% }

/* Make images responsive */
img{ max-width:100%; height:auto; display:block }

/* Header navigation: show hamburger on small devices */
#navigation-buttons-div{ display:none }
#menu-div-div{ display:block }
#menu-div{ cursor:pointer }

/* Content areas: make cards full-width and reduce padding */
.card, .aboutus-container-Page-1, .abt-panel, .ngo-card, .admin-home-div, .hpage-settings-card{ width:100%; padding:1rem; box-sizing:border-box }

/* Buttons - full width on small devices to improve tap targets */
.btn, .btn--primary, button, input[type="submit"]{ width:100%; display:block }

/* Forms */
.form-row{ grid-template-columns: 1fr }
.form-control{ font-size:1rem }

/* Admin panel responsive adjustments */
@media (max-width: 900px){
    .main-content{ display:block }
    .Left-sidePanel{ width:100%; height:auto; display:flex; flex-direction:row; align-items:center; gap:.5rem; padding:.6rem; overflow-x:auto }
    .nav-li-link-ul{ display:flex; flex-direction:row; gap:.5rem; padding: .5rem }
    .nav-li-link{ white-space:nowrap; min-width:auto; padding:.5rem .8rem; font-size:0.95rem; box-shadow:none }
    .Right-sidePanel{ width:100%; padding-top: .6rem }
    .rsp-top-admin-log-div{ display:flex; gap:.5rem; align-items:center; justify-content:space-between; padding:.4rem }
    .header-name{ font-size:1.1rem; text-align:left }
    #LogOutbtn{ padding:.45rem .7rem; font-size:.92rem }
    .admin-home-div{ width:100%; margin-top: .8rem; padding: .9rem; border-radius: .8rem }
    .admin-header-div-rs-wArea{ position:relative; top:auto; left:auto; margin-bottom: .8rem }
}

/* Smaller phones */
@media (max-width:480px){
    .typography-h1{ font-size:1.5rem }
    .typography-h2{ font-size:1rem }
    header{ padding:.5rem }
    .btn, button{ padding:.6rem }
}

/* Desktop/tablet: restore row layouts */
@media (min-width:901px){
    .u-row{ flex-direction:row }
    .btn, .btn--primary, button{ width:auto }
}

/* Accessibility: larger tap areas for links in nav */
.li-btn, .nav-li-link{ touch-action: manipulation }

/* Minor helpers to avoid layout overflow */
html, body{ max-width:100vw; overflow-x:hidden }