/* Global App Styles */
:root {
    --primary-color: #E13038;
    --secondary-color: #135B9A;
    --body-bg: #f8f9fa;
    --text-dark: #1a202c;
}

/* ===== Mobile First: Base Responsive Reset ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Responsive images & media */
img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* Responsive tables */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Prevent horizontal overflow from long text */
h1, h2, h3, h4, h5, h6, p, a, span, li {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 1rem; /* Prevent iOS zoom on focus */
    }
}

/* Header Specific Styles */
.nav-link {
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--secondary-color, #1F4E8C);
}

/* ===== Mobile Menu Animation ===== */
.mobile-menu {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    overflow: hidden;
}

.mobile-menu.menu-open {
    max-height: 25rem;
    opacity: 1;
}

/* Hamburger animation */
.hamburger-line {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

.hamburger-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}