/* ===================================================================
 * GSG Custom Overrides — gsg-theme.css
 * Global Solutions Group | globalsolutionsgroup.co.za
 *
 * Link AFTER main.css on every page:
 *   <link rel="stylesheet" href="css/gsg-theme.css">
 *
 * TOC:
 *   1. Transparent navbar — fixed, solidifies on scroll (.is-scrolled)
 *   2. Centred nav links
 *   3. Light / Dark theme toggle button
 *   4. Light mode — global
 *   5. Light mode — hero
 *   6. Light mode — navbar
 *   7. Light mode — about
 *   8. Light mode — services
 *   9. Light mode — portfolio
 *  10. Light mode — clients
 *  11. Light mode — products
 *  12. Light mode — contact
 *  13. Light mode — inner page headers
 * ------------------------------------------------------------------- */


/* ===================================================================
 * # 1. Transparent navbar
 * ------------------------------------------------------------------- */

/* Fixed, fully transparent by default */
.s-header {
    position: fixed !important;
    top: 0 !important;
    background: transparent !important;
    -webkit-transition: background 0.45s ease, box-shadow 0.45s ease, -webkit-backdrop-filter 0.45s ease;
    transition: background 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
}

/* Neutralise the old opacity/visibility hide from .sticky */
.s-header.sticky {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
}

/* Scrolled → dark frosted glass */
.s-header.is-scrolled {
    background: rgba(8, 8, 8, 0.92) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Nav links always readable over transparent header */
.s-header .s-header__nav a {
    color: rgba(255, 255, 255, 0.80) !important;
    -webkit-transition: color 0.3s ease !important;
    transition: color 0.3s ease !important;
}

.s-header .s-header__nav a:hover,
.s-header .s-header__nav a:focus,
.s-header .s-header__nav a.current-page,
.s-header .s-header__nav li.current > a {
    color: var(--color-2) !important;
}

/* Hamburger lines always white */
.s-header__menu-toggle span,
.s-header__menu-toggle span::before,
.s-header__menu-toggle span::after {
    background-color: white !important;
}


/* ===================================================================
 * # 2. Centre the nav links
 * ------------------------------------------------------------------- */

/* Flex-centre the nav inside the header bar */
.s-header__content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 8.8rem;
    position: relative;
}

/* Remove old left-padding offset — flex handles centering */
.s-header__nav-wrap {
    padding-left: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Logo stays pinned to the left */
.s-header__logo {
    position: absolute !important;
    left: 8rem;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
}

/* Contact button stays pinned to the right */
.s-header__content > .btn {
    position: absolute !important;
    right: 10rem;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
}

/* Responsive logo/button positioning */
@media screen and (max-width: 1700px) {
    .s-header__logo         { left: 6rem; }
    .s-header__content > .btn { right: 6rem; }
}

@media screen and (max-width: 600px) {
    .s-header__logo { left: 4rem; }
}

@media screen and (max-width: 400px) {
    .s-header__logo { left: 3.2rem; }
}

/* Mobile: restore block layout for the slide-down menu */
@media screen and (max-width: 900px) {
    .s-header__content {
        display: block !important;
        height: auto;
    }
    .s-header__nav-wrap {
        padding: 0 !important;
    }
}


/* ===================================================================
 * # 3. Theme toggle button (floating, bottom-left)
 * ------------------------------------------------------------------- */
.gsg-theme-toggle {
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(20, 23, 27, 0.85);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.8rem;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    outline: none;
}

.gsg-theme-toggle:hover {
    background: var(--color-2);
    border-color: var(--color-2);
    color: #000;
}

/* Show/hide correct icon per mode */
html[data-theme="light"] .gsg-theme-toggle .icon-moon { display: none; }
html:not([data-theme="light"]) .gsg-theme-toggle .icon-sun { display: none; }

/* Button styling in light mode */
html[data-theme="light"] .gsg-theme-toggle {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a2e;
}

html[data-theme="light"] .gsg-theme-toggle:hover {
    background: var(--color-1);
    border-color: var(--color-1);
    color: #fff;
}


/* ===================================================================
 * # 4. Light mode — global
 * ------------------------------------------------------------------- */
html[data-theme="light"] body {
    background: #f4f6f8 !important;
    color: #1a1a2e !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
    color: #1a1a2e !important;
}

html[data-theme="light"] p {
    color: rgba(5, 13, 20, 0.70);
}

/* Section utility classes */
html[data-theme="light"] .section-eyebrow  { color: var(--color-1) !important; }
html[data-theme="light"] .section-headline { color: #050d14 !important; }
html[data-theme="light"] .section-lead     { color: rgba(5, 13, 20, 0.65) !important; }

/* Preloader */
html[data-theme="light"] #preloader { background: #f4f6f8; }


/* ===================================================================
 * # 5. Light mode — hero (index.html)
 * ------------------------------------------------------------------- */
html[data-theme="light"] .s-hero {
    background-color: #dde8f0;
}

html[data-theme="light"] .s-hero__bg .gradient-overlay {
    background: linear-gradient(
        90deg,
        rgba(221, 232, 240, 0.98) 0%,
        rgba(221, 232, 240, 0.88) 25%,
        rgba(221, 232, 240, 0.65) 50%,
        rgba(221, 232, 240, 0.25) 75%,
        rgba(221, 232, 240, 0.00) 100%
    );
}

/* Hero headline */
html[data-theme="light"] .hero-headline,
html[data-theme="light"] .hero-headline__line   { color: #050d14 !important; }
html[data-theme="light"] .hero-tagline-text      { color: rgba(5, 13, 20, 0.75) !important; }

/* Hero eyebrow / start label */
html[data-theme="light"] .hero-eyebrow          { color: #007a80 !important; }
html[data-theme="light"] .hero-eyebrow__dot      { background: #007a80 !important; }
html[data-theme="light"] .hero-slide__label span { color: rgba(5, 13, 20, 0.60) !important; }

/* Stat strip */
html[data-theme="light"] .hero-stat__num         { color: #050d14 !important; }
html[data-theme="light"] .hero-stat__num span    { color: var(--color-1) !important; }
html[data-theme="light"] .hero-stat__label       { color: rgba(5, 13, 20, 0.70) !important; }
html[data-theme="light"] .hero-stats             { border-top-color: rgba(0, 0, 0, 0.20) !important; }
html[data-theme="light"] .hero-stat              { border-right-color: rgba(0, 0, 0, 0.20) !important; }

/* Slider dots */
html[data-theme="light"] .hero-slider__dots span         { background: rgba(5, 13, 20, 0.20) !important; }
html[data-theme="light"] .hero-slider__dots span.active  { background: var(--color-1) !important; }


/* ===================================================================
 * # 6. Light mode — navbar
 * ------------------------------------------------------------------- */

/* Logo swap: use the dark-coloured logo */
html[data-theme="light"] .s-header__logo img {
    content: url('../images/Global Solutions Group Logo-02.png');
}

/* Nav links while transparent (over hero OR dark page banner) — stay white */
/* Do NOT set dark colour here — header is always over a dark background when unscrolled */
html[data-theme="light"] .s-header:not(.is-scrolled) .s-header__nav a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Nav links once scrolled (white header) */
html[data-theme="light"] .s-header.is-scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .s-header.is-scrolled .s-header__nav a {
    color: #1a1a2e !important;
}

html[data-theme="light"] .s-header.is-scrolled .s-header__nav a:hover,
html[data-theme="light"] .s-header.is-scrolled .s-header__nav a:focus,
html[data-theme="light"] .s-header.is-scrolled .s-header__nav a.current-page,
html[data-theme="light"] .s-header.is-scrolled .s-header__nav li.current > a {
    color: var(--color-1) !important;
}

/* Hamburger in scrolled light header */
html[data-theme="light"] .s-header.is-scrolled .s-header__menu-toggle span,
html[data-theme="light"] .s-header.is-scrolled .s-header__menu-toggle span::before,
html[data-theme="light"] .s-header.is-scrolled .s-header__menu-toggle span::after {
    background-color: #1a1a2e !important;
}


/* ===================================================================
 * # 7. Light mode — about
 * ------------------------------------------------------------------- */
html[data-theme="light"] .s-about,
html[data-theme="light"] .about-intro {
    background-color: #ffffff !important;
}

html[data-theme="light"] .about-intro__headline,
html[data-theme="light"] .about-intro__eyebrow,
html[data-theme="light"] .about-intro__body       { color: #1a1a2e !important; }

html[data-theme="light"] .stat-item__number       { color: #050d14 !important; }
html[data-theme="light"] .stat-item__label        { color: rgba(5, 13, 20, 0.55) !important; }

html[data-theme="light"] .process-step__num       { background: var(--color-1) !important; color: #fff !important; }
html[data-theme="light"] .process-step__title,
html[data-theme="light"] .process-step__text      { color: #1a1a2e !important; }

html[data-theme="light"] .values-left .big-quote,
html[data-theme="light"] .values-left p           { color: #1a1a2e !important; }
html[data-theme="light"] .value-item__content h4,
html[data-theme="light"] .value-item__content p   { color: #1a1a2e !important; }

html[data-theme="light"] .location-info h2           { color: #050d14 !important; }
html[data-theme="light"] .location-detail-item span,
html[data-theme="light"] .location-detail-item a     { color: rgba(5, 13, 20, 0.70) !important; }

html[data-theme="light"] .about-cta h2,
html[data-theme="light"] .about-cta p             { color: #1a1a2e !important; }
html[data-theme="light"] .btn-cta-secondary       { border-color: var(--color-1) !important; color: var(--color-1) !important; background: transparent !important; }
html[data-theme="light"] .btn-cta-secondary:hover { background: var(--color-1) !important; color: #fff !important; }


/* ===================================================================
 * # 8. Light mode — services
 * ------------------------------------------------------------------- */
html[data-theme="light"] .s-services {
    background-color: #f4f6f8 !important;
}

html[data-theme="light"] .service-card,
html[data-theme="light"] .srv-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .service-card h3.item-title,
html[data-theme="light"] .srv-card__title          { color: #1a1a2e !important; }

html[data-theme="light"] .service-card p,
html[data-theme="light"] .srv-card__text           { color: rgba(5, 13, 20, 0.60) !important; }

html[data-theme="light"] .service-card__link,
html[data-theme="light"] .srv-card__link           { color: var(--color-1) !important; }

html[data-theme="light"] .hosting-card            { background: #fff !important; border-color: rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .hosting-card h4,
html[data-theme="light"] .hosting-card p          { color: #1a1a2e !important; }

html[data-theme="light"] .services-cta h2,
html[data-theme="light"] .services-cta p          { color: #1a1a2e !important; }


/* ===================================================================
 * # 9. Light mode — portfolio
 * ------------------------------------------------------------------- */
html[data-theme="light"] .s-portfolio {
    background-color: #ffffff !important;
}

html[data-theme="light"] .portfolio-slide__title  { color: #050d14 !important; }
html[data-theme="light"] .portfolio-slide__desc   { color: rgba(5, 13, 20, 0.60) !important; }

html[data-theme="light"] .portfolio-slide__image  {
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .portfolio-slider__prev,
html[data-theme="light"] .portfolio-slider__next  {
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #1a1a2e !important;
}

html[data-theme="light"] .portfolio-slider__prev:hover,
html[data-theme="light"] .portfolio-slider__next:hover {
    background: var(--color-1) !important;
    border-color: var(--color-1) !important;
    color: #fff !important;
}

html[data-theme="light"] .portfolio-slider__dots span { background: rgba(5, 13, 20, 0.18) !important; }
html[data-theme="light"] .portfolio-slider__dots span.active { background: var(--color-1) !important; }


/* ===================================================================
 * # 10. Light mode — clients
 * ------------------------------------------------------------------- */
html[data-theme="light"] .s-clients {
    background-color: #f4f6f8 !important;
}

html[data-theme="light"] .clients__slide img {
    -webkit-filter: grayscale(10%) brightness(0.8) !important;
    filter: grayscale(10%) brightness(0.8) !important;
}

html[data-theme="light"] .testimonial-slider p { color: #1a1a2e !important; }


/* ===================================================================
 * # 11. Light mode — products page
 * ------------------------------------------------------------------- */
html[data-theme="light"] .pcard {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .pcard__title { color: #1a1a2e !important; }
html[data-theme="light"] .pcard__desc  { color: rgba(5, 13, 20, 0.65) !important; }
html[data-theme="light"] .pcard__tag   { color: rgba(5, 13, 20, 0.45) !important; }
html[data-theme="light"] .pcard__feature { color: rgba(5, 13, 20, 0.65) !important; }


/* ===================================================================
 * # 12. Light mode — contact page
 * ------------------------------------------------------------------- */
html[data-theme="light"] .contact-info-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .contact-info-card h4,
html[data-theme="light"] .contact-info-card p { color: #1a1a2e !important; }

html[data-theme="light"] .contact-form-section { background: #ffffff !important; }

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #f4f6f8 !important;
    color: #1a1a2e !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] label { color: #1a1a2e !important; }


/* ===================================================================
 * # 13. Light mode — inner page headers (.s-pageheader)
 * ------------------------------------------------------------------- */

/* Keep the dark banner on inner pages for contrast — no change needed.
 * Only override if you want a light-tinted banner: */
/* html[data-theme="light"] .s-pageheader { background: #1a1a2e !important; } */


/* ===================================================================
 * # Footer — stays dark regardless of theme
 * ------------------------------------------------------------------- */
/* No overrides — footer is always dark (#111) by design */


/* ===================================================================
 * # 13. Clients section — kill template fade overlay & fix logos
 * ------------------------------------------------------------------- */

/* Remove the white left/right gradient fades the Flare template adds */
.clients-outer::before,
.clients-outer::after { display: none !important; content: none !important; }
.owl-carousel .owl-stage-outer::before,
.owl-carousel .owl-stage-outer::after { display: none !important; }

/* White logos on dark background — no white overlay */
.clients__slide img {
    width: 140px;
    height: 70px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.35;
    transition: filter 0.4s ease, opacity 0.4s ease;
    background: transparent !important;
}
.clients__slide:hover img {
    /* teal tint on hover */
    filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(148deg);
    opacity: 0.9;
}

/* Light mode — black logos */
html[data-theme="light"] .clients__slide img {
    filter: brightness(0);
    opacity: 0.25;
}
html[data-theme="light"] .clients__slide:hover img {
    filter: brightness(0) sepia(1) saturate(3) hue-rotate(148deg);
    opacity: 0.85;
}

/* Hide any unwanted default Flare template sections */
.s-stats,
.s-numbers,
.s-cta,
.s-testimonials { display: none !important; }

/* ===================================================================
 * Dots SVG — tint to brand teal #00a3a9
 * background-image SVGs can't use color directly, use CSS filter.
 * Filter converts the dark dots to #00a3a9.
 * ------------------------------------------------------------------- */
.s-about::before {
    filter: invert(44%) sepia(96%) saturate(400%) hue-rotate(152deg) brightness(88%) contrast(101%);
    opacity: 0.45;
}