/*
 * ═══════════════════════════════════════════════════════
 *  RUMMAN — Shared Stylesheet
 *  Cinematic Arabic film criticism platform
 *
 *  Usage: <link rel="stylesheet" href="css/shared.css">
 *  Requires: Tailwind CDN + Google Fonts (IBM Plex Sans Arabic,
 *            Noto Sans Arabic, Bebas Neue, Inter)
 * ═══════════════════════════════════════════════════════
 */

/* ─── Brand Tokens ─────────────────────────────────────
   Source of truth for all brand colors.
   Use these variables everywhere instead of raw hex.
──────────────────────────────────────────────────────── */
:root {
  --clr-red:    #5C000F; /* Deep Blood Red — primary accent */
  --clr-black:  #12100E; /* Warm Black — page background */
  --clr-dark:   #0A0908; /* Near Black — section backgrounds */
  --clr-card:   #0E0C0A; /* Card Black — card backgrounds */
  --clr-ivory:  #E8E0D2; /* Cinema Ivory — primary text */
  --clr-smoke:  #8C8570; /* Smoke Gray — secondary text / labels */

  --font-ar-head: "IBM Plex Sans Arabic", sans-serif;
  --font-ar-body: "Noto Sans Arabic", sans-serif;
  --font-en-head: "Bebas Neue", cursive;
  --font-en-body: "Inter", sans-serif;
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--clr-black);
  color: var(--clr-ivory);
  overflow-x: hidden;
}
a { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ─── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--clr-dark); }
::-webkit-scrollbar-thumb { background: var(--clr-red); }

/* ─── Film Grain Overlay ─────────────────────────────────
   Fixed full-screen grain texture for cinematic feel.
   Add <div id="grain" aria-hidden="true"></div> to body.
──────────────────────────────────────────────────────── */
#grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: grain 1.4s steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 2%); }
  50%  { transform: translate(2%, -2%); }
  75%  { transform: translate(-1%, 3%); }
  100% { transform: translate(1%, -1%); }
}

/* ─── Navigation ─────────────────────────────────────────
   Shared nav-link underline animation and scroll state.
──────────────────────────────────────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; bottom: -4px; right: 0;
  width: 0; height: 1px;
  background: var(--clr-red);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--clr-ivory); }

nav.scrolled {
  background: rgba(10,9,8,.96) !important;
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(232,224,210,.1) !important;
}

/* ─── Cinematic Glow Button ──────────────────────────────
   Parallelogram shape with pulsing red inner glow.
   Usage: <a class="btn-glow"><span class="btn-glow-text">Label</span></a>
──────────────────────────────────────────────────────── */
@keyframes btnGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(150,0,18,.42), 0 0 28px rgba(92,0,15,.22),
      inset 0 0 18px rgba(140,0,17,.35), inset 0 0 38px rgba(80,0,10,.2);
  }
  50% {
    box-shadow:
      0 0 22px rgba(185,0,22,.58), 0 0 50px rgba(120,0,15,.32),
      inset 0 0 30px rgba(170,0,22,.48), inset 0 0 58px rgba(100,0,12,.3);
  }
}
@keyframes btnIG { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

.btn-glow {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .28rem .95rem;
  border-radius: 0;
  background: radial-gradient(ellipse at center, rgba(75,0,10,.72), rgba(22,4,4,.9) 60%, rgba(10,2,2,.96));
  border: 1px solid rgba(160,0,20,.52);
  color: rgba(232,224,210,.82);
  cursor: pointer; overflow: hidden; text-decoration: none;
  transform: skewX(-12deg);
  transition: border-color .4s, transform .35s cubic-bezier(.23,1,.32,1);
  animation: btnGlowPulse 3s ease-in-out infinite;
}
.btn-glow::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(220,40,30,.08), transparent);
  pointer-events: none; z-index: 1;
}
.btn-glow::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(170,0,22,.38), rgba(90,0,12,.2) 45%, transparent 80%);
  pointer-events: none; z-index: 0;
  animation: btnIG 3s ease-in-out infinite;
}
.btn-glow:hover { border-color: rgba(210,0,28,.82); transform: skewX(-12deg) translateY(-1px); }
.btn-glow-text {
  position: relative; z-index: 2;
  color: rgba(232,224,210,.82);
  text-shadow: 0 0 10px rgba(230,60,40,.52), 0 0 22px rgba(160,0,18,.35);
  transform: skewX(12deg);
  display: inline-block;
}

/* ─── Reveal on Scroll ───────────────────────────────────
   Add .reveal to any element; JS adds .visible on intersection.
──────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Section Label (Bebas Neue kickers) ─────────────────
   Small caps labels above section headings.
   Applied to .font-en-head.text-deep-red to fix readability
   (deep red on dark = invisible, smoke gray = readable).
──────────────────────────────────────────────────────── */
.font-en-head.text-deep-red,
.font-en-head[class*="text-[0."] { color: var(--clr-smoke) !important; }

/* ─── Card Hover Zoom ────────────────────────────────── */
.card-zoom .img-zoom { transition: transform .65s ease; }
.card-zoom:hover .img-zoom { transform: scale(1.05); }

/* ─── Slide-up Entry Animation ───────────────────────── */
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.h-enter { animation: slideUp .8s ease both; }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — Mobile First
   Breakpoints:
     sm  → 480px   (large phones landscape)
     md  → 768px   (tablets)
     lg  → 1024px  (small desktops)
     xl  → 1280px  (standard desktop)
   ═══════════════════════════════════════════════════════ */

/* ─── Mobile Hamburger Button ────────────────────────────
   Shown only on mobile. Toggles #mobile-nav overlay.
   Add <button id="mobile-menu-btn"> inside nav.
──────────────────────────────────────────────────────── */
#mobile-menu-btn {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: .5rem; color: var(--clr-ivory);
  align-items: center; justify-content: center;
  transition: color .25s;
}
#mobile-menu-btn:hover { color: var(--clr-ivory); opacity: .8; }

/* ─── Mobile Nav Overlay ──────────────────────────────────
   Full-screen drawer that slides in from the right.
   Controlled by .open class added via JS.
──────────────────────────────────────────────────────── */
#mobile-nav {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(8,6,5,.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.2rem;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.23,1,.32,1);
  direction: rtl;
}
#mobile-nav.open { transform: translateX(0); }

/* Close × button inside overlay */
#mobile-nav-close {
  position: absolute; top: 1.4rem; left: 1.4rem;
  background: none; border: none; cursor: pointer;
  color: rgba(232,224,210,.45); font-size: 1.4rem;
  line-height: 1; padding: .4rem;
  transition: color .25s;
}
#mobile-nav-close:hover { color: var(--clr-ivory); }

/* Mobile nav links — large, touch-friendly */
.mobile-nav-link {
  font-family: var(--font-ar-head); font-size: clamp(1.6rem,5vw,2.2rem);
  font-weight: 700; color: rgba(232,224,210,.6);
  text-decoration: none;
  transition: color .25s;
  padding: .4rem 1rem; /* 44px+ touch target */
  position: relative;
}
.mobile-nav-link::after {
  content: ''; position: absolute; bottom: 0; right: 1rem;
  width: 0; height: 1px; background: var(--clr-red);
  transition: width .3s ease;
}
.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--clr-ivory);
}
.mobile-nav-link:hover::after, .mobile-nav-link.active::after { width: calc(100% - 2rem); }

/* Mobile nav CTA */
.mobile-nav-cta {
  margin-top: 1rem;
  font-family: var(--font-ar-body); font-size: .95rem;
  padding: .65rem 2rem;
  border: 1px solid rgba(160,0,20,.52);
  background: rgba(92,0,15,.15);
  color: var(--clr-ivory); text-decoration: none;
  transition: background .25s, border-color .25s;
}
.mobile-nav-cta:hover { background: rgba(92,0,15,.28); border-color: var(--clr-red); }

/* Red accent line below logo in overlay */
.mobile-nav-logo-wrap {
  position: absolute; top: 1.2rem; right: 1.4rem;
}

/* ─── Responsive Breakpoints ─────────────────────────────
   Mobile first: styles outside queries target mobile.
   Wider screens get progressively enhanced.
──────────────────────────────────────────────────────── */

/* All screens — base touch improvements */
button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
input, select, textarea { font-size: 16px; } /* prevent iOS zoom on focus */

/* ── Logo filter — matches home page mini-nav ── */
img[alt="رُمّان"] { filter: brightness(0.78) saturate(0.9); }

/* ── Inner-page nav: exact copy of home page mini-nav ── */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 64px !important;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(10,9,8,.97) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232,224,210,.06) !important;
  transition: all .3s;
}
nav#main-nav img[alt="رُمّان"] {
  height: 72px !important;
}

/* Nav link style — matches home page hdr-nav-link */
.hdr-nav-link {
  position: relative;
  font-family: 'Noto Sans Arabic', sans-serif; font-size: .78rem;
  color: rgba(232,224,210,.55); transition: color .3s;
  text-decoration: none;
}
.hdr-nav-link:hover { color: #E8E0D2; }
.hdr-nav-link::after {
  content: ''; position: absolute; bottom: -3px; right: 0;
  width: 0; height: 1px; background: #5C000F; transition: width .3s;
}
.hdr-nav-link:hover::after { width: 100%; }
.hdr-nav-link.active-page { color: #E8E0D2; }
.hdr-nav-link.active-page::after { width: 100%; }

/* Red glow on nav links — matches home page hdr-nav-glow */
.hdr-nav-glow {
  text-shadow: 0 0 12px rgba(200,0,20,.45), 0 0 28px rgba(140,0,14,.22);
}
.hdr-nav-glow:hover {
  color: #E8E0D2 !important;
  text-shadow: 0 0 16px rgba(220,0,25,.7), 0 0 38px rgba(160,0,18,.4), 0 0 60px rgba(100,0,10,.2);
}

/* ── MOBILE: up to 767px ── */
@media (max-width: 767px) {
  /* Show hamburger, hide desktop nav links */
  #mobile-menu-btn { display: flex; }

  /* Nav height on mobile */
  nav#main-nav { height: 64px !important; }
  nav#main-nav img[alt="رُمّان"] {
    height: 110px !important;
    margin-right: -35px !important;
    margin-top: 8px !important;
  }

  /* Hide desktop nav links and CTA on mobile */
  nav#main-nav ul { display: none !important; }
  nav#main-nav > a.btn-glow,
  nav#mini-nav > a.btn-glow,
  #mini-nav-cta,
  #hero-nav-cta,
  #site-header a.btn-glow[href*="contact"],
  nav a.btn-glow[href*="contact"] { display: none !important; }

  /* Filter bars — horizontal scroll, no wrap */
  #filter-bar > div, #filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Recommendation cards — single column */
  .cards-wrap, #grid {
    grid-template-columns: 1fr !important;
  }

  /* Report stats — 2 columns */
  #stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Report body — single column, hide sidebar */
  #report-body { grid-template-columns: 1fr !important; }
  #sidebar { display: none !important; }

  /* Reading rail — hidden (already handled per-page) */
  #reading-rail { display: none !important; }

  /* Article column padding */
  .col { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Pull quote less bleed */
  .pq { margin-right: 0 !important; margin-left: 0 !important; }

  /* Cards grid single column */
  .grid { grid-template-columns: 1fr !important; }

  /* Reduce section padding */
  section[class*="py-20"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Footer grid single column */
  footer .grid { grid-template-columns: 1fr !important; }

  /* Hide decorative film perforations on very small screens */
  [style*="left:26px"][style*="flex-direction:column"],
  [style*="left:32px"][style*="flex-direction:column"] { display: none !important; }
}

/* ── TABLET: 768px → 1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Stats: 2+2 layout */
  #stats-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* Recommendations 2 columns */
  .cards-wrap, #grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Report sidebar narrow */
  #report-body { grid-template-columns: 1fr 220px !important; }
}

/* ── DESKTOP: 1024px+ ── */
@media (min-width: 1024px) {
  /* Ensure hamburger is fully hidden */
  #mobile-menu-btn { display: none !important; }
  #mobile-nav { display: none !important; }
}

/* ── MOBILE: hide contact nav button on small screens ── */
@media (max-width: 767px) {
  a[href="contact.html"].btn-glow { display: none !important; }
}