/*
 * AW Ventures — motion / surface / CTA primitives.
 *
 * Pure hand-written CSS, zero framework. Classes are scoped under `.aw-*` so
 * they don't collide with core blocks, Elementor, or any other plugin output.
 * Each primitive mirrors a specific behavior in the React mockup at
 * 001.PROJECTBRIEF/300.MOCKUP.IN.CODE/.
 *
 * Specificity note: this site runs Elementor Pro with a "Kit" (post ID 8)
 * that injects bare element selectors on every page:
 *   body { font-family: "Montserrat"; font-size: 18px; text-transform: capitalize; }
 *   h1   { font-family: "Montserrat"; font-size: 65px; text-transform: capitalize; }
 *   h2   { font-family: "Montserrat"; font-size: 50px; text-transform: uppercase;  }
 *   ...h3-h6 similar.
 * Our theme.json-derived rules match that specificity (also bare element
 * selectors) and Elementor Kit wins when its CSS loads later. The override
 * block at the bottom of this file uses the body class
 * `.wp-theme-aw-ventures-001` as a prefix, which beats Elementor's rules by
 * one specificity class and restores our Inter + sizing + no-transforms.
 */

:root {
    --aw-bg:            #08090a;
    --aw-bg-elev-1:     #0c0e11;
    --aw-bg-elev-2:     #121419;
    --aw-border:        rgba(255, 255, 255, 0.08);
    --aw-border-soft:   rgba(255, 255, 255, 0.04);
    --aw-border-strong: rgba(255, 255, 255, 0.15);

    --aw-white:        #ffffff;
    --aw-cream:        #FFFDF0;
    --aw-zinc-400:     #a1a1aa;
    --aw-zinc-500:     #71717a;
    --aw-zinc-700:     #3f3f46;

    --aw-navy-dark:    #001840;
    --aw-navy-mid:     #102A71;
    --aw-gold:         #F5C400;
    --aw-gold-light:   #FFDC5F;

    --aw-gradient-cta-blue: linear-gradient(135deg, #0044FF 0%, #0088FF 40%, #00FFFF 100%);
    --aw-gradient-cta-red:  linear-gradient(135deg, #FF0000 0%, #FF4400 50%, #FF8800 100%);
    --aw-gradient-text:     linear-gradient(to bottom right, #ffffff 30%, rgba(255,255,255,0.5));
    --aw-gradient-gold:     linear-gradient(135deg, #FFDC5F 0%, #F5C400 100%);

    --aw-shadow-deep: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
    --aw-shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.5);

    --aw-ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --aw-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------------- */
/* Typography helpers                                                        */
/* ------------------------------------------------------------------------- */

.aw-eyebrow {
    font-size: 0.6875rem;       /* 11px — matches mockup "THE METHODOLOGY" label */
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--aw-gold);
    margin: 0 0 1rem;
}

.aw-eyebrow-sm {
    font-size: 0.625rem;        /* 10px — column headings inside mega menu */
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--aw-gold);
}

.aw-gradient-text {
    background: var(--aw-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.aw-gold-accent {
    color: var(--aw-gold-light);
}

/* ------------------------------------------------------------------------- */
/* Surfaces                                                                  */
/* ------------------------------------------------------------------------- */

.aw-glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aw-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.aw-glass-strong {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--aw-border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.aw-grid-bg {
    background-image:
        linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
}

.aw-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aw-border);
    overflow: hidden;
    transition: border-color 220ms var(--aw-ease-out),
                transform 220ms var(--aw-ease-out);
}
.aw-card:hover {
    border-color: var(--aw-border-strong);
}

/* ------------------------------------------------------------------------- */
/* Buttons                                                                   */
/* ------------------------------------------------------------------------- */

.aw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: 0.25rem;     /* squared, "manly" — not pill */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--aw-white) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 250ms var(--aw-ease-out),
                box-shadow 250ms var(--aw-ease-out),
                background-position 400ms var(--aw-ease-out);
}

.aw-btn-primary {
    background: var(--aw-gradient-cta-blue);
    background-size: 200% 100%;
    background-position: left center;
    box-shadow: 0 0 20px rgba(0, 68, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.aw-btn-primary:hover {
    background-position: right center;
    box-shadow: 0 0 24px rgba(0, 255, 255, 0.45);
    transform: translateY(-1px);
}

.aw-btn-red {
    background: var(--aw-gradient-cta-red);
    background-size: 200% 100%;
    background-position: left center;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* Glow only on mouse-over / keyboard focus — no idle pulse. Applies to
     * both the hero "Tech Consultancy" button and the footer "Schedule a
     * Discovery Call" button since they share this class. */
}
.aw-btn-red:hover,
.aw-btn-red:focus-visible {
    background-position: right center;
    box-shadow:
        0 0 22px rgba(255, 68, 0, 0.55),
        0 0 42px rgba(255, 220, 95, 0.55);
    transform: translateY(-1px);
}

.aw-btn-ghost {
    background: transparent;
    border: 1px solid var(--aw-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.aw-btn-ghost:hover {
    border-color: var(--aw-gold);
    color: var(--aw-gold) !important;
}

@keyframes aw-red-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(255, 0, 0, 0.35),
            0 0 30px rgba(245, 196, 0, 0.35);
    }
    50% {
        box-shadow:
            0 0 22px rgba(255, 68, 0, 0.55),
            0 0 42px rgba(255, 220, 95, 0.55);
    }
}

/* ------------------------------------------------------------------------- */
/* Badges                                                                    */
/* ------------------------------------------------------------------------- */

.aw-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid var(--aw-border);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aw-zinc-400);
}
.aw-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--aw-gold);
    animation: aw-pulse 2.6s ease-in-out infinite;
}

@keyframes aw-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.35); }
}

/* ------------------------------------------------------------------------- */
/* Footer glow                                                               */
/* ------------------------------------------------------------------------- */

.aw-footer-glow-wrap {
    position: absolute;
    inset: auto 0 0 0;
    height: 400px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.aw-footer-glow-primary,
.aw-footer-glow-secondary {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(0, 68, 255, 0.8) 0%,
        rgba(0, 136, 255, 0.4) 25%,
        rgba(0, 255, 255, 0.15) 50%,
        transparent 75%);
    filter: blur(120px);
}

.aw-footer-glow-primary {
    bottom: -250px;
    width: 220%;
    height: 600px;
    animation: aw-footer-glow-pulse 12s ease-in-out infinite;
}

.aw-footer-glow-secondary {
    bottom: -200px;
    width: 180%;
    height: 500px;
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 255, 0.5) 0%,
        rgba(0, 136, 255, 0.2) 30%,
        transparent 60%);
    filter: blur(100px);
    animation: aw-footer-glow-secondary-pulse 18s ease-in-out infinite;
}

@keyframes aw-footer-glow-pulse {
    0%, 100% { opacity: 0.2;  transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.4;  transform: translateX(-50%) scale(1.15); }
}

@keyframes aw-footer-glow-secondary-pulse {
    0%, 100% { opacity: 0.1;  transform: translateX(-50%) scale(1.2) translateY(20px); }
    50%      { opacity: 0.25; transform: translateX(-50%) scale(1) translateY(0); }
}

/* ------------------------------------------------------------------------- */
/* Layout helpers                                                            */
/* ------------------------------------------------------------------------- */

.aw-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.aw-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    position: relative;
}

.aw-divider {
    height: 1px;
    background: var(--aw-border);
    border: 0;
    margin: 0;
}

.aw-dashed-divider {
    height: 0;
    border: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------------------- */
/* Hero perspective (used by hero pattern)                                   */
/* ------------------------------------------------------------------------- */

.aw-hero-perspective {
    perspective: 1000px;
}

.aw-hero-transform {
    transform: rotateX(15deg) scale(1.05);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------------- */
/* Utilities                                                                 */
/* ------------------------------------------------------------------------- */

.aw-no-scrollbar::-webkit-scrollbar { display: none; }
.aw-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.aw-selection::selection {
    background: var(--aw-navy-mid);
    color: var(--aw-white);
}

/* =========================================================================
 * SPECIFICITY OVERRIDES — beat Elementor Kit 8 + theme.json button styling.
 *
 * Elementor Kit 8 writes bare-element selectors (h1, h2, body, etc.) that
 * tie this site to Montserrat + uppercase / capitalize transforms. Prefixing
 * every rule below with `body.wp-theme-aw-ventures-001` (our theme's body
 * class) gives us one more class of specificity so we win cleanly without
 * needing !important on every property.
 *
 * theme.json's `elements.button` styling compiles to rules that hit both
 * `.wp-element-button` and any bare `<button>` via core button-block style
 * — that's what turned the mega-menu triggers into pill-shaped gradient
 * buttons. Resetting those here too.
 * ========================================================================= */

body.wp-theme-aw-ventures-001 {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.011em;
    text-transform: none;
    color: #e4e4e7;
    background-color: #08090a;
}

/* Headings — unify the voice: Inter, medium/500, tight, no transforms. */
body.wp-theme-aw-ventures-001 h1,
body.wp-theme-aw-ventures-001 h2,
body.wp-theme-aw-ventures-001 h3,
body.wp-theme-aw-ventures-001 h4,
body.wp-theme-aw-ventures-001 h5,
body.wp-theme-aw-ventures-001 h6 {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #ffffff;
    text-transform: none;
    letter-spacing: -0.018em;
    font-weight: 500;
    margin: 0 0 0.75rem;
    line-height: 1.1;
}

body.wp-theme-aw-ventures-001 h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4.25rem); line-height: 1.05; letter-spacing: -0.022em; }
body.wp-theme-aw-ventures-001 h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);  line-height: 1.1;  letter-spacing: -0.02em; }
body.wp-theme-aw-ventures-001 h3 { font-size: clamp(1.3rem, 1.1vw + 0.9rem, 1.75rem); line-height: 1.2; letter-spacing: -0.014em; }
body.wp-theme-aw-ventures-001 h4 { font-size: clamp(1.1rem, 0.5vw + 0.9rem, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; }
body.wp-theme-aw-ventures-001 h5 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
body.wp-theme-aw-ventures-001 h6 {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--aw-gold);
    line-height: 1.3;
}

body.wp-theme-aw-ventures-001 p {
    line-height: 1.6;
    color: #a1a1aa;
    margin: 0 0 1rem;
}
body.wp-theme-aw-ventures-001 p:last-child {
    margin-bottom: 0;
}

body.wp-theme-aw-ventures-001 a {
    color: var(--aw-gold);
    text-decoration: none;
}
body.wp-theme-aw-ventures-001 a:hover,
body.wp-theme-aw-ventures-001 a:focus-visible {
    color: var(--aw-gold-light);
}

/* Strong / em inherit color from their container — don't pick up Elementor's
 * primary #000 or the compiled WP element colors. */
body.wp-theme-aw-ventures-001 strong,
body.wp-theme-aw-ventures-001 em {
    color: inherit;
}

/* Mega-menu triggers — clear out every button-like surface so they render
 * as clean text links with the underline-on-hover we defined in
 * parts/header.html. Size matches mockup: text-[12px] / padding px-4. */
body.wp-theme-aw-ventures-001 .aw-header-nav-btn,
body.wp-theme-aw-ventures-001 button.aw-header-nav-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0.55rem;
    height: 100%;
    margin: 0;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8125rem;          /* 13px — fits 9 items + CTA inside the 1280 content column */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
    text-decoration: none;
}
/* Kill any previous ::after underline that old CSS might inject. */
body.wp-theme-aw-ventures-001 .aw-header-nav-btn::after,
body.wp-theme-aw-ventures-001 button.aw-header-nav-btn::after {
    display: none !important;
    content: none !important;
}
body.wp-theme-aw-ventures-001 .aw-header-nav-btn:hover,
body.wp-theme-aw-ventures-001 .aw-header-nav-btn:focus-visible,
body.wp-theme-aw-ventures-001 .aw-header-nav-btn.is-open {
    color: var(--aw-gold);
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Same for the burger, which WordPress/Elementor also likes to dress up. */
body.wp-theme-aw-ventures-001 .aw-header-burger {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Our real buttons (CTAs) — keep their aw-btn styling but override WP /
 * Elementor's pill-button base so the gradient shows and the text doesn't
 * get `text-transform: capitalize`d. */
body.wp-theme-aw-ventures-001 .aw-btn {
    text-transform: uppercase !important;
    letter-spacing: 0.18em;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 0.25rem !important;  /* squared-off per brand brief — not pill */
}
body.wp-theme-aw-ventures-001 .aw-btn-primary {
    background: var(--aw-gradient-cta-blue) !important;
    background-size: 200% 100%;
    background-position: left center;
}
body.wp-theme-aw-ventures-001 .aw-btn-primary:hover {
    background-position: right center;
}
body.wp-theme-aw-ventures-001 .aw-btn-red {
    background: var(--aw-gradient-cta-red) !important;
    background-size: 200% 100%;
    background-position: left center;
}
body.wp-theme-aw-ventures-001 .aw-btn-ghost {
    background: transparent !important;
    background-image: none !important;
}

/* Size variants. The base .aw-btn is a full pill — these modifiers override
 * radius and padding per the mockup:
 *   Header CONNECT -> rounded (4px)
 *   Footer CTA / newsletter buttons -> rounded-lg (8px)
 * Hero + agent CTAs keep the pill (no modifier needed). */
body.wp-theme-aw-ventures-001 .aw-btn--sm {
    padding: 0.6rem 1.5rem !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.15em !important;
    border-radius: 0.25rem !important;
}

/* Eyebrow labels — Elementor's text-transform: capitalize will otherwise
 * down-case our tracked uppercase markers like THE METHODOLOGY. */
body.wp-theme-aw-ventures-001 .aw-eyebrow,
body.wp-theme-aw-ventures-001 .aw-eyebrow-sm {
    text-transform: uppercase !important;
    letter-spacing: 0.4em;
    color: var(--aw-gold);
    font-weight: 700;
}
body.wp-theme-aw-ventures-001 .aw-eyebrow-sm {
    letter-spacing: 0.25em;
    font-weight: 800;
    font-size: 0.625rem;
}

/* Ensure our hero eyebrow badge keeps its pill shape and the footer / header
 * elements look the way we specced, ignoring button-block radius bleed. */
body.wp-theme-aw-ventures-001 .aw-badge {
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    color: #a1a1aa;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Stop Elementor Kit's default body `capitalize` transform from touching
 * any text inside our wrapper regions — already set at body level but repeat
 * on the main wrapper in case a plugin adds its own text-transform later. */
body.wp-theme-aw-ventures-001 .wp-site-blocks,
body.wp-theme-aw-ventures-001 .aw-main,
body.wp-theme-aw-ventures-001 main {
    text-transform: none;
    color: inherit;
}

/* Inline code + monospace blocks in the agent panel — keep the console look. */
body.wp-theme-aw-ventures-001 .aw-agent-lines,
body.wp-theme-aw-ventures-001 .aw-agent-panel code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: none;
    letter-spacing: 0;
}

/* WP core / theme-json button base — make sure core's compiled rules
 * don't paint our non-button elements. This only narrows the scope of
 * button styles to actual button uses, i.e. things that opted-in via
 * .wp-element-button or the aw-btn family. */
body.wp-theme-aw-ventures-001 button:not(.aw-btn):not(.wp-element-button):not(.aw-header-burger):not([class*="elementor"]) {
    font-family: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}