/*
 * Ajman Finance Portal - landing page.
 *
 * Standalone palette: this page deliberately does not use the Bootstrap
 * primary colour, so the beige/gold identity survives a primary_color change
 * in site settings.
 */

/*
 * Tokens live on :root because the portal header and footer render from
 * base.html, outside the .aj page wrapper.
 */
:root {
    --aj-bg: #FDFBF7;
    --aj-surface: #ffffff;
    --aj-sand: #F4ECDD;
    --aj-text: #2A2724;
    --aj-text-soft: #4A443E;
    --aj-muted: #6B6560;
    --aj-gold: #9A8253;
    --aj-gold-dark: #7E6231;
    --aj-gold-deep: #5E4A26;
    --aj-gold-icon: #9A7F4C;
    --aj-link: #8A6E3F;
    --aj-border: #EAE1D1;
    --aj-border-soft: #EFE6D5;
    --aj-shell: 1560px;
}

.aj {
    background: var(--aj-bg);
    color: var(--aj-text);
    min-height: 100%;

    /*
     * base.html drops the content block inside `.container-fluid > .row`.
     * Cancel the flex gutters so the header, hero and footer can run
     * edge to edge.
     */
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.aj a {
    color: var(--aj-link);
    text-decoration: none;
}

.aj a:hover {
    color: #67512C;
}

.aj ::selection {
    background: #EADFC7;
}

.aj-shell {
    max-width: var(--aj-shell);
    margin: 0 auto;
    padding-inline: 32px;
}

/* ---------------------------------------------------------------- header */

.aj-header {
    background: var(--aj-surface);
    border-bottom: 1px solid var(--aj-border);
}

/*
 * base.html renders the header outside the `.aj` wrapper, so the `.aj a`
 * reset above never reaches it and Bootstrap's underlined link default
 * shows through on the nav and on the login/language buttons.
 */
.aj-header a {
    text-decoration: none;
}

.aj-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-block: 14px;
    flex-wrap: wrap;
}

.aj-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.aj-header__logo img {
    max-width: 230px;
    max-height: 52px;
    object-fit: contain;
}

.aj-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.aj-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--aj-text-soft);
    padding-block: 6px;
    border-bottom: 2px solid transparent;
}

.aj-nav a:hover {
    color: var(--aj-link);
}

.aj-nav a.is-active {
    font-weight: 600;
    color: var(--aj-link);
    border-bottom-color: #9C7F4E;
}

.aj-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ghost button: language switch, login/logout */
.aj-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #E2D6BE;
    border-radius: 10px;
    color: #6E6259;
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 15px;
    transition: all .18s;
}

.aj-btn-ghost:hover {
    background: #F7F1E6;
    border-color: #CDB98F;
    color: var(--aj-text-soft);
}

/* Primary call to action: the smart advisor */
.aj-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #A78B56 0%, #8E7443 100%);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    box-shadow: 0 2px 10px rgba(126, 98, 49, .22);
    transition: all .18s;
}

.aj-btn-gold:hover {
    background: linear-gradient(135deg, #8E7443 0%, #745E33 100%);
    box-shadow: 0 4px 14px rgba(126, 98, 49, .30);
    color: #fff;
}

/* ------------------------------------------------------------------ hero */

.aj-hero {
    position: relative;
    background: #F3EDE0;
    overflow: hidden;
}

.aj-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * The banner image is admin-uploaded, so it cannot be assumed to be light
 * behind the headline. Fade the page background in over the text side to
 * keep the copy legible whatever gets uploaded.
 */
.aj-hero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(253, 251, 247, .94) 0%,
        rgba(253, 251, 247, .78) 38%,
        rgba(253, 251, 247, 0) 72%);
}

[dir="rtl"] .aj-hero__scrim {
    transform: scaleX(-1);
}

.aj-hero__inner {
    position: relative;
    padding-top: 110px;
    min-height: 560px;
    display: flex;
    align-items: center;
}

/* Inner pages get a shorter band so the page content stays above the fold. */
.aj-hero--compact .aj-hero__inner {
    padding-top: 48px;
    padding-bottom: 48px;
    min-height: 260px;
}

.aj-hero--compact .aj-hero__title {
    font-size: 38px;
}

.aj-hero--compact .aj-hero__subtitle {
    font-size: 19px;
}

.aj-hero__copy {
    max-width: 680px;
    text-align: start;
}

.aj-hero__title {
    margin: 0 0 10px;
    font-size: 54px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--aj-gold-dark);
}

.aj-hero__subtitle {
    margin: 0;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--aj-text);
}

/* ----------------------------------------------------------------- intro */

.aj-intro {
    background: var(--aj-surface);
    border-bottom: 1px solid var(--aj-border-soft);
}

.aj-intro__grid {
    padding-block: 72px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 56px;
    align-items: start;
}

.aj-intro__card {
    background: linear-gradient(165deg, #F8F1E4 0%, #F1E6D1 100%);
    border: 1px solid #E8DCC4;
    border-radius: 20px;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 24px;
}

.aj-intro__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--aj-gold);
    color: #fff;
}

.aj-intro__heading {
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--aj-gold-deep);
    text-wrap: pretty;
}

.aj-intro__rule {
    width: 100%;
    height: 1px;
    background: #DCCBA8;
}

.aj-intro__lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: var(--aj-text-soft);
    text-wrap: pretty;
}

.aj-intro__list {
    display: flex;
    flex-direction: column;
}

.aj-intro__item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-block: 26px;
}

.aj-intro__item + .aj-intro__item {
    border-top: 1px solid var(--aj-border-soft);
}

.aj-intro__item p {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--aj-text-soft);
    text-wrap: pretty;
}

.aj-icon-tile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F7F1E6;
    color: var(--aj-gold-icon);
    border: 1px solid #EADFC7;
}

/* ----------------------------------------------------------------- areas */

.aj-areas {
    padding-block: 16px 56px;
}

.aj-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.aj-section-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--aj-text);
}

.aj-section-head::after {
    content: "";
    width: 34px;
    height: 2px;
    background: #C9B58A;
}

.aj-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.aj-card {
    background: linear-gradient(160deg, #FEFCF8 0%, #FAF5EB 55%, #F4ECDD 100%);
    border: 1px solid var(--aj-border-soft);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(126, 98, 49, .05);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .18s, box-shadow .18s;
}

.aj-card:hover {
    border-color: #D8C49C;
    box-shadow: 0 6px 18px rgba(126, 98, 49, .10);
}

.aj-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #F1E7D4;
    color: var(--aj-gold-icon);
    box-shadow: inset 0 0 0 1px #E6D9BF;
}

.aj-card h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--aj-text);
}

.aj-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--aj-muted);
    text-wrap: pretty;
}

/* --------------------------------------------------------------- closing */

.aj-closing {
    background: var(--aj-sand);
    border-top: 1px solid var(--aj-border);
}

.aj-closing__inner {
    padding-block: 64px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.aj-closing__bar {
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    background: var(--aj-gold);
}

.aj-closing__inner p {
    margin: 0;
    max-width: 1100px;
    font-size: 26px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--aj-gold-deep);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- footer */

.aj-footer {
    background: var(--aj-surface);
    border-top: 1px solid var(--aj-border);
}

.aj-footer__inner {
    padding-block: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.aj-footer__logo {
    max-width: 210px;
    max-height: 44px;
    object-fit: contain;
}

.aj-footer__tagline {
    margin: 0;
    font-size: 13px;
    color: var(--aj-muted);
}

.aj-footer__links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.aj-footer__links a {
    font-size: 13px;
    color: var(--aj-text-soft);
}

.aj-footer__social {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--aj-link);
}

.aj-footer__social a {
    display: flex;
    color: inherit;
}

/*
 * base.html renders its own footer (rating widget, visitor count, survey
 * scores) straight after this page. Restyle it so it reads as the second row
 * of the footer above rather than a separate grey slab.
 */
body:has(.aj) .site-footer {
    margin-top: 0 !important;
    background-color: #fff !important;
    border-top: 1px solid #EFE6D5 !important;
    color: #6B6560;
}

/*
 * Those widgets are coloured inline with the Bootstrap primary, which clashes
 * with this page's palette. !important is the only lever against an inline
 * style. Scoped to the wrapper rows so the JS-injected success message keeps
 * its own green.
 */
body:has(.aj) .site-footer > .container-fluid > .text-center > div {
    color: #6B6560 !important;
}

body:has(.aj) .site-footer i {
    color: #9A8253 !important;
}

/* ------------------------------------------------------------- theming */

/*
 * Retints the pre-existing document list, search and criteria components to
 * the portal palette. Those components already read --doc-primary and
 * --home-primary-color (set from the Bootstrap primary on <html> in
 * base.html), so re-declaring the variables here is enough — no rewriting of
 * their stylesheets required.
 */
.aj-themed {
    --doc-primary: var(--aj-gold);
    --doc-secondary: var(--aj-border);
    --primary-color: var(--aj-gold);
    --home-primary-color: var(--aj-gold);
    --home-banner-bg: var(--aj-sand);
    --home-banner-text: var(--aj-gold-deep);
    --bs-primary: var(--aj-gold);
    --bs-primary-rgb: 154, 130, 83;
}

/*
 * document_list_block.html re-declares these inline on its own wrapper, which
 * outranks the ancestor rule above for that subtree. !important is the only
 * lever against an inline declaration.
 */
.aj-themed .document-archive-wrapper {
    --doc-primary: var(--aj-gold) !important;
    --doc-secondary: var(--aj-sand) !important;
}

/* The old page chrome used a cool grey; align it with the warm palette. */
.aj-themed .home-page-wrapper {
    background-color: transparent;
}

.aj-themed .home-surface {
    border-radius: 16px;
    border: 1px solid var(--aj-border-soft);
    box-shadow: 0 2px 10px rgba(126, 98, 49, .05) !important;
}

.aj-themed .criteria-card {
    border-radius: 14px;
    border: 1px solid var(--aj-border-soft);
    box-shadow: 0 2px 10px rgba(126, 98, 49, .05);
}

.aj-themed .criteria-card:hover {
    border-color: #D8C49C;
    box-shadow: 0 6px 18px rgba(126, 98, 49, .10);
}

.aj-themed .criteria-card .card-title {
    color: var(--aj-text);
}

/* Bootstrap buttons inside themed pages. */
.aj-themed .btn-primary {
    background-color: var(--aj-gold);
    border-color: var(--aj-gold);
}

.aj-themed .btn-primary:hover {
    background-color: var(--aj-gold-dark);
    border-color: var(--aj-gold-dark);
}

.aj-themed .btn-outline-primary {
    color: var(--aj-link);
    border-color: var(--aj-border);
}

.aj-themed .btn-outline-primary:hover {
    background-color: var(--aj-gold);
    border-color: var(--aj-gold);
    color: #fff;
}

/* ------------------------------------------------------- floating action */

.aj-floating-btn {
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #A78B56 0%, #8E7443 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(126, 98, 49, .35);
    z-index: 1050;
    transition: transform .2s ease, box-shadow .2s ease;
}

.aj-floating-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 26px rgba(126, 98, 49, .45);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 991.98px) {
    .aj-shell {
        padding-inline: 20px;
    }

    .aj-header__inner {
        justify-content: center;
    }

    .aj-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }

    .aj-hero__inner {
        padding-top: 64px;
        padding-bottom: 48px;
        min-height: 420px;
    }

    .aj-hero__title {
        font-size: 38px;
        letter-spacing: -.5px;
    }

    .aj-hero__subtitle {
        font-size: 20px;
    }

    .aj-intro__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-block: 48px;
    }

    .aj-intro__card {
        position: static;
        padding: 32px 26px;
    }

    .aj-intro__heading {
        font-size: 24px;
    }

    .aj-closing__inner {
        padding-block: 44px;
    }

    .aj-closing__inner p {
        font-size: 20px;
    }
}

@media (max-width: 575.98px) {
    .aj-cards {
        grid-template-columns: 1fr;
    }

    .aj-hero__title {
        font-size: 30px;
    }

    .aj-footer__inner {
        justify-content: center;
        text-align: center;
    }
}

/*
 * Arabic runs longer per line than English; the reference design opens the
 * leading up to compensate.
 */
[dir="rtl"] .aj-intro__heading {
    line-height: 1.6;
}

[dir="rtl"] .aj-intro__lead,
[dir="rtl"] .aj-intro__item p {
    line-height: 2;
}

[dir="rtl"] .aj-card p {
    line-height: 1.95;
}

[dir="rtl"] .aj-closing__inner p {
    line-height: 1.8;
}

[dir="rtl"] .aj-hero__title {
    letter-spacing: -.5px;
}