/* Small custom layer for things utilities can't express cleanly */
:root { --teal:#045D84; --navy:#0A2E42; --gold:#99823F; --gold-light:#B7A362; --surface:#E6F0F5; }

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', 'Outfit', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit','DM Sans',sans-serif; }

/* Arabic / RTL font swap */
[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] input,
[dir="rtl"] textarea, [dir="rtl"] button { font-family: 'IBM Plex Sans Arabic','DM Sans',sans-serif !important; }

::selection { background: var(--gold-light); color: var(--navy); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(10,46,66,.25); border-radius: 999px; }

/* decorative radial glows */
.glow { position: absolute; border-radius: 9999px; pointer-events: none; }
.glow-teal { background: radial-gradient(circle, rgba(4,93,132,.5), transparent 70%); }
.glow-gold { background: radial-gradient(circle, rgba(153,130,63,.28), transparent 70%); }

/* gradients */
.grad-hero { background: linear-gradient(140deg,#0A2E42 0%,#06202F 55%,#083247 100%); }
.grad-dark { background: linear-gradient(135deg,#0A2E42,#06202F); }
.grad-teal { background: linear-gradient(135deg,#045D84,#0A2E42); }
.grad-gold { background: linear-gradient(135deg,#B7A362,#99823F); }
.grad-demo { background: linear-gradient(180deg,#5A4E22 0%,#3A3216 42%,#14110A 100%); }
.gridlines { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; }
.grad-auth { background: linear-gradient(160deg,#0A2E42 0%,#06202F 60%,#083247 100%); }

/* sidebar slide (mobile) — off-canvas below Tailwind's xl (1280px),
   matching where the main-content margin (xl:ms-[276px]) kicks in */
.sidebar { transition: transform .25s ease; }
@media (max-width:1279.98px){
  /* !important so the off-canvas transform beats Tailwind's equal-specificity
     transform utilities that come later in source order */
  .sidebar { transform: translateX(-100%) !important; }
  [dir="rtl"] .sidebar { transform: translateX(100%) !important; }
  .sidebar.open { transform: translateX(0) !important; }
}

/* timeline center line */
.timeline::before { content:''; position:absolute; inset-inline-start:19px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.12); }
@media (min-width:768px){ .timeline::before { inset-inline-start:50%; transform:translateX(-50%); } }

/* clamp */
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* mirror directional icons (chevrons/arrows) in RTL */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* footer link hover */
.flink { transition: color .2s ease; }
.flink:hover { color: #B7A362; }

/* participating-universities marquee (continuous slider, pause on hover) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee-x 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-x { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-x-rtl; }
@keyframes marquee-x-rtl { to { transform: translateX(50%); } }
.uni-tile { margin-inline-end: 12px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.uni-tile:hover { border-color: #045D84 !important; box-shadow: 0 12px 26px -12px rgba(4,93,132,.45); transform: translateY(-3px); }

/* partner tiles — faint diamond cross-hatch pattern */
.partner-tile {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(45deg, rgba(10,46,66,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(10,46,66,.03) 0 1px, transparent 1px 24px);
}

/* Journey card hover (Tailwind Play CDN does not emit :hover variants for
   JS-injected DOM, so these interactive states are handled here) */
.jcard { transition: transform .3s ease, box-shadow .3s ease; }
.jcard:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(10,46,66,.45); }
.jhead, .jbtn { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.jstep, .jstep .material-icons { transition: color .2s ease; }
.jcard:hover .jhead,
.jcard:hover .jbtn {
  background: linear-gradient(135deg,#045D84,#0A2E42) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(4,93,132,.65);
}
.jstep:hover { color: #045D84 !important; }
.jstep:hover .material-icons { color: #045D84 !important; }

/* range/scroll niceties for filter chip rows */
.noscroll::-webkit-scrollbar { display:none; }
.noscroll { -ms-overflow-style:none; scrollbar-width:none; }