/* add a small Arabic-inspired palette and base font */
:root {
  --maroon: #6a1b1b;
  --maroon-2: #4b0f0f; /* added fallback shade used by the button gradient */
  --gold: #d4af37;
  --sand: #f3e9da;
  --deep-green: #274c3c;
  --muted: #666;
}

body {
  background-image: url("Islamic Moroccan patterns.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* Background and text color for main pages with transparent PNG background */
body.index-page,
body.current-page,
body.past-page,
body.gallery-page {
  background-image: 
    linear-gradient(rgba(243, 233, 218, 0.6), rgba(247, 239, 230, 0.6)), /* semi-transparent overlay */
    url("Islamic Moroccan patterns.png"),
    linear-gradient(180deg, var(--sand) 0%, #f7efe6 60%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, center center, center center;
  background-size: cover, cover, cover;
  background-attachment: fixed, fixed, fixed;
  color: #333; /* readable on light background */
}


/* make the ornament smaller on narrow screens so it doesn't crowd content */
@media (max-width: 900px) {
  body.index-page,
  body.current-page,
  body.past-page {
    /* no page ornaments; gradient unchanged */
  }
}

/* White tint layer over background — keep very light so colors show */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* make overlay much lighter so background images are clearer */
  background-color: rgba(255, 255, 255, 0.08);
  z-index: -1;
}

/* Navigation bar */
nav {
  text-align: center;
  margin-top: 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 1.25rem 0;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* nav list items positioned so their pseudo-elements can sit next to each button */
nav ul li {
  margin: 0;
  position: relative; /* added so ::before / ::after on li can position relative to the button */
}

nav ul li a {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1.5px solid #333;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
  background-color: #ddd;
  border-color: #000000; /* Subtle gold accent for active/hover */
  text-decoration: underline;
}

/* decorative motif next to the first nav button (DOM first) */
nav ul li:first-child::before {
  content: "۞";
  position: absolute;
  /* place visually outside the button on the inline start side (works for LTR and RTL) */
  inset-inline-start: -28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--gold);
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0.98;
}

/* decorative motif next to the last nav button (DOM last) */
nav ul li:last-child::after {
  content: "۞";
  position: absolute;
  /* place visually outside the button on the inline end side (works for LTR and RTL) */
  inset-inline-end: -28px;
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  font-size: 20px;
  color: var(--gold);
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0.98;
}

/* Language selector */
.lang-switcher {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  margin-left: 1rem;
}

.lang-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: #333;
}

.lang-btn.active {
  background: #333;
  color: #fff;
  border-color: #222;
}

/* Single small floating language toggle; position fixed on the right (always visible) */
.lang-toggle{
  position: fixed;
  top: 12px;
  right: 8px; /* always on the right so it doesn't move when dir changes */
  z-index: 9999; /* higher so it's always available */
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

/* Header section */
header {
  padding: 2rem;
  text-align: center;
}

/* Content sections — inherit direction and align to start (LTR -> left, RTL -> right) */
section {
  background-color: rgba(255, 255, 255, 0.9); /* more opaque for readability */
  padding: 2rem;
  margin: 4rem 1rem 2rem 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.12); /* slightly stronger shadow */
  /* let the html dir determine reading direction */
  direction: inherit;
  /* align to start so LTR is left, RTL is right */
  text-align: start;
}

.intro-box {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  padding: 2rem !important;
  margin: 3rem auto !important;
  max-width: 800px !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.1) !important;
  font-size: 1.2rem !important;
  line-height: 2rem !important;
  color: #222 !important;
  /* follow html dir and align to start */
  direction: inherit !important;
  text-align: start !important;
}



.current-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 900px;
  width: 95%;
  min-height: 300px;
  padding: 3rem 2rem;
  margin: 4rem auto 2rem auto;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  font-size: 1.3rem;
  color: #000;
  direction: inherit;
  text-align: start;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    url("Um.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
  background-blend-mode: overlay;
}

.current-box p {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  display: inline-block;
  
}

/* Responsive Video Wrapper: use aspect-ratio so the iframe size is predictable and contained */
.video-wrapper {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;      /* modern, explicit aspect ratio */
  margin: 1rem auto;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* make the iframe fill the wrapper (no absolute positioning) */
.video-wrapper iframe,
.video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Optional: limit height so very tall viewports won't make the video huge */
@media (min-height: 800px) {
  .video-wrapper { max-height: 70vh; }
}

/* Footer section */
.footer-box {
  background-color: rgba(255, 255, 255, 0.97);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);

  /* ensure children stack predictably and stay centered */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  position: relative; /* enable decorative pseudo-elements on the box */
}

/* Remove any decorative ornaments introduced previously.
   This hides ::before / ::after on footer containers and on footer-social. */
.footer-box::before,
.footer-box::after,
.footer-social::before,
.footer-social::after {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ensure no extra padding reserved for ornaments */
.footer-social { padding-inline: 0 !important; }

/* Contact line: icon + text keep the same visual order as in DOM */
.footer-contact {
  /* make a small, centered flex row so icon and text keep their DOM order */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;

  /* keep original visual styles */
  font-size: 0.9rem;
  color: #555;
  margin: 0;

  /* prevent bidi from reordering icon/text; keep icon on the left visually */
  direction: ltr !important;
  unicode-bidi: isolate-override;
}

/* social icons: always left-to-right in visual order because flex follows DOM order */
.footer-social {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 0;

  /* force LTR and isolate to stop mirroring when page dir changes */
  direction: ltr !important;
  unicode-bidi: isolate-override;
}

/* ensure the icon elements don't get mirrored by bidi processing */
.footer-contact i,
.footer-social i {
  display: inline-block;
  /* isolate from bidi effects (safety) */
  unicode-bidi: isolate;
}

/* maintain hover/color behavior */
.footer-social a.social-icon {
  color: var(--maroon) !important; /* visible and thematic */
  margin: 0 0.5rem;
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-social a.social-icon:hover {
  color: var(--gold);
}

/* newsletter message and icon (visible) */
#newsletter-msg {
  color: #000 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 700;
}

/* icon shown in messages */
.newsletter-icon {
  color: var(--maroon) !important;
  fill: currentColor !important;    /* ensure inline SVG uses currentColor */
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

/* For injected SVGs where <svg class="newsletter-icon"> is used */
#newsletter-msg svg.newsletter-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Ensure Font Awesome icons inside the message are visible too */
#newsletter-msg .fa,
#newsletter-msg .fab,
#newsletter-msg .fas {
  color: var(--maroon) !important;
}

/* Force all primary text to black (override other rules) */
body,
body.index-page,
body.current-page,
body.past-page,
header,
section,
.intro-box,
.current-box,
footer,
nav,
nav ul li a,
.footer-contact,
.footer-box,
.footer-social,
#newsletter-msg {
  color: #000 !important;
}

/* Ensure nav links are black */
nav ul li a { color: #000 !important; }

/* Ensure footer contact text is black and icons visible */
.footer-contact { color: #000 !important; }

/* Newsletter message container — visible and aligned */
#newsletter-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 700;
  color: #000 !important;
}

/* Newsletter icon (SVG or font) — force visible color and fill */
.newsletter-icon {
  color: var(--maroon) !important;
  fill: currentColor !important;    /* ensure inline SVG uses currentColor */
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

/* For injected SVGs where <svg class="newsletter-icon"> is used */
#newsletter-msg svg.newsletter-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Ensure Font Awesome icons inside the message are visible too */
#newsletter-msg .fa,
#newsletter-msg .fab,
#newsletter-msg .fas {
  color: var(--maroon) !important;
}

/* Make footer social icons clearly visible and thematic */
.footer-social a.social-icon {
  color: var(--maroon) !important;
}

/* ===== NAV SIDES: decorative icon on both visual sides of the pill nav =====
   Copy these rules into other projects to place the same symbol on nav sides.
   The nav > ul is made position:relative; the pseudo-elements are absolute and
   sit outside the pill container. pointer-events:none ensures they don't intercept clicks.
*/
nav > ul { 
  position: relative; /* ensure pseudo-elements position relative to this container */
  padding: 0 48px;    /* space for the decorative icons on both sides */
}

/* decorative Arabic motifs on both visual sides of nav */
/* Use a symmetric ornament and gold color; keep pointer-events:none */
nav > ul::before,
nav > ul::after {
  content: none;
}

/* Menu toggle (three-dashes) — visible and positioned at physical left (always left) */
.menu-toggle {
  position: fixed;
  top: 14px;
  left: 12px; /* always stay on the physical left side */
  z-index: 1100;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  display: block;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Dropdown menu shown when three-dashes is clicked */
.dropdown-menu {
  position: fixed;
  top: 56px;      /* below the toggle */
  left: 12px;     /* align with the toggle; always physical left */
  z-index: 1100;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 160px;
}

/* visible state */
.dropdown-menu.open { display: flex; }

/* links inside dropdown */
.dropdown-menu a,
.dropdown-menu button.lang-toggle {
  display: block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: #000;
  background: transparent;
  border: none;
  text-align: start;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.dropdown-menu a:hover,
.dropdown-menu button.lang-toggle:hover {
  background: rgba(0,0,0,0.04);
}

/* ensure the to-top button stays visible and always on the physical right */
#to-top {
  position: fixed;
  bottom: 20px;     /* physical bottom */
  right: 16px;      /* physical right (always) */
  z-index: 1200;
  display: none;
  background: var(--maroon);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 18px;
}

/* Responsive: collapse sidebar and show toggle on small screens */
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .sidebar {
    transform: translateX(-110%); /* hide off-screen on inline-start side */
  }
  .sidebar.open {
    transform: translateX(0);
  }
  /* remove reserved body padding when sidebar hidden */
  body { padding-inline-start: 0; padding-inline-end: 0; }
}

/* small refinement so main header/content centers when sidebar present */
header, .intro-box, section, .current-box {
  max-width: 900px;
  margin-inline: auto;
}

/* bring motifs closer on small screens */
@media (max-width: 600px) {
  nav ul li:first-child::before { inset-inline-start: -18px; font-size: 18px; }
  nav ul li:last-child::after  { inset-inline-end:   -18px; font-size: 18px; }
}

/* increase contrast of content boxes on colored backgrounds */
section,
.intro-box,
.current-box,
.footer-box {
  background-color: rgba(255,255,255,0.95);
  color: inherit;
}

/* when on dark pages, keep boxes slightly translucent but readable */
body.current-page section,
body.past-page section {
  background-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  color: #fff;
}

/* ensure footer icons remain visible on dark backgrounds */
.footer-social a.social-icon { color: inherit; opacity: 0.95; }

/* newsletter submit button icon spacing (use inline-end so spacing is correct both RTL and LTR) */
#newsletter-submit .btn-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 0.5rem; /* space between icon and text; logical property works for RTL/LTR */
  color: #fff; /* icon uses currentColor via SVG path fill="currentColor" */
  fill: currentColor;
}

/* ensure the button text span keeps its baseline */
#newsletter-submit .btn-text { vertical-align: middle; }

/* Make Sure footer-social is positioned and ornaments are visible */
.footer-social {
  position: relative; /* allow absolutely-positioned ornaments */
  padding-inline: 0; /* no extra space needed */
  z-index: 0; /* baseline for stacking; icons will be above */
}


/* smaller ornaments on narrow screens */
@media (max-width: 600px) {
  .footer-social { padding-inline: 28px; }
  .footer-social::before,
  .footer-social::after {
    width: 36px;
    height: 36px;
    left: -18px;
    right: -18px;
  }
}

/* Gallery Section Styles */
.gallery-section {
  padding: 20px;
  background-color: #f9f9f9; /* Light background for contrast */
  text-align: center;
}

.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;

  /* Preserve order regardless of direction */
  direction: ltr !important;
}


/* Each gallery image with caption */
.gallery-item {
  max-width: 250px; /* Limit image size */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-item img {
  width: 100%; /* Full width of container */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

/* Hover effect on images */
.gallery-item img:hover {
  transform: scale(1.05);
}

/* Caption styling */
.caption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #555;
}