/*
Theme Name: GP Gov (Hello Elementor Child)
Theme URI: https://gpgov.us
Description: Custom Hello Elementor child theme for GP Strategies Government Solutions. Includes brand design tokens, header and footer templates, and reusable typography and button classes for use inside Elementor sections.
Author: GP Strategies
Template: hello-elementor
Version: 2.0.0-alpha.4
Text Domain: gp-gov-child
*/


/* =============================================================
   DESIGN TOKENS
   Brand colours, typography, spacing, breakpoints.
   Reference these from Elementor sections via CSS variables
   or via reusable utility classes below.
   ============================================================= */

:root {
    --gpgov-color-dark: #050E24;
    --gpgov-color-aqua: #1E8AA8;
    --gpgov-color-soft-bg: #F1F6F9;
    --gpgov-color-white: #FFFFFF;
    --gpgov-color-text: #050E24;
    --gpgov-color-text-muted: #556278;

    --gpgov-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --gpgov-container-max: 1280px;
    --gpgov-container-padding: 24px;

    --gpgov-section-padding-y: 96px;
}

@media (min-width: 1025px) and (max-width: 1400px) {
    :root {
        --gpgov-section-padding-y: 66px;
    }
}

@media (max-width: 1024px) {
    :root {
        --gpgov-section-padding-y: 72px;
    }
}

@media (max-width: 640px) {
    :root {
        --gpgov-container-padding: 20px;
    }
}


/* =============================================================
   BASE TYPOGRAPHY
   Sets Poppins across the site. Elementor sections will inherit.
   ============================================================= */

body {
    font-family: var(--gpgov-font-primary);
    color: var(--gpgov-color-text);
    line-height: 1.5;
    margin: 0;
    background-color: var(--gpgov-color-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gpgov-font-primary);
    font-weight: 700;
    color: var(--gpgov-color-dark);
    line-height: 1.2;
}

a {
    color: var(--gpgov-color-aqua);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}


/* =============================================================
   ELEMENTOR UTILITY CLASSES
   Apply these via any widget or section's Advanced > CSS Classes
   field. Written to work with both classic Section/Column and the
   newer Container structures — hence multiple targeted selectors.
   ============================================================= */

/* Technique A — Aligns text content inside a Full Width section's
   column so it starts at the same x-coordinate as the left edge
   of a centered 1280 container would. The opposite column in the
   same section naturally fills 50vw and reaches the viewport edge. */
.gpgov-align-container-left,
.gpgov-align-container-left > .elementor-column-wrap,
.gpgov-align-container-left > .elementor-widget-wrap,
.gpgov-align-container-left > .e-con-inner {
    padding-left: max(
        var(--gpgov-container-padding),
        calc((100vw - var(--gpgov-container-max)) / 2 + var(--gpgov-container-padding))
    ) !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Technique B — Extends an element inside a Boxed section past the
   container edge to the right of the viewport. Requires the element
   to sit in the right half of a 1280px container. */
@media (min-width: 1281px) {
    .gpgov-bleed-right {
        width: calc(100% + (50vw - var(--gpgov-container-max) / 2)) !important;
        max-width: none !important;
    }

    .gpgov-bleed-right img,
    .gpgov-bleed-right .elementor-widget-container,
    .gpgov-bleed-right .elementor-widget-container img {
        width: 100% !important;
        max-width: none !important;
        height: auto;
    }

    /* Mirror for left bleed */
    .gpgov-bleed-left {
        margin-left: calc(var(--gpgov-container-max) / 2 - 50vw) !important;
        width: calc(100% + (50vw - var(--gpgov-container-max) / 2)) !important;
        max-width: none !important;
    }

    .gpgov-bleed-left img {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =============================================================
   REUSABLE UTILITY CLASSES
   Available to use inside Elementor sections via the widget's
   custom CSS classes field (Advanced > CSS Classes).
   ============================================================= */

.gpgov-container {
    max-width: var(--gpgov-container-max);
    margin: 0 auto;
    padding: 0 var(--gpgov-container-padding);
}

.gpgov-eyebrow {
    display: block;
    color: var(--gpgov-color-aqua);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1.4;
}

.gpgov-eyebrow--center {
    text-align: center;
}

.gpgov-title {
    font-size: 35px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--gpgov-color-dark);
    margin: 0 0 24px;
}

.gpgov-title--center {
    text-align: center;
}


/* =============================================================
   BUTTONS
   The white pill button used in the header and elsewhere.
   Use class "gpgov-btn-pill" on any Elementor button widget
   or link element.
   ============================================================= */

.gpgov-btn-pill,
a.gpgov-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background-color: var(--gpgov-color-white);
    color: var(--gpgov-color-dark);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--gpgov-font-primary);
    line-height: 1;
    transition: transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.gpgov-btn-pill:hover {
    opacity: 1;
    transform: translateY(-1px);
    color: var(--gpgov-color-dark);
}

.gpgov-btn-pill__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--gpgov-color-aqua);
    color: var(--gpgov-color-white);
    flex-shrink: 0;
}

.gpgov-btn-pill__arrow svg {
    width: 12px;
    height: 12px;
}


/* =============================================================
   SITE HEADER
   Custom header template (header.php). When Elementor Pro
   arrives you'll build the header as a Theme Builder template
   and delete header.php — these rules become obsolete then.
   ============================================================= */

body header.site-header,
body .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 100 !important;
    padding: 32px 0 !important;
    background-color: transparent !important;
    margin: 0 !important;
}

body header.site-header .site-header__inner,
body .site-header .site-header__inner,
header.site-header > .site-header__inner {
    max-width: var(--gpgov-container-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--gpgov-container-padding) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.site-logo img {
    height: 72px;
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-nav__menu {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__menu a {
    color: var(--gpgov-color-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

/* On non-home pages, header sits at the top of the page with a
   solid dark background so its white content stays visible. */
body:not(.home) header.site-header,
body:not(.home) .site-header {
    position: static !important;
    background-color: var(--gpgov-color-dark) !important;
}

.admin-bar header.site-header,
.admin-bar .site-header {
    top: 32px !important;
}

body:not(.home).admin-bar header.site-header,
body:not(.home).admin-bar .site-header {
    top: auto !important;
}

@media (max-width: 775px) {
    .admin-bar header.site-header {
        top: 46px;
    }
    .site-logo img {
        height: 44px;
    }
}


/* =============================================================
   SITE FOOTER
   Custom footer template (footer.php). When Elementor Pro
   arrives you'll build the footer as a Theme Builder template
   and delete footer.php — these rules become obsolete then.
   ============================================================= */

.site-footer {
    background-color: var(--gpgov-color-dark);
    color: var(--gpgov-color-white);
    padding: 64px 0 32px;
}

.site-footer__inner {
    max-width: var(--gpgov-container-max);
    margin: 0 auto;
    padding: 0 var(--gpgov-container-padding);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
}

.site-footer__top > div:first-child {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-footer__top > div:last-child {
    justify-self: end;
}

.site-footer__logo svg,
.site-footer__logo img {
    height: 64px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.site-footer__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.site-footer__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--gpgov-color-white);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.site-footer__linkedin svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.site-footer__bottom {
    padding-top: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
    .site-footer__top {
        grid-template-columns: minmax(0, 420px) 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .site-footer__top > div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-footer__top > div:last-child {
        justify-self: start;
    }
}

/* ========= SOLUTIONS MENU ========== */

/* =========================================================
   SOLUTIONS MEGA MENU — DESKTOP
   Scoped only to .solutions-mega-menu.

   Desktop positioning (left/width) is refined by the custom
   Solutions JS so the dropdown aligns with the Get In Touch
   button and never leaves the viewport.
   ========================================================= */

.solutions-mega-menu {
    position: relative !important;
}


/* Dropdown panel */
.solutions-mega-menu > ul.sub-menu {
    box-sizing: border-box !important;

    position: absolute !important;
    top: 100% !important;

    /* Safe fallback before JS positions the menu */
    right: 0 !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;

    width: 760px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;

    margin: 0 !important;
    padding: 24px !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;

    box-shadow:
        0 20px 50px rgba(7, 18, 43, 0.16),
        0 4px 12px rgba(7, 18, 43, 0.08) !important;

    z-index: 99999 !important;

    /* Closed state — keep it rendered for reliable hover */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease !important;
}


/* Open on desktop hover/focus */
.solutions-mega-menu:hover > ul.sub-menu,
.solutions-mega-menu:focus-within > ul.sub-menu,
.solutions-mega-menu > ul.sub-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Invisible bridge between Solutions and the dropdown */
.solutions-mega-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 24px;
    z-index: 99998;
}


/* =========================================================
   DESKTOP CARDS
   ========================================================= */

.solutions-mega-menu > ul.sub-menu > li {
    box-sizing: border-box !important;

    position: relative !important;
    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    border: 1px solid #dfe5eb !important;
    border-radius: 14px !important;

    overflow: hidden !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}


/* Long final link gets the full bottom row */
.solutions-mega-menu
> ul.sub-menu
> li:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
}


/* Card link: icon | text | arrow */
.solutions-mega-menu > ul.sub-menu > li > a {
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    column-gap: 16px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 87px !important;

    margin: 0 !important;
    padding: 13px 13px !important;

    background: transparent !important;
    color: #0b1431 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: visible !important;
}


.solutions-mega-menu > ul.sub-menu > li > a span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* =========================================================
   DESKTOP ICONS
   ========================================================= */

.solutions-mega-menu > ul.sub-menu > li > a::before {
    content: "" !important;
    display: block !important;

    width: 50px !important;
    height: 50px !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}


.solutions-mega-menu > ul.sub-menu > li.icon-engineering > a::before {
    background-image: url("https://gpgov.us/wp-content/uploads/2026/09/engineering.svg") !important;
}

.solutions-mega-menu > ul.sub-menu > li.icon-training-capability > a::before {
    background-image: url("https://gpgov.us/wp-content/uploads/2026/09/training-capability.svg") !important;
}

.solutions-mega-menu > ul.sub-menu > li.icon-technology > a::before {
    background-image: url("https://gpgov.us/wp-content/uploads/2026/09/technology.svg") !important;
}

.solutions-mega-menu > ul.sub-menu > li.icon-leadership-strategy > a::before {
    background-image: url("https://gpgov.us/wp-content/uploads/2026/09/training-facilities-ops.svg") !important;
}

.solutions-mega-menu > ul.sub-menu > li.icon-leadership-development > a::before {
    background-image: url("https://gpgov.us/wp-content/uploads/2026/09/leadership.svg") !important;
}

.solutions-mega-menu > ul.sub-menu > li.icon-sap > a::before {
    background-image: url("https://gpgov.us/wp-content/themes/gp-gov-child/assets/icons/icon-sap.svg") !important;
}


/* Solutions card chevron — drawn with CSS, no text character */
.solutions-mega-menu > ul.sub-menu > li > a::after {
    content: "" !important;

    display: block !important;

    width: 9px !important;
    height: 9px !important;

    border-top: 2px solid #667085 !important;
    border-right: 2px solid #667085 !important;

    transform: rotate(45deg) !important;

    font-size: 0 !important;
    line-height: 0 !important;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease !important;
}


/* Hover/focus */
.solutions-mega-menu > ul.sub-menu > li:hover {
    border-color: #bfd0d7 !important;
    box-shadow: 0 8px 22px rgba(10, 31, 55, 0.08) !important;
    transform: translateY(-2px) !important;
}

.solutions-mega-menu > ul.sub-menu > li:hover > a {
    background: #f8fbfc !important;
    color: #0b1431 !important;
}

.solutions-mega-menu > ul.sub-menu > li:hover > a::after {
    border-color: #1e8aa8 !important;
    transform: translateX(3px) rotate(45deg) !important;
}
/* Prevent Elementor/SmartMenus adding its own submenu indicators
   inside the Solutions cards */
.solutions-mega-menu > ul.sub-menu > li > a .sub-arrow {
    display: none !important;
}
.solutions-mega-menu > ul.sub-menu > li > a:focus-visible {
    outline: 2px solid #1e8aa8 !important;
    outline-offset: -3px !important;
}


/* =========================================================
   SOLUTIONS — MOBILE / ELEMENTOR DRAWER MODE

   The Solutions JS adds .solutions-mobile-mode to <html>
   whenever Elementor's mobile navigation is actually active.
   This deliberately does NOT use a hard-coded CSS breakpoint.
   ========================================================= */

.solutions-mobile-mode .solutions-mega-menu {
    position: static !important;
}


.solutions-mobile-mode .solutions-mega-menu::after {
    display: none !important;
}


/* Closed mobile submenu */
.solutions-mobile-mode .solutions-mega-menu > ul.sub-menu {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 6px 0 16px !important;

    display: none !important;
    grid-template-columns: none !important;
    gap: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    overflow: visible !important;
    transition: none !important;
}


/* Open mobile submenu after tapping Solutions */
.solutions-mobile-mode
.solutions-mega-menu.mobile-solutions-open
> ul.sub-menu {
    display: block !important;
}


/* Mobile list items */
.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li {
    position: static !important;

    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    transform: none !important;
}

.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li:last-child {
    grid-column: auto !important;
}


/* Plain mobile text links */
.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li
> a {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 10px 60px !important;

    background: transparent !important;
    color: #0b1431 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* No desktop icons or card arrows in the mobile list */
.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li
> a::before,
.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li
> a::after {
    content: none !important;
    display: none !important;
}


/* Neutralise desktop hover-card effects on touch/mobile nav */
.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.solutions-mobile-mode
.solutions-mega-menu
> ul.sub-menu
> li:hover
> a {
    background: transparent !important;
    color: #0b1431 !important;
}

/* =========================================================
   STANDARD HEADER DROPDOWNS
   About Us, Missions, etc.

   Desktop visibility is controlled by JS using .simple-open.
   ========================================================= */

html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown {
    position: relative !important;
    overflow: visible !important;
}


/* CLOSED */
html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown
> ul.sub-menu {

    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(100vw - 32px) !important;

    display: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transition: none !important;
    animation: none !important;

    overflow: visible !important;

    z-index: 99999 !important;
}


html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown:hover
> ul.sub-menu,

html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown:focus-within
> ul.sub-menu {
    display: block !important;
}

/* Labels */
html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown
> ul.sub-menu
> li
> a {
    width: auto !important;
    white-space: nowrap !important;
}


/* =========================================================
   VERTICAL HOVER BRIDGE

   Keeps the dropdown open while moving downward from
   About Us / Missions into the submenu.

   IMPORTANT:
   It is only as wide as the parent menu item, so it cannot
   extend sideways underneath the neighbouring menu item.
   ========================================================= */

html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown::after {
    content: "" !important;

    position: absolute !important;

    top: calc(100% - 2px) !important;
    left: 0 !important;

    width: 100% !important;
    height: 32px !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: auto !important;

    z-index: 99998 !important;
}


/* Make sure no wide submenu-level bridge exists */
html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown
> ul.sub-menu::before {
    content: none !important;
    display: none !important;
}


/* Remove Elementor indicator artefacts */
html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown
> a::before,

html:not(.solutions-mobile-mode)
.elementor-nav-menu--main
.simple-header-dropdown
> a::after {
    border: 0 !important;
    box-shadow: none !important;
}