:root {
	--primary-color: #00325D;
    --secondary-color: #0972EB;
    --top-banner-bg-color: #79bde8;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #00325D;
    --secondary-links-color-hover: #B4610E;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #6cc026;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #00325D;
    --primary-button-color-hover: #0972EB;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #FEFEFE;
    --primary-button-border-color: #00325D;
    --primary-button-border-color-hover: #0972EB;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #00325D;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #00325D;
    --secondary-button-border-color-hover: #00325D;
    /* NAVIGATION COLORS */
    --nav-bg-color: #00325D;
    --nav-tab-color: #FEFEFE;
    --nav-tab-color-hover: #79bde8;
    --nav-link-color: #00325D;
    --nav-link-color-hover: #0972EB;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #00325D;
    --bg-color-2: #6cc026;
    --bg-color-3: #0972EB;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(0 50 93 / .75);
    --rgba-color-2: rgb(9 114 235 / .75);
    --rgba-color-3: rgb(108 192 38 / .75);
    /* FONT FAMILY */
    --font-family-heading: "Nunito Sans", sans-serif;
    --font-family-body: "Nunito Sans", sans-serif;
    /* FONT SIZE */
    --small-font-size: .925rem;
}

body {
    color: #444;
}

a, a:visited {
    color: var(--secondary-color);
}

a:visited:hover {
    color:  var(--primary-color);
}

#footer-nav-links a:visited:hover {
    color: var(--footer-link-color-hover) !important;
}

.caption-buttons a {
    color:  var(--primary-button-text-color);
}

.caption-buttons a:hover {
    color:  var(--primary-button-text-color-hover);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

.h1, h1 {
    color: #00325D;
}

#announcements-heading,
#also-bought-heading,
#popular-heading {
    color: #fff;
}

#featured-heading {
    color: #000;
}

.callout.primary {
    background-color: #d7ecfa;
    color: #0a0a0a;
    border-radius: var(--border-radius-md);
}

/* ==========================================================================

   ARCHIVE GRID — Base / Mobile-First (default)
   3 columns, square cells

   ========================================================================== */

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid #00457c;
    border-left: 2px solid #00457c;
}

.archive-grid__cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d7e7f4;
    border-right: 2px solid #00457c;
    border-bottom: 2px solid #00457c;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.archive-grid__cell:hover {
    background-color: #fff;
}

.archive-grid__label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
    .archive-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 780px;
    }

    .archive-grid__label {
        font-size: 1.25rem;
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}