/*
Theme Name: AviadaLabs
Author: AviadaLabs
Description: AviadaLabs theme. Based on BlankSlate 2024.2 (Bryan Hadaway).
Version: 2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate
*/

:root {
    --canvas: #000000;
    --surface-1: #15181e;
    --surface-2: #1f232b;
    --surface-3: #3b3d45;
    --hairline: rgba(178, 182, 189, 0.1);
    --hairline-strong: #3b3d45;
    --ink: #ffffff;
    --ink-muted: #b2b6bd;
    --ink-subtle: #656a76;
    --accent-blue: #2b89ff;
    --visited: #a737ff;

    --terraform: #7b42bc;
    --vault: #ffcf25;
    --waypoint: #14c6cb;
    --vagrant: #1868f2;
    --nomad: #00ca8e;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xxl: 24px;
    --section: 96px;

    --font:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", helvetica,
        arial, sans-serif;

    --bs-body-font-family: var(--font);
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--canvas);
    --bs-body-color: var(--ink);
    --bs-link-color-rgb: 43, 137, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    color: var(--ink);
    font-weight: 600;
}
h1,
.display-xl {
    font-size: clamp(2.5rem, 6.5vw, 5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.031em;
}
h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.028em;
}
h3 {
    font-size: 1.375rem;
    line-height: 1.18;
    letter-spacing: -0.018em;
}
p {
    text-wrap: pretty;
}
h1,
h2,
h3 {
    text-wrap: balance;
}

a {
    text-underline-offset: 3px;
}
a:visited {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.skip-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--canvas);
    border-radius: var(--r-md);
}

/* Eyebrow: mandatory above every section */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.23;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}
.lead,
.is-style-lead {
    font-size: 1.125rem;
    line-height: 1.69;
    color: var(--ink-muted);
    max-width: 40rem;
}

/* Buttons: white primary, charcoal secondary (core "Outline" style) */
.wp-block-button__link,
.btn-primary-ds {
    display: inline-block;
    background: var(--ink);
    color: var(--canvas);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.29;
    padding: 12px 18px;
    min-height: 40px;
    border: 1px solid var(--ink);
    border-radius: var(--r-md);
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:visited,
.btn-primary-ds:hover,
.btn-primary-ds:visited {
    color: var(--canvas);
}
.wp-block-button__link:hover,
.btn-primary-ds:hover {
    background: var(--ink-muted);
    border-color: var(--ink-muted);
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--hairline-strong);
    padding: 12px 18px; /* core's outline style adds its own padding and a 2px border */
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--surface-3);
}
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
}

/* Sections */
.section {
    padding-block: var(--section);
}
.section + .section {
    border-top: 1px solid var(--hairline);
}
.section-surface {
    background: var(--surface-1);
}
.section-head {
    max-width: 48rem;
    margin-bottom: 3rem;
}
@media (max-width: 767px) {
    :root {
        --section: 64px;
    }
}

/* Hero */
.hero {
    padding-block: calc(var(--section) * 1.25) var(--section);
}
.hero h1 {
    max-width: 14ch;
    margin-bottom: 1.5rem;
}

/* Feature cards: 3-up, 2-up, 1-up */
.cards.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.cards > .wp-block-column {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px;
}
.cards > .wp-block-column p:last-child {
    margin-bottom: 0;
}
.cards h3 {
    margin-bottom: 0.75rem;
}
.cards p {
    color: var(--ink-muted);
}
@media (max-width: 1023px) {
    .cards.wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .cards.wp-block-columns {
        grid-template-columns: 1fr;
    }
}

/* Services: one accent per service, never two in one card */
.service {
    --accent: var(--ink);
    border-top: 1px solid var(--hairline);
    padding-block: 48px;
    gap: 32px;
}
.service:last-child {
    padding-bottom: 0;
}
.service .eyebrow {
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}
.service .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
}
.service h3 {
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    letter-spacing: -0.021em;
}
.service p {
    color: var(--ink-muted);
}
.service ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.service li {
    padding-block: 10px;
    border-bottom: 1px solid var(--hairline);
}
.service li:last-child {
    border-bottom: 0;
}
.service a {
    color: var(--accent);
}
.service a:hover {
    color: var(--ink);
}
.accent-waypoint {
    --accent: var(--waypoint);
}
.accent-vault {
    --accent: var(--vault);
}
.accent-nomad {
    --accent: var(--nomad);
}
.accent-vagrant {
    --accent: #5b95ff;
} /* vagrant blue lifted for AA contrast on black */

/* Client logo marquee: pure CSS, content duplicated once in the editor */
.logo-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
}
.logo-track > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* one set (logos + gaps) must be wider than the 1296px container or a blank gap shows before the loop restarts.
       7 logos at 96px = ~1370px. Removing logos? Raise the gap or add a third copy and translate by -33.333%. */
    --logo-gap: 96px;
    gap: var(--logo-gap);
    width: max-content;
    animation: marquee 40s linear infinite;
}
.logo-marquee:hover .wp-block-group__inner-container {
    animation-play-state: paused;
}
.logo-track figure {
    margin: 0;
    flex: none;
}
.logo-track img {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}
@keyframes marquee {
    to {
        transform: translateX(calc(-50% - var(--logo-gap) / 2));
    }
}
@media (prefers-reduced-motion: reduce) {
    .logo-track > .wp-block-group__inner-container {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
    }
    .logo-track .is-duplicate {
        display: none;
    }
}

/* Testimonials */
.testimonials.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
@media (max-width: 767px) {
    .testimonials.wp-block-columns {
        grid-template-columns: 1fr;
    }
}
.wp-block-quote {
    margin: 0;
    height: 100%;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}
.wp-block-quote p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
}
.wp-block-quote cite {
    font-style: normal;
    font-size: 0.875rem;
    color: var(--ink-muted);
}
.wp-block-quote cite strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

/* WillDom: identity surface in Terraform purple, the only purple on the page */
.willdom-card {
    background: var(--terraform);
    border-radius: var(--r-xxl);
    padding: 48px;
}
.willdom-card .eyebrow,
.willdom-card p {
    color: rgba(255, 255, 255, 0.85);
}
.willdom-card p {
    max-width: 44rem;
    font-size: 1.125rem;
    line-height: 1.69;
}
.willdom-card .wp-block-button__link {
    background: var(--ink);
    color: #3a1d5c;
    border-color: var(--ink);
}
.willdom-card .wp-block-button__link:hover {
    background: #ece4f6;
    border-color: #ece4f6;
}

/* CTA banner */
.cta-banner {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xxl);
    padding: 48px;
}
.cta-banner p {
    color: var(--ink-muted);
    font-size: 1.25rem;
    line-height: 1.35;
}
@media (max-width: 767px) {
    .willdom-card,
    .cta-banner {
        padding: 32px 24px;
    }
}

/* Header */
#header {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
}
#header .navbar {
    min-height: 64px;
}
#header .navbar-brand img {
    height: 36px;
    width: auto;
}
#header .nav-link {
    font-size: 0.875rem;
    color: var(--ink-muted);
    padding-inline: 12px !important;
}
#header .nav-link:hover,
#header .nav-link:focus-visible {
    color: var(--ink);
}
#header .navbar-toggler {
    border-color: var(--hairline-strong);
}
@media (max-width: 991px) {
    #header .navbar-collapse {
        padding-block: 16px;
    }
    #header .nav-link {
        padding-block: 12px;
    }
}

/* Footer */
#footer {
    background: var(--canvas);
    color: var(--ink-muted);
    font-size: 0.875rem;
    border-top: 1px solid var(--hairline);
}
#footer a {
    color: var(--ink-muted);
}
#footer a:hover {
    color: var(--ink);
}
#footer .nav-link {
    padding-block: 6px;
}
#footer .footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}
.awards {
    border-top: 1px solid var(--hairline);
}
.awards .gptw span {
    max-width: 110px;
    color: var(--ink-subtle);
}

/* Inner pages (Contact, Privacy) */
.page-article {
    max-width: 52rem;
    padding-block: var(--section);
}
.page-article .entry-title {
    margin-bottom: 2rem;
}
.page-article .entry-content p,
.page-article .entry-content li {
    color: var(--ink-muted);
    line-height: 1.71;
}
.page-article .entry-content h2 {
    font-size: 1.75rem;
    letter-spacing: -0.021em;
    margin-block: 2.5rem 1rem;
}
.page-article .entry-content h3 {
    margin-block: 2rem 0.75rem;
}
.page-article .entry-content a {
    color: var(--accent-blue);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* Logos that ship on their own colored box (Spin, Shure): keep the box, drop the color */
.logo-track .is-boxed img {
    filter: grayscale(1) contrast(1.1);
    border-radius: var(--r-sm);
    opacity: 0.85;
}

/* ===== Section backgrounds ===== */
.hero,
#approach,
#testimonials,
.willdom-card,
.cta-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Hero: navy core gradient + animated network on the right */
.hero {
    background:
        radial-gradient(
            ellipse 70% 80% at 85% 10%,
            rgba(16, 26, 89, 0.95),
            transparent 70%
        ),
        radial-gradient(
            ellipse 40% 50% at 70% 60%,
            rgba(43, 137, 255, 0.12),
            transparent 70%
        ),
        var(--canvas);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 40%;
    z-index: -1;
    background: url("img/network.svg") center / contain no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
    mask-image: linear-gradient(to right, transparent, #000 35%);
    animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-2%, 2%, 0) scale(1.04);
    }
}
@media (max-width: 767px) {
    /* text needs the whole width on phones: network goes faint behind it */
    .hero::before {
        inset: 0;
        opacity: 0.35;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Approach: quiet dot grid fading out from the heading, cards lift one step */
#approach::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
            circle,
            rgba(178, 182, 189, 0.18) 1px,
            transparent 1.5px
        )
        0 0 / 24px 24px;
    -webkit-mask-image: radial-gradient(
        ellipse 60% 70% at 15% 20%,
        #000,
        transparent 75%
    );
    mask-image: radial-gradient(
        ellipse 60% 70% at 15% 20%,
        #000,
        transparent 75%
    );
}
#approach .cards > .wp-block-column {
    background: var(--surface-1);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}
#approach .cards > .wp-block-column:hover {
    background: var(--surface-2);
    border-color: var(--hairline-strong);
}

/* Services: the row's own accent glows in only while it's hovered/focused,
   so at rest no two product colors compete on screen */
.service {
    position: relative;
    isolation: isolate;
}
#services {
    overflow-x: clip;
} /* glow bleeds past the container gutter */
.service::before {
    content: "";
    position: absolute;
    inset: 0 -24px;
    z-index: -1;
    border-radius: var(--r-lg);
    background: radial-gradient(
        ellipse 50% 90% at 0% 50%,
        color-mix(in srgb, var(--accent) 16%, transparent),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.service:hover::before,
.service:focus-within::before {
    opacity: 1;
}

/* Clients: one tone step up, a band rather than a section */
#clients {
    background: var(--surface-1);
    padding-block: 56px;
}
#clients,
#clients + .section {
    border-top: 0;
}

/* Testimonials: spotlight behind the quotes, quotes sit on surface-2 */
#testimonials {
    background:
        radial-gradient(
            ellipse 60% 55% at 50% 65%,
            var(--surface-1),
            transparent 75%
        ),
        var(--canvas);
}
#testimonials .wp-block-quote {
    background: var(--surface-2);
}

/* WillDom: Terraform product card, chromatic gradient + orbiting ecosystem */
.willdom-card {
    background:
        radial-gradient(
            ellipse 60% 90% at 100% 0%,
            rgba(145, 28, 237, 0.85),
            transparent 70%
        ),
        linear-gradient(135deg, var(--terraform), #4c2477);
}
.willdom-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 420px;
    aspect-ratio: 1;
    right: -110px;
    top: 50%;
    translate: 0 -50%;
    background: url("img/orbit.svg") center / contain no-repeat;
    opacity: 0.8;
}
.willdom-card > * {
    max-width: 44rem;
}
@media (max-width: 767px) {
    .willdom-card::before {
        width: 300px;
        right: -150px;
        top: 24px;
        translate: none;
        opacity: 0.4;
    }
}

/* Contact: closes on the hero's network, mirrored, on navy */
.cta-banner {
    background:
        radial-gradient(
            ellipse 70% 100% at 0% 100%,
            rgba(16, 26, 89, 0.95),
            transparent 70%
        ),
        var(--surface-1);
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: -10% -5% -10% 50%;
    z-index: -1;
    background: url("img/network.svg") center / contain no-repeat;
    transform: scaleX(-1);
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 40%);
    mask-image: linear-gradient(to left, transparent, #000 40%);
}
.cta-banner > * {
    position: relative;
    max-width: 40rem;
}
@media (max-width: 767px) {
    .cta-banner::before {
        inset: 0;
        opacity: 0.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before {
        animation: none;
    }
}

/* Award badges: 44px tall overall (padding included) to match the visible Clutch badge, not its 55px iframe */
.awards img {
    height: 44px;
    width: auto;
    box-sizing: border-box;
}