﻿:root {
	--primary-color: #000;
    --secondary-color: #A74300;
    --top-banner-bg-color: #ecaa00;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #B4610E;
    --secondary-links-color-hover: #B4610E;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #ecaa00;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #000;
    --primary-button-color-hover: #ecaa00;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #000;
    --primary-button-border-color: #000;
    --primary-button-border-color-hover: #ecaa00;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #005D8F;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #005D8F;
    --secondary-button-border-color-hover: #005D8F;
    /* NAVIGATION COLORS */
    --nav-bg-color: #ecaa00;
    --nav-tab-color: #000;
    --nav-tab-color-hover: #303030;
    --nav-link-color: #000;
    --nav-link-color-hover: #303030;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #ecaa00;
    --bg-color-2: #26ace2;
    --bg-color-3: #000;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(236 170 0 / .5);
    --rgba-color-2: rgb(212 128 0 / .5);
    --rgba-color-3: rgb(145 197 0 / .5);
    /* FONT FAMILY */
    --font-family-heading: "Montserrat", sans-serif;
    --font-family-body: "Gothic A1", sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .home-block a > span {
    font-weight: 700;
}

#top-banner {
    color: #000;
}

.button.hollow:focus-visible, .button.hollow:hover, .button.hollow.primary:focus-visible, .button.hollow.primary:hover, .caption .button.hollow.primary:focus-visible, .caption .button.hollow.primary:hover {
    border-color: var(--primary-button-color-hover);
    background: var(--primary-button-color-hover);
    color: var(--primary-color);
}

.block-popularitems h3, .block-featureditems h3  {
    background: var(--bg-color-1);
}

.home-block a:after {
    background: none;
}

/* BEGIN ALTERNATE FOOTER HOURS BLOCK STYLES */
footer .store-hours table {
     display: block; 
}

footer tr.is-today.is-open {
    color: #71FF3F;
}

/* Shared base styles for the status badge */
footer tr.is-today.is-open td::after,
footer tr.is-today.is-closed td::after {
    position: relative;
    font-size: .65rem;
    border: 1px solid;
    background: transparent;
    color: inherit;
    top: -2px;
    margin-left: 0.5rem;
    border-radius: var(--border-radius-sm);
    padding: .33333rem .5rem;
    font-family: "Font Awesome 6 Free", var(--font-family-body);
    font-weight: 400;
}

/* Only the content differs */
footer tr.is-today.is-open td::after {
    content: "\f017  OPEN";
}

footer tr.is-today.is-closed td::after {
    content: "\f017  CLOSED";
}

footer .open-text, footer .closed-text {
    display: none;
}
/* END ALTERNATE FOOTER HOURS BLOCK STYLES */


/* BEGIN CHECKOUT_TEXTBOOK.ASP CUSTOM EXPANDABLE TEXT STYLES */

/* Hidden by default */
.read-more-full {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}

/* Toggled on by Foundation's Toggler */
.read-more-full.is-visible {
max-height: 2000px; /* Set generously above your content's actual height */
}
/* END CHECKOUT_TEXTBOOK.ASP CUSTOM EXPANDABLE TEXT STYLES */


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     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) {
}
