/* =====================================================================
   R. Hamdard e.V. — public site theme
   Palette: teal #0f6d5f (primary), amber #e8a13d (accent),
            sand #f7f3ec (background), slate #22303c (text).
   RTL-safe: logical properties only, no left/right physical offsets.
   ===================================================================== */

:root {
    --hmd-teal: #0f6d5f;
    --hmd-teal-dark: #0a5044;
    --hmd-amber: #e8a13d;
    --hmd-amber-dark: #cf8724;
    --hmd-sand: #f7f3ec;
    --hmd-slate: #22303c;
    --hmd-muted: #5c6b78;
    --bs-primary: var(--hmd-teal);
}

body.site-body {
    background-color: var(--hmd-sand);
    color: var(--hmd-slate);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Naskh Arabic", sans-serif;
}

/* ---- Accessibility ---------------------------------------------------- */

.skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2000;
    background: var(--hmd-amber);
    color: var(--hmd-slate);
    padding: .75rem 1.25rem;
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid var(--hmd-teal);
    outline-offset: 2px;
    border-radius: .25rem;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--hmd-amber);
    outline-offset: 2px;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Navbar ----------------------------------------------------------- */

.site-navbar {
    background: var(--hmd-teal);
    box-shadow: 0 2px 12px rgb(15 109 95 / .25);
}

.site-navbar .nav-link {
    color: rgb(255 255 255 / .88);
    font-weight: 500;
    border-radius: 999px;
    padding-inline: 1rem;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible {
    color: #fff;
    background: rgb(255 255 255 / .12);
}

.site-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.site-brand:hover,
.site-brand:focus-visible {
    color: #fff;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
    background: var(--hmd-amber);
    color: var(--hmd-slate);
    font-size: .9rem;
}

.site-navbar .navbar-toggler {
    border-color: rgb(255 255 255 / .5);
}

.site-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.lang-switch {
    border-radius: 999px;
}

/* ---- Buttons ---------------------------------------------------------- */

.btn-donate {
    background: var(--hmd-amber);
    border: 2px solid var(--hmd-amber);
    color: var(--hmd-slate);
    font-weight: 700;
    border-radius: 999px;
    padding-inline: 1.5rem;
}

.btn-donate:hover,
.btn-donate:focus-visible {
    background: var(--hmd-amber-dark);
    border-color: var(--hmd-amber-dark);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--hmd-teal);
    --bs-btn-border-color: var(--hmd-teal);
    --bs-btn-hover-bg: var(--hmd-teal);
    --bs-btn-hover-border-color: var(--hmd-teal);
    --bs-btn-active-bg: var(--hmd-teal);
    --bs-btn-active-border-color: var(--hmd-teal);
    border-radius: 999px;
}

.btn-outline-hero {
    color: #fff;
    border: 2px solid rgb(255 255 255 / .7);
    border-radius: 999px;
    font-weight: 600;
}

.btn-outline-hero:hover,
.btn-outline-hero:focus-visible {
    background: #fff;
    color: var(--hmd-teal);
}

/* ---- Hero ------------------------------------------------------------- */

.hero {
    position: relative;
    background: linear-gradient(135deg, var(--hmd-teal-dark) 0%, var(--hmd-teal) 55%, #12876f 100%);
    color: #fff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../img/hero-pattern.svg");
    background-size: cover;
    background-position: center;
    opacity: .35;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    padding-block: 5rem;
}

.hero-tagline {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--hmd-amber);
    margin-block-end: .75rem;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
}

.hero-lead {
    font-size: 1.15rem;
    max-inline-size: 38rem;
    color: rgb(255 255 255 / .9);
}

/* ---- Sections & cards -------------------------------------------------- */

.section-title {
    font-weight: 800;
    color: var(--hmd-slate);
}

.section-sand {
    background: #efe8dc;
}

.page-header {
    background: linear-gradient(180deg, #efe8dc 0%, var(--hmd-sand) 100%);
    padding-block: 3rem 2rem;
}

.lead-muted {
    color: var(--hmd-muted);
    max-inline-size: 46rem;
}

.card {
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 4px 18px rgb(34 48 60 / .07);
}

.project-card,
.news-card,
.team-card,
.opportunity-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.project-card:hover,
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgb(34 48 60 / .13);
}

.project-cover {
    block-size: 180px;
    object-fit: cover;
    border-start-start-radius: 1.25rem;
    border-start-end-radius: 1.25rem;
}

.project-hero-img {
    max-block-size: 420px;
    object-fit: cover;
}

.project-link {
    color: var(--hmd-slate);
    text-decoration: none;
}

.project-link:hover,
.project-link:focus-visible {
    color: var(--hmd-teal);
    text-decoration: underline;
}

.category-badge {
    background: rgb(15 109 95 / .12);
    color: var(--hmd-teal);
    font-weight: 600;
}

.status-badge {
    background: rgb(232 161 61 / .2);
    color: #8a6215;
    font-weight: 600;
}

.location-badge {
    background: rgb(34 48 60 / .08);
    color: var(--hmd-slate);
    font-weight: 500;
}

.link-more {
    color: var(--hmd-teal);
    font-weight: 600;
    text-decoration: none;
}

.link-more:hover,
.link-more:focus-visible {
    text-decoration: underline;
}

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

/* ---- Progress bars ----------------------------------------------------- */

.project-progress {
    block-size: .6rem;
    border-radius: 999px;
    background: rgb(15 109 95 / .12);
}

.project-progress .progress-bar {
    background: linear-gradient(90deg, var(--hmd-teal), #12876f);
    border-radius: 999px;
}

/* ---- Stats / bands ------------------------------------------------------ */

.stats-band {
    background: var(--hmd-slate);
    color: #fff;
    padding-block: 2.5rem;
}

.stat-value {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--hmd-amber);
    margin-block-end: .25rem;
}

.stat-label {
    margin-block-end: 0;
    color: rgb(255 255 255 / .85);
}

.stat-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 18px rgb(34 48 60 / .07);
    block-size: 100%;
}

.stat-card .stat-value {
    color: var(--hmd-teal);
    font-size: 1.4rem;
}

.stat-card .stat-label {
    color: var(--hmd-muted);
    font-size: .9rem;
}

.how-step {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    block-size: 100%;
    box-shadow: 0 4px 18px rgb(34 48 60 / .07);
}

.how-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 999px;
    background: rgb(232 161 61 / .18);
    color: var(--hmd-amber-dark);
    font-size: 1.5rem;
    margin-block-end: 1rem;
}

.cta-band {
    background: linear-gradient(135deg, var(--hmd-teal-dark), var(--hmd-teal));
    color: #fff;
    padding-block: 4rem;
}

.cta-lead {
    color: rgb(255 255 255 / .9);
    max-inline-size: 40rem;
    margin-inline: auto;
}

.recent-donation-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    block-size: 100%;
    box-shadow: 0 2px 10px rgb(34 48 60 / .06);
}

.testimonial-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 4px 18px rgb(34 48 60 / .07);
    margin-block-end: 0;
}

.testimonial-card blockquote {
    font-style: italic;
    color: var(--hmd-slate);
}

/* ---- Filters ------------------------------------------------------------ */

.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: #fff;
    color: var(--hmd-slate);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid rgb(34 48 60 / .12);
}

.filter-chip:hover,
.filter-chip:focus-visible {
    border-color: var(--hmd-teal);
    color: var(--hmd-teal);
}

.filter-chip.active {
    background: var(--hmd-teal);
    border-color: var(--hmd-teal);
    color: #fff;
}

/* ---- Detail pages ------------------------------------------------------- */

.cms-body {
    line-height: 1.7;
}

.cms-body img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: .75rem;
}

.gallery-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    inline-size: 100%;
}

.timeline {
    border-inline-start: 3px solid rgb(15 109 95 / .25);
    padding-inline-start: 1.5rem;
}

.timeline-item {
    position: relative;
    padding-block-end: 1.5rem;
}

.timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.95rem;
    inset-block-start: .3rem;
    inline-size: .85rem;
    block-size: .85rem;
    border-radius: 999px;
    background: var(--hmd-amber);
    border: 3px solid var(--hmd-sand);
}

.donate-widget {
    inset-block-start: 5.5rem;
}

.funding-figures dt {
    font-weight: 500;
    color: var(--hmd-muted);
}

.news-thumb {
    object-fit: cover;
    border-start-start-radius: 1.25rem;
    border-end-start-radius: 1.25rem;
}

.team-photo {
    inline-size: 96px;
    block-size: 96px;
    border-radius: 999px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
}

.team-photo-placeholder {
    background: rgb(15 109 95 / .12);
    color: var(--hmd-teal);
    font-size: 2.25rem;
}

/* ---- Donate form -------------------------------------------------------- */

.amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.amount-btn.active {
    background: var(--hmd-teal);
    color: #fff;
    border-color: var(--hmd-teal);
}

.payment-option {
    padding: .65rem .75rem .65rem 2.4rem;
    border: 1px solid rgb(34 48 60 / .12);
    border-radius: .75rem;
    margin-block-end: .5rem;
    background: #fff;
}

[dir="rtl"] .payment-option {
    padding: .65rem 2.4rem .65rem .75rem;
}

.trust-card {
    background: #fff;
    border-inline-start: 4px solid var(--hmd-teal);
}

.reference-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hmd-teal);
    background: rgb(15 109 95 / .1);
    border-radius: .5rem;
    padding: .35rem .85rem;
    letter-spacing: .06em;
}

.bank-details dt {
    color: var(--hmd-muted);
    font-weight: 500;
}

.thankyou-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 999px;
    background: rgb(232 161 61 / .2);
    color: var(--hmd-amber-dark);
    font-size: 2rem;
    margin-block-end: 1rem;
}

.twofa-input {
    font-size: 1.5rem;
    letter-spacing: .35em;
}

.chart-card .card-body {
    min-block-size: 280px;
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
    background: var(--hmd-slate);
    color: rgb(255 255 255 / .85);
}

.footer-heading {
    color: #fff;
    font-weight: 700;
}

.footer-links a {
    color: rgb(255 255 255 / .8);
    text-decoration: none;
    line-height: 2;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--hmd-amber);
    text-decoration: underline;
}

.footer-muted {
    color: var(--hmd-muted);
}

.site-footer .footer-muted {
    color: rgb(255 255 255 / .6);
}

.footer-divider {
    border-color: rgb(255 255 255 / .2);
}

.social-link {
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .1);
    color: #fff;
    font-size: 1.1rem;
    margin-inline-end: .4rem;
}

.social-link:hover,
.social-link:focus-visible {
    background: var(--hmd-amber);
    color: var(--hmd-slate);
}

/* ---- Cookie banner ------------------------------------------------------- */

.cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1500;
    background: #fff;
    box-shadow: 0 -6px 24px rgb(34 48 60 / .18);
    padding-block: 1.25rem;
    border-start-start-radius: 1rem;
    border-start-end-radius: 1rem;
}

/* ---- Misc ---------------------------------------------------------------- */

.auth-section {
    flex: 1;
}

a {
    color: var(--hmd-teal);
}

.transparency-table th {
    color: var(--hmd-muted);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Anti-spam honeypot: visually removed but present in the DOM for bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}