/*
Theme Name: My Kadence Child For Ibrad
Author: Dennis
Description: A new child theme
Version: 1.0
Template: kadence

This is the child theme for Kadence theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/*/* ==========================================================================
   iBrad Solutions — Header Styles
   Matches footer.css: black base, two-tone orange accent, Space Grotesk +
   Inter. Paste into style.css alongside your footer styles.
   ========================================================================== */

/* Prevents the page from gaining a horizontal scrollbar. Off-canvas /
   hidden elements (the closed dropdown, the mobile slide-in nav) still
   occupy real layout space even while invisible, and can push the
   page's scrollable width past the viewport. This clips anything that
   tries to extend beyond it, at every screen size.
   IMPORTANT: this rule must stay on `html` only. Adding overflow-x to
   `body` as well creates a second scroll container nested inside the
   viewport, and `position: sticky` breaks once its nearest scrolling
   ancestor isn't the real viewport anymore — that's what happened last time. */
html {
    overflow-x: hidden;
}

body {
    max-width: 100%;
}

/* If the header is sticky on desktop but not on mobile, the usual cause
   is an ancestor wrapper picking up `overflow` (or a transform) at
   mobile widths — often from the theme itself (Kadence ships its own
   mobile-menu wrapper rules) rather than from this file. This forces
   the wrapper divs from header.php/footer.php back to `visible` in
   case that's the source. If sticky still fails after this, the
   culprit is elsewhere in Kadence's own CSS and will need to be
   tracked down in DevTools (inspect .site-header, then check each
   ancestor's computed `overflow` and `transform` values). */
#page,
.site-content-inner {
    overflow: visible;
}

.site-header {
    --header-bg: #0c0c0e;
    --header-bg-alt: #17171a;
    --header-orange: #ff6a2b;
    --header-orange-dim: #b3491c;
    --header-red: #ff3b30;
    --header-red-dark: #b0201c;
    --header-text: #f1efe9;
    --header-text-muted: #9c9a96;
    --header-border: #232225;

    --header-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --header-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(12, 12, 14, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--header-font-body);
    transition: box-shadow 0.25s ease;
}

.site-header *,
.site-header *::before,
.site-header *::after {
    box-sizing: border-box;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.site-header a {
    text-decoration: none;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--header-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 76px;
}

/* ---------------------------------- */
/* Branding                           */
/* ---------------------------------- */

.header-logo-link {
    display: inline-flex;
    align-items: center;
}

.header-logo {
    max-height: 34px;
    width: auto;
    /* Your logo files are already white, so no color filter is applied.
       If you ever swap in a dark-colored logo, add:
       filter: brightness(0) invert(1); */
}

.header-logo-link .header-logo--icon {
    display: none !important;
    max-height: 42px;
}

/* ---------------------------------- */
/* Primary Nav                        */
/* ---------------------------------- */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > li > a {
    position: relative;
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--header-text-muted);
    transition: color 0.2s ease;
}

.nav-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--header-orange);
    transition: width 0.2s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus-visible {
    color: var(--header-text);
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a:focus-visible::after {
    width: 100%;
}

/* Services dropdown */
.has-dropdown {
    position: relative;
}

.nav-parent {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--header-text-muted);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.has-dropdown.is-open .dropdown-toggle {
    transform: rotate(180deg);
    color: var(--header-orange);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -1.25rem;
    min-width: 260px;
    max-width: calc(100vw - 3rem);
    z-index: 20;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: var(--header-bg-alt);
    border: 1px solid var(--header-border);
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.has-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--header-text-muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: rgba(255, 106, 43, 0.08);
    color: var(--header-orange);
}

/* ---------------------------------- */
/* Right-side actions                 */
/* ---------------------------------- */

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

/* Single phone link, used in both the top bar and (via CSS only,
   no duplicate markup) collapses to an icon-only button on mobile. */
.header-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--header-text-muted);
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.header-phone:hover,
.header-phone:focus-visible {
    color: var(--header-orange);
}

/* CTA button — fully rounded pill, red gradient */
.header-cta {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--header-red), var(--header-red-dark));
    color: #fff;
    font-family: var(--header-font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 999px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.header-cta:hover,
.header-cta:focus-visible {
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.4);
    transform: translateY(-2px);
}

/* ---------------------------------- */
/* Minimal header (distraction-free    */
/* "Ecommerce-forms" page)             */
/* ---------------------------------- */

/* Deliberately its own class, separate from --full/--icon, so the
   desktop/mobile logo-swap rules below never touch it — same logo
   image at every screen width on this page. */
.header-logo-link .header-logo--primary {
    max-height: 34px;
}

.header-flex--minimal {
    justify-content: space-between;
}

.header-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    background: linear-gradient(135deg, var(--header-red), var(--header-red-dark));
    color: #fff;
    font-family: var(--header-font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 999px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.header-call-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--header-red-dark);
}

.header-call-btn:hover,
.header-call-btn:focus-visible {
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.45);
    transform: translateY(-2px);
}

/* Hamburger toggle — hidden on desktop */
.header-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--header-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.header-menu-toggle.is-active {
    background: var(--header-bg-alt);
    border-color: var(--header-border);
}

.menu-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--header-text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.header-menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.header-menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header-nav-overlay {
    display: none;
}

/* ---------------------------------- */
/* Responsive                         */
/* ---------------------------------- */

@media (max-width: 1180px) {
    /* Collapse to an icon-only circular button instead of hiding it —
       keeps click-to-call available at every width without duplicating markup. */
    .header-phone-text {
        display: none;
    }

    .header-phone {
        width: 40px;
        height: 40px;
        justify-content: center;
        border: 1px solid var(--header-border);
        border-radius: 50%;
    }

    .header-phone:hover,
    .header-phone:focus-visible {
        border-color: var(--header-orange);
        background: rgba(255, 106, 43, 0.08);
    }
}

@media (max-width: 960px) {
    .header-logo-link .header-logo--full {
        display: none !important;
    }

    .header-logo-link .header-logo--icon {
        display: block !important;
    }

    .header-flex {
        height: 64px;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-menu > li {
        border-bottom: 1px solid var(--header-border);
    }

    .nav-menu > li > a {
        display: block;
        padding: 1rem 0;
        font-size: 1rem;
    }

    .nav-menu > li > a::after {
        display: none;
    }

    .nav-parent {
        justify-content: space-between;
    }

    .dropdown-toggle {
        padding: 0.75rem;
    }

    /* Dropdown becomes an inline accordion instead of a floating panel */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0.5rem 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .has-dropdown.is-open .dropdown-menu {
        max-height: 400px;
    }

    /* Nav becomes a slide-in panel */
    .header-nav {
        position: fixed;
        top: 64px;
        right: 0;
        width: min(340px, 88vw);
        height: calc(100vh - 64px);
        background: var(--header-bg);
        border-left: 1px solid var(--header-border);
        padding: 1.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .header-nav.is-open {
        transform: translateX(0);
    }

    .header-nav-overlay {
        display: block;
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.nav-open .header-nav-overlay {
        opacity: 1;
        visibility: visible;
    }

    body.nav-open {
        overflow: hidden;
    }

    .header-cta {
        padding: 0.5rem 0.9rem;
        font-size: 0.76rem;
    }

    .header-call-btn {
        padding: 0.4rem 1rem 0.4rem 0.4rem;
        gap: 0.5rem;
        font-size: 0.76rem;
    }

    .header-call-btn__icon {
        width: 28px;
        height: 28px;
    }

    .header-menu-toggle {
        display: flex;
    }
}

@media (max-width: 480px) {
    .header-cta {
        padding: 0.45rem 0.8rem;
        font-size: 0.72rem;
    }

    .header-call-btn {
        padding: 0.35rem 0.85rem 0.35rem 0.35rem;
        gap: 0.4rem;
        font-size: 0.72rem;
    }

    .header-call-btn__icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 420px) {
    .site-header-container {
        padding: 0 1.25rem;
    }

    .header-logo {
        max-height: 28px;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header * {
        transition: none !important;
    }
}





.site-footer {
    --footer-bg: #0c0c0e;
    --footer-bg-alt: #141416;
    --footer-orange: #ff6a2b;
    --footer-orange-dim: #b3491c;
    --footer-text: #f1efe9;
    --footer-text-muted: #9c9a96;
    --footer-border: #232225;

    --footer-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --footer-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position: relative;
    overflow: hidden;
    background: var(--footer-bg);
    color: var(--footer-text-muted);
    font-family: var(--footer-font-body);
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
    box-sizing: border-box;
}

/* Signature element: thin gradient line across the very top of the footer */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--footer-orange) 20%,
        var(--footer-orange-dim) 50%,
        var(--footer-orange) 80%,
        transparent
    );
}

.site-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--footer-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------------------------------- */
/* Features Bar                       */
/* ---------------------------------- */

.footer-features {
    background: var(--footer-bg-alt);
}

.features-border-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    padding: 3rem 1.5rem;
    border-bottom: 1px solid var(--footer-border);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 200px;
}

.feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 106, 43, 0.08);
    border: 1px solid var(--footer-orange-dim);
    color: var(--footer-orange);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.feature-item:hover .feature-icon {
    background: var(--footer-orange);
    color: var(--footer-bg);
    transform: translateY(-2px);
}

.feature-item h4 {
    margin: 0 0 0.25rem;
    font-family: var(--footer-font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--footer-text);
}

.feature-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--footer-text-muted);
}

/* ---------------------------------- */
/* Main Footer Content                */
/* ---------------------------------- */

.footer-main {
    padding: 4rem 0 2.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-logo {
    max-height: 42px;
    width: auto;
    margin-bottom: 1.5rem;
    /* If your logo file is already light/white, delete the line below.
       This filter forces a dark logo to render white on the black bg. */
    filter: brightness(0) invert(1);
}

.footer-site-title {
    margin: 0 0 1.5rem;
    font-family: var(--footer-font-display);
    font-size: 1.4rem;
    color: var(--footer-text);
}

.question-text {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-text-muted);
}

.footer-phone {
    margin: 0 0 1.5rem;
    font-family: var(--footer-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--footer-orange);
}

.footer-socials {
    display: flex;
    gap: 0.6rem;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--footer-text-muted);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    background: var(--footer-orange);
    border-color: var(--footer-orange);
    color: var(--footer-bg);
}

.footer-col h4 {
    position: relative;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    font-family: var(--footer-font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--footer-text);
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--footer-orange);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-col ul li a {
    position: relative;
    display: inline-block;
    padding-left: 0;
    font-size: 0.9rem;
    color: var(--footer-text-muted);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-col ul li a::before {
    content: '›';
    position: absolute;
    left: -12px;
    opacity: 0;
    color: var(--footer-orange);
    transition: opacity 0.2s ease, left 0.2s ease;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible {
    color: var(--footer-orange);
    padding-left: 0.85rem;
}

.footer-col ul li a:hover::before,
.footer-col ul li a:focus-visible::before {
    opacity: 1;
    left: 0;
}

.contact-col .address-text {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.contact-col .hours-text p {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    color: var(--footer-text-muted);
}

.footer-email {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--footer-orange);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.footer-email:hover,
.footer-email:focus-visible {
    border-color: var(--footer-orange);
}

/* ---------------------------------- */
/* Footer Bottom                      */
/* ---------------------------------- */

.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid var(--footer-border);
}

.bottom-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bottom-flex p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--footer-text-muted);
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
}

.footer-legal-links a {
    font-size: 0.8rem;
    color: var(--footer-text-muted);
    transition: color 0.2s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: var(--footer-orange);
}

/* ---------------------------------- */
/* Responsive                         */
/* ---------------------------------- */

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .brand-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .features-border-bottom {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2.5rem 1.25rem;
    }
    .feature-item {
        flex: 1 1 auto;
    }
    .bottom-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .site-footer * {
        transition: none !important;
    }
}