/* ====== Global Resets + Defaults ====== */
* { box-sizing: border-box; }

    html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 18px; /* baseline */
    }

    body {
    margin: 0;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    line-height: 1.7;             /* more readable */
    font-size: 1.50rem;           /* bigger base text everywhere */
    color: #333;
    background: #fff;
    overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; }
    .container { width: 90%; max-width: 1200px; margin: 0 auto; }

    /* Tap targets / consistent typography inheritance */
    a, button, input, select, textarea { font: inherit; }
    button, .btn { min-height: 44px; }

    /* Make nav links easier to tap */
    .main-nav a {
    padding: 0.65rem 0.25rem;
    display: inline-block;
    font-size: 1.05rem; /* slightly larger nav */
    }

    /* ====== Global Typography ====== */
    /* Headings — bumped up for readability, still responsive */
    h1 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.2; }
    h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; }
    h3 { font-size: clamp(1.35rem, 2.5vw, 1.6rem); line-height: 1.25; }
    h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.3; }

    p, li { font-size: 1.08rem; }
    small { font-size: 0.95rem; }

    /* Comfortable spacing defaults */
    p { margin: 0 0 0.85rem; }
    ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

    /* ====== Responsive Layout Helpers ====== */
    .grid-2, .grid-3 { display: grid; gap: 1rem; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    @media (max-width: 900px){
    .header-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .main-nav ul { flex-wrap: wrap; }
    }

    @media (max-width: 720px){
    /* Slightly reduce base size on very small screens to prevent crowding */
    body { font-size: 1.03rem; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .page-hero { padding: 2rem 0; }
    }

    /* ====== Accessibility ====== */
    .skip-link{
    position: absolute;
    left: -999px;
    top: 10px;
    background: #fff;
    color: #00172c;
    padding: .75rem 1rem;
    border: 2px solid #00172c;
    border-radius: .5rem;
    z-index: 9999;
    }
    .skip-link:focus,
    .skip-link:focus-visible { left: 10px; }

    /* Visible keyboard focus */
    :focus-visible{
    outline: 3px solid #0096ff;
    outline-offset: 3px;
    }

    /* Don’t rely on color alone for links */
    a:hover,
    a:focus-visible{
    text-decoration: underline;
    text-underline-offset: 4px;
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    }

    /* ====== Hamburger / Mobile Nav ====== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 2px solid #003366;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
}

.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #003366;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to X when open */
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
        width: 100%;
        background: #fff;
        border-top: 2px solid #003366;
        padding: 0.5rem 0;
    }

    .main-nav.nav-open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .main-nav ul li a {
        display: block;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #e8eef5;
        font-size: 1.1rem;
    }

    .header-inner {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hamburger-bar {
        transition: none;
    }
}