/* reset (lowest priority) , utilties (highest priority) */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@layer reset, base, theme, components, utilities;

/* UNLAYERED STYLES WILL TAKE PRIORITY */
/*
    1. reset - Eric Meyer CSS Reset
    2. base - Elements defaults, typography , colors , spacings , primitive data , neutrals
    3. theme - custome  fonts , scpl specific branding & project specific 
    4. components - reusable UI building blocks , cards , buttons , modals , navbar
    5. utilities -  I have all the power, single purpose helper , response tweaks
*/

@layer reset {
    @using Umbraco.Cms.Web.Common.PublishedModels;
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        letter-spacing: 1px;
    }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body, h2, h1 {
        font-weight: 400;
    }

    h3, h4, h5 {
        font-weight: 300;
    }

    d-flex {
        width: 100%;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}



@layer base {
    /* Elements defaults, typography , colors , spacings , primitive data */
    :root {
        --fs-300: 0.875rem; /* 14px */
        --fs-400: 1rem; /* 16px */
        --fs-500: 1.125rem; /* 18px */
        --fs-600: 1.25rem; /* 20px */
        --fs-700: 1.5rem; /* 24px */
        --fs-800: 1.875rem; /* 30px */
        --fs-900: 2.25rem; /* 36px */
        --fs-1000: 3rem; /* 48px */
        --fs-1100: 4rem; /* 64px */
        --fs-1200: 5rem; /* 80px */

        --clr-white: #ffffff;
        --clr-gray-300: #f5f5f5;
        --clr-gray-500: #E5E5E5;
        --clr-gray-600: #999999;
        --clr-gray-700: #82878D;
        --clr-skyblue: #00adef;
        --clr-faded-blue: rgba(0,105,144,0.2);
        --clr-orange: #C55E1F;
        --clr-blue: #006990;
        --clr-green: #6EC038;
        --clr-purple: #7952b3;
        --clr-primary: #006990; /* btn */
        --clr-primary-hover: #005677; /* #005677 btn */

        --clr-secondary: #F38724; /*  btn */
        --clr-secondary-hover: #DE7A1C; /*  btn */

        --clr-skyblue-hover: #0097cc;
        --clr-green-hover: #55a71f;

        --border-radius-1: 0.25rem;
        --border-radius-2: 0.5rem;
        --border-radius-3: 0.75rem;
        --ff-primary: "Lato", sans-serif;
        /* ✅ Set Bootstrap body font */
        --bs-body-font-family: var(--ff-primary),'Poppins', sans-serif !important;
        --bs-body-color: var(--clr-gray-500);
        --bs-body-font-size: 12px;
        --bs-body-line-height: 17.15px;
    }

    /* body {
        font-family: var(--bs-body-font-family); 
        font-size: var(--fs-400);
        line-height: 1.5;
        color: var(--clr-gray-500);
    }
    
    /* body {
        font-family: var(--bs-body-font-family); 
        font-size: var(--fs-400);
        line-height: 1.5;
        color: var(--clr-gray-500);
    }*/
}

/*:root {
}*/

@layer theme {
    /* custom fonts , scpl specific branding, layout */
    /*:root {
        --teens-branding-color-1: #67C2DF;
        --scpl-branding-color-1-orange: #F38724;
        --scpl-branding-color-2-blue: #006990;
        --scpl-branding-color-3: #6EC038;
        --scpl-color-purple: #7952b3;
    }*/

    :root {
        --background-extra-light: var(--clr-gray-300);
        --background-accent-light: var(--clr-gray-500);
        --background-accent-main: var(--clr-gray-600);
        --background-accent-dark: var(--clr-gray-700);
        --scpl-branding-orange: var(--clr-orange);
        --scpl-branding-blue: var(--clr-blue);
        --scpl-branding-green: var(--clr-green);
        --scpl-branding-purple: var(--clr-purple);
    }

    .grid-flow {
        display: grid;
        gap: 1rem;
        align-content: start;
        justify-items: start;
    }

    .wrapper {
        --wrapper-max-width: 2650px;
        --wrapper-padding: 0;
        max-width: var(--wrapper-max-width);
        width: 100%;
        margin-inline: 0;
        margin-left: auto;
        margin-right: auto;
        padding-inline: var(--wrapper-padding);
        box-sizing: content-box;
    }

        .wrapper[data-type="hundo"] {
            --wrapper-max-width: 100%;
        }

        .wrapper[data-type="narrow"] {
            --wrapper-max-width: 860px;
        }

        .wrapper[data-type="small"] {
            --wrapper-max-width: 1000px;
        }

        .wrapper[data-type="medium"] {
            --wrapper-max-width: 1250px;
        }

        .wrapper[data-type="wide"] {
            --wrapper-max-width: 1700px;
        }

        .wrapper[data-type="xwide"] {
            --wrapper-max-width: 2650px;
        }

    .mw-xwide {
        max-width: 2650px;
    }

    .mw-wide {
        max-width: 1700px;
    }

    .mw-medium {
        max-width: 1250px;
    }

    .mw-small {
        max-width: 1000px;
    }

    .mw-narrow {
        max-width: 860px;
    }

    .mw-hundo {
        max-width: 100%;
    }

    .section {
        padding-block: 3.75rem;
        /*  border: 1px solid var(--clr-gray-500);*/
        @media(min-width: 760px) {
            padding-block: 8rem;

            &[data-padding="compact"] {
                padding-block: 4.5rem;
            }
        }
    }

    .section {
        padding: 15px 0;
    }


}

@layer components {

    /* Ui building blocks , cards , buttons , modals , navbar */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");



    :where(.btn) {
        display: inline-block;
        padding: 0.625rem 1.25rem;
        font-size: var(--fs-300);
        text-transform: uppercase;
        letter-spacing: 0.0625rem;
        color: var(--clr-white);
        border: 1px solid transparent;
        border-radius: 0.125rem;
        vertical-align: middle;
        transition: background 0.3s, border-color 0.3s;
        cursor: pointer;
    }

    .nav-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 1rem;
    }

    .nav-link {
        display: flex;
        text-decoration: none;
        background: none;
        border: 0;
    }

        .nav-link:hover, .nav-link:focus {
            color: var(--clr-secondary-hover);
        }

    .btn-primary {
        background: var(--clr-primary) !important;
        border-color: var(--clr-primary) !important;
    }

        .btn-primary:hover,
        .btn-primary:focus {
            background: var(--clr-primary-hover) !important;
            border-color: var(--clr-primary-hover) !important;
        }

    .btn-secondary {
        background: var(--clr-secondary) !important;
        border-color: var(--clr-secondary) !important;
    }

        .btn-secondary:hover,
        .btn-secondary:focus {
            background: var(--clr-secondary-hover) !important;
            border-color: var(--clr-secondary-hover) !important;
        }

    .scpl-primary-alert {
        background-color: var(--clr-faded-blue);
        margin-bottom: 0.25em;
        display: none;
    }

        .scpl-primary-alert:last-of-type {
            margin-bottom: 0;
        }

    .close {
        background: none;
        border: none;
        color: inherit;
    }

        .close:hover {
            color: var(--clr-secondary-hover);
        }

    .scpl-primary-alert * p {
        padding: 0 !important;
        margin: 0 !important;
    }

    .scpl-primary-alert * {
        color: var(--clr-primary);
    }

    .alert-secondary {
        background: var(--clr-secondary);
        color: var(--clr-white);
        border: none;
    }

    .card-scpl {
        display: grid;
        gap: 1rem;
        padding: 1rem;
        background-color: var(--clr-gray-500);
        border-radius: var(--border-radius-3);
    }

    .card__title-scpl {
        color: var(--card-title-color, var(--text-brand));
        font-size: var(--card-title-font-size, var(--font-size-heading-sm));
    }

    .tab-content {
        /* border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;*/
        border-radius: 0 0 5px 5px; /* Optional: adds rounded corners to the bottom */
        padding: 10px; /* Optional: adds spacing between the border and the content */
    }

    .tab-content {
        /* border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;*/
        border-radius: 0 0 5px 5px; /* Optional: adds rounded corners to the bottom */
        padding: 10px; /* Optional: adds spacing between the border and the content */
    }

    .nav-tabs {
        margin-bottom: 0; /* Ensures the tab pills are directly above the content */
    }

    .top-nav {
        border-bottom: 2px solid #F38724;
        color: #F38724;
    }

    .slick-arrow::after, .slick-arrow::before {
        font-size: 32px !important;
        color: #006990 !important;
    }

    .slick-prev {
        left: -35px !important;
    }
}

@layer utilities {
    /* The one true ring , I have all the power, */

    /* will help with screen render , example

         <a class="button" href="#">Learn more
        <span class="visually-hidden">about mushrooms with our handy mushroom guide</span>
        </a>

    */
    html, body {
        height: 100%;
    }

    body {
        min-height: 100vh;
        height: fit-content;
        display: flex;
        flex-direction: column;
        font-family: var(--bs-body-font-family) !important;

    }

    .main-content {
        flex: 1 0 auto;
    }

    .background-accent-main {
        background-color: var(--background-accent-main) !important;
    }

    .background-accent-xlight {
        background-color: var(--background-extra-light) !important;
    }

    .background-accent-light {
        background-color: var(--background-accent-light) !important;
    }

    .background-orange {
        background: var(--scpl-branding-orange);
        
    }

    .background-blue {
        background:none;
        background-color: var(--scpl-branding-blue) !important;
    }

    .MainPageHold.btn:hover {
        background-color: var(--clr-primary-hover) !important;
    }

    .background-green {
        background-color: var(--scpl-branding-green);
    }

    .background-purple {
        background-color: var(--scpl-branding-purple);
    }

    .area-librarycard {
        background-color: var(--background-accent-light)
    }

    .area-searcharea {
        /*background-color: var(--scpl-branding-blue)*/
    }

    .area-educate {
/*        background-color: var(--scpl-branding-orange)*/
    }

    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .left-area-bg {
        background-image: url('https://styleblueprint.com/wp-content/uploads/2021/04/SB_Visit_Spartanburg_Downtown-1-900x600.jpeg');
        background-size: cover;
        background-position: center;
        position: relative;
        color: #fff;
    }

    .left-panel-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 35, 80, 0.75);
        z-index: 0;
    }

    .left-area-bg > * {
        position: relative;
        z-index: 1;
    }

    .offcanvas-height {
        height: 15vh !important;
    }

    .accordion {
        --bs-accordion-color: inherit !important;
        --bs-accordion-bg: inherit !important;
        --bs-accordion-transition: color 0.3s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
        --bs-accordion-border-color: var(--bs-border-color);
        --bs-accordion-border-width: var(--bs-border-width);
        --bs-accordion-border-radius: var(--bs-border-radius);
        --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
        --bs-accordion-btn-padding-x: 1.25rem;
        --bs-accordion-btn-padding-y: 1rem;
        --bs-accordion-btn-color: var(--bs-body-color);
        --bs-accordion-btn-bg: var(--bs-accordion-bg);
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F38724' fill-rule='evenodd' stroke='none'%3e%3cpath d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3e%3c/svg%3e") !important;
        --bs-accordion-btn-icon-width: 1.25rem;
        --bs-accordion-btn-icon-transform: rotate(-180deg);
        --bs-accordion-btn-icon-transition: transform 0.3s ease-in-out;
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F38724'%3e%3cpath d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3e%3c/svg%3e") !important;
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        --bs-accordion-body-padding-x: 1.25rem;
        --bs-accordion-body-padding-y: 1rem;
        --bs-accordion-active-color: inherit !important;
        --bs-accordion-active-bg: inherit !important;
        --bs-table-bg: var(--bs-accordion-bg) !important;
        --bs-table-color-state: var(--bs-accordion-color) !important;
        --bs-body-bg: var(--bs-accordion-bg) !important;
    }

    h2.accordion-header {
        margin-bottom: 0px !important;
    }

    .btn, .card, .form-control, .accordion-item, .accordion-button {
        border-radius: 0 !important;
    }
}

@layer Locations {
    @import url(https://fonts.googleapis.com/css?family=Lato:400,300,700) !important;

    /* Locations page css */

    #locations-styles {
        text-align: start !important;
    }

    #locations-styles p {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #locations-styles .line-break {
        height: 1px !important;
        background-color: #999 !important;
        border-bottom: 1px solid #999 !important;
        width: 100% !important;
        margin: 20px 0 !important;
    }

    #locations-styles blockquote, #locations-styles q {
        quotes: none !important;
    }

    #locations-styles blockquote:before, #locations-styles blockquote:after, #locations-styles q:before, #locations-styles q:after {
        content: '' !important;
        content: none !important;
    }

    #locations-styles table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    #locations-styles {
        line-height: 1.5 !important;
    }

    #locations-styles a {
        text-decoration: none !important;
    }

    #locations-styles a:hover {
        text-decoration: underline !important;
    }

    #locations-styles ul {
        padding: 0 0 0 0 !important;
    }

    #locations-styles .location-card {
        border: 1px solid #C2C2C2 !important;
        border-radius: 2px !important;
        padding: 1em !important;
        margin: 1em .5em !important;
        position: relative !important;
    }

    #locations-styles .location-card a {
        color: #00ADEF !important;
    }

    #locations-styles .location-card .location-marker {
        background-color: #00ADEF !important;
        border: 1px solid #00ADEF !important;
        color: #fff !important;
        padding: 10px 15px !important;
        position: absolute !important;
        right: -1px !important;
        top: -1px !important;
    }

    #locations-styles .location-card .location-title {
        font-weight: bold !important;
        margin-bottom: 1em !important;
    }

    #locations-styles .location-card .location-hours .location-hr {
        float: right !important;
    }

    @media (min-width: 64em) {
        #locations-styles .location-card .location-hours .location-hr {
            float: right !important;
        }
    }

    #locations-styles .location-card .location-directions {
        margin-top: 1em !important;
    }

    #locations-styles .location-card .location-directions span {
        color: #00ADEF !important;
        font-size: 16px !important;
    }

    #locations-styles .location-detail-card {
        /*padding: 0 2em !important;*/
        text-align: center !important;
        margin: 1em 0 !important;
    }

    @media (min-width: 64em) {
        #locations-styles .location-detail-card {
            text-align: left !important;
        }
    }

    #locations-styles .location-detail-card .location-detail-section {
        margin-top: 2em !important;
    }

    #locations-styles .location-detail-card .location-detail-section .location-back {
        color: #000 !important;
    }

    #locations-styles .location-detail-card .location-detail-section .location-back:hover {
        text-decoration: none !important;
        color: #0097CC !important;
    }

    #locations-styles .location-detail-card .location-detail-title {
        margin-top: 1em !important;
        font-size: 20px !important;
    }

    #locations-styles .location-detail-card .line-break-vert:after {
        left: 27em !important;
    }

    #locations-styles .location-detail-card .location-detail-details a, #locations-styles .location-detail-card .location-detail-details span {
        line-height: 2 !important;
        color: #0097CC !important;
    }

    #locations-styles .location-detail-card .location-detail-availability .location-hr {
        float: center !important;
    }

    @media (min-width: 64em) {
        #locations-styles .location-detail-card .location-detail-availability .location-hr {
            float: right !important;
        }
    }

    #locations-styles .location-detail-card .location-detail-details, #locations-styles .location-detail-card .location-detail-availability {
        padding: 1em !important;
    }

    #locations-styles .location-detail-card .location-detail-details p, #locations-styles .location-detail-card .location-detail-availability p {
        text-transform: uppercase !important;
    }

    #locations-styles .amenities-banner {
        background-color: #E5E5E5 !important;
        margin: 2em 0 !important;
        padding: 2em 0 !important;
        width: 100% !important;
    }

    #locations-styles .amenities-banner h5 {
        text-transform: uppercase !important;
        text-align: center !important;
        padding: 2em 0 !important;
        font-weight: 400 !important;
    }

    #locations-styles .amenities-banner ul {
        padding-bottom: 2em !important;
    }

    #locations-styles .amenities-banner ul li {
        text-align: left !important;
        line-height: 2 !important;
    }

    #locations-styles .amenities-banner ul li span {
        margin-right: 10px !important;
    }

    #locations-styles .amenities-banner h5 {
        padding-top: 0 !important;
    }

    #locations-styles .check-list-item {
        position: relative !important;
        padding-left: 20px !important;
        padding-bottom: 10px !important;
    }

    #locations-styles table.table thead > tr > td {
        background-color: #F7F7F7 !important;
        border-top: 1px solid #ddd !important;
    }

    #locations-styles table.table td {
        vertical-align: middle !important;
    }

}

a {
    color: #337ab7;
    text-decoration: none;
}

    a:hover {
        color: var(--clr-secondary-hover);
    }