/* ============================================================
   ATOM TECH SERVICES: UNIFIED SITE ALIGNMENT & HEADER STYLES
   - Fonts: Archivo (headings & titles) + Barlow (body & text)
   - Sets a consistent max-width and side gutter across the entire site
   - Aligns Header, Page Content Sections, and Footer to the exact same left & right edges
   - Left half: dark teal with circuit pattern + logo
   - Right half: white with faint swirl pattern + menu
   ============================================================ */

/* 1. Global site-wide alignment & typography variables */
:root {
    /* Global Typography System */
    --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* WordPress FSE / Block theme typography & dimension sync */
    --wp--preset--font-family--manrope: var(--font-body);
    --wp--preset--font-family--heading: var(--font-heading);
    --wp--style--global--wide-size: var(--site-max-width);
    --wp--style--global--content-size: var(--site-max-width);
    --wp--style--root--padding-left: var(--site-gutter);
    --wp--style--root--padding-right: var(--site-gutter);

    /* UNIFIED SITE WIDTH: All sections adhere to this container */
    --site-max-width: 1700px;
    --site-gutter: clamp(20px, 3.5vw, 40px);

    /* Header specific tokens */
    --hc-teal-dark: #08394a;
    --hc-teal: #0d5568;
    --hc-copper: #b5562b;
    --hc-text: #5a5a5a;
    --hc-white: #ffffff;
    --hc-height: 90px;
    --hc-split: 49.2%;
    /* where the teal panel ends */
}

/* ============================================================
   GLOBAL TYPOGRAPHY RULES (ARCHIVO FOR HEADINGS, BARLOW FOR TEXT)
   ============================================================ */

body,
p,
li,
a,
span,
input,
button,
select,
textarea,
.entry-content,
.entry-content p,
.wp-block-paragraph,
.wp-block-post-content,
.wp-block-navigation,
.footer-custom-btn,
.footer-custom-title,
.footer-custom-list,
.footer-custom-list a,
.footer-custom-info-item,
.footer-custom-bottom {
    font-family: var(--font-body) !important;
}

/* Header navigation menu font: Roboto */
.header-custom-menu,
.header-custom-menu>li,
.header-custom-menu>li>a {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Headings and Titles (Archivo) */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title,
.header-custom-tagline,
.footer-custom-tagline,
.header-custom-logo-title {
    font-family: var(--font-heading) !important;
}

/* ============================================================
   2. GLOBAL CONTENT SECTIONS ALIGNMENT (HEADER, BODY & FOOTER)
   ============================================================ */

/* Standardize main page container across all templates */
.wp-site-blocks>main,
main#wp--skip-link--target,
.wp-site-blocks>.wp-block-group:not(.alignfull) {
    max-width: var(--site-max-width);
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure WordPress global padding matches site gutters */
.has-global-padding {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}

/* Align headings, paragraphs, queries, and content blocks to the site grid */
.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
:where(.is-layout-constrained)> :not(.alignleft):not(.alignright):not(.alignfull),
.is-layout-constrained> :not(.alignleft):not(.alignright):not(.alignfull),
.is-layout-constrained>.alignwide,
:where(.is-layout-constrained)>.alignwide {
    max-width: var(--site-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* Allow full-bleed backgrounds (.alignfull), but keep their content aligned to the site width */
.alignfull.has-global-padding> :not(.alignfull) {
    max-width: var(--site-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   3. HEADER SHELL & BACKGROUND
   ============================================================ */

/* Hide the default Twenty Twenty-Five block theme header */
.wp-site-blocks>header.wp-block-template-part,
header.wp-block-template-part {
    display: none !important;
}

.header-custom {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    /*     min-height: var(--hc-height); */
    background: var(--hc-white);
    font-family: var(--font-body);
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* Transparent overlay header on homepage / custom-home template */
body.home .header-custom,
body.page-template-custom-home .header-custom,
.home .header-custom,
.page-template-custom-home .header-custom {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

body.home .header-custom::before,
body.home .header-custom::after,
body.page-template-custom-home .header-custom::before,
body.page-template-custom-home .header-custom::after,
.home .header-custom::before,
.home .header-custom::after,
.page-template-custom-home .header-custom::before,
.page-template-custom-home .header-custom::after {
    display: none !important;
}

/* Other pages use a solid white, in-flow header above their content. */
body:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom::before,
body:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom::after {
    display: none !important;
}

body.admin-bar:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom {
        top: 46px !important;
    }
}

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

/* Keep header below WordPress admin bar when logged in */
.admin-bar .header-custom {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .header-custom {
        top: 46px;
    }
}

.header-custom.scrolled {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Left teal panel with circuit-board pattern */
.header-custom::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--hc-split);
    background-color: var(--hc-teal-dark);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5'%3E%3Cpath d='M0 20h40l15 15h60'/%3E%3Cpath d='M0 70h70l12-12h50l10 10h40'/%3E%3Cpath d='M150 0v25l20 20v45'/%3E%3Cpath d='M200 0v35h40'/%3E%3Cpath d='M95 90V65'/%3E%3Ccircle cx='115' cy='35' r='4'/%3E%3Ccircle cx='182' cy='68' r='4'/%3E%3Ccircle cx='95' cy='62' r='3'/%3E%3Crect x='20' y='35' width='14' height='14' rx='2'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, var(--hc-teal-dark) 0%, var(--hc-teal) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 240px 90px, 100% 100%;
    z-index: 0;
}

/* Right white panel with subtle swirl pattern */
.header-custom::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--hc-split);
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90' viewBox='0 0 360 90'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.025' stroke-width='6'%3E%3Cpath d='M20 -10c40 30 20 70 60 110'/%3E%3Cpath d='M60 -10c50 35 10 70 70 110'/%3E%3Cpath d='M170 -10c-30 40 40 60 10 110'/%3E%3Cpath d='M230 -10c40 25 -10 75 40 110'/%3E%3Cpath d='M300 -10c-25 35 45 55 20 110'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 360px 90px;
    z-index: 0;
}

/* ============================================================
   4. HEADER INNER LAYOUT (ALIGNED TO SITE GRID)
   ============================================================ */

/* Container: perfectly matches the site's max width and side margins */
.header-custom-container {
    position: relative;
    z-index: 1;
    max-width: var(--site-max-width);
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

.header-custom-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    width: 100%;
}

/* Brand: Logo aligns flush with the left boundary of the container */
.header-custom-brand {
    display: flex;
    align-items: center;
    padding-left: 0;
    flex-shrink: 0;
}

.header-custom-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.header-custom-logo-link img,
.header-custom-brand .custom-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
}

/* Fallback text logo */
.header-custom-logo-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hc-white);
}

.header-custom-logo-icon {
    width: 30px;
    height: 44px;
}

.header-custom-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.header-custom-logo-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--hc-white);
}

.header-custom-logo-subtitle {
    margin-top: 3px;
    font-size: 7.5px;
    font-weight: 500;
    letter-spacing: 2.6px;
    color: var(--hc-white);
    text-align: right;
}

/* ============================================================
   5. NAVIGATION MENU (ALIGNED TO RIGHT BOUNDARY)
   ============================================================ */

.header-custom-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 0;
}

.header-custom-contact-cta {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-left: clamp(20px, 2.8vw, 55px);
    padding: 0 18px;
    border-radius: 999px;
    background: #b4552f;
    color: #fff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.header-custom-contact-cta:hover,
.header-custom-contact-cta:focus-visible {
    transform: translateY(-1px);
    background: #c45c32;
    color: #fff;
}

.header-custom-contact-cta svg {
    display: block;
    width: 14px;
    height: 14px;
}

.header-custom-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.8vw, 55px);
}

.header-custom-menu>li {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.header-custom-menu>li>a {
    position: relative;
    display: inline-block;
    padding: 15px 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 500;
    color: var(--hc-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.header-custom-menu>li>a:hover,
.header-custom-menu>li>a:focus-visible {
    color: var(--hc-copper);
}

/* Active page link styling */
.header-custom-menu>li.current-menu-item>a,
.header-custom-menu>li.current_page_item>a,
.header-custom-menu>li.current-menu-ancestor>a {
    color: var(--hc-copper);
    font-weight: 600;
}

.header-custom-menu>li>a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 100%;
    height: 2px;
    background: var(--hc-copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.header-custom-menu>li.current-menu-item>a::after,
.header-custom-menu>li.current_page_item>a::after,
.header-custom-menu>li.current-menu-ancestor>a::after,
.header-custom-menu>li>a:hover::after {
    transform: scaleX(1);
}

/* ============================================================
   6. MOBILE HAMBURGER BUTTON
   ============================================================ */

.header-custom-hamburger {
    display: none;
    margin-left: auto;
    align-self: center;
    margin-right: 0;
    padding: 8px 0 8px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 10001;
}

.header-custom-hamburger-bar {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--hc-white);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.header-custom-hamburger.active .header-custom-hamburger-bar {
    background: #262626;
}

.header-custom-hamburger.active .header-custom-hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.header-custom-hamburger.active .header-custom-hamburger-bar:nth-child(2) {
    opacity: 0;
}

.header-custom-hamburger.active .header-custom-hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   7. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet (max 1200px) */
@media (max-width: 1200px) {
    .header-custom-brand {
        padding-left: 0;
    }

    .header-custom-menu>li>a {
        font-size: 16px;
    }
}

/* Mobile (max 900px) */
@media (max-width: 900px) {
    :root {
        --hc-split: 100%;
        --hc-height: 72px;
    }

    .header-custom {
        overflow: visible;
    }

    .header-custom::after {
        display: none;
    }

    .header-custom-brand {
        width: auto;
        padding-left: 0;
    }

    .header-custom-logo-link img,
    .header-custom-brand .custom-logo {
        height: 42px;
    }

    .header-custom-hamburger {
        display: flex;
        margin-right: 0;
    }

    .header-custom-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        padding: 90px 30px 40px;
        background: var(--hc-white);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.35s ease;
        z-index: 10000;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-custom-nav.open {
        right: 0;
    }

    .header-custom-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .header-custom-menu>li>a {
        padding: 10px 0;
        font-size: 17px;
    }

    .header-custom-contact-cta {
        align-self: flex-start;
        margin: 22px 0 0;
    }

    .header-custom-menu>li>a::after {
        bottom: 4px;
    }
}

/* Navigation color over the homepage hero */
@media (max-width: 991px) {

    .header-custom-menu>li>a,
    .header-custom-menu>li>a:hover,
    .header-custom-menu>li>a:focus-visible,
    .header-custom-menu>li.current-menu-item>a,
    .header-custom-menu>li.current_page_item>a,
    .header-custom-menu>li.current-menu-ancestor>a {
        color: #fff !important;
    }
}

@media (max-width: 900px) {
    .header-custom-nav {
        background: #08394a !important;
    }
}

/* Keep the hamburger visible on the white header used by inner pages. */
@media (max-width: 900px) {
    body:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom-hamburger-bar,
    body:not(.home):not(.custom-home-page):not(.page-template-custom-home) .header-custom-hamburger.active .header-custom-hamburger-bar {
        background: #b4552f;
    }
}