/* Header/Footer Styles

     Header and footer styles are template/page independent.
     These are incorporated in every public page.

     A baseline set of main content styles are also defined here.
     These can be used, updated within a given page or ignored.

     This includes the global values which can be used in page
     unique styles

     Media Query section supports home page main content, header styles,
     and footer styles. Non-home page styles are not included here and should be incorporated
     in the page specific styles.

 */

:root {

    font-size: 100%;
    box-sizing: border-box;
    font-family: sans-serif;

    /* Global Variables */

    --gl-header-height: 8.0rem;
    --gl-top-bar-height: 0.75rem;
    --gl-top-bar-circle: 1.5rem;
    --gl-nav-left-right-padding: 0.375rem;
    --gl-page-background-color: white;
    --gl-max-container-width: 75rem;
    --gl-max-footer-container-width: 68rem;

    --white: #ffffff;
    --usms-blue: #0033A0;
    --usms-red: #BA0C2F;
    --blue-dark: #002278;
    --blue-mid: #0044CC;
    --blue-pale: #dce6f7;
    --blue-faint: #eef2fb;
    --gray-faint: #f4f5f8;
    --gray-light: #e2e5ee;
    --gray-mid: #8c93a8;
    --teal: #008080;

    /* Text Standard Sizes */
    --text-0: 0.75rem; /* 12 px */
    --text-0-5: 0.85;
    --text-1: 1.00rem; /* 16 px = 100% */
    --text-2: 1.25rem; /* 20 px */
    --text-3: 1.50rem; /* 24 px */
    --text-4: 1.75rem; /* 28 px */
    --text-5: 2.00rem; /* 32 px */
    --text-6: 2.50rem; /* 40 px */
    --text-7: 3.00rem; /* 48 px */
    /* Carry over variables - don't use */
    --scale-1: 1.125rem;
    --scale--1: 0.90rem;

    --text-small: var(--text-0);
    --text-normal: var(--text-2);
    --text-large: var(--text-4);

    --text-nav-link: 0.85rem;

    /* Title Standard Sizes - plus one for text */
    --title-0: 1.00rem;
    --title-1: 1.25rem;
    --title-2: 1.50rem;
    --title-3: 1.75rem;
    --title-4: 2.00rem;

    --title-small: var(--title-1);
    --title-normal: var(--title-2);
    --title-large: var(--title-4);

    /* Applied colors */
    --title-header-color: var(--white);
    --title-content-color: var(--blue-mid);
    --text-content-color: var(#000000);
    --text-muted: #3d4466;
    --text-light: #6b72a0;


    /* Padding Standard diemsions */
    --pd-0: 0rem;
    --pd-0-2: 0.3125rem;
    --pd-0-1: 0.625rem;
    --pd-1: 0.75rem ;
    --pd-2: 2rem;
    --pd-3: 3rem;

    /* Margin Standard Dimensions */
    --mg-0: 0rem;
    --mg-1: 0.75rem ;
    --mg-2: 1.25rem;
    --mg-3: 1.75rem;
}

/* Baseline default styles */

body {
    margin: 0;
    padding: 0;
    font-family:  sans-serif;
    background-color: var(--blue-dark);
    font-size: var(--text-1);
}

/* ── TOP BAR Structure and styles */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--gl-top-bar-height);
    padding: 0 var(--gl-nav-left-right-padding);
    background: var(--blue-dark);
    color: var(--gray-light);
    font-size: var(--text-1);
    letter-spacing: 0.08em;
}
.topbar a {
    color:var(--gray-light);
    text-decoration: none;
}
.topbar a:hover {
    color: var(--white);
    font-weight: bolder;
}
.topbar .social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.topbar .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gl-top-bar-circle);
    height: var(--gl-top-bar-circle);
    border: 1px solid var(--gray-light);
    border-radius: 50%;
    font-size: var(--text-0)
}

/* ── NAVIGATION Structure and styles

     Navigation styles include horizontal and vertical
     styles along with the top line and logo styles.
*/

.nav-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: var(--gl-page-background-color);
    border-bottom: 4px solid var(--usms-red);
}
.nav-1-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0.25rem;
    gap: 0.5rem;
    font-size: var(--text-2);
    font-weight: bold;
    text-decoration: none;
}
.logo-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;  /* vertical center */
    justify-content: center; /* horizontal center */
    /* flex-shrink: 0; applied to child not container */
}
.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* applies to images/videos - determines how to display */
    display: block;
}
.logo-text-1 {
    font-weight: bold;
    font-size: 17px;
    line-height: 1.5;
    color: var(--usms-blue);
}
.logo-text-2  {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    font-weight: bold;
    color: var(--usms-red);
}

/* Horizontal navigation */

.nav-h-1 {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.nav-h-1 a {
    text-decoration: none;
    color:  var(--usms-blue);
    font-size: var(--text-1);
    padding-bottom: 0.25rem;
    border-bottom: 3px solid transparent;
}
.nav-h-1 a:hover {
    color: var(--usms-blue);
    border-bottom: 3px solid var(--usms-blue);
}

.nav-h-1 a.active {
    color: var(--usms-blue);
    border-bottom: 3px solid var(--usms-blue);
}

/* Vertical navigation */

.nav-v-1 {
    display: none;
    position: relative;   /* anchor point for the dropdown */
}
.nav-v-1-1 {
    display: none;
    width: 135px;
}
.nav-v-1-1-open {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: end;
    position: absolute;
    top: 64px;      /* right below the image */
    right: 4px;
    background: var(--gray-light);
    border: 1px solid var(--blue-dark);
    padding: 0.05rem;
    z-index: 1000;
}
.nav-v-1-1 a {
    width: 125px;
    text-decoration: none;
    color: var(--usms-blue);
    font-size: var(--text-0-5);
    border-bottom: 1px solid var(--usms-blue);
    padding: 0.1rem 0.25rem;
    text-align: right;
}
.nav-v-1-1 a:hover {
    color: var(--usms-blue);
    background: var(--white);
    border-bottom: 2px solid var(--usms-red);
}

.nav-v-1-1 a.active {
    color: var(--usms-blue);
    border-bottom: 2px solid var(--usms-blue);
    background: var(--white);
}
.nav-toggle span {
    width: 1.5rem;
    height: 2px;
    background: var(--white);
    transition: transform 0.2s, opacity 0.2s;
}

#small_menu_icon-id {
    cursor: pointer;
}

/* Main home page structure and styles*/

.l1-top {
    background: var(--blue-dark);
    padding: 1rem;
}
.l1 {
    background: var(--usms-blue);
    padding: 1rem;
}
.l1-1 {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    max-width: var(--gl-max-container-width);
    margin: 0 auto;
    background: var(--usms-blue);
}
.l2-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
    color: var(--white);
    background: var(--usms-blue);
}
.l2-flex > div:nth-child(1) {
    flex: 2 1 0;
    padding: 0.5rem;
}
.l2-flex > div:nth-child(2) {
    flex: 1 1 0;
    padding: 0.5rem;
}
.l2-flex-text1 {
    font-size: var(--text-6);
    margin-bottom: 1rem;
}
.l2-flex-text2 {
    font-size: var(--text-2);
}
.l2-flex > div:nth-child(2) {
    flex: 1 1 0;
    background: var(--usms-blue);
}
.l2-flex-images {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem;
}

.l2-flex-images-img {
    max-width: 150px;
    height: auto;
}

/* Home page - Cards  */

.index-container2 {
    background-color: var(--blue-faint);
    padding: 0.75rem 0.25rem 1rem 0.25rem;
}
.index-container2-explore {
    width: 100%;
    max-width: var(--gl-max-container-width);
    margin: 0 auto;
    padding: 0;
}
.index-container2-explore-title  {
    font-size: var(--text-3);
    color: var(--usms-blue);
    font-style: italic;
    font-weight: bold;
    padding: 0 0 1rem 0;
}

/* ── Explore cards ── */

.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.type-card {
    background: white;
    border-radius: 6px;
    padding: 0 18px;
    border: 1px solid var(--gray-light);
    transition: box-shadow 0.2s, transform 0.2s;
}
.type-card:hover {
    box-shadow: 0 12px 40px rgba(0,51,160,0.1);
    transform: translateY(-3px);
}
.type-icon {
    width: 52px;
    height: 52px;
    background: var(--blue-pale);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0 0;
}
.type-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--usms-blue);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.type-card-h3 {
    font-size: var(--text-2);
    font-weight: bold;
    margin: 10px 0 0 0;
    color: var(--usms-blue);
}
.type-card p {
    font-size: var(--text-1);
}
.type-card-p {
    font-size: var(--text-1);
    margin-top: 6px;
}

/* ── FOOTER ──  ************************* */

.footer {
    background: var(--blue-dark);
    max-width: var(--gl-max-footer-container-width);
    margin: 0 auto;
    padding-top: 20px;
}
.footer-red-bar {
    height: 4px;
    background: var(--usms-red);
}
.footer-content {
    max-width: var(--gl-max-footer-container-width);
}
.footer-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
.footer-elements {
}
.footer-brand {
    margin-bottom: 12px;
}
.footer-brand .name {
    font-size: var(--text-1);
    color: var(--gray-light);
    padding-bottom: 8px;
}
.footer-brand .description {
    color: var(--gray-mid);
    font-size: 0.85rem;
    line-height: 1.3;
    padding-left: 16px;
}
.footer-link-elements {
    display: flex;
    gap: 3rem;
}
.footer-elements-h4 {
    color: var(--gray-light);
    font-size: 0.85rem;
    margin-top: 4px;
    padding-bottom: 8px;
}
.footer-links {
    padding-left: 16px;
}

.footer-links a {
    color: var(--gray-mid);
    font-size: var(--text-0);
    transition: color 0.2s;
    text-decoration: none;
}
.footer-links a:hover {
    color: white;
}
.footer-copyright {
    margin: 0 auto;
    padding: 0 20px 16px 20px;
    background: var(--blue-dark);
}
.footer-grid-2 {
    max-width: var(--gl-max-footer-container-width);
    margin: 0 auto;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: var(--gl-max-footer-container-width);
    border-top: 2px solid rgba(255,255,255,0.4);
    padding: 12px 0 0 0;
    margin-top: 20px;
    font-size: var(--text-0);
    color: var(--gray-mid);
}
.footer-bottom a {
    color: var(--gray-mid);
    text-decoration: none;
}

/* Media query for smaller screens */

@media (hover: hover) and (pointer: fine) {
    #small_menu_icon-id:hover { /* your hover styles */ }
}

@media (max-width: 768px) {

    .l2-flex {
        flex-direction: column;
    }
    .l2-flex > div:nth-child(1) {
        flex: 1 1 0;
        padding: 0.5rem;
    }

    .l2-flex > div:nth-child(2) {
        flex: 1 1 0;
        padding: 0.5rem;
    }

    .l2-flex-text1 {
        font-size: var(--text-4);
        margin-bottom: 0.5rem;
    }
    .l2-flex-text2 {
        font-size: var(--text-1);
    }
    .l2-flex-images {
        gap: 0.25rem;
    }
    .l2-flex-images-img {
        max-width: 110px;
        height: auto;
    }
    img {
        max-width: 125px;
        height: auto;
    }

    .nav-h-1 {
        display: none;
    }

    .nav-v-1 {
        display: flex;
    }

    .index-container2-explore-title  {
        font-size: var(--text-2);
        padding: 0 0 0.5rem 0;
    }

    .types-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }
    .type-card h3 {
        font-size: var(--text-1);
    }
    .type-card p {
        font-size: var(--text-1);
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;   /* add this — centers horizontally on the cross axis */
        gap: 0.25rem;
    }
    .footer-elements {
        width: 60%;
    }

}