/* ============================================================
   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:height .28s ease}
.masthead__coop:hover{opacity:.85}
/* Coop-mode toggle: the small coop icon and the HCM logo swap sizes. */
.site-chrome.coop-mode .brand img{height:52px}
.site-chrome.coop-mode .masthead__coop img{height:101px}
.site-chrome.is-scrolled.coop-mode .masthead__coop img{height:52px}
.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));
}
.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}

/* ---------- 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}
.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}
.Posts__head{display:flex; gap:.75rem; align-items:flex-start}
/* 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 thumbnail beside the body
   text without cramping it. Stack the thumb above the text instead, just
   at that width. */
@media (max-width:30em){
  .Posts__head{flex-direction:column}
  .Posts__thumb{width:100%; height:8rem}
}
.Posts__thumb{position:relative; flex:none; width:4.75rem; height:4.75rem;
              border-radius:var(--radius); overflow:hidden; background:var(--gray)}
.Posts__headText{min-width: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; flex:1; min-width:0}
.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}

/* ---------- 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{max-width:26rem; margin:2.5rem auto; padding-inline:var(--container)}
.Login__card{
  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)}
.Bookings__table th,.Bookings__table td{padding:.7rem .85rem; text-align:right; border-bottom:1px solid #eee}
.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}
}