/* ==========================================================================
   Qareebo design system — "Mihrab"
   Templates hold structure + these semantic classes; this file owns the look.
   Tokens must stay in sync with the Tailwind config in templates/base.html.
   ========================================================================== */

:root {
    /* Jade scale */
    --jade-950: #0A2E24;
    --jade-900: #0E3B2E;
    --jade-700: #175947;
    --jade: #1B4D3E;          /* 600 — primary */
    --jade-500: #2D7A5F;
    --jade-100: #DCE9E3;
    --jade-50: #EEF4F1;

    /* Brass scale */
    --brass-600: #A97F35;
    --brass: #B8924A;         /* 500 — CTA accent */
    --brass-300: #D9C08A;
    --brass-100: #F4EBD8;

    /* Neutrals */
    --paper: #FAF8F3;
    --ink: #1E2A26;
    --ink-soft: #5F6E67;
    --line: #E7E3D8;

    /* States */
    --warn: #B45309;
    --warn-bg: #FEF6E7;
    --info: #1D4ED8;
    --info-bg: #EFF6FF;
}

/* ---------- Base ---------- */

*:focus-visible {
    outline: 3px solid var(--brass);
    outline-offset: 2px;
    border-radius: 4px;
}

[x-cloak] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Typography helpers ---------- */

.q-display {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.q-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-600);
}

.q-eyebrow-light {
    color: var(--brass-300);
}

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

.q-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 12px;
    padding: 11px 20px;
    border: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    text-decoration: none;
}

.q-btn-jade {
    background: var(--jade);
    color: #fff;
}
.q-btn-jade:hover {
    background: var(--jade-700);
    transform: translateY(-1px);
}

.q-btn-brass {
    background: var(--brass);
    color: #fff;
}
.q-btn-brass:hover {
    background: var(--brass-600);
    transform: translateY(-1px);
}

.q-btn-ghost {
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink);
}
.q-btn-ghost:hover {
    border-color: var(--jade-500);
    color: var(--jade);
}

.q-btn-sm {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 10px;
}

/* ---------- Cards ---------- */

.q-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.q-card-hover {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.q-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(14, 59, 46, .09);
    border-color: var(--brass-300);
}

/* ---------- Pills / chips / tags ---------- */

.q-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.q-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    color: var(--ink-soft);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.q-chip:hover {
    border-color: var(--jade-500);
    color: var(--jade);
}
.q-chip-on {
    background: var(--jade);
    border-color: var(--jade);
    color: #fff;
}
.q-chip-on:hover {
    border-color: var(--jade);
    color: #fff;
    background: var(--jade-700);
}
.q-chip-brass {
    background: var(--brass-100);
    border-color: var(--brass-300);
    color: var(--brass-600);
}

.q-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: #F1EFE8;
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.q-tag-jade {
    background: var(--jade-50);
    color: var(--jade);
}
.q-tag-brass {
    background: var(--brass-100);
    color: var(--brass-600);
}

.q-select {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 8px 30px 8px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background-color: #fff;
    cursor: pointer;
}
.q-select:hover {
    border-color: var(--jade-500);
    color: var(--jade);
}

.q-select-inline {
    padding: 3px 26px 3px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 800;
}

.q-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--jade-50);
    color: var(--jade);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 5px 13px;
    vertical-align: middle;
}

/* ---------- Schedule badges (emitted by directory_tags.schedule_badge) ---------- */

.q-sched {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.q-sched-stack > .q-sched + .q-sched {
    margin-top: 6px;
}

.q-day {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    background: var(--jade-50);
    color: var(--jade);
    font-size: 12.5px;
    font-weight: 700;
}

.q-date {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 12.5px;
    font-weight: 700;
}

.q-tag-label {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    background: #F1EFE8;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
}

.q-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.q-time-sep {
    color: #9AA7A1;
    font-size: 13px;
}

.q-dot {
    color: #C9CFC9;
    margin: 0 2px;
}

/* ---------- Status badges (submit review / calendar scan) ---------- */

.q-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}
.q-status-new {
    background: var(--jade-50);
    color: var(--jade);
}
.q-status-update {
    background: var(--info-bg);
    color: var(--info);
}
.q-status-warn {
    background: var(--warn-bg);
    color: var(--warn);
}

/* ---------- Signature motifs ---------- */

/* Arch-topped tile (category cards) */
.arch-top {
    border-radius: 120px 120px 18px 18px;
}

/* Thin brass mihrab niche outline (hero framing) */
.mihrab-frame {
    border: 1.5px solid rgba(217, 192, 138, .4);
    border-bottom: none;
    border-radius: 400px 400px 0 0;
    position: relative;
}
.mihrab-frame::before {
    content: '\263E'; /* crescent */
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--brass-300);
    font-size: 22px;
}
@media (max-width: 720px) {
    .mihrab-frame {
        border-radius: 220px 220px 0 0;
    }
}

/* Eight-point star lattice for jade sections */
.star-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23D9C08A' stroke-opacity='.12'%3E%3Crect x='27' y='27' width='30' height='30'/%3E%3Crect x='27' y='27' width='30' height='30' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Legacy hero pattern (kept until home rebuild lands) */
.hero-pattern {
    background-image: url('../img/islamic-pattern.svg');
    background-size: 80px 80px;
    background-repeat: repeat;
}

/* Horizontal scroll row with edge fade (refine bar on mobile) */
.edge-fade {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}
.edge-fade::-webkit-scrollbar {
    display: none;
}

/* ---------- Map ---------- */

.map-container {
    height: 400px;
    width: 100%;
    border-radius: 0.75rem;
}

.custom-pin {
    background: none !important;
    border: none !important;
}

/* Arch-shaped numbered map pin (used by createArchPin in app.js) */
.q-map-pin {
    width: 30px;
    height: 37px;
    background: var(--jade);
    border-radius: 15px 15px 5px 5px;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 12px rgba(10, 46, 36, .35);
}