/*
 * Toqsoft shared page design system
 * ----------------------------------
 * This file is intentionally loaded after page styles. It owns the recurring
 * visual language; page stylesheets remain responsible for unique artwork,
 * diagrams and exceptional layouts.
 */

:root {
    --tq-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --tq-navy: #071f46;
    --tq-blue: #0668e8;
    --tq-blue-dark: #084bbd;
    --tq-cyan: #27b7f3;
    --tq-ink: #102a50;
    --tq-copy: #53657b;
    --tq-muted: #60718b;
    --tq-line: #d7e3ee;
    --tq-soft: #f4f8fc;
    --tq-white: #fff;
    --tq-container: 1180px;
    --tq-gutter: clamp(20px, 6vw, 40px);
    --tq-section-space: clamp(76px, 8vw, 110px);
    --tq-hero-title: clamp(47px, 5.35vw, 74px);
    --tq-section-title: clamp(36px, 4.25vw, 58px);
    --tq-radius: 10px;
    --tq-shadow: 0 18px 52px rgba(11, 36, 64, .11);
    --tq-action-shadow: 0 12px 27px rgba(18, 107, 255, .21);
}

body,
body button,
body input,
body select,
body textarea {
    font-family: var(--tq-font);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    font-family: var(--tq-font);
}

/*
 * Containers
 * Existing pages use descriptive prefixes (az-wrap, bpa-wrap, etc.). This
 * common contract gives every page the same maximum width and fluid gutter.
 */
main :is(
    .page-shell,
    [class$="-wrap"],
    [class*="-wrap "],
    .contact-shell,
    .support-shell
) {
    width: min(var(--tq-container), calc(100% - (var(--tq-gutter) * 2)));
    margin-inline: auto;
}

/*
 * Eyebrows
 */
main :is(
    .page-eyebrow,
    .eyebrow,
    [class$="-eyebrow"],
    [class*="-eyebrow "],
    .contact-kicker,
    .support-kicker
) {
    color: var(--tq-blue);
    font-family: var(--tq-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/*
 * Hero headings and introductions
 * The selector deliberately excludes Home's carousel (.hero/.slide), whose
 * responsive artwork will be handled in the separate Home mobile pass.
 */
main :is(
    .page-hero,
    [class$="-hero"],
    [class*="-hero "]
) h1 {
    margin-top: 0;
    color: var(--tq-navy);
    font-family: var(--tq-font);
    font-size: var(--tq-hero-title);
    font-weight: 700;
    line-height: 1.025;
    letter-spacing: -.045em;
}

main :is(
    .page-lead,
    [class$="-lead"],
    [class*="-lead "]
) {
    color: var(--tq-copy);
    font-family: var(--tq-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
}

/*
 * Section rhythm and headings
 */
main :is(
    .page-section,
    [class$="-introduction"],
    [class$="-overview"],
    [class$="-opportunities"],
    [class$="-possibilities"],
    [class$="-services"],
    [class$="-capabilities"],
    [class$="-features"],
    [class$="-patterns"],
    [class$="-delivery"],
    [class$="-approach"],
    [class$="-fit"],
    [class$="-examples"],
    [class$="-insights"]
) {
    padding-block: var(--tq-section-space);
}

main :is(
    .section-title,
    [class$="-heading"],
    [class*="-heading "],
    [class$="-section-intro"],
    [class*="-section-intro "]
) h2,
main section > :is(
    .page-shell,
    [class$="-wrap"],
    [class*="-wrap "],
    .contact-shell,
    .support-shell
) > h2 {
    color: var(--tq-navy);
    font-family: var(--tq-font);
    font-size: var(--tq-section-title);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

/*
 * Shared actions
 */
main :is(
    .button,
    .btn,
    [class$="-button"],
    [class*="-button "]
) {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--tq-font);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease,
        border-color .2s ease, background-color .2s ease;
}

main :is(
    .button,
    .btn,
    [class$="-button"],
    [class*="-button "]
):hover {
    transform: translateY(-2px);
}

main :is(
    .button--primary,
    .primary,
    [class$="-button-primary"],
    [class*="-button-primary "]
) {
    color: var(--tq-white);
    background: linear-gradient(135deg, var(--tq-blue), var(--tq-blue-dark));
    box-shadow: var(--tq-action-shadow);
}

main :is(
    .button--white,
    [class$="-button-white"],
    [class*="-button-white "]
) {
    color: var(--tq-blue-dark);
    background: var(--tq-white);
}

/*
 * Reusable content surfaces. Unique visual cards keep their page-level
 * geometry; these rules align their typography and interaction language.
 */
main :is(
    .content-card,
    .story-card,
    .office-card,
    [class$="-card"],
    [class*="-card "]
) h3 {
    color: var(--tq-ink);
    font-family: var(--tq-font);
    font-weight: 700;
    line-height: 1.25;
}

main :is(
    .content-card,
    .story-card,
    .office-card,
    [class$="-card"],
    [class*="-card "]
) p {
    color: var(--tq-muted);
    line-height: 1.7;
}

main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--tq-cyan);
    outline-offset: 3px;
}

@media (max-width: 780px) {
    :root {
        --tq-gutter: 5vw;
        --tq-section-space: 78px;
        --tq-hero-title: clamp(42px, 11.7vw, 61px);
        --tq-section-title: clamp(33px, 9vw, 48px);
    }

    main :is(
        .page-actions,
        [class$="-actions"],
        [class*="-actions "]
    ) {
        align-items: flex-start;
        flex-direction: column;
    }

    main :is(
        .button,
        .btn,
        [class$="-button"],
        [class*="-button "]
    ) {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    :root {
        --tq-gutter: 20px;
        --tq-section-space: 68px;
        --tq-hero-title: clamp(38px, 11.5vw, 52px);
        --tq-section-title: clamp(31px, 9vw, 43px);
    }

    main :is(
        .page-lead,
        [class$="-lead"],
        [class*="-lead "]
    ) {
        font-size: 16px;
    }
}

/* Shared responsive image treatment for Company hero artwork. */
.company-hero-picture {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.company-hero-picture picture {
    display: block;
    width: 100%;
}

.company-hero-picture img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

@media (max-width: 780px) {
    .company-hero-picture {
        margin-top: 2rem;
    }

    .company-hero-picture img {
        max-width: 620px;
    }
}

@media (max-width: 560px) {
    .company-hero-picture {
        margin-top: 1.5rem;
    }
}

/* Shared responsive image treatment for Solutions hero artwork. */
.solution-hero-image {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    box-shadow: none !important;
}

.solution-hero-image::before,
.solution-hero-image::after {
    display: none !important;
}

.solution-hero-image picture {
    display: block;
    width: 100%;
}

.solution-hero-image img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

@media (max-width: 780px) {
    .solution-hero-image {
        margin: 2rem auto 0 !important;
    }

    .solution-hero-image img {
        max-width: 620px;
    }
}

@media (max-width: 560px) {
    .solution-hero-image {
        margin-top: 1.5rem !important;
    }
}

/* Premium Solutions hero sizing and Case Studies-aligned vertical rhythm. */
@media (min-width: 1051px) {
    .tm-hero-grid,
    .es-hero-grid,
    .ea-hero-grid,
    .bma-hero-grid,
    .bpa-hero-grid,
    .ptl-hero-grid,
    .pfs-hero-grid,
    .ops-hero-grid,
    .commerce-hero-grid,
    .booking-hero-grid,
    .ecosystem-hero-grid {
        align-items: start !important;
        padding-top: 44px !important;
    }

    .tm-hero-copy,
    .es-hero-copy,
    .ea-hero-copy,
    .bma-hero-copy,
    .bpa-hero-copy,
    .ptl-hero-copy,
    .pfs-hero-copy,
    .ops-hero-copy,
    .commerce-hero-copy,
    .booking-hero-copy,
    .ecosystem-hero-copy {
        align-self: start !important;
    }

    .solution-hero-image {
        align-self: center !important;
    }

    .solution-hero-image picture {
        width: 150% !important;
        max-width: none !important;
        margin-left: -15% !important;
        margin-right: 0 !important;
    }

    .solution-hero-image img {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 1050px) {
    .solution-hero-image picture {
        width: 100% !important;
        max-width: 680px !important;
        margin-inline: auto !important;
    }
}