/*
css common across all pages.

this includes general styles as well as css for the standard header and footer
include css in base-layout.php

AW BRAND COLORS:
--------------------------------
#307AB3 -   DARK BLUE / NAVYISH (.brandBlue)
#02beef -   LIGHT BLUE (.brandLtBlue)
#00d4d2 -   LIGHTER BLUE (.brandCyan)
#00e0c1 -   LIGHTEST BLUE/GREEN (.brandLtBlueGreen)
#01f6a5 -   LIGHTEST GREEN/MINT (.brandMint)
#000000DB -  OFFBLACK


ATTENTION ATTENTION!!!
**
** USE BOOTSTRAP LATEST VERSIONS
** & CHECK IF CLASS EXISTS PRIOR
** TO ADDING CSS HERE
**
*/

:root {
    --white: white; /* for the sake of completeness */
    --lightblue: #72c3e5;
    --blue: #3079b2;
    --darkblue: #094F71;
    --green: #51BB6E;
    --mediumgreen: #28a745;
    --darkgreen: #0a2b1d;
    --orange: #F07818;
    --yellow: #FFC107;
    --lightgrey: #f4f4f4;
    --mediumgrey: #CCCCCC;
    --darkoffblack: #212529;
    --offblack: rgba(36, 36, 36, 1);
    --darkgrey: #1e1f22;
    --darkergrey: #232323;
    --grey: #666666;
}
body {
    background-color: rgba(0, 62, 113, 0.1);
    font-family: 'Open Sans', sans-serif !important;
    /*font-family: "Roboto", sans-serif;*/
}
h1, h2, h3, h4, h5, h6 {
    /*font-family: "Roboto", sans-serif !important;*/
    font-family: 'Open Sans', sans-serif !important;
}
/*mimicking / extending bootstrap's format, going a bit smaller*/
.fs-7 {
    font-size: 14px !important;
}
.fs-8 {
    font-size: 13px !important;
}
.fs-9 {
    font-size: 12px !important;
}
.fs-10 {
    font-size: 11px !important;
}
/************************************************
   GENERAL BORDERS, BACKGROUND & TEXT COLORS
 ************************************************/
.text-blue {
    color: var(--blue) !important;
}
.text-darkblue {
    color: var(--darkblue) !important;
}
.text-green {
    color: var(--green);
}
.text-color-blue {
    color: var(--darkblue) !important;
}
.text-grey {
    color: var(--grey) !important;
}
.text-darkgrey {
    color: var(--darkgrey) !important;
}
/* used on manufacturer.php & template-manufacturer.php & other places*/
.p-text-darkblue {
    font-size: 0.95rem !important;
    color: var(--darkblue) !important;
}
.light-green-bg {
    background: var(--green);
}
.light-grey-bg {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
.light-green-text {
    color: #51BB6E;
}
.border-blue {
    border: 2px solid var(--blue);
}
.border-darkblue {
    border: 2px solid var(--darkblue);
}
.border-green {
    border: 2px solid var(--green) !important;
}
.nav-colored {
    background-color: var(--blue) !important;
}
.gradient-green {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#64e587+0,529b65+100 */
    background: linear-gradient(to bottom,  #95D3A9 0%,#529b65 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradient-blue {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#72c3e5+0,588fa9+100 */
    background: linear-gradient(to bottom,  #72c3e5 0%,#588fa9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.awGradient {
    background-image: linear-gradient(90deg, #36c2d7fa, #63C088);
}
.awGradientText {
    background: linear-gradient(-45deg, #3AADDFFF, #6DC086FF);
    -webkit-background-clip: text; /* For Safari and Chrome */
    background-clip: text;
    color: transparent;
}
.light-green-bg {
    background: var(--green) !important;
}
.link-white {
    cursor: pointer;
    color: white !important;
    text-decoration: none;
}
.link-white:hover {
    color: var(--grey) !important;
}
.link-black {
    color: var(--darkoffblack);
    text-decoration: none;
}
.link-black:hover {
    color: var(--blue);
    text-decoration: underline;
}
.link-blue {
    cursor: pointer;
    color: var(--blue) !important;
    text-decoration: none;
}
.link-blue:hover {
    color: var(--grey) !important;
}
.link-darkblue {
    text-decoration: none !important;
    color: var(--darkblue) !important;
}
.link-darkblue:hover {
    color: var(--blue) !important;
}
.blue-outline {
    outline: 2px solid rgba(48, 122, 179, 0.3);
}
.border-right {
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}
.border-left {
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/****************************************
  BOTTOM RIGHT QUOTE REQ BUTTON
 ****************************************/
.quote-modal-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
/*the bottom right quote button*/
.quote-btn-expand-modal {
    background-color: var(--orange);
    color: white;
    border: none;
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transition: width 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* Hide the text initially */
.quote-btn-expand-modal span {
    display: none;
}
/* On hover, expand the button and show text */
.quote-btn-expand-modal:hover {
    width: 180px; /* adjust width as needed */
    border-radius: 25px;
    padding: 0 15px;
}
.quote-btn-expand-modal:hover span {
    margin-left: 10px;
    display: block;
    text-wrap: nowrap;
}
.expand-modal {
    background-color: var(--lightgrey);
    position: absolute;
    width: 300px;
    bottom: 50px;
    right: 0; /* Offset to the left of the button */
    border: 1px solid var(--mediumgrey);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
}

/****************************
    DARK MODE TOGGLE BUTTON
*****************************/
/*light / dark mode toggle button*/
.theme-toggle {
    width: 2rem;
}
/* Style the toggle button to be an icon only */
.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
    transition: color 0.3s ease;
}
.toggle-btn:hover {
    color: var(--yellow);
}

/****************************
    NAVIGATION STYLES
*****************************/
.navbar.awNavbar {
    background-color:var(--blue);
    height: 60px;
}
.navbar-toggler {
    border: none; /* Change the border color of the button */
}
.navbar-toggler:focus {
    outline: none; /* Removes default outline */
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5); /* Transparent white glow */
}
.navbar-toggler-icon {
    /* Override the default icon with a white stroke */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar.awNavbar .nav-link:hover {
    color: var(--lightblue) !important;
}
.navbar-nav .dropdown-menu .dropdown-item {
     color: var(--darkblue);
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
    color: var(--blue) !important;
}
.nav-link:focus,
.nav-link:active,
.dropdown-item:focus,
.dropdown-item:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.awGradientNavBar {
    margin: 0 !important;
    height: 35px;
    background-image: linear-gradient(90deg, #63C088, #36c2d7fa);
}
#gradientMenuContent a {
    text-decoration: none;
    color: white;
    padding-right: 1rem;
}
.hide-on-mobile {
    display: flex;
}

/* =========== Single Search Element =========== */
/* By default (mobile), hide #searchContainer until user clicks the icon. */
#searchContainer {
    display: none;              /* hidden on small screens by default */
    position: absolute;
    top: 100%;                  /* just below the navbar */
    left: 0;
    padding: 0.8rem;
    width: 100%;
    background: #3079b2;        /* match your navbar color or your design */
    z-index: 9999;
}
/* When .open is added via JS, show it with a slide-down animation */
#searchContainer.open {
    display: flex;
    justify-content: flex-end;
    animation: slideDown 0.3s ease-out;
}
#navBarSearch {
    width: 20rem;
    position: relative;
}
#searchInput:focus, #searchInput:active {
    outline: none !important;
    box-shadow: none !important;
}
/* Make the dropdown absolutely positioned, floating above other content. */
.search-dropdown {
    position: absolute;
    top: calc(100% + 4px); /* small gap under the input group */
    right: 0;
    width: 34rem;
    background-color: white;
    border: 1px solid var(--mediumgrey);
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999 !important;
    max-height: 300px;
    overflow-y: auto;
    /* Hidden by default; shown with JS / by setting display:block in JS. */
    display: none;
    /*JS handles toggling from "none" to "block" or "flex" */
}

/* current code returns a table called #results1
   But consider returning plain <div> or <ul> for a more modern look.
*/
#results1 {
    padding: 0.5rem;
    width: 100%;
    z-index: 9999 !important;
    border-collapse: collapse;
    white-space: normal !important;
    text-align: left;
}
#results1 tr {
    background-color: white !important;
    height: 0.9rem;
    text-wrap: nowrap;
}
#results tr:hover {
    background-color: var(--lightgrey) !important;
}
#results1 td {
    padding: 0.5em;
    cursor: pointer;
}
#results1 td:hover {
    background-color: var(--mediumgrey) !important;
}
#results1 td a {
    color: var(--blue);
    text-decoration: none;
}
#results1 tr td span {
    color: var(--darkgrey);
}

.search-dropdown.fade-in {
    animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide-down keyframe */
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/****************************
    FOOTER STYLES
*****************************/
.awFooter {
    background-color: var(--darkblue) !important;
}
.awFooter li a {
    color: white !important;
    font-size: 0.9rem;
}
.awFooter li a:hover {
    color: var(--lightblue) !important;
}
.awFooter a h5 {
    font-size: 1rem !important;
    color: white !important;
    text-transform: uppercase;
}
.awFooter a:hover h5 {
    color: var(--lightblue) !important;
}
.awFooter form h5 {
    font-size: 1rem !important;
    color: white !important;
}
.awFooter p {
    font-size: 0.9rem;
    color: white !important;
}
.awFooter .socialIcons a i {
    font-size: 1.5rem;
}
.awFooter #newsletterSignupFooter {
    opacity: 70%;
}

/**********************************
    HEADINGS (BLUE BANNER / CENTER LINE)
***********************************/
#topTitle h1 {
    opacity: 0.8;
    font-weight: normal;
    font-family: "Roboto", sans-serif;
}
.section-title-block {
    padding: 1rem 0;
    display: block;
}
.title-with-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.title-line {
    height: 2px;
    background-color: var(--blue);
    opacity: 0.25;
    width: 8rem;
    margin-right: 1rem;
    border: none;
    flex-shrink: 0;            /* so it never collapses */
}
.titleBar {
    width: 100%;
    background-color: var(--darkblue);
    /* draw a faint grid in the background */
    background-size: 25px 25px;
    background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);

    text-transform: uppercase;
    h1 {
        font-size: 2.5rem !important;
        opacity: 1 !important;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        padding: 0.6em;
    }
}

/****************************
    BUTTON STYLES
*****************************/
.awThemeButton {
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    min-width: 6rem;
    color: white;
    font-size: 0.8rem;
    text-transform: uppercase;
    border: none;
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    /*box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);*/
}
.awThemeButton:hover {
    background-position: 100% 0;
    color: white;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.awThemeButton:focus {
    outline: none;
}
.button-green {
    color: white;
    background-color: var(--green);
    text-decoration: none;
    border: none;
}
.button-green:hover {
    color: white;
    background-color: var(--darkgreen);
    text-decoration: none;
}
.button-green:focus {
    color: white;
    background-color: var(--darkgreen);
    text-decoration: none;
}
.button-blue {
    color: white;
    background-color: var(--blue);
}
.button-blue:hover {
    color: white;
    background-color: var(--darkblue);
}
.button-lightblue {
    color: white;
    background-color: var(--lightblue);
}
.button-lightblue:hover {
    background-color: var(--darkblue);
}
.button-lightblue:focus {
    background-color: var(--darkblue);
}
.button-orange {
    color: white;
    background-color: var(--orange);
}
.button-orange:hover {
    background-color: var(--orange);
}
.accent-blue {
    color: white;
    background-color: var(--blue);
}
.accent-darkblue {
    color: white;
    background-color: var(--darkblue);

}
.accent-orange {
    color: white;
    background-color: var(--orange);
}


/**********************************************************
    MULTI PAGE UTILITIES (cards, quote buttons, etc.)
***********************************************************/
/* style a div as a ribbon wrapping the top left corner of the surrounding div */
.corner-ribbon {
    --f: .5em; /* control the folded part */
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
            100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
}
.gridDesignBackground {
    width: 100%;
    background-color: var(--darkblue);
    /* draw a faint grid in the background */
    background-size: 25px 25px;
    background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
}
.border-slot { padding-top: 0 !important; }
.border-slot:after {
    border-top: 4px solid white;
    content: '';
    position:absolute;
    top: -3px;
    margin: auto;
    align-self: center;
    width: 25%;
}
.card-dark {
    background-color: var(--lightgrey);
}


/*************************
     DARK MODE OVERRIDES
**************************/
body.dark-mode {
    background-color: #222222 !important;
    color: var(--mediumgrey);
}
body.dark-mode h6, body.dark-mode h4, body.dark-mode h2 {
    color: white !important;
}
/* go through all pages (calibrations, pxi, etc.) & ensure header is class named this, change to match*/
body.dark-mode .headerContainer {
     background-color: rgba(30, 30, 30, 0.58);
}
/* Update button styling in dark mode */
body.dark-mode .awThemeButton a {
    box-shadow: 0 8px 15px 0  #00e0c1;
}
body.dark-mode .title-line {
    border: 2px solid;
    border-image: linear-gradient(-45deg, #36c2d7fa, #63C088) 1;
    opacity: 1;
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    width: 8rem;
    margin-right: 1rem;
}
body.dark-mode main#app div#mainContainer {
    background-color: #303030 !important;
    color: var(--mediumgrey);
}
body.dark-mode main#app div#mainContainer p {
    color: var(--mediumgrey) !important;
}
body.dark-mode .bg-light {
    background-color: var(--grey) !important;
}
body.dark-mode .card, body.dark-mode .notBScard {
    background-color: var(--grey) !important;
}
/* Exclude .notBScard elements that are descendants of #topRowCircles */
body.dark-mode #topRowCircles .notBScard {
    background-color: initial !important;
}
body.dark-mode #topRowCircles .notBScard h6 {
    color: var(--lightgrey) !important;
}
body.dark-mode .notBScard .cardBody ul li a {
    color: var(--lightgrey) !important;
}
body.dark-mode .accordion-item,
body.dark-mode .accordion-header,
body.dark-mode .accordion-button {
    background-color: var(--offblack) !important;
    color: var(--lightgrey) !important;
    box-shadow: none !important;
}
/* Make sure the collapsed buttons stay dark too */
body.dark-mode .accordion-button.collapsed {
    background-color: var(--offblack) !important;
    color: var(--lightgrey) !important;
}
/* Optional: Remove or tweak the default border color */
body.dark-mode .accordion-item {
    border-color: var(--darkgrey) !important;
}
/* Darken the chevron icon too */
body.dark-mode .accordion-button::after {
    filter: brightness(0) invert(1); /* makes it light instead of dark */
}
body.dark-mode .border-slot:after {
    border-top: 4px solid var(--darkgrey) !important;
}
body.dark-mode #reviewsio-carousel-widget .CarouselWidget__header *:not(.R-RatingStars i) {
    color: var(--lightgrey) !important;
}
body.dark-mode #reviewsio-carousel-widget .cssVar-authorName {
    color: var(--lightgrey) !important;
}
body.dark-mode #reviewsio-carousel-widget .cssVar-badgeElement__text {
    color: var(--lightblue) !important;
}
body.dark-mode #reviewsio-carousel-widget .R-ReviewsList__item .item__inner {
    background-color: #353535 !important;
    background-image: none !important;
    -moz-background-image: none !important;
    -webkit-background-image: none !important;
}
body.dark-mode #reviewsio-carousel-widget .R-TextBody {
    color: var(--lightgrey) !important;
}
body.dark-mode #manufacturer-content p {
    color: var(--lightgrey) !important;
}
body.dark-mode .manufacturer_title {
    color: var(--lightgrey) !important;
}




/*****************************************
    MEDIA QUERY SCREEN WIDTH STYLING
******************************************/
@media (min-width: 1160px) {
    /* On large screens (≥1325px), show #searchContainer inline and remove absolute positioning */
    #searchContainer {
        display: flex;    /* visible as a flex container to the right of the navbar */
        position: static; /* remove absolute position so it sits in normal flow */
        width: auto;
        background: none;
        animation: none;  /* no need for the mobile slideDown */
    }

    /* Hide the icon on large screens */
    #searchIcon {
        display: none !important;
    }
}
@media (min-width: 992px) {
    /*THIS IS CRUCIAL FOR MOBILE menu functionality.
    It makes mobile tap work by removing the
    stuck hover effect
    */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Align dropdown with the parent menu item */
    }
}
@media (max-width: 992px) {
    .navbar.awNavbar {
        height: auto;
    }
    /* 1 ▸ re-order the key flex items */
    .navbar .navbar-brand  {
        order: 0;
    }   /* stays far left            */
    #searchIcon            {
        order: 1;
        margin-left: auto;
    }   /* now comes next            */
    .navbar-toggler        {
        order: 2;
        margin-left:.25rem;
    }   /* hamburger follows         */
    .navbar-collapse       {
        order: 3;
    }   /* menu (hidden until open)  */

    /* 3 ▸ optional cosmetics */
    #searchIcon      {
        padding-right: 1rem;
    } /* tiny gap after icon */
}
@media (max-width: 576px) {
    .hide-on-mobile {
        display: none;
    }
    #gradientMenuContent {
        width: 100%;
    }
    #gradientMenuContent a {
        padding-right: 0;
    }
    #navBarSearch {
        width: 100% !important;
    }
    .search-dropdown {
        width: 100%;
    }

}