/* =============================================================================
   Aamal Aljoud — Contact (CONTACT-P2)
   -----------------------------------------------------------------------------
   Light and spacious: the ways to reach the company are stated once across the
   top, the branches say only where they are, and the form is the weight of the
   page rather than a grey box beside a floating card.

   Scope: loaded by /contact-us only.
   ========================================================================== */

/* ============================================================== 0. MOTION = */

/*
 * Reveals are opt in — the marker class is set by a one line script in the
 * head, so with JavaScript disabled nothing is ever hidden. Reduced motion
 * opts out again, and both paths end at the same painted result.
 */
.aj-motion [data-aj-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--aj-ease), transform 620ms var(--aj-ease);
}

.aj-motion [data-aj-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aj-motion [data-aj-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================ 1. SHARED === */

.aj-ct-eyebrow {
    display: block;
    margin-block-end: var(--aj-space-2);
    color: var(--aj-accent);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
    letter-spacing: 0.08em;
}

.aj-ct-title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

.aj-ct-head {
    margin-block-end: var(--aj-space-8);
}

/* ================================================================ 2. HERO = */

.aj-ct-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem) clamp(1.75rem, 1rem + 3vw, 3rem);
    background: linear-gradient(180deg, var(--aj-surface-muted), var(--aj-page));
    border-block-end: 1px solid var(--aj-border);
}

.aj-ct-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -12%;
    inset-inline-end: -5%;
    z-index: -1;
    inline-size: clamp(240px, 30vw, 460px);
    block-size: clamp(240px, 30vw, 460px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.aj-ct-hero__copy {
    max-inline-size: 52rem;
}

.aj-ct-hero__copy .aj-breadcrumb {
    margin-block-end: var(--aj-space-4);
}

.aj-ct-hero__title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h1);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

.aj-ct-hero__lead {
    margin-block: var(--aj-space-4) 0;
    max-inline-size: 50ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-normal);
}

/* =========================================================== 3. CHANNELS = */

/*
 * Everything the company can be reached by, once. A branch never repeats any
 * of it, so the reader learns each number and address in exactly one place.
 */
.aj-ct-strip {
    padding-block: clamp(var(--aj-space-8), 3vw, var(--aj-space-12));
}

.aj-ct-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(var(--aj-space-4), 1.6vw, var(--aj-space-6));
}

.aj-ct-item {
    display: flex;
    align-items: flex-start;
    gap: var(--aj-space-4);
    padding: var(--aj-space-5);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-xs);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-ct-item:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

.aj-ct-item__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--aj-radius-md);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-ct-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-inline-size: 0;
}

.aj-ct-item__label {
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
}

.aj-ct-item__value {
    color: var(--aj-text);
    font-size: var(--aj-fs-body);
    font-weight: var(--aj-fw-medium);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.aj-ct-item__value:hover {
    color: var(--aj-accent);
}

.aj-ct-item__value--plain {
    color: var(--aj-text-secondary);
    font-weight: var(--aj-fw-regular);
    font-size: var(--aj-fs-sm);
    line-height: var(--aj-lh-snug);
}

.aj-ct-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-2);
    margin: var(--aj-space-1) 0 0;
    padding: 0;
    list-style: none;
}

.aj-ct-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    transition: var(--aj-transition);
}

.aj-ct-channel:hover {
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-ct-channel:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

/* =========================================================== 4. BRANCHES = */

.aj-ct-branches {
    padding-block: calc(var(--aj-section-y) * 0.8);
    background: var(--aj-surface-muted);
}

/*
 * Two branches sit as a pair, one fills the row on its own, and a third
 * arrives without anything here having to change.
 *
 * Each card keeps its own height: a branch whose link could not be resolved
 * has no map, and stretching it to match one that has would open a white gap
 * that reads as a broken preview.
 */
.aj-ct-branches__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: start;
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

.aj-ct-branches__grid[data-count="1"] {
    max-inline-size: 42rem;
}

.aj-ct-branch {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--aj-divider);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-xs);
    transition: transform var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease),
        border-color var(--aj-duration) var(--aj-ease);
}

.aj-ct-branch:hover {
    transform: translateY(-2px);
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

/*
 * The map leads the card and is the only thing in it with any size. It stays
 * hidden until the map reports itself drawn, so the card never holds space
 * for a preview that may not arrive.
 */
.aj-ct-branch__map {
    position: relative;
    overflow: hidden;
    block-size: clamp(240px, 18vw, 280px);
    background: var(--aj-surface-muted);
}

/* Mapbox stamps its own class on the container with position: relative, and
   its stylesheet arrives after this one — hence the extra parent */
.aj-ct-branch .aj-ct-branch__map {
    inline-size: 100%;
}

/* the controls, kept small and out of the way */
.aj-ct-branch__map .mapboxgl-ctrl-group {
    border-radius: var(--aj-radius-md);
    box-shadow: var(--aj-shadow-xs);
}

/*
 * Mapbox's logo and its attribution stay — the licence requires them and they
 * are never hidden, faded out or altered. They are only given the least busy
 * corners of a small card and the tightest margins that keep them readable:
 * the mark in the bottom inline-start corner, well clear of the zoom buttons
 * at the top, and the attribution as the compact ⓘ opposite it.
 */
.aj-ct-branch__map .mapboxgl-ctrl-bottom-left,
.aj-ct-branch__map .mapboxgl-ctrl-bottom-right {
    font-size: 10px;
}

.aj-ct-branch__map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
.aj-ct-branch__map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
    margin: 0 6px 6px;
}

/* the mark itself is untouched: only the room around it is */
.aj-ct-branch__map .mapboxgl-ctrl-logo {
    transform-origin: bottom left;
}

/*
 * The attribution reads left to right whatever the page direction, so the
 * copyright line is not scrambled when it is opened on an Arabic page.
 */
.aj-ct-branch__map .mapboxgl-ctrl-attrib {
    direction: ltr;
    background: rgba(255, 255, 255, 0.88);
    border-radius: var(--aj-radius-pill);
    color: var(--aj-text-secondary);
}

.aj-ct-branch__map .mapboxgl-ctrl-attrib a {
    color: var(--aj-text-secondary);
}

.aj-ct-branch__map .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
    padding-inline-end: 26px;
}

/* the ⓘ button: the same quiet disc as the rest of the card's controls */
.aj-ct-branch__map .mapboxgl-ctrl-attrib-button {
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: var(--aj-shadow-xs);
}

/*
 * The information bar: one compact line under the map — who, where, and the
 * way there — with a hairline of the accent joining it to the picture above.
 * That hairline is the card's only ornament.
 */
.aj-ct-branch__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-3) var(--aj-space-5);
    padding: var(--aj-space-5);
    border-block-start: 2px solid var(--aj-accent);
}

/* without a map the hairline would float with nothing above it */
.aj-ct-branch--plain .aj-ct-branch__body {
    border-block-start: 0;
    border-inline-start: 2px solid var(--aj-accent);
}

.aj-ct-branch__text {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-1);
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.aj-ct-branch__name {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-body-lg);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-snug);
}

.aj-ct-branch__address {
    display: flex;
    align-items: flex-start;
    gap: var(--aj-space-2);
    margin: 0;
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-sm);
    font-style: normal;
    line-height: var(--aj-lh-snug);
}

.aj-ct-branch__address .aj-icon {
    flex: none;
    margin-block-start: 0.1em;
    color: var(--aj-accent);
}

/*
 * The action is a small outlined pill rather than a line of underlined text:
 * clearly a control, and never wider than the words it holds.
 */
.aj-ct-branch__link {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: none;
    padding: var(--aj-space-2) var(--aj-space-4);
    border: 1px solid var(--aj-accent-border);
    border-radius: var(--aj-radius-pill);
    background: transparent;
    color: var(--aj-accent);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--aj-transition);
}

.aj-ct-branch__link:hover,
.aj-ct-branch:hover .aj-ct-branch__link {
    border-color: var(--aj-accent);
    background: var(--aj-accent-soft);
}

.aj-ct-branch__link:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .aj-ct-branch,
    .aj-ct-branch__link,
    .aj-ct-item {
        transition: none;
    }

    .aj-ct-branch:hover {
        transform: none;
    }
}

/*
 * The branch pin.
 *
 * A real pin rather than a dot: a steel blue body carrying a light disc with
 * the company's mark inside it, and a point underneath that sits exactly on
 * the coordinates. The mark is the SVG itself, painted through a mask, so it
 * is sharp at any pixel density and never stretched or cropped.
 */
.aj-ct-marker {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: var(--aj-accent-active);
    box-shadow: 0 4px 12px rgba(32, 36, 43, 0.3);
    cursor: default;
}

/* the point: drawn under the body, centred on the anchor */
.aj-ct-marker::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 0;
    margin-block-start: -6px;
    margin-inline-start: -7px;
    border-inline: 7px solid transparent;
    border-block-start: 12px solid var(--aj-accent-active);
    filter: drop-shadow(0 2px 2px rgba(32, 36, 43, 0.18));
}

/* the light disc the mark sits on */
.aj-ct-marker__mark {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background-color: var(--aj-surface);
}

/*
 * The mark itself, masked out of the disc so the artwork keeps its own shape
 * and only takes our colour. Without mask support the disc simply stays
 * plain, which still reads as a pin.
 */
@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-ct-marker__mark::before {
        content: "";
        position: absolute;
        inset: 7px;
        background-color: var(--aj-charcoal);
        -webkit-mask-image: var(--aj-marker-art);
        mask-image: var(--aj-marker-art);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* =============================================================== 5. FORM = */

.aj-ct-form-section {
    padding-block: var(--aj-section-y);
}

/*
 * The form leads; the words beside it only say what happens next. Nothing from
 * the strip above is repeated here.
 */
.aj-ct-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    align-items: start;
    gap: clamp(var(--aj-space-6), 3vw, var(--aj-space-12));
}

.aj-ct-form__aside {
    position: relative;
    isolation: isolate;
    padding-block-start: var(--aj-space-2);
}

.aj-ct-form__note {
    margin: var(--aj-space-4) 0 0;
    max-inline-size: 34ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-normal);
}

.aj-ct-form__motif {
    position: absolute;
    inset-block-end: -30%;
    inset-inline-start: -8%;
    z-index: -1;
    inline-size: clamp(180px, 18vw, 300px);
    block-size: clamp(180px, 18vw, 300px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

.aj-ct-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aj-space-5);
    padding: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-sm);
}

.aj-ct-field {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-2);
    min-inline-size: 0;
}

.aj-ct-field--wide,
.aj-ct-field--captcha {
    grid-column: 1 / -1;
}

.aj-ct-field label {
    color: var(--aj-text);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
}

.aj-ct-field input,
.aj-ct-field textarea {
    inline-size: 100%;
    padding: var(--aj-space-3) var(--aj-space-4);
    border: 1px solid var(--aj-border-strong);
    border-radius: var(--aj-radius-md);
    background: var(--aj-page);
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-ct-field textarea {
    resize: vertical;
    min-block-size: 7rem;
    line-height: var(--aj-lh-normal);
}

.aj-ct-field input::placeholder,
.aj-ct-field textarea::placeholder {
    color: var(--aj-text-muted);
}

.aj-ct-field input:focus,
.aj-ct-field textarea:focus {
    outline: none;
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

/* the browser's own verdict, shown only once the field has been left */
.aj-ct-field input:not(:placeholder-shown):invalid,
.aj-ct-field textarea:not(:placeholder-shown):invalid {
    border-color: var(--aj-error);
}

.aj-ct-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-3);
}

.aj-ct-captcha input {
    flex: 1 1 200px;
}

.aj-ct-captcha img {
    block-size: 48px;
    inline-size: auto;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-md);
    background: var(--aj-surface);
}

.aj-ct-captcha__reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-ct-captcha__reload:hover {
    border-color: var(--aj-accent-border);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-ct-captcha__reload:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

.aj-ct-form__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-4);
}

.aj-ct-form__status {
    margin: 0;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
}

.aj-ct-form__status.is-error {
    color: var(--aj-error);
}

.aj-ct-form__status.is-success {
    color: var(--aj-success);
}

/* ======================================================== 6. RESPONSIVE === */

@media (max-width: 1024px) {

    /* the words step above the form rather than squeezing it */
    .aj-ct-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {

    /* the map keeps enough of itself to be worth looking at */
    .aj-ct-branch__map {
        block-size: clamp(220px, 55vw, 240px);
    }

    /* the words take the line, the action takes the one under it */
    .aj-ct-branch__link {
        inline-size: 100%;
        justify-content: center;
    }

    .aj-ct-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-ct-form__actions .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }

    .aj-ct-captcha img {
        block-size: 44px;
    }
}

/*
 * Phones and foldables (the iPad mini and up keep the layout above): the
 * four ways to reach the company sit two by two, each one standing on its
 * icon, so all of them are read in one screen rather than one per screen.
 */
@media (max-width: 720px) {

    .aj-ct-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--aj-space-3);
    }

    .aj-ct-item {
        flex-direction: column;
        align-items: center;
        gap: var(--aj-space-3);
        padding: var(--aj-space-4) var(--aj-space-3);
        text-align: center;
    }

    .aj-ct-item__icon {
        inline-size: 42px;
        block-size: 42px;
    }

    .aj-ct-item__body {
        align-items: center;
        inline-size: 100%;
    }

    .aj-ct-item__value {
        font-size: var(--aj-fs-sm);
    }

    .aj-ct-item__value--plain {
        font-size: var(--aj-fs-caption);
    }

    .aj-ct-channels {
        justify-content: center;
    }
}