/* Final responsive layout and cross-page fixes for Al-Madrasa al-Ashrafiya */
*, *::before, *::after { box-sizing: border-box; }
html { width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  width:100%; max-width:1200px; min-height:100vh; margin:0 auto !important; padding:18px 24px !important;
  overflow-x:hidden; font-size:16px !important; line-height:1.6; font-family:Arial, Helvetica, sans-serif;
  background-size:cover !important; background-position:center top; background-attachment:fixed;
}
nav { width:100%; margin:0 0 18px; overflow:visible !important; }
nav ol, nav ul { width:100%; margin:0; padding:0; list-style:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; }
nav .menu, nav .lang { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; }
nav .menu { flex:1 1 auto; }
nav .lang { flex:0 0 auto; padding:0 !important; margin:0 !important; width:auto !important; border:0 !important; background:transparent !important; float:none !important; }
nav li { float:none !important; list-style:none; margin:0 !important; padding:0 !important; }
nav a {
  display:block !important; width:auto !important; min-width:0; min-height:42px; padding:9px 13px !important; margin:0 !important;
  border:2px solid rgba(255,255,255,.9) !important; border-radius:6px; text-decoration:none; text-align:center;
  font-size:16px !important; line-height:1.25; color:#111; background:wheat;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
nav a:hover { background:green !important; color:white !important; transform:translateY(-1px); }
nav a.home, nav a.ar, nav a.en, nav a.it, nav a.de, nav a.fr { }
hr { border:0; border-top:1px solid rgba(0,0,0,.2); margin:12px 0 24px; }
h1 { max-width:1100px; margin:20px auto !important; font-size:clamp(1.8rem,4vw,3rem) !important; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
.page-image { width:100%; margin:20px auto 30px; text-align:center; }
.page-image img { display:block; width:min(750px,100%) !important; height:auto !important; margin:0 auto; border:5px solid wheat; border-radius:18px; }
#intro, p { max-width:1050px; margin:18px auto !important; font-size:clamp(1.05rem,1.7vw,1.45rem) !important; line-height:1.85; }
.points { max-width:1050px; margin:20px auto; }
.points ul { margin:0 !important; padding-inline-start:28px; font-size:clamp(1rem,1.6vw,1.3rem) !important; line-height:1.8; }
.points ul li { margin:10px 0 !important; float:none !important; }
.Opening { max-width:1000px; margin:44px auto 24px !important; padding:22px; font-size:clamp(1.1rem,2vw,1.55rem) !important; line-height:1.7; text-align:center; }
.notice { width:min(900px,100%) !important; margin:24px auto !important; padding:20px !important; font-size:clamp(1rem,1.5vw,1.2rem) !important; line-height:1.8; text-indent:0 !important; border:4px solid wheat; border-radius:12px; }
footer { clear:both; }
.copyright-footer { width:100% !important; margin:42px auto 0 !important; padding:18px 10px 6px !important; border-top:1px solid rgba(60,60,60,.35); background:transparent !important; color:#444; text-align:center; font:600 14px/1.5 Arial,Helvetica,sans-serif !important; letter-spacing:.1px; }
.copyright-footer.dark { border-top-color:rgba(255,255,255,.35); color:#eee; }
.gallery, .restoration-project { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; width:min(1100px,100%); margin:25px auto; }
.gallery a, .restoration-project a { display:block; margin:0; text-decoration:none; }
.gallery img, .restoration-project img { display:block; width:100% !important; height:270px !important; margin:0 !important; padding:5px !important; object-fit:cover; border-radius:14px; transition:transform .2s ease,filter .2s ease; }
.gallery img:hover, .restoration-project img:hover { transform:scale(1.02); filter:brightness(.95); }
center { display:block; max-width:1050px; margin:30px auto !important; }
center h1 { font-size:clamp(1.2rem,2.4vw,2rem) !important; }
center h1 a { color:inherit; overflow-wrap:anywhere; }
@media (max-width: 800px) {
  body { padding:12px !important; background-attachment:scroll; }
  nav ol, nav ul, nav .menu, nav .lang { gap:5px; }
  nav .menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  nav .lang { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100% !important; margin-top:4px !important; }
  nav .menu a, nav .lang a { width:100% !important; padding:9px 4px !important; font-size:14px !important; }
  .gallery, .restoration-project { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .gallery img, .restoration-project img { height:220px !important; }
}
@media (max-width: 520px) {
  .gallery, .restoration-project { grid-template-columns:1fr; }
  .gallery img, .restoration-project img { height:auto !important; aspect-ratio:4/3; }
  h1 { font-size:clamp(1.55rem,8vw,2.2rem) !important; }
  #intro, p { font-size:1.05rem !important; }
  .points ul { font-size:1rem !important; }
}
::selection { color:green; background:white; }
.local-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.9);align-items:center;justify-content:center;padding:60px 70px;flex-direction:column}.local-lightbox.open{display:flex}.local-lightbox img{max-width:90vw;max-height:78vh;width:auto!important;height:auto!important;object-fit:contain;border:4px solid #fff;border-radius:6px}.local-lightbox button{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer}.lb-close{top:15px;right:20px;font-size:34px;width:48px;height:48px}.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:48px;width:52px;height:70px}.lb-prev{left:15px}.lb-next{right:15px}.lb-caption{color:#fff;margin-top:12px;text-align:center;font-size:15px}.lb-open{overflow:hidden}


/* Navigation alignment update – desktop/laptop
   The navigation now uses the same 1050px content width as the introductory text.
   Menu and language buttons stay on one horizontal line with a deliberate gap. */
nav {
  width: min(1050px, 100%) !important;
  margin: 0 auto 18px !important;
}
nav > ol {
  width: 100% !important;
  min-height: 48px;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  padding: 0 !important;
}
nav > ol > .menu,
nav > ol > .lang {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
nav > ol > .menu {
  flex: 1 1 auto !important;
  min-width: 0;
  justify-content: flex-start !important;
}
nav > ol > .lang {
  flex: 0 0 auto !important;
}
nav > ol > .menu li,
nav > ol > .lang li {
  float: none !important;
  flex: 0 0 auto;
}
nav > ol > .menu a,
nav > ol > .lang a {
  min-height: 46px;
  padding: 10px 14px !important;
  font-size: 19px !important;
  line-height: 1.2;
  white-space: nowrap;
}
nav > ol > .lang a {
  min-width: 50px;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* RTL: menu remains at the right and languages at the left. */
html[dir="rtl"] nav > ol {
  direction: rtl;
}
html[dir="rtl"] nav > ol > .menu { order: 1; }
html[dir="rtl"] nav > ol > .lang { order: 2; }

/* LTR: menu at the left and languages at the right. */
html:not([dir="rtl"]) nav > ol { direction: ltr; }
html:not([dir="rtl"]) nav > ol > .menu { order: 1; }
html:not([dir="rtl"]) nav > ol > .lang { order: 2; }

@media (max-width: 1120px) and (min-width: 801px) {
  nav > ol { gap: 18px !important; }
  nav > ol > .menu,
  nav > ol > .lang { gap: 4px !important; }
  nav > ol > .menu a,
  nav > ol > .lang a {
    font-size: 17px !important;
    padding: 9px 10px !important;
  }
}

@media (max-width: 800px) {
  nav > ol {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  nav > ol > .menu,
  nav > ol > .lang {
    width: 100% !important;
    justify-content: center;
    flex-wrap: wrap !important;
  }
  nav > ol > .lang { margin-top: 2px !important; }
  nav > ol > .menu a,
  nav > ol > .lang a {
    min-height: 42px;
    font-size: 16px !important;
    padding: 8px 10px !important;
  }
}


/* Collapsible language switcher – icon + current language abbreviation */
nav > ol > .language-switcher {
  position: relative;
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
  float: none !important;
}
.language-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 76px;
  min-height: 46px;
  padding: 9px 12px !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  border-radius: 7px;
  background: wheat;
  color: #111;
  font: 700 17px/1.2 Arial, Helvetica, sans-serif !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.language-toggle:hover,
.language-switcher.open .language-toggle {
  background: green;
  color: white;
}
.language-icon { font-size: 20px; line-height: 1; }
.language-code { letter-spacing: .4px; }
.language-chevron { font-size: 16px; line-height: 1; margin-top: -3px; }
.language-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  z-index: 1000;
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 150px !important;
  margin: 0 !important;
  padding: 7px !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  border-radius: 9px;
  background: rgba(255,250,235,.98) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  list-style: none !important;
}
.language-switcher.open .language-dropdown { display: flex !important; }
html[dir="rtl"] .language-dropdown { left: 0; right: auto; }
html:not([dir="rtl"]) .language-dropdown { right: 0; left: auto; }
.language-dropdown li { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
.language-dropdown a {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 6px;
  background: transparent;
  color: #111;
  font-size: 15px !important;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.language-dropdown a:hover,
.language-dropdown a.ar:hover,
.language-dropdown a.it:hover,
.language-dropdown a.en:hover,
.language-dropdown a.de:hover,
.language-dropdown a.fr:hover {
  background: green !important;
  color: white !important;
  transform: none !important;
}
.language-dropdown a.ar,
.language-dropdown a.it,
.language-dropdown a.en,
.language-dropdown a.de,
.language-dropdown a.fr {
  background: transparent;
  color: #111;
}
@media (max-width: 800px) {
  nav > ol > .language-switcher {
    width: auto !important;
    margin-top: 2px !important;
  }
  .language-toggle {
    min-height: 42px;
    min-width: 72px;
    padding: 8px 10px !important;
    font-size: 15px !important;
  }
  .language-dropdown { width: 140px !important; }
}