/**
 * Suffah — Main stylesheet
 *
 * The only stylesheet any page needs to link:
 *   <link rel="stylesheet" href="/assets/css/main.css">
 *
 * @import keeps this a zero-build-step project (Phase 0 stack
 * restriction: no bundler). Order matters — tokens first, then
 * reset, then structure, then components, then responsive overrides
 * last so they can win the cascade without needing !important.
 */

@import url("variables.css");
@import url("reset.css");
@import url("layout.css");
@import url("components.css");
@import url("responsive.css");

/* Phase 66: Suffah wordmark logo */
.suffah-logo { display: block; width: auto; object-fit: contain; }
[data-theme="dark"] .suffah-logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .suffah-logo { filter: invert(1); } }
.auth-card__logo .suffah-logo { margin: 0 auto; }

/* Phase 68: visitor (logged-out) header buttons + sign-in cards */
.mobile-topbar--guest { gap: 10px; }
.mobile-topbar__gbtns { display: inline-flex; align-items: center; gap: 8px; }
.gbtn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--bg-secondary, #eff3f4); color: var(--text-primary); font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gbtn--main { background: var(--color-accent); color: var(--text-on-accent, #fff); }
.guest-cta { margin: 16px; padding: 28px 18px 24px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-primary); box-shadow: 0 2px 10px rgba(0,0,0,.08); text-align: center; }
.guest-cta__art { display: flex; justify-content: center; margin-bottom: 14px; }
.guest-cta__title { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--text-primary); }
.guest-cta__text { margin: 0 auto 22px; max-width: 30em; font-size: 1.1rem; line-height: 1.4; color: var(--text-secondary); }
.guest-cta__btns { display: flex; gap: 12px; justify-content: center; }
.guest-cta__btn { flex: 1; max-width: 190px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.guest-cta__btn--main { background: var(--color-accent); border-color: var(--color-accent); color: var(--text-on-accent, #fff); }
.guest-cta--dark { background: #1f5a4d; border-color: #1f5a4d; box-shadow: none; }
.guest-cta--dark .guest-cta__title { color: #fff; }
.guest-cta--dark .guest-cta__text { color: rgba(255,255,255,.88); }
.guest-cta--dark .guest-cta__btn { color: #fff; border-color: rgba(255,255,255,.35); }
.guest-cta--dark .guest-cta__btn--main { background: #F2B84B; border-color: #F2B84B; color: #1b1b1b; }