/* CoptAra theme refresh, 2026-11-01. Loaded after components.css.
   Everything here overrides the previous look through the shared tokens; removing the
   <link> in base.html restores the previous layout rules untouched. */

/* ── Global type ─────────────────────────────────────────────────────────── */
html { font-synthesis: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: 'Noto Naskh Arabic', var(--font-serif);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

body { -webkit-font-smoothing: antialiased; }

html.dark body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(242, 163, 58, 0.13), transparent 62%),
    radial-gradient(900px 560px at 6% 12%, rgba(120, 110, 220, 0.10), transparent 60%);
  background-attachment: fixed;
}

html:not(.dark) body {
  background-image: radial-gradient(1000px 520px at 85% -10%, rgba(244, 201, 165, 0.45), transparent 62%);
  background-attachment: fixed;
}

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid transparent;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 32%, transparent);
}
.btn--outline {
  background: var(--glass-bg);
  color: var(--color-text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-text); }

/* ── Navigation: floating glass bar ──────────────────────────────────────── */
.nav {
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  padding: 0.6rem var(--space-xl);
  gap: var(--space-lg);
}
.nav__logo img { height: 44px; }
@media (max-width: 1024px) { .nav__logo img { height: 38px; } }
@media (max-width: 900px) { .nav__logo img { height: 34px; } }

.nav__links { gap: var(--space-lg); }
.nav__links a {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  padding: 0.45rem 0.2rem;
}
.nav__links a:hover { color: var(--color-text); }
.nav__links a[aria-current="page"] {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
}

.theme-toggle {
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  min-height: 36px;
  font-weight: 500;
}
.nav__account {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: none;
  font-weight: 600;
}
.nav__account:hover { background: color-mix(in srgb, var(--color-accent) 88%, black); color: var(--color-on-accent); }
.nav__icon--live { border-radius: var(--radius-pill); }

/* ── Announcement banner ─────────────────────────────────────────────────── */
.announcement__inner {
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

/* ── Floating launchers (Radio mini bar, Chat with Divine) ───────────────── */
.cw-launcher, #cw-root button[class*="launch"], #cw-root .cw-fab {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--glass-border);
  padding-block: var(--space-2xl);
  margin-top: var(--space-3xl);
}

/* ── Theme-aware images: show the variant matching the active theme ──────── */
html:not(.dark) .theme-img--dark { display: none; }
html.dark .theme-img--light { display: none; }

/* ── Narrow screens: the wide lockup needs a compact header ───────────────── */
@media (max-width: 600px) {
  .nav { padding: 0.5rem var(--space-md); gap: var(--space-sm); }
  .nav__logo img { height: 26px; }
  .nav__account { width: 2.25rem; min-height: 2.25rem; padding: 0; justify-content: center; }
  .nav__account-label, .nav__account-label--compact { display: none; }
  .nav__right { gap: 6px; }
}