/* 
 * Design System - Media Circle of D.S.Senanayake College
 * Theme: Black & Gold (Premium, Elegant)
 * v2.0 — Full Mobile & Tablet Responsive Overhaul
 */

:root {
    --color-black: #0a0a0a;
    --color-dark-gray: #1a1a1a;
    --color-gold: #D4AF37;
    /* Metallic Gold */
    --color-gold-light: #F4C430;
    /* Lighter Gold for hovers */
    --color-white: #ffffff;
    --color-text-gray: #cccccc;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    --transition-speed: 0.3s;

    /* Header height estimate for scroll-padding */
    --header-height: 65px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal overflow globally */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Responsive images globally */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--color-black);
    color: var(--color-text-gray);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    /* Prevent iOS font inflation */
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    word-break: break-word;
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    width: 100%;
}

/* ─── Header & Navigation ────────────────────────────────────────────────── */
header {
    background-color: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: var(--spacing-md) 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.logo {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    color: var(--color-gold);
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: var(--color-white);
    font-weight: 700;
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid transparent;
    display: inline-block;
    /* Needed for border-bottom to show */
    min-height: 44px;
    /* Touch-friendly */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-link:hover {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* ─── Dropdown Menu ──────────────────────────────────────────────────────── */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-dark-gray);
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-top: 2px solid var(--color-gold);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all var(--transition-speed) ease;
    padding: var(--spacing-sm) 0;
    z-index: 100;
}

/* Show dropdown on hover over the parent li (desktop) */
.nav-item:hover .dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.dropdown li a {
    display: block;
    padding: 12px var(--spacing-md);
    /* 12px min height for touch */
    color: var(--color-text-gray);
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.dropdown li a:hover {
    background-color: rgba(212, 175, 55, 0.05);
    color: var(--color-gold);
    border-left-color: var(--color-gold);
}

/* ─── Page Title Section ─────────────────────────────────────────────────── */
.page-title-section {
    background-color: var(--color-dark-gray);
    border-bottom: 2px solid var(--color-gold);
    padding: var(--spacing-lg) 0;
    margin-top: 0;
}

.page-title-section h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2.2px;
}

/* ─── Tab fade-in animation ──────────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content.active {
    animation: fadeIn 0.4s ease;
}

/* Active nav link state */
.nav-link.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* ─── Hamburger Button ───────────────────────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    /* Larger touch area */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    transition: all var(--transition-speed);
    border-radius: 2px;
    transform-origin: center;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─── Hero Section ───────────────────────────────────────────────────────── */
.hero {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-black);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity;
    /* GPU hint */
    animation: fadeAnim 40s linear infinite;
}

@keyframes fadeAnim {
    0% {
        opacity: 0;
    }

    2.5% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }

    12.5% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Stagger the animations for each of the 10 slides */
.hero-slideshow .slide:nth-child(1) {
    animation-delay: 0s;
}

.hero-slideshow .slide:nth-child(2) {
    animation-delay: 5s;
}

.hero-slideshow .slide:nth-child(3) {
    animation-delay: 10s;
}

.hero-slideshow .slide:nth-child(4) {
    animation-delay: 15s;
}

.hero-slideshow .slide:nth-child(5) {
    animation-delay: 20s;
}

.hero-slideshow .slide:nth-child(6) {
    animation-delay: 25s;
}

.hero-slideshow .slide:nth-child(7) {
    animation-delay: 30s;
}

.hero-slideshow .slide:nth-child(8) {
    animation-delay: 35s;
}


.slideshow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(26, 26, 26, 0.6) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-lg) clamp(1rem, 4vw, 2rem);
    width: 100%;
}

.hero h1 {
    font-size: clamp(1.6rem, 5vw, 3rem);
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1px;
    word-spacing: 2px;
}

.hero p {
    font-size: clamp(0.85rem, 2.5vw, 1.2rem);
    letter-spacing: clamp(2px, 1vw, 4px);
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-cta {
    display: inline-block;
    margin-top: var(--spacing-lg);
    padding: 12px clamp(20px, 5vw, 36px);
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all var(--transition-speed);
    cursor: pointer;
    min-height: 44px;
    /* Touch-friendly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-cta:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.hero-logo {
    max-width: min(300px, 70vw);
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-md);
    filter: grayscale(1) invert(1) brightness(2);
    mix-blend-mode: screen;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Content Sections ───────────────────────────────────────────────────── */
.text-section {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.text-section h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Gold underline accent for headers */
.text-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 60px;
    height: 3px;
    background-color: var(--color-gold);
}

.text-section p {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    line-height: 1.8;
    max-width: 800px;
    color: var(--color-text-gray);
}

/* ─── Contact Form Styles ────────────────────────────────────────────────── */
.contact-section {
    /* No extra styles needed */
}

.contact-section .container {
    display: flex;
    justify-content: center;
    /* Centered on all screens */
    align-items: center;
}

.inquiry-box {
    background-color: var(--color-dark-gray);
    padding: clamp(24px, 5vw, 50px) clamp(20px, 5vw, 60px);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.1);
    border: 1px solid var(--color-gold);
    max-width: 700px;
    width: 100%;
}

.inquiry-box h2 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
    border-bottom: none;
    position: static;
}

.inquiry-box h2::after {
    display: none;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    color: var(--color-gold);
    margin-bottom: 5px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.85rem, 2vw, 1rem);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #444;
    background-color: #0a0a0a;
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    /* Minimum 16px prevents iOS auto-zoom */
    transition: all var(--transition-speed);
    -webkit-appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #666;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--color-gold);
    color: var(--color-black);
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    transition: all var(--transition-speed);
    margin-top: var(--spacing-md);
    min-height: 44px;
    /* Touch-friendly */
}

.submit-btn:hover {
    background-color: #fceea7;
    box-shadow: 0 0 15px var(--color-gold);
}

/* ─── Smooth Scroll & Offset ─────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
    padding: var(--spacing-lg) 0;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    margin-top: var(--spacing-xl);
    color: var(--color-gold);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
}

/* ─── Footer Social Section ─────────────────────────────────────────────── */
.footer-social-section {
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-social-title {
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
}

.footer-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    /* responsive wrap on mobile */
}

/* Glassmorphism circular button with gold border */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    /* touch-friendly */
    height: 44px;
    /* touch-friendly */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    /* thin gold border */
    color: var(--color-gold);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    cursor: pointer;
    text-decoration: none;
}

.social-btn:hover {
    transform: scale(1.1);
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--color-gold-light);
    color: var(--color-white);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    /* soft golden glow */
}

/* Focus styles for keyboard accessibility */
.social-btn:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 3px;
    background: rgba(212, 175, 55, 0.15);
}

.social-icon {
    display: block;
    transition: transform 0.3s ease;
}

.social-btn:hover .social-icon {
    transform: scale(1.05);
}

/* Developer credit */
.footer-credit {
    margin-top: 6px;
    font-size: clamp(0.75rem, 1.8vw, 0.8rem);
    color: rgba(212, 175, 55, 0.6);
    letter-spacing: 1px;
}

/* ─── Ninnada Futuristic Neon Yellow Theme ───────────────────────────────── */
.ninnada-page-bg {
    background: linear-gradient(180deg, #000000 0%, #020713 40%, #081125 80%, #000000 100%);
    color: #ffffff;
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.logo-ninnada {
    color: #ffff00 !important;
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.658), 0 0 15px rgba(255, 255, 0, 0.5);
    transition: all 0.3s ease;
}

.logo-ninnada:hover {
    text-shadow: 0 0 12px rgba(255, 255, 0, 1), 0 0 25px rgba(255, 255, 0, 0.8);
}

.text-glow-yellow {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.4);
}

.text-glow-yellow-lg {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 255, 0, 0.5), 0 0 12px rgba(255, 255, 0, 0.25);
}

.ninnada-btn-glow {
    background-color: #ffd700;
    color: #3e2723;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ninnada-btn-glow:hover {
    transform: scale(1.05);
    background-color: #ffff33;
    box-shadow: 0 0 14px rgba(255, 255, 0, 0.5);
}

.ninnada-info-card {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.15);
}

.category-box {
    border: 1px solid rgba(255, 255, 0, 0.2);
    background-color: rgba(10, 10, 10, 0.85);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 0;
    /* Prevent flex/grid overflow */
    overflow: hidden;
}

.category-box:hover {
    transform: scale(1.03);
    border-color: rgba(255, 255, 0, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.25);
}

/* ─── Scroll Reveal Animations ───────────────────────────────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── About Us scroll-reveal stagger (embedded in Home page) ─────────────── */
/* The title banner reveals first, then each section with a slight delay      */
#home-content .page-title-section.reveal-on-scroll {
    transition-delay: 0ms;
}

#home-content #who-are-we.reveal-on-scroll {
    transition-delay: 40ms;
}

#home-content #vision.reveal-on-scroll {
    transition-delay: 80ms;
}

#home-content #mission.reveal-on-scroll {
    transition-delay: 120ms;
}

#home-content #history.reveal-on-scroll {
    transition-delay: 320ms;
}

/* Reset delay once revealed so re-entry stays snappy */
#home-content .reveal-on-scroll.revealed {
    transition-delay: 0ms;
}

.ninnada-page-bg h2::after {
    display: none !important;
}

/* ─── Animated Glowing Orbs ──────────────────────────────────────────────── */
.ninnada-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218, 165, 32, 0.55) 0%, rgba(218, 165, 32, 0.12) 50%, rgba(0, 0, 0, 0) 80%);
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform;
}

/* Large orbs */
.orb-1 {
    width: clamp(200px, 40vw, 520px);
    height: clamp(200px, 40vw, 520px);
    top: -120px;
    left: -160px;
    animation: float-orb-1 18s infinite ease-in-out;
}

.orb-2 {
    width: clamp(160px, 35vw, 420px);
    height: clamp(160px, 35vw, 420px);
    top: 20%;
    right: -110px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(218, 165, 32, 0.1) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-2 15s infinite ease-in-out;
}

.orb-3 {
    width: clamp(200px, 45vw, 620px);
    height: clamp(200px, 45vw, 620px);
    bottom: 15%;
    left: -220px;
    animation: float-orb-3 22s infinite ease-in-out;
}

.orb-4 {
    width: clamp(180px, 38vw, 470px);
    height: clamp(180px, 38vw, 470px);
    bottom: -100px;
    right: -160px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(218, 165, 32, 0.08) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-1 20s infinite ease-in-out reverse;
}

/* Medium orbs */
.orb-5 {
    width: clamp(120px, 25vw, 320px);
    height: clamp(120px, 25vw, 320px);
    top: 48%;
    left: 28%;
    background: radial-gradient(circle, rgba(218, 165, 32, 0.42) 0%, rgba(218, 165, 32, 0.07) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-2 17s infinite ease-in-out reverse;
}

.orb-6 {
    width: clamp(140px, 28vw, 360px);
    height: clamp(140px, 28vw, 360px);
    top: 65%;
    right: 22%;
    background: radial-gradient(circle, rgba(255, 223, 0, 0.38) 0%, rgba(218, 165, 32, 0.07) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-3 19s infinite ease-in-out;
}

.orb-7 {
    width: clamp(100px, 22vw, 280px);
    height: clamp(100px, 22vw, 280px);
    top: 10%;
    left: 45%;
    background: radial-gradient(circle, rgba(255, 210, 0, 0.45) 0%, rgba(218, 165, 32, 0.08) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-1 16s infinite ease-in-out;
}

.orb-8 {
    width: clamp(150px, 30vw, 380px);
    height: clamp(150px, 30vw, 380px);
    bottom: 40%;
    right: 10%;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.35) 0%, rgba(218, 165, 32, 0.06) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-2 23s infinite ease-in-out reverse;
}

/* Small accent orbs */
.orb-9 {
    width: clamp(80px, 15vw, 180px);
    height: clamp(80px, 15vw, 180px);
    top: 35%;
    left: 65%;
    background: radial-gradient(circle, rgba(255, 230, 0, 0.6) 0%, rgba(218, 165, 32, 0.12) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-3 13s infinite ease-in-out;
}

.orb-10 {
    width: clamp(90px, 18vw, 200px);
    height: clamp(90px, 18vw, 200px);
    top: 78%;
    left: 15%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.55) 0%, rgba(218, 165, 32, 0.1) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-1 14s infinite ease-in-out reverse;
}

/* Orb 11 if present */
.orb-11 {
    width: clamp(80px, 14vw, 160px);
    height: clamp(80px, 14vw, 160px);
    top: 55%;
    left: 5%;
    background: radial-gradient(circle, rgba(255, 220, 0, 0.45) 0%, rgba(218, 165, 32, 0.08) 50%, rgba(0, 0, 0, 0) 80%);
    animation: float-orb-2 20s infinite ease-in-out;
}

/* Orb float keyframes — GPU-friendly (transform only) */
@keyframes float-orb-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(90px, 70px) scale(1.08);
    }

    66% {
        transform: translate(-50px, 130px) scale(0.94);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes float-orb-2 {
    0% {
        transform: translate(0, 0) scale(1.05);
    }

    50% {
        transform: translate(-110px, 90px) scale(0.91);
    }

    100% {
        transform: translate(0, 0) scale(1.05);
    }
}

@keyframes float-orb-3 {
    0% {
        transform: translate(0, 0) scale(0.95);
    }

    40% {
        transform: translate(70px, -100px) scale(1.07);
    }

    80% {
        transform: translate(-90px, 50px) scale(1);
    }

    100% {
        transform: translate(0, 0) scale(0.95);
    }
}

/* ─── Admin Table — Mobile Card View ────────────────────────────────────── */

/* Scrollable table container */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(218, 165, 32, 0.3);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 0, 0.5);
}

/* Mobile card-view rows — hidden on desktop */
.mobile-card-view {
    display: none;
}

.desktop-table-view {
    display: block;
}

/* ─── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════════════════ */

/* ─── Mobile: up to 767px ────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Show hamburger, hide nav links by default */
    .hamburger {
        display: flex;
    }

    nav {
        position: relative;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background-color: var(--color-dark-gray);
        border: 1px solid rgba(212, 175, 55, 0.2);
        border-top: 2px solid var(--color-gold);
        padding: 4px 0;
        min-width: clamp(180px, 70vw, 260px);
        max-width: 90vw;
        gap: 0;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        z-index: 999;
        border-radius: 0 0 12px 12px;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 12px var(--spacing-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom-color: transparent;
        min-height: 48px;
        width: 100%;
    }

    .nav-link:hover,
    .nav-link.active {
        background-color: rgba(212, 175, 55, 0.05);
        border-bottom: none;
    }

    /* Mobile dropdown — always visible when parent is open */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: none;
        padding: 0 0 8px var(--spacing-md);
        background: transparent;
        min-width: unset;
        width: 100%;
    }

    .dropdown li a {
        font-size: 0.88rem;
        padding: 10px var(--spacing-md);
        min-height: 44px;
        color: rgba(204, 204, 204, 0.8);
    }

    /* Hero */
    .hero {
        min-height: calc(100svh - var(--header-height));
        /* svh for mobile browser chrome */
    }

    .hero-logo {
        max-width: min(240px, 65vw);
    }

    .hero p {
        letter-spacing: 2px;
    }

    .hero-cta {
        margin-top: var(--spacing-md);
        width: 100%;
        max-width: 280px;
    }

    /* Page title */
    .page-title-section {
        padding: var(--spacing-md) 0;
    }

    /* Text sections */
    .text-section {
        padding: var(--spacing-md) 0;
    }

    /* Contact */
    .contact-section .container {
        padding: 0 var(--spacing-md);
    }

    .inquiry-box {
        border-radius: 12px;
    }

    /* Footer */
    footer {
        margin-top: var(--spacing-lg);
        padding: var(--spacing-md) 0;
    }

    /* Admin table — switch to card view */
    .desktop-table-view {
        display: none;
    }

    .mobile-card-view {
        display: block;
    }

    /* Admin pagination wrapping */
    .pagination-inner {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
}

/* ─── Very small phones: up to 375px ────────────────────────────────────── */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.4rem;
    }

    .hero-logo {
        max-width: min(200px, 60vw);
    }

    .ninnada-btn-glow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        letter-spacing: 1px;
        font-size: 0.85rem;
    }

    .page-title-section h1 {
        font-size: 1.6rem;
    }
}

/* ─── Tablet: 768px – 1024px ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-links {
        gap: var(--spacing-md);
        /* Tighter gap on tablet */
    }

    .hero h1 {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .text-section h2 {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    }

    /* Admin metrics — two-column grid */
    .admin-metrics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Desktop table visible on tablet */
    .desktop-table-view {
        display: block;
    }

    .mobile-card-view {
        display: none;
    }
}

/* ─── Mobile card view styles ────────────────────────────────────────────── */
.reg-mobile-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(218, 165, 32, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    font-family: 'Lato', sans-serif;
}

.reg-mobile-card+.reg-mobile-card {
    /* Already handled by margin-bottom */
}

.reg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.reg-card-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    flex: 1;
}

.reg-card-badge {
    background: rgba(255, 255, 0, 0.1);
    border: 1px solid rgba(255, 255, 0, 0.3);
    color: #ffd700;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
}

.reg-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
}

.reg-card-row:last-of-type {
    border-bottom: none;
}

.reg-card-label {
    color: rgba(218, 165, 32, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding-top: 1px;
    flex-shrink: 0;
}

.reg-card-value {
    color: #ccc;
    text-align: right;
    word-break: break-all;
    font-size: 0.82rem;
}

.reg-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* ─── Coordinator Auth & Dashboard Custom Styles ─────────────────────────── */

.header-left-group,
.header-right-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-signin-btn {
    color: var(--color-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 6px 16px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.header-signin-btn:hover {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--color-gold);
    color: var(--color-white);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Profile Circle */
.profile-container {
    position: relative;
    display: inline-block;
}

.profile-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    outline: none;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

.profile-circle:hover {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: rgba(10, 10, 10, 0.98);
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-top: 2px solid var(--color-gold);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all var(--transition-speed) ease;
    padding: var(--spacing-sm) 0;
    z-index: 1010;
}

.profile-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.profile-dropdown-info {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-school-name {
    color: var(--color-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-coordinator-name {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-dropdown-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.profile-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    color: var(--color-text-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-speed);
    text-decoration: none;
}

.profile-dropdown-item:hover {
    background-color: rgba(212, 175, 55, 0.05);
    color: var(--color-gold);
    border-left-color: var(--color-gold);
}

.profile-dropdown-item.signout-btn {
    color: rgba(255, 80, 80, 0.8);
}

.profile-dropdown-item.signout-btn:hover {
    background-color: rgba(255, 80, 80, 0.05);
    color: rgba(255, 80, 80, 1);
    border-left-color: rgba(255, 80, 80, 1);
}

/* Adjustments for mobile header auth alignment */
@media (max-width: 767px) {
    .header-left-group {
        gap: var(--spacing-sm);
    }
}

/* ─── Leadership ─────────────────────────────────────────────────────────── */
.leadership-section {
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.leadership-header {
    background-color: var(--color-dark-gray);
    border-bottom: 2px solid var(--color-gold);
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-xl);
}

.leadership-header h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--color-white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2.2px;
    text-align: center;
}

.leadership-subsection-title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.leadership-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* Reusable Official Profile Card */
.official-card {
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
    text-align: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(212, 175, 55, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.official-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.3);
}

.official-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid var(--color-gold);
    display: block;
    margin: 0 auto;
    background-color: var(--color-dark-gray);
}

.official-name {
    font-family: var(--font-body);
    color: var(--color-white);
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 700;
    margin-top: var(--spacing-md);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.official-position {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-gold);
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

/* Reusable Leadership List Block */
.leadership-list-block {
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: clamp(20px, 3.5vw, 28px) clamp(20px, 3.5vw, 36px);
    text-align: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(212, 175, 55, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.leadership-list-block:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.3);
}

.position-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-gold);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--spacing-md);
}

.member-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 45px;
    justify-items: center;
    align-items: center;
}

.member-list .member-name {
    font-family: var(--font-body);
    color: var(--color-white);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    margin-bottom: 0;
    line-height: 1.6;
}

.member-list .member-name:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .member-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .member-list .member-name:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ─── Leadership Horizontal Rows ─────────────────────────────────────────── */
/* Used for Advisory Panel (3-up) and Board of Officials rows (2-up / 3-up). */
/* On mobile (≤767px) all rows collapse to a single centred vertical stack.  */
.leadership-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    width: 100%;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Cards inside a row should not apply their own auto-centering margin */
.leadership-row .official-card {
    flex: 0 1 340px;
    margin: 0;
}

/* 2-card rows: cap width so cards don't stretch too wide */
.leadership-row-2 .official-card {
    flex-basis: clamp(240px, 28vw, 380px);
}

/* 3-card rows: slightly narrower basis to fit comfortably side-by-side */
.leadership-row-3 .official-card {
    flex-basis: clamp(200px, 22vw, 340px);
}

/* On tablet and mobile: collapse every row to a centred vertical column */
@media (max-width: 767px) {
    .leadership-row {
        flex-direction: column;
        align-items: center;
        gap: clamp(1.25rem, 3vw, 2rem);
    }

    .leadership-row .official-card,
    .leadership-row-2 .official-card,
    .leadership-row-3 .official-card {
        flex-basis: auto;
        width: 100%;
        max-width: 380px;
    }
}

/* ─── Leadership Position Group Grid ─────────────────────────────────────── */
.leadership-position-group {
    width: 100%;
    text-align: center;
}

.leadership-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.leadership-card-grid .official-card {
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    height: 100%;
}

@media (max-width: 600px) {
    .leadership-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 4-card grid modifier for desktop (2x2 layout) */
@media (min-width: 768px) {
    .leadership-card-grid.four-cards {
        grid-template-columns: repeat(2, minmax(240px, 340px));
        max-width: 720px;
    }
}

/* Leadership background */
.leadership-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Background layer */
.leadership-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Keep content above */
.leadership-header,
.leadership-section>.container {
    position: relative;
    z-index: 2;
}

/* Floating glow patches */
.glow-patch {
    position: absolute;
    filter: blur(130px);
    opacity: .28;
    mix-blend-mode: screen;
    animation: floatPatch 18s ease-in-out infinite alternate;
}

.patch-1 {
    width: 520px;
    height: 360px;
    background:
        radial-gradient(ellipse at 40% 50%,
            rgba(255, 225, 70, .38) 0%,
            rgba(255, 210, 40, .16) 38%,
            rgba(255, 190, 0, .05) 62%,
            transparent 82%);
    top: 5%;
    left: -8%;
}

.patch-2 {
    width: 600px;
    height: 420px;
    background:
        radial-gradient(ellipse at 60% 40%,
            rgba(255, 210, 45, .36) 0%,
            rgba(255, 195, 20, .15) 40%,
            rgba(255, 175, 0, .04) 65%,
            transparent 82%);
    right: -10%;
    top: 35%;
    animation-duration: 26s;
}

.patch-3 {
    width: 700px;
    height: 500px;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(255, 235, 90, .34) 0%,
            rgba(255, 215, 60, .13) 42%,
            rgba(255, 185, 0, .04) 68%,
            transparent 84%);
    bottom: -15%;
    left: 25%;
    animation-duration: 30s;
}

.patch-4 {
    width: 480px;
    height: 360px;
    background:
        radial-gradient(ellipse at 30% 60%,
            rgba(255, 220, 55, .35) 0%,
            rgba(255, 205, 35, .14) 42%,
            rgba(255, 180, 0, .04) 68%,
            transparent 82%);
    top: 12%;
    right: 18%;
    animation-duration: 24s;
    animation-delay: -8s;
}

.patch-5 {
    width: 650px;
    height: 420px;
    background:
        radial-gradient(ellipse at 70% 40%,
            rgba(255, 240, 110, .30) 0%,
            rgba(255, 215, 65, .12) 45%,
            rgba(255, 190, 0, .04) 68%,
            transparent 84%);
    bottom: 8%;
    left: -6%;
    animation-duration: 32s;
    animation-delay: -15s;
}

.patch-6 {
    width: 560px;
    height: 380px;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(255, 205, 20, .36) 0%,
            rgba(255, 185, 0, .15) 40%,
            rgba(255, 165, 0, .04) 65%,
            transparent 82%);
    top: 55%;
    right: -5%;
    animation-duration: 22s;
    animation-delay: -4s;
}

.patch-7 {
    width: 620px;
    height: 420px;

    background:
        radial-gradient(circle at 40% 45%,
            rgba(255, 220, 70, .82) 0%,
            rgba(255, 220, 70, .30) 42%,
            transparent 80%);

    top: 22%;
    left: 32%;

    animation-duration: 30s;
    animation-delay: -12s;
}

.patch-8 {
    width: 520px;
    height: 360px;

    background:
        radial-gradient(circle at 65% 40%,
            rgba(255, 205, 30, .78) 0%,
            rgba(255, 205, 30, .28) 40%,
            transparent 78%);

    bottom: 18%;
    right: 28%;

    animation-duration: 24s;
    animation-delay: -6s;
}

.patch-9 {
    width: 700px;
    height: 480px;

    background:
        radial-gradient(circle at 50% 55%,
            rgba(255, 235, 120, .72) 0%,
            rgba(255, 235, 120, .26) 45%,
            transparent 82%);

    top: 68%;
    left: 10%;

    animation-duration: 34s;
    animation-delay: -18s;
}

.patch-10 {
    width: 560px;
    height: 380px;

    background:
        radial-gradient(circle at 55% 50%,
            rgba(255, 195, 40, .80) 0%,
            rgba(255, 195, 40, .30) 42%,
            transparent 78%);

    top: 8%;
    right: -2%;

    animation-duration: 27s;
    animation-delay: -9s;
}

@keyframes floatPatch {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: .14;
    }

    25% {
        transform: translate(70px, -40px) scale(1.08) rotate(4deg);
        opacity: .22;
    }

    50% {
        transform: translate(-40px, 60px) scale(.95) rotate(-5deg);
        opacity: .16;
    }

    75% {
        transform: translate(50px, 20px) scale(1.12) rotate(3deg);
        opacity: .24;
    }

    100% {
        transform: translate(-20px, -30px) scale(1.05) rotate(-2deg);
        opacity: .15;
    }
}