/* ═══════════════════════════════════════════════════
   base.css
   CSS custom properties, reset, shared utilities,
   buttons, section headers, reveal animation.
   Loaded on EVERY page via base.html.
═══════════════════════════════════════════════════ */

/* ── Custom Properties ── */
:root {
  --yellow:  #FFD600;
  --red:     #E8001D;
  --black:   #1A1A1A;
  --dark:    #111111;
  --white:   #FFFEF0;
  --nav-h:   70px;

  /* Typography */
  --font-display: 'Bangers', cursive;
  --font-head:    'Bebas Neue', sans-serif;
  --font-accent:  'Permanent Marker', cursive;
  --font-body:    'Nunito', sans-serif;

  /* Spacing scale */
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
}

/* Arabic font override */
.lang-ar {
  --font-display: 'Cairo', sans-serif;
  --font-head:    'Cairo', sans-serif;
  --font-accent:  'Cairo', sans-serif;
  --font-body:    'Cairo', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  padding-top: var(--nav-h); /* push content below fixed nav */
}
img   { display: block; max-width: 100%; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }

/* ── Section header ── */
.section-header {
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}
.section-tag {
  font-family: var(--font-accent);
  font-size: .95rem;
  color: var(--red);
  margin-bottom: .5rem;
  display: block;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 2px;
  line-height: 1;
}
.section-title .yl { color: var(--yellow); }
.section-title .rd { color: var(--red); }

.section-divider {
  width: 100px; height: 5px;
  margin: 1rem auto 2rem;
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0, var(--red) 20px,
    var(--yellow) 20px, var(--yellow) 40px
  );
}

/* ── CTA wrapper ── */
.section-cta {
  text-align: center;
  padding: 2.5rem var(--space-md) var(--space-lg);
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.section-cta--dark { background: #0d0d0d; }

/* ── Buttons ──
   Text-link style site-wide: word with a thin red underline.
   No background, no border, no box shadow.
   Default color = black (for buttons on white backgrounds).
   Inside a dark wrapper (.section-cta--dark or .item-hero) the color
   flips to white via the override below. */
.btn-primary,
.btn-secondary {
  font-family: var(--font-head);
  font-size: 1.1rem; letter-spacing: 3px;
  background: transparent;
  color: var(--black);
  border: none;
  border-bottom: 2px solid var(--red);
  box-shadow: none;
  padding: .3rem 0;
  cursor: pointer;
  display: inline-block;
  transition: color .15s, border-bottom-color .15s;
  text-decoration: none;
}
.btn-primary:hover,
.btn-secondary:hover {
  color: var(--red);
  border-bottom-color: var(--black);
  transform: none;
  box-shadow: none;
  background: transparent;
}

/* Dark-context override (CTAs in .section-cta--dark). */
.section-cta--dark .btn-primary,
.section-cta--dark .btn-secondary {
  color: var(--white);
}
.section-cta--dark .btn-primary:hover,
.section-cta--dark .btn-secondary:hover {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
  background: transparent;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Floating Call button ── */
.call-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 400;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .2s;
  color: var(--yellow);            /* drives the phone SVG (uses currentColor) */
  animation: callPulse 3s ease-in-out 4s infinite;
}
.call-float:hover { transform: scale(1.12); }
.call-float svg { width: 32px; height: 32px; }
.call-tooltip {
  position: absolute; right: 68px; top: 50%;
  transform: translateY(-50%);
  background: var(--black); color: var(--yellow);
  font-family: var(--font-head); font-size: .85rem; letter-spacing: 2px;
  padding: .4rem 1rem; white-space: nowrap;
  border: 2px solid var(--yellow);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.call-float:hover .call-tooltip { opacity: 1; }

/* ── Page banner (shared by about/menu/findus) ──
   Yellow-dots pop-art halftone: dark yellow base with staggered dot rows. */
.page-banner {
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center;
  background: #E6A800;
}
.page-banner__bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(200,136,0,.85) 6px, transparent 6.5px),
    radial-gradient(circle, rgba(200,136,0,.85) 6px, transparent 6.5px);
  background-size: 32px 64px, 32px 64px;
  background-position: 0 0, 16px 32px;
  pointer-events: none;
}
.page-banner__content {
  position: relative; z-index: 1; padding: 2rem;
}
.page-banner__content .section-tag   { color: var(--red); }
.page-banner__content .section-title { color: var(--black); text-shadow: 4px 4px 0 var(--red); }
.page-banner__content .section-divider { margin-bottom: 0; }

/* Banner highlights sit on a yellow background — force black so they stay
   readable, matching the "ABOUT" word in the about page banner. */
.page-banner__content .section-title .yl {
  color: var(--black);
}

/* ── Social buttons (shared) ── */
.soc-btn {
  width: 40px; height: 40px;
  background: #1c1c1c; border: 2px solid #2a2a2a; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; transition: .2s; color: var(--white);
}
.soc-btn svg { width: 20px; height: 20px; }
.soc-btn:hover { border-color: var(--yellow); transform: translateY(-2px); }

/* ── Keyframes ── */
@keyframes callPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 4px 28px rgba(232,0,29,.6), 0 0 0 8px rgba(232,0,29,.15); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Solid red separator band (replaces the old scrolling marquee).
       Same red bar with yellow borders, but with no content inside. ── */
.red-band {
  background: var(--red);
  border-top: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
  height: 1.6rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .section-cta { padding: 2rem 1rem; }
}