/* ==========================================================================
   University of El Oued — replica
   tokens.css : reset, design tokens, base typography, utilities
   Palette + fonts extracted from https://www.univ-eloued.dz/
   ========================================================================== */

:root {
  /* brand */
  --green: #4a7065;
  --green-2: #4b7066;
  --green-hover: #4d716a;
  --menu-hover: #5aaf4b;
  --gold: #c0965a;
  --gold-2: #c1965a;
  --gold-dark: #977f5b;
  --beige: #beb19e;

  /* text */
  --text: #666666;
  --heading: #717171;
  --dark: #333333;
  --muted: #808080;
  --link-blue: #4d6176;

  /* surfaces */
  --white: #ffffff;
  --gray: #f7f7f7;
  --gray-ticker: #f0f0f0;
  --border: #eeeeee;
  --border-soft: #f5f5f5;
  --light: #f1f5f8;

  /* layout */
  --container: 1140px;
  --container-narrow: 1000px;
  --radius: 5px;
  --shadow: 0 0 10px 0 rgba(0, 0, 0, .5);

  /* type */
  --font-body: "Almarai", "Segoe UI", Tahoma, sans-serif;
  --font-title: "Almarai", "Segoe UI", Tahoma, sans-serif;
  --font-accent: "El Messiri", "Almarai", serif;
}

/* ------------------------------- reset ---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease; }
a:hover { color: var(--green); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--dark);
  margin: 0 0 .5em;
  line-height: 1.3;
  font-weight: 700;
}
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
svg { fill: currentColor; }

/* ---------------------------- containers -------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 15px;
}
.container--narrow { max-width: var(--container-narrow); }

/* ---------------------------- section titles ---------------------------- */
.section-title {
  font-family: var(--font-accent);
  font-size: 30px;
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  margin: 0 0 8px;
  position: relative;
  padding-inline-start: 0;
}
.section-title--bar {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
}
.section-title--bar::before {
  content: "";
  width: 5px;
  height: 40px;
  background: var(--green-2);
  border-radius: 2px;
  flex: none;
}
.section-divider {
  display: block;
  width: 260px;
  height: 26px;
  margin: 0 auto 34px;
  background: url(../img/brand/divider.png) center / contain no-repeat;
  opacity: .9;
}
.section-divider--start { margin-inline: 0 auto; }

/* ------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-2);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: var(--radius);
  line-height: 1.4;
  transition: background-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--green-hover); color: var(--white); }
.btn--ghost { background: transparent; border: 1px solid currentColor; }

/* ------------------------------- helpers -------------------------------- */
.text-center { text-align: center; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 10000;
  background: var(--gold);
  color: #fff;
  padding: 10px 18px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* back to top */
.back-to-top {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--green-hover); }

/* modal shell */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 6px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 32px;
  z-index: 1;
  animation: modalIn .3s ease;
}
.modal__close {
  position: absolute;
  inset-inline-end: 14px;
  top: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gray);
  color: var(--dark);
  display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: var(--gold); color: #fff; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* simple fade-in on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}