:root {
  --42-dark: #0F0E0F;
  --42-light: #F2F2F2;
  --42-accent: #13FA04;
  --app-height: 100vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection {
  color: var(--42-dark);
  background-color: var(--42-accent);
}

::-moz-selection {
  color: var(--42-dark);
  background-color: var(--42-accent);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 100px 0 0 0; /* space for fixed navbar */
  background-color: var(--42-light);
  font-family: "42EN", sans-serif;
}

a{
  text-decoration: none;
}

button { /* neutralize default button styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--42-dark) !important;
  cursor: pointer !important;
}

/* SVG shared color helpers */
.cls-1 { fill: var(--42-dark); }
.cls-2 { fill: var(--42-accent); }
.hm-icon { fill: var(--42-dark); }
.hm-bg   { fill: var(--42-light); }

/* ================================
   Layout Helpers
   ================================ */
.container-1400 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

/* ================================
   Fixed Navbar & Logo
   ================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: var(--42-light);
  border-bottom: 2px solid var(--42-dark);
  z-index: 1600; /* above backToTop, below preview modal */
}

.nav-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left, .nav-right, .nav-center { height: 100%; }
.nav-left, .nav-right {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav-center {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}


.logo { display: flex; justify-content: center; align-items: center; }
.site-logo { display: block; height: 60px; margin: 0 auto; }

/* Secondary logo (shown only when menu is open) */
.secondary-logo {
  display: none;              /* default hidden */
  height: 100%;
  align-items: center;
  justify-content: flex-end;  /* right-aligned inside .nav-right */
}
.secondary-logo svg { height: 60px; width: auto; display: block; }
.secondary-logo.show { display: flex; }

/* ================================
   Hamburger Menu Button
   ================================ */

.hamburger-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: transparent;
  cursor: pointer !important;
  z-index: 1700;
  pointer-events: auto;
}
.hamburger-btn, .hamburger-btn *, .hamburger-btn svg, .hamburger-btn svg * { cursor: pointer !important; }

.hamburger-icon { width: 60px; fill: var(--42-dark); }
.close-icon     { width: 60px; display: none; }

.hamburger-btn.is-open .hamburger-icon { display: none; }
.hamburger-btn.is-open .close-icon     { display: block; }

/* ================================
   Full-screen Menu (below nav)
   ================================ */
.site-menu {
  width: 100%;
  height: 100dvh;
  height: var(--app-height);
  position: fixed;
  z-index: 1550; /* below navbar */
  isolation: isolate;
  top: 0; left: 0; right: 0; bottom: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  display: none;
  background: var(--42-accent);
}

@supports not (height: 100dvh) {
  .mobile-menu {
    height: calc(var(--app-height, 100vh));
  }
}

.site-menu.open { display: block; }

.site-menu-inner {
  min-height: 100%;
  padding: 40px 40px;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Site Menu Items ===== */
.site-menu .menu-item {
  display: block;
  width: 100%;
  text-decoration: none;
  border-bottom: 2px solid var(--42-dark);
  background: var(--42-accent);
  color: var(--42-dark);
  font-size: 2.4rem;
}
.site-menu .menu-item:hover {
  background: var(--42-dark);
  color: var(--42-accent);
}
.site-menu .menu-item-inner {
  height: 90px; /* matches desktop nav height */
  display: flex;
  align-items: center;
  justify-content: space-between; /* split into two halves visually */
  color: inherit;
}
.site-menu .menu-item-inner .ar { font-family: "42AR", sans-serif; direction: rtl;}

/* ===== Site Menu body wrapper ===== */
.site-menu-items { width: 100%; margin-top:100px}

/* ===== Site Menu Footer ===== */
.site-menu-footer {
  width: 100%;
  height: 100%;
  min-height: 100px;
  background: var(--42-dark);
  font-size: 0.8rem;
  color: var(--42-light);
  border-top: 2px solid var(--42-dark);
  padding: 15px 0;
  line-height: 1.1rem;
}
.site-menu-footer .smf-inner { display: flex; align-items: start; justify-content: space-between; gap: auto; column-gap: auto; }
.site-menu-footer .smf-left  { flex: 0 0 30%; text-align: left; }
.site-menu-footer .smf-center{ flex: 0 0 40%; text-align: center; display: flex; justify-content: center; align-items: center;}
.site-menu-footer .smf-center a {margin-top: 6px;}
.site-menu-footer .smf-right { flex: 0 0 30%; text-align: right; font-family: "42AR", sans-serif; direction: rtl;}

.smf-logo{
  display: block;
  height: 22px;
  margin: 0 auto;
  margin-top: 4px;
  fill: var(--42-light);
}

.smf-logo-fill{
  fill: var(--42-light);
}

.site-menu-footer .smf-center-small {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}


/* ================================
   Top Bar & Collapsed Info
   ================================ */
.top-bar {
  width: 100vw;
  margin-bottom: 20px;
  position: relative;
  background-color: var(--42-light);
  border-bottom: 2px solid var(--42-dark);
  padding: 16px 0;
}

.top-bar-inner { /* tags container grid */
  position: relative;
  display: grid;
  grid-template-columns: 1fr; /* tagsContainer spans full width */
  align-items: stretch;
  column-gap: 0;
  width: 100%;
  margin: 0 auto;
}

.collapsed-info { display: none; margin: 10px auto 0 auto; padding: 12px 0; }
.collapsed-info .ci-inner { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 12px; }
.collapsed-info .ci-ar { font-family: "42AR", sans-serif; text-align: right; font-size: 2.4rem; line-height: 1.2; direction: rtl; }
.collapsed-info .ci-en { text-align: left; font-size: 2.4rem; line-height: 1.2; }

/* ================================
   Elements Menu Button
   ================================ */
#elementsMenuBtn {
  display: flex;
  width: 100%;
  margin: 0 auto 10px auto;
  padding: 0 12px;
  height: 50px;
  background: var(--42-accent);
  outline: 2px solid var(--42-dark);
  outline-offset: -2px;
  color: var(--42-dark) !important;
  text-align: right;
  cursor: pointer;
  justify-content: flex-end; /* text right */
  align-items: center;        /* vertical center */
  gap: 8px;                   /* space between EN and AR */
  font-size: 1.4rem;
}
#elementsMenuBtn .arrow { display: inline-flex; width: 20px; height: 20px; margin-right: auto; align-items: center; justify-content: center; }
#elementsMenuBtn .arrow svg { height: 1em; width: auto; display: block; transform: rotate(0deg); }
#elementsMenuBtn.is-open .arrow svg { transform: rotate(180deg); }
#elementsMenuBtn .ar { font-family: "42AR", sans-serif; direction: rtl; }
#elementsMenuBtn .en { font-family: inherit; }
#elementsMenuBtn:hover { outline: 3px solid var(--42-dark); outline-offset: -3px; }

/* ================================
   Tags Strip
   ================================ */
.tags { position: relative; }

.tags-inner {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 0;
  direction: rtl;            /* visual order right-to-left */
  justify-content: flex-start; text-align: right;
}

.tags-inner button {
  width: 56px;
  padding: 8px 0;
  flex: 0 0 auto; text-align: center;
  outline: 2px solid var(--42-dark); outline-offset: -2px;
  background: var(--42-light);
  font-size: 1.4rem;
  cursor: pointer;
  font-family: "42AR", sans-serif;
  direction: rtl;
  color: var(--42-dark) !important;
}

.all-tag-btn {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 56px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 0;
  outline: 2px solid var(--42-dark); outline-offset: -2px;
  background: var(--42-light);
  cursor: pointer; z-index: 2;
  font-size: 1.6rem;
  font-family: "42AR", sans-serif;
  direction: rtl;
  color: var(--42-dark) !important;
}

.tags-inner button:hover,
.all-tag-btn:hover,
.tags-inner button.active,
.all-tag-btn.active {
  background: var(--42-accent);
  outline: 3px solid var(--42-dark);
  outline-offset: -3px;
  color: var(--42-dark) !important;
}

/* ================================
   Show More Button
   ================================ */
#loadMoreBtn {
  display: none; align-items: center; gap: 8px;
  padding: 8px 12px; box-sizing: border-box;
  outline: 2px solid var(--42-dark); outline-offset: -2px;
  background: var(--42-light);
  font-size: 1.4rem; cursor: pointer; color: var(--42-dark) !important;
  margin: 1.5rem auto 0 auto;
}
#loadMoreBtn:hover { background: var(--42-accent); outline: 3px solid var(--42-dark); outline-offset: -3px; }
#loadMoreBtn .en { font-family: inherit; }
#loadMoreBtn .ar { font-family: "42AR", sans-serif; direction: rtl; }

/* ================================
   Masonry Grid
   ================================ */
.masonry { position: relative; max-width: 1400px; margin: 0 auto; }

/* Hide grid while (re)loading to prevent stacked flash */
.masonry.is-loading { visibility: hidden; }

.item {
  position: absolute;
  width: 22%;
  background: var(--42-light);
  overflow: hidden;
}

.item img,
.item video { display: block; width: 100%; height: auto; -webkit-clip-path: inset(2px); clip-path: inset(2px); }

.item img:hover,
.item video:hover { cursor: pointer; }

/* Hover outline above media via pseudo-element */
.item::after {
  content: "";
  position: absolute; inset: 0;
  box-sizing: border-box; border: 3px solid var(--42-dark);
  opacity: 0; pointer-events: none; z-index: 1;
}
.item:hover::after { opacity: 1; }

/* ================================
   Preview Modal
   ================================ */
.preview-modal {
  width: 100%;
  height: 100dvh;
  height: var(--app-height);
  position: fixed;
  z-index: 1800;
  isolation: isolate;
  top: 0; left: 0; right: 0; bottom: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  display: none;
  inset: 0;
  padding: 2rem;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.preview-close { position: absolute; top: 20px; right: 30px; font-size: 3rem; background: none; border: none; cursor: pointer; }
.media-preview { width: 75%; display: flex; justify-content: center; align-items: center; }
.preview-image, .preview-video { width: 100%; height: auto; max-height: 90vh; object-fit: contain; display: none; -webkit-clip-path: inset(2px); clip-path: inset(2px); }
.preview-info { width: 25%; color: var(--42-light); padding: 2rem; }
.preview-info ul { list-style: none; padding: 0; line-height: 1.6; }
.preview-info li { font-size: 0.9rem; }
.preview-info li.year { font-size: 0.9rem; }
#previewVideo::-webkit-media-controls { display: none !important; }
#infoPanel ul li:first-child,
.preview-info .arabic-name { font-family: "42AR", sans-serif; direction: rtl; }
.preview-info .arabic-country { font-family: "42AR", sans-serif; direction: rtl;}
#closePreview { color: var(--42-accent) !important; z-index: 2000; }
#infoPanel .instagram-line a { color: var(--42-accent); text-decoration: none; }

/* ================================
   Back To Top
   ================================ */
#backToTopBtn {
  display: none; position: fixed; right: 16px; bottom: 16px;
  width: 50px; height: 50px; padding: 0; align-items: center; justify-content: center;
  background: var(--42-light); outline: 2px solid var(--42-dark); outline-offset: -2px; cursor: pointer;
  z-index: 1500;
}
#backToTopBtn svg { width: 100%; height: 100%; display: block; }

/* ================================
   Footer
   ================================ */
.page-footer { background: var(--42-accent); color: var(--42-dark); border-top: 2px solid var(--42-dark); padding-top: 15px; margin-top: 50px;}

.page-footer ::selection {
  color: var(--42-accent);
  background-color: var(--42-dark);
}

.page-footer .page-footer-inner{
  display: flex; align-items: center; justify-content: space-between; gap: auto; column-gap: auto; padding-bottom: 15px;
  line-height: 1.4rem;
}

/* Footer columns wrapper */
.page-footer .pf-columns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: auto;
  column-gap: auto;
}

/* Mobile-only footer GIF (hidden by default) */
.footer-logo-mobile {
  display: none;
  width: 100%;
}
.footer-logo-mobile img {
  display: block;
  width: 70%;
  height: auto;
  -webkit-clip-path: inset(20px);
  clip-path: inset(20px);
  margin: auto;
  margin-top: -50px;
  margin-bottom: -20px;
}

.page-footer .pf-center {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.page-footer .pf-left{
  flex: 0 0 25%; text-align: left;
}

.page-footer .pf-center{
  flex: 0 0 46%; text-align: center; display: flex; justify-content: center; align-items: center;
}
.page-footer .pf-right{
  flex: 0 0 25%; text-align: right; font-family: "42AR", sans-serif; direction: rtl;
}

/* Fix height for pf-left and pf-right direct <p> tags */
.pf-left p,
.pf-right p {
  height: 85px;
  display: block;
}

/* Page footer center GIF */
.pf-center .pf-logo-gif {
  width: 85%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ================================
   Responsive
   ================================ */

/* Page footer link blocks */
.pf-links {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 0;
}
.pf-links .pf-link {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px; /* vertical centering */
  background: var(--42-accent);
  color: var(--42-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--42-dark);
  padding: 0 12px;
}
/* Add a top border to the first item to enclose the group */
.pf-links .pf-link:first-child {
  border-top: 2px solid var(--42-dark);
}
/* Hover inversion */
.pf-links .pf-link:hover {
  background: var(--42-dark);
  color: var(--42-accent);
}
/* Alignment per side */
.pf-links-left .pf-link {
  text-align: left;
}
.pf-links-right .pf-link {
  text-align: right;
}

/* =========================================================
   Consolidated Responsive Breakpoints
   Keep all responsive overrides grouped here (order matters)
   1) <= 1000px  |  2) <= 710px  |  3) <= 360px
========================================================= */

/* ===== 1) Medium screens and below (<= 1000px) ===== */
@media (max-width: 1000px) {
  /* (carried over) */
  .site-menu-footer br { display: none; }
  .item { width: 29%; }
  .site-menu .menu-item-inner { height: 70px; }
  .site-menu .menu-item { font-size: 1.8rem; }

  .pf-center .pf-logo-gif {
  width: 95%;
  }
}

@media (max-width: 800px) {
  .page-footer-inner .pf-left,
  .page-footer-inner .pf-right{flex: 0 0 46%;}

  .page-footer-inner .pf-center{ display: none;}
  .pf-links{ display: none; }

  .pf-center .pf-logo-gif {
  width: 95%;
  }
  .pf-left p,
  .pf-right p {
  height: 100px;
  }
  .page-footer .page-footer-inner {
  flex-direction: column;   /* stack the wrapper and the GIF */
  align-items: center;      /* center the stacked blocks */
  }
  .page-footer .pf-columns {
    width: 100%;
  }
  .footer-logo-mobile {
    display: block;           /* show GIF only on small screens */
    margin-top: 12px;
  }
  .footer-logo-mobile img {
  width: 50%;
  }

}

/* ===== 2) Small tablets / large phones (<= 710px) ===== */
@media (max-width: 710px) {
  .hamburger-icon svg { width: 40px; }
  .close-icon svg { width: 40px;}
  
  /* Layout */
  .container-1400 { width: 90%; padding: 0; }

  /* Collapsed info text */
  .collapsed-info .ci-ar,
  .collapsed-info .ci-en { font-size: 1.35rem; }

  /* Grid items */
  .item { width: 42%; }

  /* Preview modal: vertical layout on small screens */
  .preview-modal {
    flex-direction: column;        /* media on top, info below */
    justify-content: flex-start;   /* start at top (not vertically centered) */
    align-items: center;           /* center horizontally */
    padding: 1rem;                 /* slightly tighter padding */
  }

  .media-preview {
    width: 100%;
    margin-top: 5rem;
  }

  .preview-image,
  .preview-video {
    max-height: 60vh;              /* leave room for info below */
  }

  .preview-info {
    width: fit-content;
    text-align: center;            /* center the text in the info panel */
    padding: 0.9rem 0;
  }

  .preview-info ul {
    text-align: center;            /* ensure list content is centered */
  }

  /* Menu item sizing on small screens */
  .site-menu-items {margin-top: 60px;}
  .site-menu .menu-item-inner { height: 40px; }
  .site-menu .menu-item { font-size: 1.15rem; }

  .site-logo{display: none;}
  /* Nav: secondary logo + hamburger buttons at 45px */
  .nav-right .secondary-logo { height: 40px; display: flex; align-items: center; }
  .nav-right .secondary-logo svg { height: 40px; width: auto; display: block; }
  .hamburger-btn { height: 25px; }
  .hamburger-btn .hamburger-icon,
  .hamburger-btn .close-icon { height: 25px; width: auto; }

  .site-menu-footer {
  min-height: 150px;
  }
  .site-menu-footer .smf-center{ display: none;}
  .site-menu-footer .smf-center a {margin-top: 0px;}
  .site-menu-footer .smf-left,
  .site-menu-footer .smf-right {
    flex: 0 0 46%;
  }

  .site-menu-footer .smf-center-small {
    display: flex;
  }

  #elementsMenuBtn,
  #loadMoreBtn{
    font-size: 1.15rem;
    height: 50px;
  }
  .pf-left p,
  .pf-right p {
  height: 110px;
  }

  body {
    padding: 60px 0 0 0;
  }

  .site-nav {
    height: 60px;
  }

  .tags-inner button,
  .all-tag-btn {
    width: 43px;
    padding: 6px 0;
    font-size: 1.1rem;
  }
}

@media (max-width: 525px) {
  .footer-logo-mobile img {
    width: 90%;
    margin-top: -20px;
    margin-bottom: -15px;
  }
}

@media (max-width: 450px) {
  .pf-left p,
  .pf-right p {
  height: 125px;
  }

  .footer-logo-mobile img {
  width: 95%;
  }
}

/* ===== 3) Ultra-small phones (<= 360px) ===== */
@media (max-width: 380px) {
  /* Footer: two columns + alternate center below */


  .site-menu-footer {
  min-height: 170px;
  }

  .site-menu-footer .smf-center-small .smf-logo {
    height: 16px;
    width: auto;
  }

  #elementsMenuBtn,
  #loadMoreBtn{
    font-size: 1.08rem;
    height: 50px;
    font-weight: 500;
  }

  .pf-left p,
  .pf-right p {
  height: 155px;
  }

  .footer-logo-mobile img {
    width: 90%;
  }

}
/* === Menu-open nav background === */
.site-nav.menu-open {
  background: var(--42-accent);
}


#hamburgerMenuBtn.menu-open .close-icon .hm-bg {
  fill: var(--42-accent);
}