/* ==========================================================================
   Hossam X Studios — front-end audit fixes
   Loaded after main.css. Kept in its own file so the 37k-line generated
   main.css stays untouched and every override here is reviewable in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header navigation overflow
   The header's inner .container is capped at 1320px, so the nav column
   (col-xxl-6) is ~660px at every desktop width while the seven items need
   ~700px — "Careers" wrapped to a second row and doubled the header height.
   Trimming the per-item padding brings the row to ~600px and pins it to a
   single line.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .at-main-menu {
        padding: 5px 4px;
    }

    .at-main-menu nav > ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .at-main-menu nav > ul > li {
        flex: 0 0 auto;
    }

    .at-main-menu nav > ul > li > a {
        padding-left: 16px;
        padding-right: 16px;
        white-space: nowrap;
    }

    /* The dropdown caret is absolutely positioned against the link, so the
       trimmed padding has to leave it room. */
    .at-main-menu nav > ul > li.has-dropdown > a {
        padding-right: 26px;
    }

    .at-main-menu nav > ul > li.has-dropdown > a::after {
        right: 10px;
    }
}

/* Below 1400px the middle column is only col-lg-7; let the logo and the
   right-hand controls size to their content and give the rest to the nav. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .at-header-area > .container > .row {
        flex-wrap: nowrap;
    }

    .at-header-area > .container > .row > * {
        flex: 0 0 auto;
        width: auto;
    }

    .at-header-area > .container > .row > *:nth-child(2) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   2. Dark-mode contrast
   -------------------------------------------------------------------------- */

/* The dark neutral scale runs light-to-dark from 0 → 300 and then flips to
   text weights at 500 (#B3B3B3) and 800 (#EAEAEA). --at-neutral-dark-700 was
   left at #535353, breaking that progression: body copy using it rendered at
   2.39:1 on the #141414 surface. Restored to its place between 500 and 800. */
[data-bs-theme=dark] {
    --at-neutral-dark-700: #D6D6D6;
}

/* White on the brand orange is 3.7:1 — under AA for this 10px badge. Darkening
   the badge (only the badge) to #D13C0C takes it to 4.8:1 and keeps the
   white-on-orange look. */
.card_case__studies-featured-tag {
    background: #D13C0C;
}

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.hxs-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
    background: #0f0f0f;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transform: translateY(-120%);
    transition: transform 0.2s ease;
}

.hxs-skip-link:focus {
    transform: translateY(0);
    color: #ffffff;
    outline: 2px solid #F0460E;
    outline-offset: 2px;
}

/* <main> is focused programmatically by the skip link; never show a ring for it. */
main[tabindex="-1"]:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   4. Icon buttons
   Several close controls were <span>s (unreachable by keyboard) and are now
   <button>s — strip the UA chrome so they look identical.
   -------------------------------------------------------------------------- */
.hxs-icon-btn {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Search results page
   -------------------------------------------------------------------------- */
.hxs-search__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    max-width: 720px;
}

.hxs-search__input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 14px 20px;
    border: 1px solid var(--at-neutral-200);
    border-radius: 999px;
    background: var(--at-neutral-0);
    color: var(--at-neutral-900);
    font-family: var(--at-ff-body);
    font-size: 16px;
    line-height: 1.4;
}

.hxs-search__input:focus {
    outline: 2px solid var(--at-theme-primary);
    outline-offset: 2px;
    border-color: transparent;
}

.hxs-search__count {
    color: var(--at-neutral-500);
    font-weight: 500;
}

.hxs-search__result {
    border-top: 1px solid var(--at-neutral-100);
}

.hxs-search__result:last-child {
    border-bottom: 1px solid var(--at-neutral-100);
}

.hxs-search__result-link {
    display: block;
    padding: 24px 0;
    color: inherit;
    transition: opacity 0.2s ease;
}

.hxs-search__result-link:hover,
.hxs-search__result-link:focus-visible {
    opacity: 0.68;
}

.hxs-search__result-type {
    display: block;
    margin-bottom: 8px;
    color: var(--at-theme-primary);
    font-family: var(--at-ff-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hxs-search__result-title {
    display: block;
    margin-bottom: 6px;
    color: var(--at-neutral-950);
    font-family: var(--at-ff-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.hxs-search__result-excerpt {
    display: block;
    max-width: 70ch;
    color: var(--at-neutral-700);
    font-size: 16px;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   6. Legal / long-form content pages
   -------------------------------------------------------------------------- */
.hxs-prose {
    max-width: 72ch;
}

.hxs-prose h2 {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.hxs-prose h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
}

.hxs-prose p,
.hxs-prose li {
    color: var(--at-neutral-700);
    font-size: 16px;
    line-height: 1.7;
}

.hxs-prose p {
    margin-bottom: 16px;
}

.hxs-prose ul {
    margin: 0 0 16px 0;
    padding-left: 22px;
}

.hxs-prose li {
    margin-bottom: 8px;
}

.hxs-prose a {
    color: var(--at-theme-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Error pages
   -------------------------------------------------------------------------- */
.hxs-error {
    display: flex;
    align-items: center;
    min-height: 62vh;
    padding: 120px 0;
}

.hxs-error__code {
    display: block;
    margin-bottom: 16px;
    color: var(--at-theme-primary);
    font-family: var(--at-ff-heading);
    font-size: clamp(72px, 14vw, 180px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.hxs-error__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   9. Ripple image rendered twice ("Trusted by ambitious brands" logo)
   main.js copies the <img> onto .ripple-image as a CSS background, then hands
   the element to jquery.ripples. The plugin READS that background and re-draws
   the same image inside a <canvas> it appends — it never clears the CSS copy.
   Both stayed painted, at different scales, so the logo appeared twice.
   Clear the CSS copy only once the canvas actually exists, so browsers without
   WebGL (where the plugin bails and no canvas is added) still show the
   background copy and are left with exactly one logo either way.
   -------------------------------------------------------------------------- */
.ripple-image:has(> canvas) {
    background-image: none !important;
}

/* canvas is inline by default; the baseline gap left a sliver of the container
   showing below it. */
.ripple-image > canvas {
    display: block;
}

/* --------------------------------------------------------------------------
   10. Newsletter feedback
   -------------------------------------------------------------------------- */
.footer-11__form-status {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-11__form-status--ok {
    color: #7BD88F;
}

.footer-11__form-status--error {
    color: #FF9B7A;
}