/* ==========================================================================
   Page: Home/Landing — Mosadaqa theme layer
   --------------------------------------------------------------------------
   Loaded AFTER Theme/Templates/landing.css. All sections, copy and images stay
   exactly as they are; this layer re-points colours to the Mosadaqa tokens,
   modernises the cards/buttons and tightens the very large section spacing.
   Scoped to body.landingPage (added by the view's inline script).
   Depends on: mosadaqa-tokens.css (layout bundle).
   ========================================================================== */

/* ---- Type & palette ---------------------------------------------------------- */
.landingPage h1 {
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.landingPage .hero__content h1,
.landingPage .inquery__content h1,
.landingPage .section__title {
    color: var(--mosadaqa-dark);
}

.landingPage .hero__content h1 span,
.landingPage .inquery__content h1 span,
.landingPage .section__title__secondary {
    color: var(--mosadaqa-blue-dark);
}

.landingPage .section__title {
    font-size: 30px;
    padding-bottom: 18px;
}

/* ---- Buttons (.landingPage__link) --------------------------------------------- */
.landingPage .landingPage__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    border-width: 1px;
    border-radius: 14px;
    font-size: var(--mosadaqa-text-md);
    font-weight: 700;
    box-shadow: var(--mosadaqa-shadow-sm);
    transition: background-color var(--mosadaqa-ease), color var(--mosadaqa-ease), border-color var(--mosadaqa-ease), transform var(--mosadaqa-ease), box-shadow var(--mosadaqa-ease);
}

/* primary (Arabic CTA) */
.landingPage .hero__content .landingPage__link {
    color: var(--mosadaqa-white);
    background: var(--mosadaqa-blue-dark);
    border-color: var(--mosadaqa-blue-dark);
}

.landingPage .hero__content .landingPage__link:hover {
    background: #115d71;
    border-color: #115d71;
    transform: translateY(-2px);
    box-shadow: var(--mosadaqa-shadow-md);
}

/* secondary (English CTA / inquiry) */
.landingPage .hero__content .landingPage__link.default,
.landingPage .inquery__content .landingPage__link.default {
    color: var(--mosadaqa-blue-dark);
    background: var(--mosadaqa-white);
    border-color: var(--mosadaqa-line-neutral);
}

.landingPage .hero__content .landingPage__link.default:hover,
.landingPage .inquery__content .landingPage__link.default:hover {
    background: var(--mosadaqa-soft);
    border-color: var(--mosadaqa-blue);
    transform: translateY(-2px);
}

/* the hero's second link has no .default class in the markup: treat the 2nd link as secondary */
.landingPage .hero__content .landingPage__link + .landingPage__link {
    color: var(--mosadaqa-blue-dark);
    background: var(--mosadaqa-white);
    border-color: var(--mosadaqa-line-neutral);
}

.landingPage .hero__content .landingPage__link + .landingPage__link:hover {
    background: var(--mosadaqa-soft);
    border-color: var(--mosadaqa-blue);
}

.landingPage .landingPage__link:focus-visible {
    outline: none;
    box-shadow: var(--mosadaqa-focus-ring);
}

/* ---- Hero ---------------------------------------------------------------------- */
.landingPage .hero {
    background: linear-gradient(0deg, rgba(75, 155, 174, 0.18) 50%, var(--mosadaqa-bg) 50%);
}

@media (min-width: 992px) {
    .landingPage .hero {
        background: linear-gradient(90deg, rgba(75, 155, 174, 0.18) 50%, var(--mosadaqa-bg) 50%);
        min-height: 640px;
        height: auto;
        padding-bottom: 40px;
    }
}

/* ---- Benefits ------------------------------------------------------------------ */
.landingPage .benefits {
    margin-top: 96px;
    padding-bottom: 96px;
}

.landingPage .benefits__block {
    margin-top: 40px;
}

.landingPage .benefits__item__outer,
.landingPage .verification__item__outer {
    background: transparent; /* legacy "offset shadow" block */
    border-radius: 20px;
}

.landingPage .benefits__item {
    border: 1px solid var(--mosadaqa-line);
    border-radius: 20px;
    box-shadow: var(--mosadaqa-shadow-sm);
}

@media (min-width: 992px) {
    .landingPage .benefits__item {
        padding: 44px 32px;
    }
}

.landingPage .benefits__item:hover {
    border-color: var(--mosadaqa-blue);
    box-shadow: var(--mosadaqa-shadow-md);
    transform: translateY(-4px);
}

.landingPage .benefits__item img {
    width: 64px;
    height: 64px;
    padding: 12px;
    background: var(--mosadaqa-soft);
    border-radius: 18px;
    box-sizing: content-box;
}

.landingPage .benefits__item h2 {
    font-size: 1.25rem !important;
    line-height: 1.6;
    color: var(--mosadaqa-dark);
    margin-top: 20px;
}

/* ---- Verification steps ------------------------------------------------------- */
.landingPage .verification {
    margin-top: 96px;
    padding: 96px 0;
}

.landingPage .verification__block {
    margin-top: 40px;
}

.landingPage .verification__item {
    border: 1px solid var(--mosadaqa-line);
    border-radius: 20px;
    box-shadow: var(--mosadaqa-shadow-sm);
    min-height: 300px;
}

.landingPage .verification__item:hover {
    border-color: var(--mosadaqa-blue);
    box-shadow: var(--mosadaqa-shadow-md);
    transform: translateY(-4px);
}

.landingPage .verification__item h3 {
    color: var(--mosadaqa-dark);
    font-size: 1.2rem !important;
    line-height: 1.6;
}

/* ---- Inquiry band ---------------------------------------------------------------- */
.landingPage .inquery {
    margin-top: 96px;
    background: linear-gradient(0deg, var(--mosadaqa-bg) 50%, rgba(75, 155, 174, 0.18) 50%);
}

@media (min-width: 992px) {
    .landingPage .inquery {
        background: linear-gradient(90deg, var(--mosadaqa-bg) 50%, rgba(75, 155, 174, 0.18) 50%);
    }
}

.landingPage .inquery__content .landingPage__link.default img {
    width: 20px;
    height: 20px;
}

/* ---- Trusted logos -------------------------------------------------------------- */
.landingPage .trusted {
    margin-top: 96px;
}

.landingPage .trusted .row {
    margin-top: 40px;
    row-gap: var(--mosadaqa-space-5);
}

.landingPage .trusted .trusted-logo {
    width: 100% !important;
    max-width: 320px;
    border: 1px solid var(--mosadaqa-line);
    border-radius: 20px;
    padding: 24px !important;
    box-shadow: var(--mosadaqa-shadow-sm);
    transition: box-shadow var(--mosadaqa-ease), transform var(--mosadaqa-ease), border-color var(--mosadaqa-ease);
}

.landingPage .trusted a:hover .trusted-logo {
    border-color: var(--mosadaqa-blue);
    box-shadow: var(--mosadaqa-shadow-md);
    transform: translateY(-4px);
}

/* ---- Cookie banner --------------------------------------------------------------- */
.landingPage #cookie-law {
    padding: 20px 24px;
    border-top: 1px solid var(--mosadaqa-line);
    box-shadow: 0 -12px 32px rgba(28, 47, 56, 0.08);
    font-size: var(--mosadaqa-text-sm);
    color: var(--mosadaqa-ink);
}

/* ---- Small screens ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .landingPage .benefits,
    .landingPage .verification,
    .landingPage .inquery,
    .landingPage .trusted {
        margin-top: 64px;
    }

    .landingPage .benefits {
        padding-bottom: 64px;
    }

    .landingPage .verification {
        padding: 64px 0;
    }

    .landingPage .section__title {
        font-size: 24px;
    }

    .landingPage .landingPage__link {
        width: 100%;
    }
}