/* ===================================================================
   site.css - shared shell styles (header, footer, nav, base typography)
   Loaded on every page via Master.master. Page-specific styles belong
   in their own css/<page>.css file, not here.

   RTL note: this file uses logical properties (margin-inline-*,
   text-align: start/end, etc.) instead of left/right so the layout
   flips automatically if a page ever switches to dir="ltr" for an
   English version. The one thing that still needs swapping per
   direction is the Bootstrap build itself - see the comment in
   Master.master for how to toggle bootstrap.min.css vs
   bootstrap.rtl.min.css together with the dir attribute.
   =================================================================== */

/* Noto Kufi Arabic - self-hosted. The original site loaded this exact
   family from Google's old "earlyaccess" endpoint over http:// - it's
   re-hosted here from the modern Google Fonts endpoint instead, so it's
   https and doesn't depend on that legacy, unmaintained URL staying up.
   Used for both body copy and headings, same as the original theme's
   .main-holder / heading rules did. It's a variable font, so one file
   per script covers the whole 400-700 weight range. */
@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-kufi-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-kufi-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  --accent: #e2725b; /* warm coral - matches original brand accent color */
  --accent-dark: #c65a44;
  --ink: #2b2b2b;
  --muted: #6d7081; /* matches original .main-holder text color */
  --bg: #faf9f7;
  --border: #e5e0da;
  --font-base: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-base);
  line-height: 1.8; /* Arabic text needs more line-height than Latin to stay legible */
}

/* Headings get the distinct display font everywhere, site-wide - no letter-spacing,
   Arabic is a connected script and tracking breaks the letterforms */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Re-tint Bootstrap's primary button/variant to the brand accent, once, site-wide */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
}

.btn {
  font-family: var(--font-heading);
  font-weight: 600;
}

.color-accent {
  color: var(--accent);
}

/* ---------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------- */
.site-header .navbar {
  padding-block: 1rem;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-header .logo-img {
  max-height: 40px;
  width: auto;
}

.site-header .tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--muted);
}

.site-header .navbar-nav {
  gap: 0.25rem;
}

.site-header .nav-link {
  color: var(--ink);
  font-weight: 500;
  padding-inline: 1.15rem;
}

.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header .nav-link.dropdown-toggle[aria-expanded="true"] {
  color: var(--accent);
}

.site-header .dropdown-menu {
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 0.6rem;
}

.site-header .nav-item.dropdown {
  position: relative;
}

.site-header .nav-item.dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  margin-top: 1px;
  inset-inline-start: 1.25rem;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  display: none;
  z-index: 1022;
}

.site-header .nav-item.dropdown.dropdown-open::before {
  display: block;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding-block: 3rem;
}

.site-footer .social-links {
  gap: 0.75rem !important;
  margin-block-end: 1.75rem !important;
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.site-footer .social-links a:hover {
  background: #fff;
  border-color: var(--accent);
}

.site-footer .footer-nav {
  margin-block-end: 1.75rem !important;
}

.site-footer .footer-nav a {
  color: var(--ink);
}

.site-footer .footer-nav a:hover {
  color: var(--accent);
}

.site-footer .footer-nav li {
  margin-inline-end: 0.25rem;
}

.site-footer .copyright {
  color: var(--muted);
  font-size: 0.85rem;
}