/* Custom font overrides - Louguiya for all Arabic text */

/* Apply Louguiya as the main font for the entire site */
html,
body {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Override for RTL (Arabic) */
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* All text elements */
p,
span,
a,
li,
label,
input,
textarea,
button,
select,
option {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Navigation and menu items */
nav,
nav *,
.nav-link,
header,
header * {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Footer */
footer,
footer * {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Headings - already using Louguiya but ensure it */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Cards and content */
.card,
.card * {
  font-family: Louguiya, 'Noto Naskh Arabic', serif !important;
}

/* Hide the language switcher */
button[class*="outline"][class*="gap-2"]:has(svg):has(span) {
  display: none !important;
}

/* Alternative: Hide any Globe icon button in header */
header button:has(svg[class*="lucide"]) {
  display: none !important;
}

/* Hide flag icon in footer copyright section */
footer .border-t img[alt="علم موريتانيا"] {
  display: none !important;
}

/* ===== Hero Section Image Improvements ===== */
/* Target ONLY the hero background image on the homepage (first section only) */

/* Target the background div in the FIRST section only (hero section) */
/* Keep full width coverage but show from top, allowing bottom to be cropped */
main>section:first-child>div.absolute.inset-0.bg-cover.bg-center.bg-no-repeat {
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}

/* More specific: Target by checking for the hero-overlay sibling */
main>section:first-child>div.absolute.inset-0.bg-cover:has(+ div.hero-overlay),
main>section:first-child>div.bg-cover.bg-center.bg-no-repeat[style*="background-image"] {
  background-size: cover !important;
  background-position: top center !important;
}