/* Nexus SAS custom overrides */

/* Bredh-style header: white at top, fades to transparent on scroll */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

#header.header-scrolled {
    background: linear-gradient(135deg, #d6dbf5 0%, #cdeae4 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#header .nav-utils {
    white-space: nowrap;
}

/* Nexus SAS - animated starfield + mountain backdrop (from Bredh), bounded to a top hero band on every page */
#site-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 480px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

body {
    position: relative;
}

#site-bg-color {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(180deg, #2c2843 0%, #3a3352 55%, #4e3551 100%);
}

#site-bg-mountains {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -2;
    background-image: url("../img/bg-mountains.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    pointer-events: none;
}

#particles-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

#particles-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Keep content panels/cards above the hero band, and readable once past it */
#main-body,
.panel,
.card,
.sidebar,
.footer {
    position: relative;
    z-index: 1;
}

/* #main-body wraps every page's actual content site-wide (cart, checkout,
   tickets, knowledgebase, etc). Give it a solid opaque background so headings,
   table labels, and other unwrapped text never sit directly on the dark hero
   band — this single rule fixes readability across every subpage at once. */
#main-body {
    background: #ffffff;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Exception: on the homepage, let the product-box row overlap the hero/wave
   transition as designed (the cards themselves are still opaque via .card above) */
body.template-homepage #main-body {
    background: transparent;
    padding-top: 0;
}

/* Nexus SAS v2.1 - three-part 33.3vw header layout (logo / nav / search+cart) */
#mainNav {
    width: 100%;
    padding: 0;
}

#mainNav .header-row-3col {
    display: flex;
    width: 100%;
    align-items: center;
}

#mainNav .header-col {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0.75rem 1.5rem;
}

@media (min-width: 1400px) {
    #mainNav .header-col {
        width: 33.333vw;
        flex: 0 0 33.333vw;
    }
    #mainNav .header-col-logo {
        justify-content: flex-start;
    }
    #mainNav .header-col-nav {
        justify-content: center;
    }
    #mainNav .header-col-utils {
        justify-content: flex-end;
    }
    #mainNav .header-col-nav .navbar-collapse {
        display: flex !important;
        justify-content: center;
    }
    #mainNav .header-col-nav > button.navbar-toggler,
    #mainNav .header-col-nav > button[data-toggle="collapse"] {
        display: none !important;
    }
}

/* below custom breakpoint: force the standard collapsing mobile header    */
/* (overrides Nexus's built-in navbar-expand-xl 1200px breakpoint, which   */
/* otherwise left an awkward squeezed zone between 1200-1400px)            */
@media (max-width: 1399.98px) {
    #mainNav .header-row-3col {
        flex-wrap: wrap;
    }
    #mainNav .header-col {
        width: auto;
        flex: 1 1 auto;
        padding: 0.5rem 1rem;
    }
    #mainNav .header-col-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
    }
    #mainNav .header-col-utils {
        justify-content: flex-end;
    }
    #mainNav .header-col-nav .navbar-collapse:not(.show) {
        display: none !important;
    }
    #mainNav .header-col-nav > button.navbar-toggler,
    #mainNav .header-col-nav > button[data-toggle="collapse"] {
        display: inline-block !important;
    }
}

/* ========================================================================
   Nexus SAS v2.3 - Bredh-style wave/fade transition, product boxes,
   domain search box, nav spacing fix, and revised responsive breakpoints
   ======================================================================== */

/* --- Wave + fade transition at the bottom edge of the hero band --- */
#site-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60%;
    background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
}

#site-hero-wave {
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: -8px;
    height: 70px;
    background: url("../img/wave-divider.svg") no-repeat right bottom;
    background-size: 100%;
    z-index: 2;
    pointer-events: none;
}

/* --- Homepage product boxes (Space Age Hosting / Migration / Transfer / etc) --- */
body.template-homepage .card-columns.home {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

body.template-homepage .card-columns.home .card {
    box-shadow: 0 10px 60px 0 rgba(77, 77, 119, 0.15);
    border: 1px solid #eaeef1;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

body.template-homepage .card-columns.home .card:hover {
    box-shadow: 0 14px 70px 0 rgba(77, 77, 119, 0.22);
    transform: translateY(-3px);
}

body.template-homepage .card-columns.home .card-title {
    font-weight: 700;
    letter-spacing: -0.2px;
}

body.template-homepage .card-columns.home .btn-outline-primary {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* --- Domain search box (home-domain-search), Bredh pill style --- */
#frmDomainHomepage .home-domain-search {
    background: transparent;
}

#frmDomainHomepage .input-group-wrapper .input-group {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 12px 30px 0 rgba(77, 77, 119, 0.15);
    padding: 6px 8px 6px 24px;
    align-items: center;
}

#frmDomainHomepage .input-group .form-control {
    border: 0;
    box-shadow: none;
    background: transparent;
    font-weight: 500;
}

#frmDomainHomepage .input-group .form-control:focus {
    box-shadow: none;
}

#frmDomainHomepage .input-group-append {
    display: flex;
    gap: 8px;
    align-items: center;
}

#frmDomainHomepage #btnDomainSearch,
#frmDomainHomepage #btnTransfer,
#frmDomainHomepage #btnDomainSearch2,
#frmDomainHomepage #btnTransfer2 {
    border: 0;
    border-radius: 25px;
    padding: 0.65rem 1.75rem;
    font-weight: 600;
    white-space: nowrap;
}

#frmDomainHomepage #btnDomainSearch,
#frmDomainHomepage #btnDomainSearch2 {
    background-image: linear-gradient(to right, #fdb05c, #fd8d5f);
    box-shadow: 3px 4px 20px 0 rgba(253, 165, 93, 0.4);
}

#frmDomainHomepage #btnTransfer,
#frmDomainHomepage #btnTransfer2 {
    background-image: linear-gradient(to right, #5c5cfd, #d65ffd);
    box-shadow: 3px 4px 20px 0 rgba(149, 94, 253, 0.35);
}

/* --- Nav spacing fix: keep "More" and "Account" from colliding --- */
#mainNav .header-col-nav #nav {
    margin-right: 1.25rem;
}

#mainNav .header-col-nav .navbar-nav .nav-item {
    margin-right: 0.35rem;
}

#mainNav .header-col-nav .dropdown-toggle {
    padding-right: 1.1rem;
}

/* ========================================================================
   Revised responsive breakpoints:
   >=1400px : full 3-column desktop layout
   768-1399px : full nav shown, wraps to its own row (no hamburger)
   <768px : true mobile - hamburger + collapsing menu
   ======================================================================== */

@media (min-width: 768px) and (max-width: 1399.98px) {
    #mainNav .header-col-nav > button.navbar-toggler,
    #mainNav .header-col-nav > button[data-toggle="collapse"] {
        display: none !important;
    }
    #mainNav .header-col-nav .navbar-collapse {
        display: flex !important;
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    #mainNav .header-col-nav > button.navbar-toggler,
    #mainNav .header-col-nav > button[data-toggle="collapse"] {
        display: inline-block !important;
    }
    #mainNav .header-col-nav .navbar-collapse:not(.show) {
        display: none !important;
    }
}

/* ========================================================================
   Nexus SAS v2.8 - logo lockup (icon+text), normal on white header,
   inverts to solid white once the header goes transparent (scrolled)
   ======================================================================== */

#mainNav .logo-img {
    max-height: 52px;
    display: inline-block;
    vertical-align: middle;
    filter: none;
    transition: filter 0.35s ease;
}

#header.header-scrolled .logo-img {
    filter: brightness(0) invert(1)
        drop-shadow(1px 0 0 #000000)
        drop-shadow(-1px 0 0 #000000)
        drop-shadow(0 1px 0 #000000)
        drop-shadow(0 -1px 0 #000000);
}

/* Nav menu text: white with a black shadow once the header is scrolled,
   so the nav stays readable against the gradient (Bredh-style state change) */
#header .header-col-nav .nav-link,
#header .header-col-nav .navbar-nav .nav-link {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

#header.header-scrolled .header-col-nav .nav-link,
#header.header-scrolled .header-col-nav .navbar-nav .nav-link {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.55);
}

#header.header-scrolled .header-col-nav .navbar-nav .nav-link:hover,
#header.header-scrolled .header-col-nav .navbar-nav .active > .nav-link {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.7);
}

/* --- Footer rebuild (Bredh-style: quick links + secure badges + brand row) --- */
#footer {
    background: linear-gradient(135deg, #d6dbf5 0%, #cdeae4 100%);
    color: #3a4149;
    padding: 3rem 0 1.5rem;
}

/* Footer top row: 4-column grid with named areas so headings/content align cleanly */
#footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "qltitle qltitle sctitle sctitle"
        "qlcol1  qlcol2  scbadges scbadges";
    column-gap: 2.5rem;
    row-gap: 0.5rem;
}

#footer .footer-grid-title {
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    color: #1c1830;
}

#footer .ql-title { grid-area: qltitle; }
#footer .sc-title { grid-area: sctitle; }
#footer .ql-col1 { grid-area: qlcol1; }
#footer .ql-col2 { grid-area: qlcol2; }
#footer .sc-badges { grid-area: scbadges; margin: 0; }

#footer .quiq-links-footer-ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

#footer .quiq-links-footer-ul li {
    margin-bottom: 0.6rem;
}

#footer .quiq-links-footer-ul a {
    color: #232833;
    text-decoration: none;
    font-weight: 500;
}

#footer .quiq-links-footer-ul a:hover {
    color: #2c2843;
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    #footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "qltitle qltitle"
            "qlcol1  qlcol2"
            "sctitle sctitle"
            "scbadges scbadges";
    }
}

#footer .secure-img-footer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

#footer .secure-img-footer-area img {
    width: auto;
}

#footer .secure-img-footer-area img[alt="Imunify"] {
    max-height: 40px;
}

#footer .secure-img-footer-area img[alt="Let's Encrypt"] {
    max-height: 32px;
}

#footer .secure-img-footer-area img[alt="SiteLock"] {
    max-height: 26px;
}

#footer .footer-area-under {
    border-top: 1px solid #e2e5e9;
    padding-top: 1.5rem;
    margin-top: 1rem;
    align-items: center;
}

#footer .footer-brand-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#footer .footer-logo {
    max-height: 52px;
}

#footer .footer-social-icons a {
    color: #2c2843;
    border-color: rgba(44, 40, 67, 0.25);
}

#footer .footer-social-icons a:hover {
    color: #ffffff;
    background-color: #2c2843;
    border-color: #2c2843;
}

#footer .footer-social-icons {
    display: inline-flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

#footer .final-footer-area {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #454e57;
}

#footer .final-footer-area a {
    color: #2c2843;
    font-weight: 600;
    text-decoration: underline;
}

/* Language/currency button uses Bootstrap's btn-outline-light (meant for dark backgrounds) -
   override for visibility against the light footer gradient */
#footer .footer-lang-row .btn-outline-light {
    color: #232833;
    border-color: rgba(35, 40, 51, 0.45);
    background-color: rgba(255, 255, 255, 0.5);
}

#footer .footer-lang-row .btn-outline-light:hover,
#footer .footer-lang-row .btn-outline-light:focus {
    color: #ffffff;
    background-color: #2c2843;
    border-color: #2c2843;
}