/* ===================================
   Custom Styles for Awiebo College
   =================================== */

/* Smooth Scrolling */
/* Smooth Scrolling & Overflow Handling */
html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #006838;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1B5E20;
}

/* Responsive Typography */
body {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.4;
}

/* Touch Target Sizes (Minimum 44x44px for mobile) */
@media (max-width: 768px) {

    button,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better spacing for mobile navigation */
    nav a {
        padding: 12px 16px;
        display: block;
    }
}

/* Container Max Width - Removed to let Tailwind handle responsive widths */
/* .container { max-width: 1280px; } */

/* Prevent Horizontal Overflow */
body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Better Table Responsiveness */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }
}

/* Form Improvements */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px;
        /* Prevents zoom on iOS */
        width: 100%;
    }
}

/* Better Focus States for Accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #006838;
    outline-offset: 2px;
}

/* Skip to Main Content (Accessibility) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem;
    background-color: #006838;
    color: white;
    text-decoration: none;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
}

/* Mobile Menu Improvements */
@media (max-width: 1024px) {
    .mobile-menu-item {
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-menu-item:active {
        background-color: #f5f5f5;
    }
}

/* Hero Section Height Fix for Mobile */
@media (max-width: 768px) {
    .hero-section {
        min-height: 100vh;
        height: auto;
    }
}

/* Grid Gap Responsive */
@media (max-width: 640px) {
    .grid {
        gap: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid {
        gap: 1.5rem;
    }
}

/* Card Hover Effects - Disabled on Touch Devices */
@media (hover: none) {
    .card:hover {
        transform: none;
    }
}

/* Better Image Loading */
img {
    display: block;
}

img[loading="lazy"] {
    background: #f0f0f0;
}

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

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

/* ===================================
   Animations for News Page
   =================================== */

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    width: 200%;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ===================================
   History Section (Magazine Layout)
   =================================== */
.history-chapter {
    position: relative;
    transition: all 0.3s ease;
}

.history-chapter:hover .chapter-marker {
    width: 6rem;
}

.chapter-marker {
    transition: width 0.3s ease;
}

/* ===================================
   Mobile Scroll Hint
   =================================== */
.scroll-hint-animation {
    animation: swipe-hint 2s infinite;
}

@keyframes swipe-hint {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(10px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
}