/* ============================================================
   HCM — literal port of sanjuancollege.edu's design system.

   Token names, values, spacing, radii, shadows, breakpoints,
   hover transforms and the Explore card treatment are copied
   from their live stylesheet, not reinterpreted.

   ONE SUBSTITUTION, and only one: their three typefaces
   (proxima-nova, roboto-slab, museo) have no Arabic glyphs.
   The --sans / --slab / --serif roles keep San Juan's exact
   sizes, weights and line-heights; only the families change to
   Arabic-capable equivalents.

   Mirrored for dir="rtl" via logical properties.
   ============================================================ */

:root{
  /* --- colour: verbatim from San Juan --- */
  --black:#000;
  --black-10:#0000001a;
  --black-25:#00000040;
  --black-50:#00000080;
  --white:#fff;
  --gray:#e7e7e7;
  --gray-50:#e7e7e780;
  --purple:#542e8e;
  --purple-5:#542e8e0d;
  --purple-25:#542e8e40;
  --plum:#6c285f;
  --midnight:#24094b;
  --midnight-80:#24094bcc;
  --magenta:#b01c87;
  --teal:#5bc6cc;
  --orange:#f47821;
  --mustard:#ffc413;
  --yellow:#ffda02;
  --green:#96ca4f;
  --red:#a5230a;
  --accent:var(--orange);
  --heading:var(--purple);
  --link:var(--purple);
  --gradient:linear-gradient(225deg, var(--purple) 25%, var(--plum));

  /* --- metrics: verbatim --- */
  --radius:.375rem;
  --transition:.3s ease;
  --shadow:0 0 1.5rem var(--black-25);
  --gap:clamp(1.5rem, 6vw, 5rem);
  --container:max(var(--gap), (100% - 80rem) / 2);
  --container-sm:max(var(--gap), (100% - 64rem) / 2);
  --container-xs:max(var(--gap), (100% - 48rem) / 2);
  --panel:max(3rem, var(--gap)) var(--gap);

  /* --- type: San Juan's scale, Arabic-capable families --- */
  --sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;   /* was proxima-nova */
  --slab:"Noto Kufi Arabic","IBM Plex Sans Arabic",serif;       /* was roboto-slab  */
  --serif:"Noto Kufi Arabic","IBM Plex Sans Arabic",serif;      /* was museo       */

  --body:400 1.125rem/1.5 var(--sans);
  --body-slab:700 1.125rem/1.5 var(--slab);
  --small:400 1rem/1.5 var(--sans);
  --xsmall:400 .875rem/1.5 var(--sans);
  --h1:700 clamp(3.375rem, 6vw, 4.5rem)/1 var(--slab);
  --h1-lg:700 clamp(4rem, 8vw, 6.5rem)/1 var(--slab);
  --h1-sm:700 clamp(3rem, 6vw, 3.5rem)/1 var(--slab);
  --h2:700 clamp(2.25rem, 6vw, 2.875rem)/1.1 var(--slab);
  --h2-sm:700 2rem/1.25 var(--slab);
  --h3:900 1.5rem/1.25 var(--serif);
  --h4:800 1.5rem/1.25 var(--sans);
  --h5:700 1.25rem/1.35 var(--slab);
  --h6:700 1.25rem/1.35 var(--sans);
}

/* Arabic sits low in the em box; San Juan's tight heading leading
   (1.0–1.1) clips descenders in Arabic, so headings alone get a
   little more room. Sizes and weights are unchanged. */
h1,h2,h3,h4,h5,h6{line-height:1.35}

*{box-sizing:border-box}
body{
  margin:0;
  font:var(--body);
  color:var(--midnight);
  background:var(--white);
}
img{max-width:100%; display:block}
a{color:var(--link); text-underline-offset:.25em}
:focus-visible{outline:.1875rem solid var(--teal); outline-offset:.125rem}

.skip-link{position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
           background:var(--midnight); color:var(--white); padding:.75rem 1.25rem}
.skip-link:focus{inset-inline-start:0}

.container{padding-inline:var(--container)}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden;
                 clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- buttons: square, wide padding (verbatim) ---------- */
.btn{
  display:inline-block; border:0; border-radius:0; padding:.5rem 3rem;
  font:var(--body); text-decoration:none; cursor:pointer;
  transition:background-color var(--transition), color var(--transition);
}
.btn--purple{background:var(--purple); color:var(--white)}
.btn--purple:hover{background:var(--midnight); color:var(--white)}
.btn--white{background:var(--white); color:var(--purple)}
.btn--white:hover{background:var(--teal); color:var(--midnight)}
.btn--outline{border:.125rem solid var(--white); color:var(--white); background:transparent}
.btn--outline:hover{background:var(--white); color:var(--purple)}

/* ---------- header: 2 rows at top; scrolled = logo | nav | logo ---------- */
.site-chrome{
  position:sticky; top:0; z-index:50;
  padding:0;
}
.site-chrome__card{
  position:relative;
  border-radius:0; overflow:visible;
  box-shadow:0 .35rem 1rem #00000022;
  transition:box-shadow .28s ease, background .28s ease;
  border:0;
}

.masthead{
  background:linear-gradient(90deg, var(--midnight), var(--purple));
  border-radius:0;
}
/* Top of page: row1 = logos/login, row2 = full nav bar */
.masthead__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem; padding-block:.75rem; padding-inline:var(--container);
  transition:padding-block .28s ease;
}
.masthead__brand{display:flex; align-items:center; gap:.75rem; flex:none; order:1; z-index:2}
.masthead__coop{display:block; line-height:0; flex:none}
.masthead__coop img{display:block; height:52px; width:auto; transition:filter .28s ease, height .28s ease}
.masthead__coop:hover{opacity:.85}
/* In coop-mode this slot holds the HCM logo (the toggle back) — same glow rule as .brand. */
.site-chrome.coop-mode .masthead__coop img{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 20px rgba(255,255,255,.55));
}
/* .brand is whichever identity is primary right now (institute, or the
   association in coop-mode — header.php swaps the markup); .masthead__coop
   is always the small toggle back to the OTHER one. Shrunk (is-scrolled),
   there's only room for the primary identity, so the toggle hides — the
   visitor scrolls back up to reach it again. */
.site-chrome.is-scrolled .masthead__coop{display:none}
.masthead__side{
  display:flex; align-items:center; gap:.75rem; flex:none; order:2;
  margin-inline-start:auto; z-index:2;
}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand img{
  height:101px; width:auto; transition:filter .28s ease, height .28s ease;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 20px rgba(255,255,255,.55));
}
/* The glow belongs to the HCM logo specifically — in coop-mode .brand
   holds the association logo instead, so it shouldn't carry it. */
.site-chrome.coop-mode .brand img{filter:none}
.brand__text{font:var(--h6); color:var(--white); line-height:1.3}
.brand__text small{display:block; font:var(--xsmall); color:var(--teal); opacity:.9}
.masthead__mohesr{display:block; line-height:0; flex:none;
                  transition:opacity var(--transition), transform var(--transition)}

/* Language toggle icons — same 2rem size as the search button, sit to the
   physical left of the ministry logo (RTL: after it in markup), and stay
   this size always — no scroll-shrink, unlike the two logos beside them. */
.masthead__langFlags{display:flex; align-items:center; gap:.35rem; flex:none}
.masthead__flag{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border-radius:50%; overflow:hidden; line-height:0;
  border:.0625rem solid rgba(255,255,255,.45); opacity:.55;
  transition:opacity var(--transition);
}
.masthead__flag.is-active,.masthead__flag:hover{opacity:1}
.masthead__flag svg{width:100%; height:100%; display:block}
.masthead__mohesr img{
  display:block; height:101px; width:auto;
  border-radius:50%; background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
  transition:height .28s ease;
}
.masthead__mohesr:hover{opacity:.92; transform:translateY(-1px)}
.masthead__login{
  position:relative; display:block; width:2.75rem; height:2.75rem;
  text-decoration:none; flex:none; color:var(--white);
}
.masthead__login svg{display:block; width:100%; height:100%;
                     transition:transform var(--transition)}
.masthead__login span{
  position:absolute; top:calc(100% + .2rem); inset-inline:50% auto;
  transform:translateX(50%);
  font-size:.6rem; line-height:1; opacity:.75; white-space:nowrap; color:var(--white);
}
.masthead__login:hover svg{transform:translateY(-2px)}
.masthead__login:hover span{opacity:1; color:var(--teal)}

.nav__burger{
  display:none; appearance:none; border:0; background:transparent;
  width:2.75rem; height:2.75rem; padding:0; cursor:pointer; color:var(--white);
  align-items:center; justify-content:center; border-radius:.45rem;
}
.nav__burger:hover{background:rgba(255,255,255,.12)}
.nav__burgerLines{
  display:flex; flex-direction:column; justify-content:center; gap:.28rem; width:1.35rem;
}
.nav__burgerLines span{
  display:block; height:2px; width:100%; background:currentColor; border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.site-chrome.is-menu-open .nav__burgerLines span:nth-child(1){transform:translateY(.36rem) rotate(45deg)}
.site-chrome.is-menu-open .nav__burgerLines span:nth-child(2){opacity:0}
.site-chrome.is-menu-open .nav__burgerLines span:nth-child(3){transform:translateY(-.36rem) rotate(-45deg)}

/* Full-width second row at top of page */
.nav{
  order:3; flex:1 0 100%; min-width:0;
  background:linear-gradient(225deg, var(--purple) 20%, var(--plum));
  border-radius:0;
  margin-inline:calc(-1 * var(--container));
  padding-inline:var(--container);
  overflow:visible;
  font-family:Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
  transition:padding-block .28s ease;
}
/* font: shorthand on links resets family — force Arial for menu text only */
.nav a,
.nav input,
.nav button{
  font-family:Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif !important;
}
.nav__in{
  display:flex; align-items:center; justify-content:flex-start;
  flex-wrap:nowrap; gap:.35rem;
}
.nav__list{
  display:flex; flex-wrap:nowrap; list-style:none; margin:0; padding:0;
  align-items:center; flex:1 1 auto; min-width:0;
}
.nav__list > li > a{
  display:block; padding:.65rem .48rem; color:var(--white);
  font-size:16px; line-height:1.5; font-weight:600;
  text-decoration:none;
  transition:background-color var(--transition), padding .28s ease, font-size .28s ease;
  border-radius:.35rem; white-space:nowrap;
}
.nav__list > li > a:hover{background:rgba(255,255,255,.12); color:var(--white)}

.nav__sub{
  position:absolute; z-index:40; min-width:14rem;
  top:calc(100% - 2px); inset-inline-start:0;
  background:var(--white); border:1px solid var(--gray);
  border-radius:.75rem; box-shadow:var(--shadow);
  list-style:none; margin:0; padding:.5rem; display:none;
}
/* Invisible bridge so the cursor can reach the panel without losing :hover */
.nav__item > .nav__sub::before,
.nav__ctaDrop > .nav__sub::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:.55rem;
}
.nav__item{position:relative}
.nav__item:hover > .nav__sub,.nav__item:focus-within > .nav__sub{display:block}
.nav__subItem{position:relative}
.nav__subItem > a{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.55rem 1rem; color:var(--purple);
  font:var(--small); text-decoration:none; border-radius:.45rem;
  transition:background-color var(--transition), color var(--transition);
}
.nav__subItem > a:hover{background:var(--purple); color:var(--white)}
.nav__subItem > .nav__sub.nav__sub--nested{
  /* Fly out to the LEFT — physical right only (avoid inset-inline; it fights RTL). */
  top:0 !important;
  right:100% !important;
  bottom:auto !important;
  left:auto !important;
  margin:0 !important;
  z-index:50;
}
.nav__subItem:hover > .nav__sub--nested,
.nav__subItem:focus-within > .nav__sub--nested{display:block}
.nav__subItem--has > .nav__sub--nested::before{
  /* Hover bridge toward the parent item (on the right of this panel). */
  content:""; position:absolute; top:0; bottom:0; left:100%; width:.55rem;
}
.nav__chev{
  width:.4rem; height:.4rem; flex:none;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); /* ▼ */
  opacity:.7;
  margin-block-start:-.2rem;
}
.nav__item--cta > a,
.nav__cta{
  background:var(--teal); color:var(--midnight); font-weight:700;
  border-radius:999px; margin-block:.2rem; padding-block:.35rem; padding-inline:.8rem;
  display:block; text-decoration:none; font-size:16px; line-height:1.5; font-weight:700; white-space:nowrap;
  transition:background-color var(--transition), color var(--transition), font-size .28s ease,
             margin-block .28s ease, padding .28s ease;
}
.nav__item--cta > a:hover,
.nav__cta:hover,
.nav__ctaDrop:hover > .nav__cta,
.nav__ctaDrop:focus-within > .nav__cta{background:var(--white); color:var(--purple)}
.nav__item--faqCta{
  display:flex; flex-wrap:nowrap; align-items:center; gap:.25rem; flex:none;
}
.nav__item--faqCta > a:not(.nav__cta){
  display:block; padding:.65rem .48rem; color:var(--white);
  font-size:16px; line-height:1.5; font-weight:600;
  text-decoration:none; border-radius:.35rem; white-space:nowrap;
  transition:background-color var(--transition), padding .28s ease, font-size .28s ease;
}
.nav__item--faqCta > a:not(.nav__cta):hover{background:rgba(255,255,255,.12); color:var(--white)}
.nav__ctaDrop{position:relative; display:inline-flex; align-items:center; flex:none}
.nav__ctaDrop > .nav__sub{
  top:calc(100% - 2px); inset-inline-end:0; inset-inline-start:auto; left:auto; right:auto;
  margin:0; min-width:16rem; z-index:40;
}
.nav__ctaDrop:hover > .nav__sub,
.nav__ctaDrop:focus-within > .nav__sub{display:block}

.nav__lookup{display:flex; align-items:center; gap:.35rem; flex:none; padding-block:.35rem; margin-inline-start:auto}
.nav__lookup input{
  border:0; border-radius:999px; padding:.3rem .7rem; font:var(--xsmall);
  width:7.25rem; max-width:16vw; background:rgba(255,255,255,.14); color:var(--white);
  transition:width .28s ease, padding .28s ease, font-size .28s ease;
}
.nav__lookup input::placeholder{color:rgba(255,255,255,.7)}
.nav__lookup button{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border:0; border-radius:50%; background:var(--teal); color:var(--midnight); cursor:pointer;
}
.nav__lookup button:hover{background:var(--white); color:var(--purple)}

/* Scrolled: same two rows as always (logos row, nav row below) — just
   tighter and smaller. Earlier this merged the nav into the logo row via
   order/flex-basis, but that switch can never animate smoothly (CSS can't
   transition `order`), so anything else that DID transition smoothly was
   guaranteed to fall out of sync with it for the length of the animation —
   that mismatch was the overlapping-text glitch. Keeping the nav on its own
   row means its width never changes on scroll, so every size below can
   safely transition smoothly with nothing left to race against. */
.site-chrome.is-scrolled .site-chrome__card{
  background:rgba(36,9,75,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 .35rem 1.1rem #24094b66;
}
.site-chrome.is-scrolled .masthead{
  background:linear-gradient(90deg, rgba(36,9,75,.98), rgba(84,46,142,.98) 50%, rgba(108,40,95,.98));
}
.site-chrome.is-scrolled .masthead__in{padding-block:.3rem; gap:.5rem}
.site-chrome.is-scrolled .brand img,
.site-chrome.is-scrolled .masthead__mohesr img{height:52px}
.site-chrome.is-scrolled .brand__text{display:none}
.site-chrome.is-scrolled .masthead__login,
.site-chrome.is-scrolled .masthead__logoutForm{display:none}
.site-chrome.is-scrolled .nav{padding-block:.15rem}
.site-chrome.is-scrolled .nav__in{gap:.15rem}
.site-chrome.is-scrolled .nav__list > li > a,
.site-chrome.is-scrolled .nav__item--faqCta > a:not(.nav__cta),
.site-chrome.is-scrolled .nav__item--cta > a,
.site-chrome.is-scrolled .nav__cta,
.site-chrome.is-scrolled .nav__lookup input{
  font-size:13px !important;
}
.site-chrome.is-scrolled .nav__list > li > a{padding:.35rem .4rem}
.site-chrome.is-scrolled .nav__lookup{padding-block:.15rem}
.site-chrome.is-scrolled .nav__lookup input{width:6.5rem; padding:.22rem .55rem}
.site-chrome.is-scrolled .nav__item--cta > a,
.site-chrome.is-scrolled .nav__cta{margin-block:.05rem; padding-block:.28rem; padding-inline:.65rem}
.site-chrome.is-scrolled .nav__item--faqCta > a:not(.nav__cta){padding:.35rem .4rem}

/* Merged (see footer.php's MERGE_DELAY_MS): nav joins the brand/side row
   instead of sitting full-width below it. Only ever applied once already
   shrunk (is-scrolled), so nothing here needs its own transition — the
   snap has nothing left to visibly race against. */
.site-chrome.is-scrolled.is-merged .masthead__in{flex-wrap:nowrap}
.site-chrome.is-scrolled.is-merged .nav{
  order:2; flex:1 1 auto; min-width:0;
  margin-inline:0; padding-inline:.5rem;
}
.site-chrome.is-scrolled.is-merged .masthead__side{order:3}
.site-chrome.is-scrolled.is-merged .nav__in{overflow-x:auto; scrollbar-width:none}
.site-chrome.is-scrolled.is-merged .nav__in::-webkit-scrollbar{display:none}

/* ---------- ticker ---------- */
/* Orange strip so it stands out from the purple chrome; label is a
   rounded white pill (same 3D language as the Transfer-button reference). */
.ticker{background:#e98a13; color:var(--white); font:var(--small);
        display:flex; align-items:center; gap:1rem; padding-block:.35rem;
        padding-inline:var(--container)}
.ticker__label{
  background:var(--green); color:var(--midnight); font:var(--xsmall); font-weight:700;
  padding:.4rem 1.2rem; white-space:nowrap; border-radius:999px;
  border:1px solid rgba(40,80,10,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.18);
}
.ticker__viewport{overflow:hidden; flex:1}
.ticker__track{display:flex; gap:3rem; list-style:none; margin:0; padding:.5rem 0;
               white-space:nowrap; animation:ticker 40s linear infinite}
.ticker__track a{color:var(--white); text-decoration:none; font-weight:600;
                 text-shadow:0 1px 1px rgba(0,0,0,.2)}
.ticker__track a:hover{color:var(--midnight)}
@keyframes ticker{from{transform:translateX(-100%)} to{transform:translateX(100%)}}

/* ---------- hero carousel ---------- */
.hero{position:relative; background:var(--midnight); overflow:hidden}
/* ~50% of original clamp(26rem, 60vw, 40rem): was −40%, now −10% more off first height */
.hero__slides{position:relative; min-height:clamp(13rem, 30vw, 20rem)}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity .8s ease; pointer-events:none}
.hero__slide.is-active{opacity:1; pointer-events:auto}
.hero__media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1}
/* Soft dark veil only where the copy sits — keeps campus photo readable */
.hero__slide::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(270deg, rgba(36,9,75,.72) 0%, rgba(36,9,75,.35) 42%, rgba(36,9,75,.12) 100%);
}
/* The still is only a fallback: hidden whenever the video element is present
   and motion is allowed. */
.hero__media--fallback{display:none}
.hero__in{position:relative; z-index:2; padding-block:clamp(2rem,5vw,4rem); padding-inline:var(--container)}
.hero__title{font:var(--h1-sm); color:var(--white); margin:0 0 1rem; max-width:18ch;
             text-shadow:0 1px 12px rgba(36,9,75,.45)}
.hero__text{font:var(--body); color:var(--white); max-width:40ch; margin:0 0 2rem;
            text-shadow:0 1px 10px rgba(36,9,75,.4)}

/* Circular dots, one per slide, showing count and current position. */
.hero__dots{position:absolute; z-index:2; bottom:1.25rem; inset-inline:0;
            display:flex; justify-content:center; gap:.55rem}
.hero__dot{width:.7rem; height:.7rem; border-radius:50%; border:.0625rem solid rgba(255,255,255,.8);
           background:rgba(255,255,255,.35); padding:0; cursor:pointer; transition:background-color var(--transition)}
.hero__dot.is-active{background:var(--white)}
.hero__dot:hover{background:var(--teal)}

/* placeholder standing in for a photograph we do not have yet */
.ph{position:absolute; inset:0; background:var(--gray);
    display:grid; place-items:center; color:#8a8a8a; font:var(--xsmall)}

/* Shared cover-fit image, used inside any fixed-height media box (the card
   grid thumbnails only). cover, not contain: contain left visible grey
   letterbox/pillarbox bars whenever a photo's ratio didn't match the box.
   These boxes are previews, not the photo's only appearance — the post's
   own page (.PostPage__media) shows it full and uncropped — so cropping the
   preview here is an acceptable trade for never showing grey bars. */
.Cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---------- generic section ---------- */
.Section{padding-block:5rem; padding-inline:var(--container)}
.Section--gray{background:var(--gray-50)}
/* Title style 3: teal→purple side mark beside heading */
.Section__head{
  display:flex; align-items:flex-start; gap:.85rem; flex-wrap:wrap;
  margin:0 0 2.5rem;
}
.Section__head::before{
  content:""; width:4px; align-self:stretch; min-height:2.75rem;
  border-radius:99px; flex:none;
  background:linear-gradient(180deg, var(--teal), var(--purple));
}
.Section__head-body{min-width:0; flex:1}
.Section__heading{font:var(--h2); color:var(--midnight); margin:0 0 .5rem}
.Section__lede{font:var(--body); max-width:52ch; margin:0}
.Section__head .Section__heading:last-child,
.Section__head .Section__lede:last-child{margin-bottom:0}
/* Admin pages: the nav toggle sits in the heading's own flex row (already
   flex via .Section__head) instead of a separate row below it. */
.Section__head--admin .PortalNav{margin-bottom:0; flex:none}
.Section > .Section__heading{margin:0 0 .5rem}
.Section > .Section__lede{margin:0 0 2.5rem}

/* Clear “see all” action next to a section title */
.Section__more{
  flex:none; align-self:center;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.1rem; border-radius:.55rem;
  background:var(--purple); color:var(--white);
  font:var(--small); font-weight:700; text-decoration:none;
  box-shadow:0 .2rem .55rem #542e8e33;
  transition:background-color var(--transition), transform var(--transition);
}
.Section__more:hover{background:var(--midnight); color:var(--white); transform:translateY(-1px)}
.Section__more svg{flex:none}


/* ---------- posts — design B + separator 2 ---------- */
.Posts{padding-block:4rem; padding-inline:var(--container)}
.Posts__grid{display:grid; gap:1.5rem; grid-template-columns:1fr 1fr}
@media (min-width:64em){.Posts__grid{grid-template-columns:repeat(3,1fr)}}
.Posts__item{background:var(--white); border:1px solid #e8e1f0;
             border-radius:1rem; box-shadow:0 .4rem 1.2rem #0000001f; overflow:hidden;
             display:flex; flex-direction:column; transition:transform var(--transition)}
/* Option C top accent band on B engagement cards */
.Posts__item::before{
  content:""; display:block; height:.35rem; flex:none;
  background:linear-gradient(90deg, var(--purple), var(--teal));
}
.Posts__item:hover{transform:translateY(-.25rem)}
.Posts__body-wrap{padding:1.15rem 1.25rem 0; display:flex; flex-direction:column; gap:.35rem; flex:1}
/* A real float, not a flex row: text wraps beside the thumb for as long as
   the thumb is tall enough to share the line, then continues at full width
   on its own once it runs past the thumb's bottom edge — plain CSS text
   flow, so nothing needs to restructure (and nothing jumps) when "عرض
   المزيد" grows the paragraph. flow-root contains the float so a short
   thumb still keeps the card's own height/border correct. */
.Posts__head{display:flow-root}
.Posts__thumb{position:relative; float:inline-start; width:4.75rem; height:4.75rem;
              margin-inline-end:.75rem; margin-block-end:.35rem;
              border-radius:var(--radius); overflow:hidden; background:var(--gray)}
/* The grid stays two-up even on a phone (see .Posts__grid), so each card is
   only ~150-190px wide there — too narrow for a thumb beside text without
   cramping it. Full width leaves no room to float beside, so text starts
   below it automatically. */
@media (max-width:30em){
  .Posts__thumb{width:100%; height:8rem}
}
.Posts__headText{min-width:0}
/* Full cover layout only: title/meta sit above the image now, as a direct
   child of the card rather than inside .Posts__body-wrap, so they need
   their own top/side padding (side layout keeps using the wrap's). */
.Posts__item > .Posts__headText{padding:1.15rem 1.25rem 0}
.Posts__title{font-size:1.05rem; font-weight:700; color:var(--midnight); margin:0}
.Posts__title a{color:inherit; text-decoration:none}
.Posts__title a:hover{color:var(--purple)}
.Posts__subtitle{font-size:.85rem; color:var(--midnight); opacity:.75; margin:0}
.Posts__meta{font-size:.72rem; color:var(--purple); font-weight:600; margin:.2rem 0 0; opacity:1}
.Posts__text{margin:0; padding-bottom:.15rem}
.Posts__body{
  font:var(--small); color:var(--black); margin:0; padding-bottom:.15rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.Posts__item.is-expanded .Posts__body{
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.Posts__more{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--purple); font:var(--xsmall); font-weight:700;
  padding:.35rem 0 0; margin:0; text-decoration:underline; text-underline-offset:.15rem;
}
.Posts__more:hover{color:var(--teal)}
.Posts__item.is-collapsible{cursor:pointer}
.Posts__item.is-collapsible a,
.Posts__item.is-collapsible button,
.Posts__item.is-collapsible form{cursor:auto}
.Posts__foot{margin-top:auto; flex:none}
.Posts__sep{
  height:2px; margin:.55rem 1.25rem 0; border:0; flex:none;
  background:linear-gradient(90deg, transparent, var(--purple), transparent); opacity:.45;
}
.Posts__engage{
  display:flex; gap:.55rem; align-items:center; flex-wrap:nowrap;
  margin:0; padding:.9rem 1.15rem 1.1rem; border:0; text-decoration:none;
  min-height:3.25rem; box-sizing:border-box;
}
.Posts__chip{
  appearance:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .25rem; border-radius:0; font-size:.78rem; font-weight:700;
  background:transparent; box-shadow:none;
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
  text-decoration:none;
}
.Posts__chip:hover{opacity:.85; transform:translateY(-1px)}
.Posts__chip--up,
.Posts__chip--down{color:#9aa0a6}
.Posts__chip--up.is-active{color:#2563eb}
.Posts__chip--down.is-active{color:#e53935}
.Posts__chip--cmt{color:#7cbc2e}
.Posts__chip.is-active{transform:translateY(-1px)}
.Posts__chipN{
  background:transparent; border-radius:0; padding:0;
  font-size:.78rem; font-weight:700; color:inherit; opacity:.9;
}
.Posts__chipform{display:inline; margin:0}

.Posts__book{
  appearance:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.4rem;
  margin-inline-start:auto;
  padding:.55rem .85rem; border-radius:.75rem; font-size:.78rem; font-weight:700;
  background:linear-gradient(180deg,#c4b5fd,#7c3aed); color:#fff;
  box-shadow:0 .2rem .55rem #00000018;
  text-decoration:none;
  transition:filter .2s ease, transform .2s ease, opacity .2s ease;
}
.Posts__book:hover{filter:brightness(1.06); transform:translateY(-2px); color:#fff}
.Posts__book.is-disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.35)}
.Posts__book.is-disabled:hover{transform:none; filter:grayscale(.35); color:#fff}
.Posts__book.is-booked{background:linear-gradient(180deg,#86efac,#16a34a); cursor:default}
.Posts__book.is-booked:hover{transform:none; filter:none}
.Posts__chip form{display:inline; margin:0}

/* ---------- single post page ---------- */
.PostPage{max-width:48rem; margin-inline:auto}
.PostPage__head{margin-bottom:1.5rem}
.PostPage__title{font:var(--h2); color:var(--heading); margin:0 0 .5rem}
.PostPage__subtitle{font:var(--body); color:var(--midnight); opacity:.75; margin:0 0 .5rem}
.PostPage__meta{font-size:.85rem; color:var(--midnight); opacity:.6; margin:0}
.PostPage__media{margin:1.5rem 0; border-radius:var(--radius); overflow:hidden}
.PostPage__media img{width:100%; height:auto; display:block}
.PostPage__body{font:var(--body); color:var(--black); line-height:1.8}
.PostPage__body p{margin:0 0 1rem}

.PostPage__engage{margin:1.5rem 0 0; padding:1rem 0 0; border:0}
.PostPage__sep{
  height:2px; margin:0 0 1rem; border:0;
  background:linear-gradient(90deg, transparent, var(--purple), transparent); opacity:.45;
}
.PostPage__engageBar{display:flex; gap:.55rem; flex-wrap:wrap; align-items:center}
.LikeBtn{display:inline-flex; align-items:center; gap:.5rem; border:0;
         border-radius:0; padding:.35rem .25rem; cursor:pointer;
         font:var(--small); font-weight:700; background:transparent; box-shadow:none;
         transition:opacity .2s ease, transform .2s ease}
.LikeBtn:hover{opacity:.85; transform:translateY(-1px)}
.LikeBtn--up,
.LikeBtn--down{color:#9aa0a6}
.LikeBtn--up.is-active{color:#2563eb}
.LikeBtn--down.is-active{color:#e53935}
.LikeBtn.is-active{opacity:1}

.PostPage__comments{margin-top:2rem}
.CommentCount{font-size:1rem; color:var(--midnight); opacity:.6; font-weight:400}
.CommentForm{display:flex; flex-direction:column; gap:.4rem; max-width:32rem; margin-bottom:2rem}
.CommentForm label{font:var(--xsmall)}
.CommentForm input, .CommentForm textarea{border:.0625rem solid var(--gray); border-radius:.35rem;
                                          padding:.6rem .75rem; font:var(--small)}
.CommentForm button{align-self:flex-start; margin-top:.25rem}
.CommentList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem}
.CommentList__item{border-bottom:.0625rem solid var(--gray); padding-bottom:1.25rem}
.CommentList__row{display:flex; justify-content:space-between; gap:1rem; font-size:.8rem;
                  color:var(--midnight); opacity:.7; margin-bottom:.3rem}
.CommentList__item p{margin:0; font:var(--small); color:var(--black)}

/* ---------- e-services: style E (dark strips) + optional style D ---------- */
.Service{
  border-radius:.85rem; box-shadow:0 .35rem 1.1rem #00000022;
  padding:1.15rem; height:100%;
  display:flex; flex-direction:column; gap:.9rem;
  background:linear-gradient(135deg, var(--midnight), var(--purple));
  color:var(--white);
}
.Service__title{
  display:flex; align-items:center; gap:.55rem; font:var(--h6); color:var(--white);
  margin:0; padding:0;
}
.Service__title svg{color:var(--teal); flex:none}
.Service__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.4rem; margin:0;
}
.Service__tile{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  text-decoration:none; color:var(--white); font-size:.78rem; font-weight:600;
  text-align:center; line-height:1.3;
  padding:.75rem .45rem; border-radius:.55rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  transition:background-color var(--transition), color var(--transition), border-color var(--transition);
  min-width:0;
}
.Service__tile span{display:block; overflow-wrap:anywhere}
.Service__tile svg{width:1.25rem; height:1.25rem; color:var(--teal); flex:none}
.Service__tile:hover{background:var(--teal); color:var(--midnight); border-color:var(--teal)}
.Service__tile:hover svg{color:var(--midnight)}

/* Style C — middle card: horizontal list rows */
.Service--c{
  background:var(--white); color:var(--midnight);
  border:1px solid var(--gray);
}
.Service--c .Service__title{
  color:var(--midnight); padding-bottom:.65rem; margin:0;
  border-bottom:1px solid var(--gray);
}
.Service--c .Service__title svg{color:var(--teal)}
.Service--c .Service__grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:.35rem}
.Service--c .Service__tile{
  flex-direction:column; justify-content:flex-start; align-items:center; gap:.45rem;
  text-align:center; font-size:.78rem; color:var(--midnight);
  padding:.7rem .45rem; border-radius:.55rem;
  background:#faf9fb; border:1px solid transparent;
}
.Service--c .Service__tile svg{
  width:1.25rem; height:1.25rem; color:var(--purple); flex:none;
  padding:0; border-radius:0; background:transparent; box-sizing:content-box;
}
.Service--c .Service__tile:hover{
  background:var(--purple); color:var(--white); border-color:var(--purple);
}
.Service--c .Service__tile:hover svg{color:var(--white); background:transparent}

/* ---------- cards (news) ---------- */
.Cards{display:grid; gap:1.5rem; grid-template-columns:1fr}
@media (min-width:48em){.Cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:48em){.Cards--2{grid-template-columns:repeat(2,1fr); max-width:48rem; margin-inline:auto}}
.Card{background:var(--white); box-shadow:var(--shadow); border-radius:var(--radius);
      overflow:hidden; display:flex; flex-direction:column;
      transition:transform var(--transition)}
.Card:hover{transform:translateY(-.375rem)}
.Card__media{position:relative; height:11rem; background:var(--gray)}
.Card__body{padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.Card__date{font:var(--xsmall); color:var(--purple); text-transform:uppercase; letter-spacing:.05em}
.Card__title{font:var(--h6); color:var(--midnight); margin:0}
.Card__title a{color:inherit; text-decoration:none}
.Card__title a:hover{color:var(--purple)}
.Card__text{font:var(--small); margin:0}

/* ---------- events — calendar cards (style A) ---------- */
.Events{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:1fr 1fr;
}
@media (min-width:48em){.Events{grid-template-columns:repeat(4,1fr)}}
.Events__card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--white); border-radius:.85rem; overflow:hidden;
  border:1px solid #e8e1f0; box-shadow:0 .4rem 1.1rem #0000001f;
  transition:transform var(--transition), box-shadow var(--transition);
}
.Events__card:hover{transform:translateY(-3px); box-shadow:0 .55rem 1.35rem #00000028}
.Events__month{
  background:linear-gradient(90deg, var(--purple), var(--teal));
  color:var(--white); text-align:center; padding:.45rem .5rem;
  font-size:.72rem; font-weight:700;
}
.Events__day{
  font-size:2.1rem; font-weight:800; color:var(--midnight);
  text-align:center; line-height:1; padding:.85rem .5rem .35rem;
  font-variant-numeric:lining-nums;
}
.Events__info{padding:0 .85rem 1rem; text-align:center}
.Events__title{
  margin:0 0 .35rem; font-size:.82rem; font-weight:700;
  color:var(--midnight); line-height:1.35;
}
.Events__card:hover .Events__title{color:var(--purple)}
.Events__type{margin:0; font-size:.68rem; color:var(--purple); font-weight:600}
.Events__more{
  display:flex; justify-content:center; margin-top:1.35rem;
}
.Events__more .Section__more{border-radius:.75rem}

/* Past events — a small thumbnail card reusing the .Events__card shell. */
.Events__card--past .Events__thumb{aspect-ratio:4/3; overflow:hidden; background:var(--gray)}
.Events__card--past .Events__thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* WhatsApp-style chat transcript, shared by admin/portal/faculty chat views. */
.ChatThread{
  display:flex; flex-direction:column; gap:.6rem; max-height:32rem; overflow-y:auto;
  padding:1rem; background:#f5f2fa; border-radius:.75rem; border:1px solid var(--gray);
}
.ChatBubble{
  align-self:flex-start; max-width:75%; background:#fff; border-radius:.75rem;
  padding:.5rem .75rem; box-shadow:0 .1rem .4rem #0000001a;
}
.ChatBubble--mine{align-self:flex-end; background:var(--purple-5)}
.ChatBubble__sender{display:block; font-size:.72rem; font-weight:700; color:var(--purple)}
.ChatBubble__body{margin:.15rem 0; font:var(--small); white-space:pre-wrap; word-break:break-word}
.ChatBubble__time{display:block; font-size:.65rem; color:var(--midnight-80); text-align:end}
.ChatForm{display:flex; gap:.5rem; margin-top:1rem}
.ChatForm textarea{
  flex:1; resize:none; padding:.55rem .75rem; border-radius:.5rem; border:1px solid var(--gray);
  font:var(--body); min-height:2.75rem;
}

/* One event's own page — photo grid. */
.EventGallery{
  display:grid; gap:.6rem; margin-top:1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr));
}
.EventGallery__item{display:block; border-radius:.6rem; overflow:hidden; aspect-ratio:1/1}
.EventGallery__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--transition)}
.EventGallery__item:hover img{transform:scale(1.05)}

/* ---------- footer ---------- */
.Footer{
  position:relative; color:var(--white); padding-block:0 0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(36,9,75,.72), rgba(36,9,75,.84)),
    url("/assets/img/footer-bg.jpg") center/cover no-repeat;
  background-color:var(--midnight);
}
.Footer__grid,
.Footer__bar{position:relative; z-index:1}

/* Campus mark sits under "تابعنا" inside the about column. */
.Footer__campus{
  display:inline-block; margin-top:1.15rem; line-height:0;
  border-radius:.35rem; transition:transform var(--transition), filter var(--transition);
}
.Footer__campus:hover{transform:translateY(-3px); filter:brightness(1.06)}
.Footer__campus:focus-visible{outline:.1875rem solid var(--teal); outline-offset:.25rem}
.Footer__campus-mark{
  display:block; width:18.75rem; height:auto;
  border-radius:.35rem; pointer-events:none;
  image-rendering:auto;
}

/* Counters column — stacked rings; last two sit side by side. */
.Footer__stats{padding-inline:.25rem; align-self:start; text-align:center; min-width:0}
.Footer__rings{
  display:grid; grid-template-columns:1fr 1fr;
  justify-items:center; align-items:start;
  gap:1.05rem .75rem; margin:0;
}
.Footer__rings--inline{width:100%}
.Footer__ringUnit{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; text-decoration:none; color:var(--white);
  grid-column:1 / -1;
}
.Footer__ringUnit:nth-last-child(2),
.Footer__ringUnit:nth-last-child(1){
  grid-column:auto;
}
.Footer__ringCaption{font-size:.7rem; opacity:.62; max-width:7.5rem; line-height:1.3}
.Footer__ringUnit:hover .Footer__ringCaption{opacity:.9}

.Footer__ring{position:relative; flex:none; border-radius:50%;
             background:radial-gradient(circle at 32% 26%, #3c3646, #17121e 55%, #0a0710 100%);
             box-shadow:inset 0 2px 3px rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.65),
                        0 3px 8px rgba(0,0,0,.5); transition:transform var(--transition)}
.Footer__ringUnit:hover .Footer__ring{transform:scale(1.04)}
.Footer__ring--lg{width:7.25rem; height:7.25rem}
.Footer__ring--sm{width:4.3rem; height:4.3rem}
.Footer__ring::before{content:""; position:absolute; inset:14%; border-radius:50%;
                      border:.1875rem solid var(--glow);
                      box-shadow:0 0 8px 1px var(--glow),
                                 0 0 18px 6px color-mix(in srgb, var(--glow) 50%, transparent),
                                 inset 0 0 6px 1px rgba(255,255,255,.5)}
.Footer__ring--sm::before{border-width:.125rem}
.Footer__ringCore{position:absolute; inset:30%; border-radius:50%; z-index:1;
                  background:radial-gradient(circle at 50% 36%, #1c1626, #08050c 80%);
                  display:flex; align-items:center; justify-content:center}
.Footer__ringNum{font-family:var(--slab); font-weight:800; color:var(--white); line-height:1;
                 font-variant-numeric:tabular-nums}
.Footer__ring--lg .Footer__ringNum{font-size:1.4rem}
.Footer__ring--sm .Footer__ringNum{font-size:.95rem}

/* Contact · about · counters · search/links */
.Footer__grid{display:grid; gap:1.5rem; grid-template-columns:1fr;
              padding:1.25rem var(--container) 0; align-items:start}
@media (min-width:64em){
  .Footer__grid{grid-template-columns:minmax(15rem,1.15fr) minmax(14rem,1.05fr) auto minmax(12rem,.95fr); gap:1.75rem}
}
.Footer__contact{min-width:0}
.Footer__contactPanel{width:100%; box-sizing:border-box}
.Footer__contact form{width:100%; max-width:none}
@media (max-width:63.99em){
  .Footer__campus-mark{width:12rem}
  .Footer__ring--lg{width:6.5rem; height:6.5rem}
  .Footer__ring--lg .Footer__ringNum{font-size:1.25rem}
}

.Footer h2{font:var(--h5); color:var(--white); margin:0 0 .75rem}
.Footer h3{font:var(--h6); color:var(--white); margin:1.5rem 0 .75rem}
.Footer a{color:var(--white)}

/* Contact form — glass panel over photo background */
.Footer__contactPanel{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:1rem; padding:1.15rem 1.05rem 1.2rem;
  box-shadow:0 .4rem 1.4rem #00000040;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.Footer__contact h2{
  display:block; margin:0 0 .85rem; padding:0; border:0;
  color:var(--white);
}
.Footer__contact label{
  display:block; font:var(--xsmall); font-weight:500; margin-bottom:.3rem;
  color:rgba(255,255,255,.78); letter-spacing:0;
}
.Footer__contact input,
.Footer__contact select,
.Footer__contact textarea{
  width:100%; margin-bottom:.85rem; padding:.65rem .8rem;
  font:var(--small); color:var(--white);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22); border-radius:.55rem;
  appearance:none; -webkit-appearance:none;
  box-shadow:none;
}
.Footer__contact textarea{min-height:5.5rem; resize:vertical}
.Footer__contact input::placeholder,
.Footer__contact textarea::placeholder{color:rgba(255,255,255,.4)}
.Footer__contact select{color:rgba(255,255,255,.85); cursor:pointer;
  background-color:rgba(255,255,255,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235bc6cc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left .8rem center;
  padding-inline-start:1.75rem}
.Footer__contact select option{color:var(--midnight); background:#fff}
.Footer__contact input:focus,
.Footer__contact select:focus,
.Footer__contact textarea:focus{
  outline:2px solid var(--teal); outline-offset:1px;
  border-color:transparent; background:rgba(255,255,255,.1);
}
.Footer__send{text-align:left; margin-top:.25rem}
.Footer__contact .Footer__send .btn{
  background:linear-gradient(90deg, var(--teal), #7edce2); color:var(--midnight);
  border-radius:.55rem; padding:.55rem 1.6rem; font-weight:700;
  box-shadow:0 .25rem .7rem #5bc6cc44;
}
.Footer__contact .Footer__send .btn:hover{
  background:linear-gradient(90deg, #7edce2, var(--teal)); color:var(--midnight);
}

/* Search + quick links — glass field, teal CTA, soft link list */
.Footer__nav{min-width:0; text-align:center}
.Footer__nav > h2{
  margin:0 0 .85rem; color:var(--white); text-align:center;
}
.Footer__navLinksTitle{
  margin:1.75rem 0 .85rem !important;
  padding-top:1.15rem;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.Footer__search{
  display:flex; align-items:stretch; gap:0;
  margin:0 auto; max-width:18rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:.65rem;
  overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.Footer__search:focus-within{
  border-color:transparent;
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 2px var(--teal);
}
.Footer__search input{
  flex:1 1 auto; min-width:0; width:auto; margin:0;
  padding:.7rem .85rem; font:var(--small); text-align:center;
  color:var(--white); background:transparent; border:0;
  box-shadow:none; outline:none;
}
.Footer__search input::placeholder{color:rgba(255,255,255,.4)}
.Footer__search input::-webkit-search-decoration,
.Footer__search input::-webkit-search-cancel-button{appearance:none}
.Footer__searchBtn{
  flex:0 0 auto; margin:0; padding:.7rem 1.15rem;
  font:var(--small); font-weight:700; cursor:pointer;
  color:var(--midnight);
  background:linear-gradient(90deg, var(--teal), #7edce2);
  border:0; border-inline-start:1px solid rgba(255,255,255,.12);
  transition:filter var(--transition), background var(--transition);
}
.Footer__searchBtn:hover{
  filter:brightness(1.06);
  background:linear-gradient(90deg, #7edce2, var(--teal));
}
.Footer__list{
  list-style:none; margin:0 auto; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.Footer__list a{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.45rem .7rem;
  font:var(--small); color:rgba(255,255,255,.88);
  text-decoration:none; border-radius:.45rem;
  transition:color var(--transition), background var(--transition), transform var(--transition);
}
.Footer__list a:hover{
  color:var(--teal); background:rgba(91,198,204,.1);
  transform:translateY(-1px);
}
.Footer__ai-link svg{flex:none; opacity:.8; transition:opacity var(--transition), color var(--transition)}
.Footer__ai-link:hover svg{opacity:1; color:var(--teal)}

/* Institute block — centered, teal accents */
.Footer__about{text-align:center}
.Footer__about > h2{text-align:center}
.Footer__aboutName{
  margin:0 auto .75rem; color:rgba(255,255,255,.92);
  font-size:1.15rem;
  font-weight:600; line-height:1.55; max-width:22rem; width:100%;
  text-align:center;
}
.Footer__aboutRule{
  width:4.5rem; height:2px; margin:0 auto 1.15rem;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
}
.Footer__contacts{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  margin:0 0 1.35rem;
}
.Footer__contacts a{
  color:rgba(255,255,255,.9); text-decoration:none; font-size:.88rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
}
.Footer__contacts a:hover{color:var(--teal)}
.Footer__contacts svg{opacity:.75; flex:none; color:var(--teal)}
.Footer__about h3{
  font-size:.78rem; font-weight:700; color:var(--white); margin:0 0 .65rem;
  letter-spacing:.08em; text-align:center;
}

.Social{display:flex; gap:.55rem; list-style:none; padding:0; margin:0 auto; flex-wrap:wrap;
        justify-content:center}
.Social__btn{
  display:grid; place-items:center; width:2.55rem; height:2.55rem;
  border-radius:50%; color:#fff; text-decoration:none;
  transition:transform var(--transition), filter var(--transition), box-shadow var(--transition);
  box-shadow:0 .2rem .55rem #00000040;
}
.Social__btn:hover{transform:translateY(-2px); filter:brightness(1.08); color:#fff}
.Social__btn--facebook{background:#1877F2}
.Social__btn--facebook:hover{box-shadow:0 .3rem .75rem #1877f266}
.Social__btn--whatsapp{background:#25D366}
.Social__btn--whatsapp:hover{box-shadow:0 .3rem .75rem #25d36666}
.Social__btn--youtube{background:#FF0000}
.Social__btn--youtube:hover{box-shadow:0 .3rem .75rem #ff000066}
/* Half the previous height: padding-block alone drives the bar's size. */
.Footer__bar{margin-top:1.25rem; padding-block:.55rem; padding-inline:var(--container);
             border-top:0; font-size:.96rem;
             display:flex; flex-wrap:wrap; justify-content:center; text-align:center; gap:.5rem;
             background:rgba(0,0,0,.22)}
.Footer__bar small{font-size:inherit}

/* Floating AI contact — robot mascot, physical right */
.ChatBot{
  position:fixed; z-index:80;
  right:1.1rem; bottom:1.1rem; left:auto;
  display:grid; place-items:center;
  width:4.6rem; height:4.6rem;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #ffffffee, #ffffffcc 58%, #ffffff00 72%);
  box-shadow:0 .35rem 1rem rgba(36,9,75,.28);
  text-decoration:none;
  transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.ChatBot:hover{
  transform:translateY(-3px) scale(1.05);
  filter:brightness(1.04);
  box-shadow:0 .45rem 1.25rem rgba(36,9,75,.36);
}
.ChatBot:focus-visible{outline:.1875rem solid var(--teal); outline-offset:.25rem}
.ChatBot__img{
  display:block; width:4.15rem; height:4.15rem;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 .2rem .45rem rgba(36,9,75,.35));
}


/* ---------- login ---------- */
.Login{display:flex; justify-content:center; margin:2.5rem auto; padding-inline:var(--container)}
.Login__card{
  width:450px; height:450px; max-width:100%; box-sizing:border-box; overflow:auto;
  background:var(--white); border:1px solid var(--gray); border-radius:1rem;
  padding:1.5rem 1.25rem; box-shadow:var(--shadow);
}
.Login__title{font:var(--h3); color:var(--midnight); margin:0 0 .35rem}
.Login__lede{margin:0 0 1rem; color:var(--midnight); opacity:.7; font-size:.9rem}
.Login__error{background:#fee2e2; color:#991b1b; padding:.65rem .8rem; border-radius:.5rem; margin:0 0 1rem}
.Login__form label{display:block; font:var(--xsmall); margin-bottom:.3rem; color:var(--midnight)}
.Login__form input{
  width:100%; margin-bottom:.85rem; padding:.65rem .8rem; border:1px solid var(--gray);
  border-radius:.55rem; font:var(--small);
}
.Login__submit{width:100%; margin-top:.25rem}

/* ---------- activity bookings admin ---------- */
.Bookings{padding-inline:var(--container); padding-bottom:2.5rem}
.Bookings__empty{opacity:.7}
.Bookings__tableWrap{overflow:auto; border-radius:.75rem; border:1px solid var(--gray); background:#fff}
.Bookings__table{width:100%; border-collapse:collapse; font:var(--small)}
/* Compact rows — the admin tables list hundreds of records, so the row
   height is kept tight (was .7rem/.85rem). */
.Bookings__table th,.Bookings__table td{padding:.3rem .5rem; text-align:right; border-bottom:1px solid #eee; line-height:1.3}
.Bookings__table input,.Bookings__table select{padding:.2rem .4rem; font:var(--xsmall)}
.Bookings__table .Portal__inlineForm{gap:.3rem}
.Bookings__table th{background:var(--midnight); color:#fff; font-weight:700}
.Bookings__table tr:last-child td{border-bottom:0}

/* ---------- small screens: burger always; nav as drop panel ---------- */
/* 63.99em/1024px used to be the cutoff, but the 9 top-level nav items don't
   reliably fit in one row until ~1150-1200px — below that (but still above
   the old cutoff) the row overflowed and items overlapped/fell off-screen.
   Raised to 74.99em/1200px so the burger/drop-panel nav covers that whole
   range instead of a desktop row that doesn't actually fit. */
@media (max-width:74.99em){
  .site-chrome{padding:0}
  .site-chrome__card{position:relative; overflow:visible}
  .brand__text{display:none}
  .masthead__login span{display:none}
  .brand img,.masthead__mohesr img{height:72px}
  .masthead__in{flex-wrap:nowrap}
  .nav__burger{display:inline-flex}
  .nav{
    order:0; flex:none; width:100%;
    position:absolute; left:0; right:0; top:100%;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    margin-inline:0; padding-inline:0;
    box-shadow:0 .55rem 1.4rem #00000044;
    transition:max-height .32s ease, opacity .24s ease;
    background:linear-gradient(180deg, rgba(84,46,142,.98), rgba(36,9,75,.98));
  }
  .site-chrome.is-menu-open .nav{
    max-height:min(72vh, 30rem); overflow:auto; opacity:1; pointer-events:auto;
  }
  .nav__in{flex-direction:column; align-items:stretch; padding-block:.85rem; gap:.65rem; padding-inline:var(--container)}
  .nav__list{display:flex; flex-direction:column; width:100%}
  .nav__item--faqCta{flex-wrap:wrap; align-items:stretch}
  .nav__ctaDrop{display:block; width:100%}
  .nav__cta{display:inline-block; margin-block:.35rem .15rem; margin-inline-start:1.75rem}
  .nav__sub{position:static; display:block; box-shadow:none; background:transparent;
            border:0; border-radius:0; padding:0; margin:0}
  .nav__sub--nested,
  .nav__subItem > .nav__sub.nav__sub--nested{
    position:static !important; top:auto !important; right:auto !important; left:auto !important;
    bottom:auto !important; margin:0 !important;
  }
  .nav__subItem > a{color:rgba(255,255,255,.85); padding-inline-start:1.75rem}
  .nav__sub--nested .nav__subItem > a{padding-inline-start:2.6rem}
  .nav__subItem > a:hover{background:rgba(255,255,255,.12); color:var(--white)}
  .nav__chev{transform:rotate(45deg); margin-block-start:-.15rem}
  .nav__lookup{justify-content:stretch; width:100%}
  .nav__lookup input{width:auto; flex:1 1 auto; max-width:none}

  .site-chrome.is-scrolled .brand img,
  .site-chrome.is-scrolled .masthead__mohesr img{height:48px}
  .site-chrome.is-scrolled .nav{
    position:absolute; left:0; right:0; top:100%;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(84,46,142,.98), rgba(36,9,75,.98));
  }
  .site-chrome.is-scrolled.is-menu-open .nav{
    max-height:min(72vh, 30rem); overflow:auto; opacity:1; pointer-events:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
  .ticker__track{animation:none; white-space:normal; flex-wrap:wrap}
  .Card:hover{transform:none}
  .hero__slide{transition:none}
  /* Background footage is motion too: swap the video for its poster rather
     than autoplaying it at someone who asked their system for less. The JS
     carousel already skips its own autoplay interval under this query. */
  video.hero__media{display:none}
  .hero__media--fallback{display:block}
}

/* ---------- student portal ---------- */
.PortalNav{display:flex; align-items:center; position:relative; margin-bottom:2rem; border-bottom:1px solid var(--gray)}
.PortalNav__list{
  display:flex; flex-wrap:wrap; gap:.25rem; list-style:none; margin:0; padding:0;
}
.PortalNav__link{
  display:block; padding:.7rem 1rem; color:var(--midnight); font-weight:600;
  text-decoration:none; border-bottom:.2rem solid transparent;
  transition:color var(--transition), border-color var(--transition);
}
.PortalNav__link:hover{color:var(--purple)}
.PortalNav__link.is-active{color:var(--purple); border-bottom-color:var(--purple)}

/* Admin nav only (17 tabs, wraps 3 rows as a plain bar): a hamburger toggle
   replaces the bar, opening the same items as a single-column dropdown
   anchored at the far side from where the tabs read — same burger pattern
   as the site header's own mobile menu. */
.PortalNav--collapsible{border-bottom:0; padding-bottom:.5rem}
.PortalNav--collapsible .PortalNav__list{display:none}
.PortalNav--collapsible.is-open .PortalNav__list{
  display:flex; flex-direction:column; gap:0; width:16rem; max-width:calc(100vw - 2rem);
  position:absolute; top:100%; inset-inline-end:0; margin-top:.5rem;
  background:var(--white); border:1px solid var(--gray); border-radius:.75rem;
  box-shadow:var(--shadow); padding:.5rem; z-index:30;
}
.PortalNav--collapsible.is-open .PortalNav__list li{width:100%}
.PortalNav--collapsible .PortalNav__link{border-bottom:0; border-radius:.45rem; padding:.65rem .85rem}
.PortalNav--collapsible .PortalNav__link.is-active{background:var(--purple); color:var(--white)}
.PortalNav__toggle{
  display:flex; align-items:center; justify-content:center;
  margin-inline-start:auto; width:2.75rem; height:2.75rem; flex:none;
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--midnight); border-radius:.45rem;
}
.PortalNav__toggle:hover{background:var(--gray)}
.PortalNav__toggleLines{display:flex; flex-direction:column; justify-content:center; gap:.28rem; width:1.35rem}
.PortalNav__toggleLines span{
  display:block; height:2px; width:100%; background:currentColor; border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.PortalNav--collapsible.is-open .PortalNav__toggleLines span:nth-child(1){transform:translateY(.36rem) rotate(45deg)}
.PortalNav--collapsible.is-open .PortalNav__toggleLines span:nth-child(2){opacity:0}
.PortalNav--collapsible.is-open .PortalNav__toggleLines span:nth-child(3){transform:translateY(-.36rem) rotate(-45deg)}

.Portal__stats{display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0}
.Portal__stat{
  flex:1 1 12rem; padding:1rem 1.25rem; border-radius:.75rem;
  background:var(--gray-50); border:1px solid var(--gray);
}
.Portal__stat--warn{background:#f4782110; border-color:#f4782140}
.Portal__stat--ok{background:#96ca4f10; border-color:#96ca4f40}
.Portal__statLabel{display:block; font:var(--small); color:var(--midnight-80); margin-bottom:.35rem}
.Portal__statValue{font:var(--h4); color:var(--purple)}

.Portal__tiles{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.Portal__tile{
  display:flex; flex-direction:column; gap:.4rem; padding:1.25rem;
  border-radius:.9rem; border:1px solid var(--gray); background:#fff;
  text-decoration:none; color:inherit; box-shadow:0 .3rem 1rem #0000000f;
  transition:transform var(--transition), box-shadow var(--transition);
}
.Portal__tile:hover{transform:translateY(-.2rem); box-shadow:0 .5rem 1.4rem #00000018}

/* رفع ونشر الأنشطة — folder-browser style grid, ~4 columns with vertical scroll. */
.Portal__tiles--activities{
  grid-template-columns:repeat(4, minmax(12rem, 1fr));
  max-height:52rem; overflow-y:auto; padding-inline-end:.5rem;
}
.Portal__tile--add{align-items:center; justify-content:center; text-align:center}
.Portal__tile--add > summary{
  list-style:none; cursor:pointer; font-size:2.5rem; font-weight:700; color:var(--purple);
  width:100%; text-align:center;
}
.Portal__tile--add > summary::-webkit-details-marker{display:none}
.Portal__tile select{
  padding:.35rem .5rem; border-radius:.4rem; border:1px solid var(--gray); font:var(--small);
}
.Portal__tile details summary{cursor:pointer; color:var(--purple); font:var(--xsmall); font-weight:600}
.Portal__tile strong{color:var(--purple); font:var(--h6)}
.Portal__tile span{font:var(--small); color:var(--midnight-80)}

.Portal__form{display:flex; flex-direction:column; gap:.35rem; max-width:28rem}
.Portal__form label{font-weight:600; color:var(--midnight); margin-top:.75rem}
.Portal__form select,
.Portal__form input[type="text"],
.Portal__form input[type="password"],
.Portal__form input[type="number"],
.Portal__form textarea{
  padding:.55rem .75rem; border-radius:.5rem; border:1px solid var(--gray);
  font:var(--body); background:#fff;
}
.Portal__form textarea{resize:vertical; font-family:inherit}
.Portal__inlineForm{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.Portal__inlineForm input,
.Portal__inlineForm select{
  padding:.35rem .6rem; border-radius:.4rem; border:1px solid var(--gray);
  font:var(--small); background:#fff;
}
.Portal__inlineForm input{width:9rem}
.Portal__form button{margin-top:1.5rem; align-self:flex-start}

/* Frame grouping fields that feed one Save action together. */
.Portal__form--framed{
  border:1px solid var(--gray); border-radius:.75rem; padding:1.25rem;
  max-width:32rem;
}

/* Read-only code box preceding a name field. */
.Portal__code{
  display:inline-block; min-width:3.5rem; padding:.3rem .6rem; margin-inline-end:.4rem;
  border-radius:.4rem; background:var(--purple-5); color:var(--purple);
  font:var(--xsmall); font-weight:700; text-align:center;
}

.Portal__collapsible{border:1px solid var(--gray); border-radius:.75rem; margin-bottom:1.5rem; padding:0 1.25rem}
.Portal__collapsible > summary{
  padding:1rem 0; cursor:pointer; font-weight:700; color:var(--purple); list-style:none;
}
.Portal__collapsible > summary::-webkit-details-marker{display:none}
.Portal__collapsible > summary::before{content:"▸"; display:inline-block; margin-inline-end:.5rem; transition:transform .2s ease}
.Portal__collapsible[open] > summary::before{transform:rotate(90deg)}
.Portal__collapsible > *:not(summary){margin-bottom:1.25rem}

.Portal__timer{
  position:sticky; top:5rem; z-index:5; display:inline-block; margin-bottom:1.5rem;
  padding:.55rem 1.1rem; border-radius:999px; background:var(--midnight); color:#fff;
  font-weight:700; letter-spacing:.02em;
}
.Portal__question{
  margin:0 0 1.5rem; padding:1.25rem; border:1px solid var(--gray); border-radius:.75rem;
}
.Portal__question legend{padding:0 .35rem; font-weight:700; color:var(--midnight)}
.Portal__questionImg{display:block; max-width:100%; margin:.75rem 0; border-radius:.5rem}
.Portal__option{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem; cursor:pointer;
}
.Portal__option input{flex:none}