/*
Theme Name:  Umma University Library
Theme URI:   https://library.umma.ac.ke
Author:      Umma University Library
Description: Award-winning, accessible, multilingual WordPress theme for Umma University Library. Navy/Green/Blue palette, RTL Arabic, WCAG 2.1 AA, AI features, full SEO.
Version:           6.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: umma-library
Tags:        university, library, accessibility, multilingual, rtl-language-support, custom-logo, custom-menu, translation-ready
*/

/* ============================================================
   1. CSS TOKENS
   ============================================================ */
:root {
  --navy:      #002049;
  --navy-d:    #001230;
  --navy-l:    #003070;
  --green:     #44b143;
  --green-d:   #2d8a2d;
  --green-l:   #6bcf6a;
  --blue:      #1568B4;
  --blue-d:    #0d4d8a;
  --white:     #ffffff;
  --cream:     #f3f7fb;
  --gray-100:  #eef2f7;
  --gray-200:  #dde6f0;
  --text:      #1a2e45;
  --muted:     #4a6a8a;
  --border:    #dce8f0;

  /* GCU-style typography: Source Sans 3 (body/UI) + Source Serif 4 (headings) */
  --font-head: 'Source Serif 4', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-arab: 'Noto Naskh Arabic', serif;

  --r:   8px;
  --rl:  14px;
  --rf:  9999px;
  --sh:  0 2px 12px rgba(0,32,73,.08);
  --shm: 0 6px 24px rgba(0,32,73,.13);
  --shl: 0 12px 40px rgba(0,32,73,.18);
  --tr:  .22s cubic-bezier(.4,0,.2,1);

  --fs: 17px; /* GCU standard — generous readable size */
  --max-w: 1200px;
}

/* Dark mode */
[data-theme="dark"] {
  --white:    #0f1e30;
  --cream:    #0a1828;
  --gray-100: #122030;
  --gray-200: #1a2e42;
  --text:     #ddeaf8;
  --muted:    #7aaccc;
  --border:   #1e3a55;
}
[data-theme="dark"] .site-header   { background: #001230; }
[data-theme="dark"] .news-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .db-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .hours-card,
[data-theme="dark"] .event-featured{ background: #0d1f32; border-color: #1e3a55; }

/* High contrast */
[data-high-contrast="true"] { filter: contrast(1.6); }

/* Dyslexia */
[data-dyslexia="true"],
[data-dyslexia="true"] * { font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif !important; }

/* Spacing */
[data-spacing="wide"] * { letter-spacing: .05em; line-height: 1.95 !important; }

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: var(--fs); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--text); background: var(--white); overflow-x: hidden; }
[dir="rtl"] { font-family: var(--font-arab); }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--blue); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--navy); }
button { cursor: pointer; font-family: inherit; }
ul    { list-style: none; }

/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--green); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  padding: 12px 24px; z-index: 9999; border-radius: 0 0 var(--r) 0;
  transition: top .2s;
}
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   4. ACCESSIBILITY TOOLBAR
   ============================================================ */
.a11y-toggle-btn {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 9000;
  background: var(--navy); color: #fff; border: none;
  width: 46px; height: 46px;
  border-radius: 0 var(--r) var(--r) 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
  box-shadow: -2px 0 10px rgba(0,0,0,.2);
}
[dir="rtl"] .a11y-toggle-btn { right: auto; left: 0; border-radius: var(--r) 0 0 var(--r); }
.a11y-toggle-btn:hover { background: var(--green); }
.a11y-toggle-btn svg { width: 22px; height: 22px; fill: #fff; }

.a11y-panel {
  position: fixed; top: 0; bottom: 0; right: -320px;
  width: min(310px, 80vw); background: var(--white);
  border-left: 3px solid var(--green);
  box-shadow: var(--shl); z-index: 8999;
  overflow-y: auto; transition: right .3s ease;
}
[dir="rtl"] .a11y-panel { right: auto; left: -320px; border-left: none; border-right: 3px solid var(--green); transition: left .3s ease; width: min(310px, 80vw); }
.a11y-panel.open { right: 0; }
[dir="rtl"] .a11y-panel.open { left: 0; right: auto; }

.a11y-panel-head { background: var(--navy); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; }
.a11y-panel-head h3 { color: #fff; font-size: 14px; font-weight: 600; }
.a11y-panel-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 18px; padding: 4px 6px; }
.a11y-panel-close:hover { color: #fff; }

.a11y-group { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.a11y-group-label { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }

.a11y-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.a11y-btn {
  background: var(--gray-100); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 7px 13px;
  font-size: 12px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 5px;
  transition: all var(--tr);
}
.a11y-btn svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.a11y-btn:hover, .a11y-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.a11y-slider { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.a11y-slider label { font-size: 12px; color: var(--muted); min-width: 50px; }
.a11y-slider input[type="range"] { flex: 1; accent-color: var(--green); }
.a11y-slider span { font-size: 12px; font-weight: 700; color: var(--navy); min-width: 36px; text-align: right; }

.a11y-reset { width: 100%; background: var(--gray-100); border: 1.5px solid var(--border); border-radius: var(--r); padding: 10px; font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 18px 14px; width: calc(100% - 36px); transition: all var(--tr); }
.a11y-reset:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ============================================================
   5. TOPBAR
   ============================================================ */
.site-topbar {
  background: var(--navy-d);
  padding: 7px 0;
  font-family: var(--font-body); font-size: 11px;
  color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(68,177,67,.2);
}
.topbar-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.topbar-left  { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar-item  { display: flex; align-items: center; gap: 5px; }
.topbar-item svg { width: 12px; height: 12px; fill: var(--green); flex-shrink: 0; }
.topbar-item a { color: rgba(255,255,255,.65); }
.topbar-item a:hover { color: var(--green); }

.open-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--rf); padding: 3px 11px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  border: 1px solid transparent;
}
/* Open state — green */
.open-pill--open {
  background: rgba(68,177,67,.15);
  border-color: rgba(68,177,67,.35);
  color: #5dcc5c;
}
/* Closed state — red */
.open-pill--closed {
  background: rgba(220,38,38,.15);
  border-color: rgba(220,38,38,.35);
  color: #f87171;
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; flex-shrink: 0; }
.pulse--closed { background: #ef4444; animation: pulse-red 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes pulse-red { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

/* LANGUAGE SWITCHER */
.lang-switcher { display: flex; gap: 4px; align-items: center; }
.lang-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.65); border-radius: var(--rf);
  padding: 3px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; font-family: var(--font-body);
  transition: all var(--tr);
}
.lang-btn.active, .lang-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.lang-btn[lang="ar"] { font-family: var(--font-arab); font-size: 12px; }

/* ============================================================
   6. SITE HEADER — fixed nav distortion
   ============================================================ */
.site-header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 500;
  transition: box-shadow var(--tr);
}
.site-header::after {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--green));
  background-size: 200%; animation: bar-glow 4s linear infinite;
}
@keyframes bar-glow { 0%{background-position:0%} 100%{background-position:200%} }
.site-header.scrolled { box-shadow: var(--shl); }

.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 8px;
  min-width: 0; /* allow children to shrink */
}

/* LOGO */
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 1; min-width: 0; overflow: hidden; }
.logo-img-wrap {
  width: 48px; height: 48px; background: #fff; border-radius: var(--r);
  padding: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { line-height: 1.15; }
.logo-text .uni  { font-size: 9px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2px; display: block; }
.logo-text .name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.logo-text .tag  { font-size: 8px; color: rgba(255,255,255,.4); font-style: italic; display: block; margin-top: 1px; }

/* PRIMARY NAV — KEY FIX: no wrapping, no overflow */
.primary-nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
  flex-wrap: nowrap; overflow: hidden;
}
.primary-nav a {
  display: block;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.82); white-space: nowrap;
  padding: 8px 11px; border-radius: var(--r);
  text-decoration: none; transition: all var(--tr);
}
.primary-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.primary-nav a.current { color: var(--green); }

/* HEADER ACTIONS */
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; z-index: 2; }
.hdr-icon-btn {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all var(--tr); position: relative;
}
.hdr-icon-btn:hover { background: rgba(255,255,255,.18); }
.hdr-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); border: 1.5px solid var(--navy); }

.btn-myaccount {
  background: var(--green); color: #fff; border: none;
  border-radius: var(--rf); padding: 8px 16px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap; transition: all var(--tr);
}
.btn-myaccount:hover { background: var(--green-d); color: #fff; transform: translateY(-1px); }
.btn-myaccount svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

.hamburger {
  display: none;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r);
  color: #fff;
  padding: 8px 10px;
  cursor: pointer;
  transition: background var(--tr);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
}
.hamburger:hover { background: rgba(255,255,255,.2); }
/* Bootstrap 3-style three horizontal bars */
.hamburger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .25s ease;
}
/* Animate to X when open */
.hamburger.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   7. SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(0,18,48,.96); backdrop-filter: blur(10px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden; transition: all .3s;
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-overlay-inner { width: 100%; max-width: 700px; position: relative; }
.overlay-close {
  position: absolute; top: -52px; right: 0;
  background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  width: 42px; height: 42px; color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: all var(--tr);
}
.overlay-close:hover { background: rgba(255,255,255,.2); }
.overlay-label { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.overlay-form { display: flex; gap: 8px; }
.overlay-form input {
  flex: 1; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.18);
  border-radius: var(--rl); padding: 14px 18px; color: #fff;
  font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color var(--tr);
}
.overlay-form input:focus { border-color: var(--green); }
.overlay-form input::placeholder { color: rgba(255,255,255,.3); }
.overlay-form button {
  background: var(--green); border: none; border-radius: var(--rl);
  padding: 14px 22px; color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 6px; transition: all var(--tr);
}
.overlay-form button:hover { background: var(--green-d); }
.overlay-form button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.search-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.search-tag {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--rf); padding: 5px 14px;
  font-size: 12px; color: rgba(255,255,255,.6); transition: all var(--tr);
}
.search-tag:hover { background: rgba(68,177,67,.2); border-color: var(--green); color: #fff; }
.search-results-live { margin-top: 20px; max-height: 320px; overflow-y: auto; }
.live-result {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r); cursor: pointer; transition: background var(--tr);
}
.live-result:hover { background: rgba(255,255,255,.07); }
.live-result-icon { width: 34px; height: 34px; border-radius: var(--r); background: rgba(68,177,67,.18); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.live-result h4 { font-size: 13px; color: #fff; font-weight: 500; }
.live-result p  { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; }

/* ============================================================
   8. MOBILE NAV
   ============================================================ */
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 799; display: none; }
.mobile-nav-overlay.open { display: block; }
.mobile-nav {
  position: fixed; top: 0; right: -100%; bottom: 0; width: 290px;
  background: var(--navy-d); z-index: 800;
  padding: 20px; overflow-y: auto; transition: right .3s ease;
}
[dir="rtl"] .mobile-nav { right: auto; left: -100%; transition: left .3s ease; }
.mobile-nav.open { right: 0; }
[dir="rtl"] .mobile-nav.open { left: 0; right: auto; }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.mobile-nav-close {
  background: var(--green);
  border: 2px solid var(--green);
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-links a { font-size: 14px; color: rgba(255,255,255,.8); padding: 12px 16px; border-radius: var(--r); display: block; transition: all var(--tr); border-bottom: 1px solid rgba(255,255,255,.04); text-decoration: none; }
.mobile-nav-links a:hover { background: rgba(255,255,255,.07); color: #fff; }
.mobile-lang-wrap { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-lang-label { font-size: 10px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.mobile-lang-wrap .lang-switcher { flex-wrap: wrap; gap: 6px; }

/* ============================================================
   9. HERO
   ============================================================ */
.site-hero {
  position: relative; min-height: 580px;
  background: var(--navy-d);
  display: flex; align-items: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(0,18,48,.95) 0%,rgba(0,32,73,.8) 52%,rgba(21,104,180,.5) 100%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(68,177,67,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(68,177,67,.035) 1px,transparent 1px); background-size: 54px 54px; z-index: 1; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: float 8s ease-in-out infinite; z-index: 1; }
.hero-orb-1 { width: 280px; height: 280px; background: rgba(68,177,67,.07); top: -40px; right: 12%; }
.hero-orb-2 { width: 180px; height: 180px; background: rgba(21,104,180,.09); bottom: 10%; right: 30%; animation-delay: -3s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

.hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: 56px 20px; width: 100%;
  animation: fadeUp .75s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
[dir="rtl"] .hero-content { text-align: right; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 14px; }
.hero-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--green); }
[dir="rtl"] .hero-eyebrow::before { display: none; }
[dir="rtl"] .hero-eyebrow::after  { content: ''; width: 20px; height: 2px; background: var(--green); }

.hero-title { font-family: var(--font-head); font-size: clamp(28px,4.5vw,50px); font-weight: 900; color: #fff; line-height: 1.13; margin-bottom: 14px; max-width: 640px; }
.hero-title em { color: var(--green); font-style: normal; }
.hero-subtitle { font-size: 15px; color: rgba(255,255,255,.65); max-width: 520px; margin-bottom: 28px; line-height: 1.7; }
[dir="rtl"] .hero-title,
[dir="rtl"] .hero-subtitle { max-width: 100%; }

/* Search box */
.hero-search { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.13); border-radius: var(--rl); padding: 18px; max-width: 660px; backdrop-filter: blur(8px); }
.search-tab-row { display: flex; gap: 3px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); flex-wrap: wrap; }
.stab { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); padding: 5px 13px; border-radius: var(--rf); border: 1px solid transparent; background: none; transition: all var(--tr); }
.stab.active { background: var(--green); color: #fff; border-color: var(--green); }
.stab:hover:not(.active) { color: #fff; border-color: rgba(255,255,255,.25); }
.search-input-row { display: flex; gap: 8px; }
.hero-search-input { flex: 1; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--r); padding: 12px 16px; color: #fff; font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color var(--tr); }
.hero-search-input:focus { border-color: var(--green); }
.hero-search-input::placeholder { color: rgba(255,255,255,.35); }
.hero-search-btn { background: var(--green); border: none; border-radius: var(--r); padding: 12px 22px; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; transition: all var(--tr); white-space: nowrap; }
.hero-search-btn:hover { background: var(--green-d); }
.hero-search-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.hero-quick-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-qlink { font-size: 11px; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.15); border-radius: var(--rf); padding: 4px 12px; background: none; transition: all var(--tr); }
.hero-qlink:hover { color: #fff; border-color: var(--green); background: rgba(68,177,67,.12); }

/* Stats */
.hero-stats { display: flex; gap: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); margin-top: 22px; max-width: 500px; }
.hero-stat { flex: 1; text-align: center; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.09); }
.hero-stat:last-child { border-right: none; }
.stat-number { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--green); display: block; line-height: 1; }
.stat-label  { font-size: 9px; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: 1px; display: block; margin-top: 4px; }

/* Campus strip */
.hero-campus-strip { position: absolute; right: 0; top: 0; bottom: 0; width: 30%; display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 3px; z-index: 2; overflow: hidden; }
[dir="rtl"] .hero-campus-strip { right: auto; left: 0; }
.campus-thumb { overflow: hidden; position: relative; }
.campus-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.campus-thumb:hover img { transform: scale(1.06); }
.campus-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,18,48,.4),transparent); }
[dir="rtl"] .campus-thumb::after { background: linear-gradient(-90deg,rgba(0,18,48,.4),transparent); }
.campus-cap { position: absolute; bottom: 8px; left: 10px; font-size: 10px; color: rgba(255,255,255,.85); font-weight: 600; }
[dir="rtl"] .campus-cap { left: auto; right: 10px; }

/* ============================================================
   10. QUICK ACCESS BAR
   ============================================================ */
.quick-access-bar { background: var(--blue); border-bottom: 3px solid var(--green-d); overflow-x: auto; scrollbar-width: none; }
.quick-access-bar::-webkit-scrollbar { display: none; }
.qa-inner { display: flex; max-width: var(--max-w); margin: 0 auto; min-width: max-content; }
.qa-link { flex: 1; min-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 10px; border-right: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background var(--tr); text-decoration: none; color: rgba(255,255,255,.82); }
.qa-link:last-child { border-right: none; }
.qa-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.qa-icon { width: 30px; height: 30px; background: rgba(255,255,255,.1); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.qa-icon svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; }
.qa-label { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.2; }

/* ============================================================
   11. AI FEATURE STRIP
   ============================================================ */
.ai-strip { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-l) 100%); padding: 28px 0; overflow: hidden; position: relative; }
.ai-strip::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(68,177,67,.07) 1px,transparent 1px); background-size: 24px 24px; pointer-events: none; }
.ai-strip-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; position: relative; }
.ai-strip-inner::-webkit-scrollbar { display: none; }
.ai-card { flex: 1; min-width: 190px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--rl); padding: 16px; transition: all var(--tr); cursor: pointer; position: relative; overflow: hidden; }
.ai-card:hover { border-color: rgba(68,177,67,.4); transform: translateY(-2px); }
.ai-card-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(68,177,67,.15); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ai-card-icon svg { width: 17px; height: 17px; fill: var(--green); }
.ai-card h4 { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ai-card p  { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; }
.ai-new { position: absolute; top: 10px; right: 10px; background: var(--green); color: #fff; font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: var(--rf); text-transform: uppercase; }
[dir="rtl"] .ai-new { right: auto; left: 10px; }

/* ============================================================
   12. SECTION WRAPPERS
   ============================================================ */
.section-wrap { padding: 56px 20px; }
.section-wrap.bg-alt  { background: var(--cream); }
.section-wrap.bg-dark { background: var(--navy); }
.container { max-width: var(--max-w); margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 36px; }
.section-tag  { display: inline-block; font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 8px; }
.section-title{ font-family: var(--font-head); font-size: clamp(22px,3vw,32px); font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
.section-desc { font-size: 14px; color: var(--muted); max-width: 460px; margin: 0 auto; line-height: 1.6; }
.section-divider { width: 44px; height: 3px; background: linear-gradient(90deg,var(--green),var(--blue)); border-radius: 2px; margin: 10px auto 0; }
.bg-dark .section-title { color: #fff; }
.bg-dark .section-desc  { color: rgba(255,255,255,.6); }
.section-view-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 24px; transition: gap var(--tr); }
.section-view-all:hover { gap: 9px; }
.section-view-all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.center { text-align: center; }

/* ============================================================
   13. SERVICE CARDS
   ============================================================ */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 26px 22px; transition: all var(--tr); cursor: pointer; position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--green),var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform var(--tr); }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shm); }
.service-icon { width: 48px; height: 48px; background: var(--cream); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background var(--tr); }
.service-card:hover .service-icon { background: rgba(68,177,67,.12); }
.service-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--navy); stroke-width: 1.5; transition: stroke var(--tr); }
.service-card:hover .service-icon svg { stroke: var(--green); }
.service-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.service-card p  { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.service-link { font-size: 11px; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 4px; transition: gap var(--tr); }
.service-link:hover { gap: 8px; }

/* ============================================================
   14. CAMPUS GALLERY
   ============================================================ */
.campus-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 6px; border-radius: var(--rl); overflow: hidden; }
.gallery-item { overflow: hidden; position: relative; }
.gallery-item:first-child { grid-row: 1 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(transparent,rgba(0,18,48,.65)); font-size: 11px; color: rgba(255,255,255,.9); font-weight: 500; }

/* ============================================================
   15. BOOK CARDS
   ============================================================ */
.books-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.book-card { background: var(--white); border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); transition: all var(--tr); cursor: pointer; }
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shm); }
.book-cover { height: 130px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 22px; font-weight: 900; color: #fff; position: relative; overflow: hidden; }
.book-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.1),transparent 60%); }
.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,.2); }
[dir="rtl"] .book-spine { left: auto; right: 0; }
.book-info { padding: 12px; }
.book-title  { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.35; margin-bottom: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-author { font-size: 10px; color: var(--muted); }
.book-avail  { display: inline-block; margin-top: 6px; font-size: 9px; font-weight: 700; padding: 2px 9px; border-radius: var(--rf); background: rgba(68,177,67,.1); color: var(--green-d); }
.book-avail.out { background: rgba(21,104,180,.1); color: var(--blue-d); }

/* ============================================================
   16. DATABASE CARDS
   ============================================================ */
.databases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.db-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 18px; display: flex; gap: 12px; align-items: flex-start; transition: all var(--tr); cursor: pointer; }
.db-card:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.db-logo { width: 44px; height: 44px; border-radius: 9px; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--green); flex-shrink: 0; }
.db-info h4 { font-size: 13px; font-weight: 700; color: var(--navy); }
.db-info p  { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.db-tag { display: inline-block; font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: var(--rf); background: rgba(21,104,180,.1); color: var(--blue-d); margin-top: 6px; }

/* ============================================================
   17. EVENTS + HOURS
   ============================================================ */
.events-hours-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.event-featured { background: var(--white); border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh); }
.event-img { height: 165px; background: var(--navy-l); position: relative; overflow: hidden; }
.event-img img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.event-img-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; }
.event-badge { background: var(--green); color: #fff; border-radius: 9px; padding: 8px 12px; text-align: center; min-width: 52px; }
.event-badge .month { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.event-badge .day   { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1; }
.event-body { padding: 18px; }
.event-type-tag { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: block; }
.event-body h3 { font-family: var(--font-head); font-size: 17px; color: var(--navy); margin-bottom: 8px; font-weight: 700; }
.event-body p  { font-size: 12px; color: var(--muted); line-height: 1.6; }
.event-meta { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

.mini-events { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mini-event { display: flex; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: all var(--tr); }
.mini-event:hover { border-color: var(--green); box-shadow: var(--sh); transform: translateX(3px); }
[dir="rtl"] .mini-event:hover { transform: translateX(-3px); }
.mini-date { background: var(--cream); border-radius: 7px; padding: 5px 8px; text-align: center; min-width: 44px; flex-shrink: 0; }
.mini-date .m { font-size: 8px; font-weight: 700; color: var(--green); text-transform: uppercase; }
.mini-date .d { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1; }
.mini-info h4 { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.mini-info p  { font-size: 10px; color: var(--muted); margin-top: 2px; }

.hours-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh); }
.hours-card-head { background: var(--navy); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; }
.hours-card-head h3 { font-size: 14px; font-weight: 700; color: #fff; }
.hours-body { padding: 14px; }
.hours-row { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 7px; font-size: 11px; margin-bottom: 2px; }
.hours-row.today { background: rgba(68,177,67,.08); }
.hours-row .day-name { color: var(--muted); font-weight: 500; }
.hours-row.today .day-name { color: var(--navy); font-weight: 700; }
.hours-row .hour-time { font-weight: 700; color: var(--navy); }
.hours-row.closed .hour-time { color: var(--muted); }
.contact-info-strip { padding: 13px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.contact-info-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.contact-info-item svg { width: 12px; height: 12px; fill: none; stroke: var(--blue); stroke-width: 2; flex-shrink: 0; }
.contact-info-item a { color: var(--blue); }

/* ============================================================
   18. ABOUT SECTION
   ============================================================ */
.about-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
[dir="rtl"] .about-strip { direction: rtl; }
.about-images { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 184px 184px; gap: 8px; height: 376px; }
.about-images .img-main { grid-column: 1; grid-row: 1 / 3; border-radius: var(--rl); overflow: hidden; }
.about-images .img-top  { grid-column: 2; grid-row: 1;    border-radius: var(--rl); overflow: hidden; }
.about-images .img-bot  { grid-column: 2; grid-row: 2;    border-radius: var(--rl); overflow: hidden; }
.about-images img { width: 100%; height: 100%; object-fit: cover; }
[dir="rtl"] .about-images { direction: rtl; }

.about-text .about-tag   { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.about-text .about-title { font-family: var(--font-head); font-size: clamp(22px,2.5vw,30px); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 14px; }
.about-text .about-body  { font-size: 13px; color: var(--muted); line-height: 1.85; margin-bottom: 22px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.about-stat  { background: var(--cream); border-radius: 10px; padding: 13px 14px; border-left: 3px solid var(--green); transition: all var(--tr); }
[dir="rtl"] .about-stat { border-left: none; border-right: 3px solid var(--green); }
.about-stat:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.about-stat .num { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1; }
.about-stat .lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   19. NEWS GRID — KEY FIX: proper card structure
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
  transition: all var(--tr);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shm); }
.news-card > a { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* Thumbnail — fixed height, no overflow distortion */
.news-thumbnail {
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--navy);
  position: relative;
}
.news-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.news-card:hover .news-thumbnail img { transform: scale(1.05); }
.news-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: var(--navy);
  color: rgba(255,255,255,.5);
}

/* Body */
.news-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.news-category { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green); margin-bottom: 7px; }
.news-title {
  font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.42;
  margin-bottom: 10px; flex: 1;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.news-date { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: auto; }
.news-date svg { width: 11px; height: 11px; fill: none; stroke: var(--muted); stroke-width: 2; flex-shrink: 0; }

/* ============================================================
   20. DIGITAL LITERACY STRIP
   ============================================================ */
.dl-strip { background: linear-gradient(90deg,var(--navy) 0%,var(--blue-d) 100%); padding: 40px 20px; position: relative; }
.dl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; max-width: var(--max-w); margin: 0 auto; }
.dl-item { text-align: center; padding: 22px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--rl); transition: all var(--tr); cursor: pointer; }
.dl-item:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.dl-icon { font-size: 28px; margin-bottom: 10px; display: block; line-height: 1; }
.dl-item h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.dl-item p  { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.55; }

/* ============================================================
   21. CTA BANNER
   ============================================================ */
.cta-section { background: linear-gradient(135deg,var(--navy-d) 0%,var(--blue-d) 55%,var(--navy) 100%); padding: 60px 20px; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(68,177,67,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(68,177,67,.04) 1px,transparent 1px); background-size: 46px 46px; }
.cta-section h2 { font-family: var(--font-head); font-size: clamp(22px,3.5vw,34px); color: #fff; margin-bottom: 10px; position: relative; }
.cta-section p  { font-size: 14px; color: rgba(255,255,255,.62); margin-bottom: 26px; max-width: 440px; margin-left: auto; margin-right: auto; position: relative; line-height: 1.65; }
.cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; }
.btn-primary { background: var(--green); color: #fff; border: none; border-radius: var(--rf); padding: 12px 26px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: all var(--tr); }
.btn-primary:hover { background: var(--green-d); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(68,177,67,.3); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--rf); padding: 12px 26px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: all var(--tr); }
.btn-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); color: #fff; }

/* ============================================================
   22. FOOTER
   ============================================================ */
.site-footer { background: var(--navy-d); padding: 52px 0 0; color: rgba(255,255,255,.6); }
.footer-grid { max-width: var(--max-w); margin: 0 auto; padding: 0 20px 44px; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 36px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-img { width: 38px; height: 38px; background: #fff; border-radius: 7px; padding: 3px; overflow: hidden; }
.footer-logo-img img { width: 100%; height: 100%; object-fit: contain; }
.footer-uni  { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 2px; display: block; }
.footer-name { font-family: var(--font-head); font-size: 16px; color: #fff; display: block; font-weight: 700; }
.footer-brand-text p { font-size: 14px; line-height: 1.75; margin-bottom: 14px; }
.footer-contacts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.footer-contact { display: flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255,255,255,.7); }
.footer-contact svg { width: 12px; height: 12px; fill: none; stroke: var(--green); stroke-width: 2; flex-shrink: 0; }
.footer-contact a { color: rgba(255,255,255,.7); transition: color var(--tr); }
.footer-contact a:hover { color: var(--green); }
.footer-socials { display: flex; gap: 7px; }
.social-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); transition: all var(--tr); text-decoration: none; }
.social-btn:hover { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); }
.social-btn svg { width: 13px; height: 13px; fill: currentColor; }
.footer-col h4 { font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 7px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.7); transition: all var(--tr); display: flex; align-items: center; gap: 5px; }
.footer-col ul li a::before { content: '›'; color: var(--green); font-weight: 700; }
[dir="rtl"] .footer-col ul li a::before { display: none; }
[dir="rtl"] .footer-col ul li a::after  { content: '‹'; color: var(--green); font-weight: 700; }
.footer-col ul li a:hover { color: #fff; padding-left: 3px; }
[dir="rtl"] .footer-col ul li a:hover { padding-left: 0; padding-right: 3px; }
.newsletter-form { display: flex; gap: 6px; margin-top: 10px; }
.newsletter-input { flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 9px 12px; color: #fff; font-size: 12px; font-family: var(--font-body); outline: none; transition: border-color var(--tr); }
.newsletter-input:focus { border-color: var(--green); }
.newsletter-input::placeholder { color: rgba(255,255,255,.28); }
.newsletter-btn { background: var(--green); border: none; border-radius: 7px; padding: 9px 14px; color: #fff; font-size: 12px; font-weight: 700; transition: all var(--tr); }
.newsletter-btn:hover { background: var(--green-d); }
.footer-lang-wrap { margin-top: 18px; }
.footer-lang-wrap p { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
.footer-bottom { max-width: var(--max-w); margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 10px; border-top: 0; }
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.5); transition: color var(--tr); }
.footer-legal a:hover { color: rgba(255,255,255,.7); }

/* ============================================================
   23. BACK TO TOP
   ============================================================ */
.back-to-top { position: fixed; bottom: 26px; right: 26px; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; border: none; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: all var(--tr); box-shadow: 0 4px 16px rgba(68,177,67,.4); z-index: 200; }
[dir="rtl"] .back-to-top { right: auto; left: 26px; }
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--green-d); transform: translateY(-2px); }
.back-to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; } .delay-4 { transition-delay: .4s; }

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero-campus-strip { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .campus-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
  .campus-gallery .gallery-item:first-child { grid-row: 1; }
}
@media (max-width: 960px) {
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .books-grid      { grid-template-columns: 1fr 1fr; }
  .databases-grid  { grid-template-columns: 1fr 1fr; }
  .news-grid       { grid-template-columns: 1fr 1fr; }
  .events-hours-grid { grid-template-columns: 1fr; }
  .about-strip     { grid-template-columns: 1fr; gap: 32px; }
  .about-images    { height: 260px; }
  .dl-grid         { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .btn-myaccount span { display: none; }
  .hamburger { display: flex; }
  .topbar-left .topbar-item:nth-child(3) { display: none; }
  .services-grid   { grid-template-columns: 1fr; }
  .databases-grid  { grid-template-columns: 1fr; }
  .news-grid       { grid-template-columns: 1fr; }
  .books-grid      { grid-template-columns: 1fr 1fr; }
  .footer-grid     { grid-template-columns: 1fr; gap: 24px; }
  .hero-stats      { flex-wrap: wrap; }
  .hero-stat       { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); padding-bottom: 12px; margin-bottom: 2px; }
  .section-wrap    { padding: 40px 16px; }
  .hero-content    { padding: 44px 16px; }
  .campus-gallery  { grid-template-columns: 1fr; grid-template-rows: auto; }
  .campus-gallery .gallery-item { height: 200px; grid-row: auto; }
  .cta-buttons     { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .books-grid      { grid-template-columns: 1fr 1fr; }
  .dl-grid         { grid-template-columns: 1fr 1fr; }
  .footer-bottom   { flex-direction: column; text-align: center; }
  .hero-title      { font-size: 26px; }
  .ai-strip-inner  { flex-wrap: nowrap; }
}

/* Print */
@media print {
  .site-topbar,.site-header,.search-overlay,.quick-access-bar,.a11y-toggle-btn,.a11y-panel,.back-to-top,.mobile-nav,.mobile-nav-overlay { display: none !important; }
  .section-wrap { padding: 20px 0; }
}

/* ============================================================
   v5 ADDITIONS — Room Booking, Live Chat, Dropdowns, Forms
   ============================================================ */

/* ── ENHANCED NAV DROPDOWNS ── */
.primary-nav { position: relative; }
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: .6; margin-left: 2px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--white); border-radius: var(--rl);
  box-shadow: var(--shl); border: 1px solid var(--border);
  min-width: 240px; padding: 8px; z-index: 600;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--tr); pointer-events: none;
}
.nav-has-dropdown:hover .nav-dropdown-menu,
.nav-has-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.nav-dropdown-menu a {
  display: block; font-size: 13px; color: var(--text); padding: 9px 14px;
  border-radius: var(--r); transition: all var(--tr); text-decoration: none;
  font-family: var(--font-body); font-weight: 400; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--cream); color: var(--navy); }
.nav-dropdown-menu .menu-section-label {
  font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase;
  letter-spacing: 1.5px; padding: 8px 14px 4px; pointer-events: none; cursor: default;
}
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 6px 0; }
[data-theme="dark"] .nav-dropdown-menu { background: #0d1f32; border-color: #1e3a55; }
[data-theme="dark"] .nav-dropdown-menu a { color: var(--text); }
[data-theme="dark"] .nav-dropdown-menu a:hover { background: #122030; }

/* ── ROOM BOOKING SYSTEM ── */
.room-booking-modal {
  position: fixed; inset: 0; background: rgba(0,18,48,.92);
  backdrop-filter: blur(10px); z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden; transition: all .3s;
}
.room-booking-modal.open { opacity: 1; visibility: visible; }
.booking-panel {
  background: var(--white); border-radius: var(--rl);
  max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shl);
}
.booking-panel-head {
  background: var(--navy); padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--rl) var(--rl) 0 0; position: sticky; top: 0; z-index: 1;
}
.booking-panel-head h3 { font-family: var(--font-head); font-size: 20px; color: #fff; font-weight: 700; }
.booking-close { background: rgba(255,255,255,.12); border: none; border-radius: 50%; width: 36px; height: 36px; color: #fff; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.booking-body { padding: 24px; }
.room-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.room-card {
  border: 2px solid var(--border); border-radius: var(--rl); padding: 16px;
  cursor: pointer; transition: all var(--tr); position: relative; overflow: hidden;
}
.room-card.selected { border-color: var(--green); background: rgba(68,177,67,.06); }
.room-card:hover { border-color: var(--green); }
.room-card.unavailable { opacity: .5; cursor: not-allowed; }
.room-card.unavailable::after { content: 'Booked'; position: absolute; top: 10px; right: 10px; background: #dc3545; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--rf); }
.room-icon { font-size: 28px; margin-bottom: 8px; }
.room-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.room-cap { font-size: 11px; color: var(--muted); margin-top: 3px; }
.room-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 5px; }
.room-status-dot.busy { background: #dc3545; }
.booking-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 10px 14px; font-size: 14px; font-family: var(--font-body);
  color: var(--text); background: var(--white); outline: none;
  transition: border-color var(--tr);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); }
.form-group textarea { resize: vertical; min-height: 80px; }
.btn-book {
  background: var(--green); color: #fff; border: none; border-radius: var(--rf);
  padding: 13px 32px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--tr); width: 100%; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-book:hover { background: var(--green-d); transform: translateY(-1px); }
.booking-success {
  text-align: center; padding: 32px;
  display: none;
}
.booking-success.show { display: block; }
.success-icon { font-size: 56px; margin-bottom: 16px; }
.booking-success h4 { font-family: var(--font-head); font-size: 22px; color: var(--navy); margin-bottom: 8px; }
.booking-success p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.booking-ref { background: var(--cream); border-radius: var(--r); padding: 12px 20px; margin: 16px 0; font-weight: 700; color: var(--navy); font-size: 15px; display: inline-block; }

/* ── LIVE CHAT WIDGET ── */
.live-chat-widget { position: fixed; bottom: 32px; right: 28px; z-index: 1200; }
[dir="rtl"] .live-chat-widget { right: auto; left: 28px; }
.chat-toggle-btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,32,73,.35); transition: all var(--tr);
  position: relative;
}
.chat-toggle-btn:hover { background: var(--blue); transform: scale(1.08); }
.chat-toggle-btn svg { width: 24px; height: 24px; fill: #fff; }
.chat-notif { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: 2px solid var(--white); font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; }
.chat-panel {
  position: absolute; bottom: 68px; right: 0; width: 360px;
  background: var(--white); border-radius: var(--rl);
  box-shadow: 0 -4px 40px rgba(0,32,73,.22), var(--shl);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: scale(.9) translateY(10px); opacity: 0; visibility: hidden;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  max-height: 520px;
  z-index: 1200;
}
[dir="rtl"] .chat-panel { right: auto; left: 0; }
.chat-panel.open { transform: scale(1) translateY(0); opacity: 1; visibility: visible; }
.chat-panel-head { background: var(--navy); padding: 14px 16px; border-radius: var(--rl) var(--rl) 0 0; display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.chat-panel-title { font-size: 14px; font-weight: 700; color: #fff; }
.chat-panel-sub { font-size: 11px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 5px; }
.chat-online { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.chat-close { background: none; border: none; color: rgba(255,255,255,.6); font-size: 17px; cursor: pointer; margin-left: auto; padding: 4px; }
.chat-close:hover { color: #fff; }
.chat-messages { flex: 1; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 220px; max-height: 300px; scroll-behavior: smooth; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.chat-msg.bot .chat-msg-avatar { background: rgba(68,177,67,.15); }
.chat-msg.user .chat-msg-avatar { background: rgba(21,104,180,.15); }
.chat-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.6; font-family: var(--font-body);
}
.chat-msg.bot .chat-bubble { background: var(--cream); color: var(--text); border-radius: 4px 14px 14px 14px; }
.chat-msg.bot .chat-bubble a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.chat-msg.bot .chat-bubble a:hover { color: var(--navy); }
.chat-msg.bot .chat-bubble strong { color: var(--navy); }
.chat-msg.user .chat-bubble { background: var(--blue); color: #fff; border-radius: 14px 4px 14px 14px; }
.chat-msg-time { font-size: 10px; color: var(--muted); margin-top: 3px; display: block; }
.chat-input-area { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat-input-area input {
  flex: 1; border: 1.5px solid var(--border); border-radius: var(--rf);
  padding: 9px 14px; font-size: 13px; font-family: var(--font-body);
  outline: none; transition: border-color var(--tr); color: var(--text); background: var(--white);
}
.chat-input-area input:focus { border-color: var(--blue); }
.chat-send-btn {
  background: var(--blue); border: none; border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--tr); flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--navy); }
.chat-send-btn svg { width: 16px; height: 16px; fill: #fff; }
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.chat-qr {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--rf);
  padding: 5px 12px; font-size: 11px; color: var(--navy); cursor: pointer;
  transition: all var(--tr); font-family: var(--font-body);
}
.chat-qr:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.chat-typing { display: flex; gap: 4px; align-items: center; padding: 9px 13px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)} }

/* ── CONTACT FORM (Book a Consultation) ── */
.consultation-form { background: var(--cream); border-radius: var(--rl); padding: 32px; border: 1px solid var(--border); }
.consultation-form h3 { font-family: var(--font-head); font-size: 22px; color: var(--navy); margin-bottom: 6px; font-weight: 700; }
.consultation-form .subtitle { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit {
  background: var(--green); color: #fff; border: none; border-radius: var(--rf);
  padding: 13px 32px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--tr); display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.form-submit:hover { background: var(--green-d); transform: translateY(-1px); }
.form-note { font-size: 11px; color: var(--muted); margin-top: 12px; }

/* ── HERO IMAGE SLIDER ── */
.hero-photo-strip {
  position: absolute; right: 0; top: 0; bottom: 0; width: 32%;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; z-index: 2;
}
[dir="rtl"] .hero-photo-strip { right: auto; left: 0; }
.hero-photo-slide { flex: 1; position: relative; overflow: hidden; }
.hero-photo-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.hero-photo-slide:hover img { transform: scale(1.06); }
.hero-photo-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,18,48,.4), transparent);
}
[dir="rtl"] .hero-photo-slide::after { background: linear-gradient(-90deg, rgba(0,18,48,.4), transparent); }
.photo-caption { position: absolute; bottom: 8px; left: 10px; font-size: 10px; color: rgba(255,255,255,.85); font-weight: 600; z-index: 1; }
[dir="rtl"] .photo-caption { left: auto; right: 10px; }

/* ── QUICK ACCESS DROPDOWN TRIGGER ── */
.qa-book-trigger {
  background: var(--green); animation: pulse-green 3s ease infinite;
}
@keyframes pulse-green { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 4px rgba(68,177,67,.25)} }

/* ── DATABASE/MYLOFT BANNER ── */
.myloft-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy-l) 100%);
  padding: 32px 20px; text-align: center; position: relative; overflow: hidden;
}
.myloft-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.04)'%3E%3Cpath d='M20 20.5V18H0v5h5v5H0v5h20v-9.5zm-2 9.5H4v-5h14v5zm0-7H4v-3h14v3zm2-13.5V0H0v5h5v5H0v5h20v-9.5z'/%3E%3C/g%3E%3C/svg%3E"); }
.myloft-banner h2 { font-family: var(--font-head); font-size: 26px; color: #fff; margin-bottom: 8px; position: relative; }
.myloft-banner p { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 20px; max-width: 520px; margin-left: auto; margin-right: auto; position: relative; }
.myloft-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue); border-radius: var(--rf);
  padding: 12px 28px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all var(--tr); position: relative;
}
.myloft-btn:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }

/* ── NOTIFICATION TOAST ── */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
[dir="rtl"] .toast-container { right: auto; left: 20px; }
.toast {
  background: var(--white); border-radius: var(--rl); padding: 14px 18px;
  box-shadow: var(--shl); border-left: 4px solid var(--green);
  font-size: 13px; color: var(--text); max-width: 320px;
  display: flex; align-items: flex-start; gap: 10px;
  animation: slideInRight .3s ease;
}
[dir="rtl"] .toast { border-left: none; border-right: 4px solid var(--green); animation: slideInLeft .3s ease; }
@keyframes slideInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.toast.error { border-color: #dc3545; }
.toast.warning { border-color: #ffc107; }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-text h4 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.toast-text p { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ── LIBRARY PHOTO GALLERY on homepage ── */
.photo-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 6px; border-radius: var(--rl); overflow: hidden; max-width: 1200px; margin: 0 auto; }
.photo-gallery .pg-main { grid-row: 1 / 3; }
.pg-item { overflow: hidden; position: relative; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pg-item:hover img { transform: scale(1.06); }
.pg-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,18,48,.5), transparent); opacity: 0; transition: opacity var(--tr); }
.pg-item:hover .pg-overlay { opacity: 1; }
.pg-cap { position: absolute; bottom: 12px; left: 14px; font-size: 12px; color: #fff; font-weight: 600; opacity: 0; transition: opacity var(--tr); }
.pg-item:hover .pg-cap { opacity: 1; }

/* ── STATS COUNTER SECTION ── */
.stats-section { background: var(--navy); padding: 48px 20px; }
.stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.stat-card { text-align: center; padding: 20px; border-right: 1px solid rgba(255,255,255,.08); }
.stat-card:last-child { border: none; }
.stat-card .num { font-family: var(--font-head); font-size: 36px; font-weight: 700; color: var(--green); line-height: 1; display: block; }
.stat-card .lbl { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; display: block; }

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width: 960px) {
  .stats-inner { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stat-card:nth-child(3) { border-right: none; }
  .booking-form-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .room-cards { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px; }
  .photo-gallery .pg-main { grid-row: 1 / 2; grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .live-chat-widget { bottom: 24px; right: 16px; }
  [dir="rtl"] .live-chat-widget { right: auto; left: 16px; }
  .chat-panel { width: 300px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-card:nth-child(2) { border-right: none; }
  .hero-photo-strip { display: none; }
}
@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 32px); right: -12px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .booking-panel { max-height: 95vh; border-radius: var(--r); }
  .room-booking-modal { padding: 10px; }
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE — v5.8
   Tested breakpoints: 1200, 960, 768, 480, 360px
   ============================================================ */

/* ── GLOBAL MOBILE RESETS ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* All inline grids in page templates become single column on mobile */
@media (max-width: 768px) {
  /* Force ALL grid layouts to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1.8fr 1fr"],
  [style*="grid-template-columns: 1.8fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Container padding */
  .container { padding: 0 16px; }
  .section-wrap { padding: 32px 16px; }

  /* Hero section */
  .site-hero { min-height: auto; }
  .hero-content { padding: 36px 16px 28px; }
  .hero-title { font-size: clamp(24px,6vw,36px); }
  .hero-subtitle { font-size: 13px; }
  .hero-search { padding: 14px; }
  .search-tab-row { gap: 4px; }
  .stab { font-size: 11px; padding: 5px 10px; }
  .hero-quick-links { gap: 6px; }
  .hero-qlink { font-size: 11px; padding: 5px 10px; }
  .hero-stats { flex-wrap: wrap; gap: 0; }
  .hero-stat { flex: 1 1 45%; border-right: none !important; padding: 10px 8px; }
  .stat-number { font-size: 22px; }
  .hero-photo-strip { display: none; }

  /* Header */
  .site-header { padding: 0 16px; }
  .site-topbar { padding: 0 16px; }
  .topbar-left .topbar-item:nth-child(2),
  .topbar-left .topbar-item:nth-child(3) { display: none; }
  .logo-text .name { font-size: 13px; }
  .logo-text .tagline { display: none; }

  /* Quick access bar */
  .quick-access-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .qa-inner { min-width: max-content; padding: 0 16px; }
  .qa-label { font-size: 10px; }

  /* Services grid */
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card { padding: 20px; }

  /* About strip */
  .about-strip { grid-template-columns: 1fr !important; gap: 24px; }
  .about-images { height: 220px; }
  .about-stat { padding: 10px 8px; }
  .about-stats { grid-template-columns: 1fr 1fr; }

  /* News grid */
  .news-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* MyLOFT banner */
  .myloft-banner { padding: 32px 16px; }
  .myloft-banner h2 { font-size: 18px; }

  /* Mini events */
  .mini-events { gap: 10px; }
  .mini-event { flex-direction: column; gap: 8px; }
  .mini-date { width: 100%; display: flex; gap: 8px; align-items: center; }
  .mini-date .m, .mini-date .d { display: inline; font-size: 13px; }

  /* AI strip */
  .ai-strip-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; }
  .ai-card { min-width: 170px; }

  /* Hours card */
  .hours-card { margin-top: 0; }
  .hours-row { font-size: 13px; }

  /* Forms */
  .form-row { grid-template-columns: 1fr !important; gap: 12px; }
  .consultation-form { padding: 20px 16px; }
  .form-submit { width: 100%; justify-content: center; }

  /* Room booking modal */
  .room-booking-modal { padding: 8px; }
  .booking-panel { max-height: 95vh; border-radius: 12px; overflow-y: auto; }
  .room-cards { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* Chat */
  .live-chat-widget { bottom: 20px; right: 14px; z-index: 1200; }
  .chat-panel { width: calc(100vw - 28px); right: -8px; max-height: 75vh; }
  .chat-messages { max-height: 220px; }

  /* Back to top */
  .back-to-top { bottom: 80px; right: 16px; }

  /* CTA section */
  .cta-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-buttons a { justify-content: center; text-align: center; }

  /* Accessibility panel */
  .a11y-panel { width: min(300px, 78vw); max-height: 100dvh; overflow-y: auto; }

  /* Section headers */
  .section-title { font-size: clamp(20px,5vw,30px); }

  /* Page template grids — about page */
  .about-images-grid { grid-template-columns: 1fr !important; height: auto !important; }
  .about-images-grid img { height: 200px; }
}

/* ── TABLET (768–960px) ── */
@media (min-width: 769px) and (max-width: 960px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .about-strip { grid-template-columns: 1fr; }
  .hero-photo-strip { display: none; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── SMALL PHONES (max 480px) ── */
@media (max-width: 480px) {
  .hero-title { font-size: 22px; line-height: 1.2; }
  .hero-eyebrow { font-size: 9px; }
  .hero-qlink { font-size: 10px; padding: 4px 8px; }
  .hero-stats { gap: 0; }
  .hero-stat { flex: 1 1 50%; font-size: 12px; }
  .stat-number { font-size: 20px; }

  .logo-text .name { font-size: 11px; }
  .site-logo svg, .site-logo img { width: 32px; height: 32px; }

  /* Force all 2-col grids to 1 col on tiny phones */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .room-cards,
  .about-stats { grid-template-columns: 1fr !important; }

  .section-wrap { padding: 24px 14px; }
  .container { padding: 0 14px; }
  .section-title { font-size: 20px; }
  .section-tag { font-size: 9px; }

  .btn-primary, .btn-outline { padding: 11px 18px; font-size: 12px; }

  .chat-panel { width: calc(100vw - 20px); right: -6px; }
  .chat-toggle-btn { width: 50px; height: 50px; }

  .booking-panel { border-radius: 10px; }
  .room-card { padding: 12px; }
  .room-icon { font-size: 24px; }

  .mini-event { padding: 10px 12px; }
  .hours-row { padding: 8px 0; font-size: 12px; }

  .qa-link { min-width: 80px; padding: 10px 6px; }
  .qa-icon { width: 28px; height: 28px; }
  .qa-label { font-size: 9px; }

  .footer-grid { gap: 16px; }
  .footer-uni, .footer-name { font-size: smaller; }

  .a11y-toggle-btn { bottom: 12px; left: 12px; }
  .back-to-top { bottom: 70px; right: 12px; width: 38px; height: 38px; }
}

/* ── VERY SMALL (max 360px) ── */
@media (max-width: 360px) {
  .hero-title { font-size: 20px; }
  .hero-search { padding: 10px; }
  .stab { display: none; }
  .stab:first-child { display: block; }
  .section-title { font-size: 18px; }
  .stat-number { font-size: 18px; }
  .btn-primary { padding: 10px 14px; font-size: 12px; }
  .chat-panel { width: calc(100vw - 10px); right: 0; }
}

/* ── PAGE TEMPLATE SPECIFIC MOBILE FIXES ── */
@media (max-width: 768px) {

  /* About page */
  .about-page-hero-grid { grid-template-columns: 1fr !important; }
  .about-page-hero-grid > div:last-child { display: none; }
  .about-stats-bar { grid-template-columns: repeat(3,1fr) !important; }
  .objectives-grid { grid-template-columns: 1fr !important; }
  .gallery-6col { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  .gallery-6col > :first-child { grid-row: auto !important; }

  /* Services page */
  .services-2col { grid-template-columns: 1fr !important; }
  .loan-types-grid { grid-template-columns: 1fr !important; }
  .user-cats-grid { grid-template-columns: 1fr !important; }

  /* Research page */
  .research-tools-grid { grid-template-columns: 1fr !important; }
  .databases-az { grid-template-columns: 1fr 1fr !important; }

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr !important; }
  .staff-form-grid { grid-template-columns: 1fr !important; }

  /* Borrowing page */
  .loan-cards { grid-template-columns: 1fr !important; }
  .borrow-split { grid-template-columns: 1fr !important; }

  /* IL/DL page */
  .il-overview-grid { grid-template-columns: 1fr !important; }
  .semester-grid { grid-template-columns: 1fr !important; }
  .survey-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* Research guides page */
  .guides-grid { grid-template-columns: 1fr 1fr !important; }
  .subjects-grid { grid-template-columns: 1fr !important; }

  /* DrillBit page */
  .drillbit-split { grid-template-columns: 1fr !important; }

  /* Ask a librarian */
  .librarian-split { grid-template-columns: 1fr !important; }
  .channels-grid { grid-template-columns: 1fr !important; }

  /* Library policy */
  .policy-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Collapse 2-col grids to 1 on small phones for page templates */
  .about-stats-bar { grid-template-columns: 1fr 1fr !important; }
  .databases-az { grid-template-columns: 1fr !important; }
  .guides-grid { grid-template-columns: 1fr !important; }
  .survey-stats-grid { grid-template-columns: 1fr !important; }
}

/* ── PREVENT HORIZONTAL SCROLL ── */
body { overflow-x: hidden; max-width: 100vw; }
.site-header { overflow: visible; }
.section-wrap, .container, .footer-grid { max-width: 100%; }
img { max-width: 100%; height: auto; }

/* ── TOUCH IMPROVEMENTS ── */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices — larger tap targets */
  .qa-link { min-height: 60px; }
  .nav-dropdown-menu a { padding: 12px 14px; min-height: 44px; }
  .mobile-nav-links a { min-height: 48px; display: flex; align-items: center; }
  .btn-primary, .btn-outline { min-height: 44px; }
  .chat-send-btn { width: 44px; height: 44px; }
  .chat-qr { padding: 8px 14px; min-height: 36px; }
  .back-to-top { width: 44px; height: 44px; }
  .hdr-icon-btn { width: 44px; height: 44px; }
  .hamburger { width: 44px; height: 44px; }
  .lang-btn { min-height: 36px; }
  input, select, textarea { font-size: 16px; } /* prevent iOS zoom */
}

/* ── SAFE AREA (iPhone notch/home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-header { padding-top: env(safe-area-inset-top); }
  .mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
  .live-chat-widget { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ── ACCESSIBILITY PANEL — MOBILE FIX ── */
/* Dim overlay behind the panel on small screens */
.a11y-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 8998;
}
.a11y-overlay.open { display: block; }

@media (max-width: 600px) {
  /* Panel: max 80% of screen width, never full-width */
  .a11y-panel {
    width: min(290px, 80vw) !important;
    right: -300px;
    font-size: 13px;
  }
  .a11y-panel.open { right: 0; }

  /* Tighter internal padding on small screens */
  .a11y-group { padding: 10px 14px; }
  .a11y-group-label { font-size: 9px; }
  .a11y-btn { padding: 6px 10px; font-size: 12px; }
  .a11y-panel-head { padding: 12px 14px; }
  .a11y-panel-head h3 { font-size: 13px; }

  /* Toggle button — keep visible, not too large */
  .a11y-toggle-btn {
    width: 38px; height: 38px;
  }
  .a11y-toggle-btn svg { width: 18px; height: 18px; }
}

@media (max-width: 360px) {
  .a11y-panel {
    width: 82vw !important;
    right: -85vw;
  }
  .a11y-panel.open { right: 0; }
}

/* ============================================================
   GCU-STYLE TYPOGRAPHY UPGRADE — v5.9.3
   Source Sans 3 body (17px) · Source Serif 4 headings
   Generous sizes, strong weight, clear hierarchy
   ============================================================ */

/* Section headings — larger and stronger */
.section-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
}
.section-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 600px;
  margin: 10px auto 0;
}

/* Body text throughout — GCU standard */
p, li, td, th, label, input, textarea, select, .body-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}

/* Service cards */
.service-card h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.service-card p {
  font-size: 15px;
  line-height: 1.65;
}

/* News cards */
.news-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.news-date { font-size: 12px; }

/* Hero */
.hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; }
.hero-subtitle { font-size: 16px; line-height: 1.7; }
.stat-number { font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); font-weight: 700; }
.stat-label { font-size: 12px; letter-spacing: 0.8px; }

/* Buttons — slightly larger */
.btn-primary, .btn-outline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Footer */
.footer-section h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.footer-section a, .footer-section p { font-size: 14px; line-height: 1.8; }

/* Hours card */
.hours-row { font-size: 14px; }
.hours-card-head h3 { font-family: var(--font-head); font-size: 17px; }

/* Mini events */
.mini-event h4 { font-family: var(--font-head); font-size: 15px; font-weight: 700; }
.mini-event p { font-size: 13px; }

/* About strip */
.about-title { font-family: var(--font-head); font-size: clamp(22px,3vw,34px); font-weight: 700; line-height: 1.2; }
.about-body { font-size: 15px; line-height: 1.8; }
.about-stat .num { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.about-stat .lbl { font-size: 12px; }

/* Topbar */
.topbar-item a { font-size: 13px; font-weight: 500; }
.logo-text .name { font-size: 15px; font-weight: 700; }

/* Mobile nav — GCU style large items */
.mobile-nav-links a {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger shows on tablets and phones (≤1024px) */
@media (max-width: 1024px) {
  .hamburger { display: flex !important; }
  .primary-nav { display: none !important; }
}
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  .primary-nav { display: flex !important; }
}

/* Font size adjustments for small screens */
@media (max-width: 480px) {
  body { font-size: 15px; }
  p, li { font-size: 15px; }
  .section-title { font-size: 21px; }
  .hero-subtitle { font-size: 14px; }
  .mobile-nav-links a { font-size: 16px; }
}

/* ============================================================
   HEADER MOBILE FIXES — v5.9.4
   Hamburger always visible. Logo adapts to screen width.
   ============================================================ */

/* Make sure hamburger is always reachable */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 12px;
    gap: 6px;
    height: 60px;
  }
  /* Logo shrinks — tagline hidden, name truncates */
  .logo-text .tag { display: none; }
  .logo-text .name {
    font-size: 14px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo-img-wrap { width: 40px; height: 40px; }
  /* Icon buttons — slightly smaller */
  .hdr-icon-btn { width: 34px; height: 34px; }
  .hdr-icon-btn svg { width: 14px; height: 14px; }
  /* Hamburger — always visible, solid appearance */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .header-inner { padding: 0 10px; gap: 4px; height: 58px; }
  /* On very small screens hide the tagline AND "uni" label */
  .logo-text .uni  { display: none; }
  .logo-text .name { font-size: 13px; max-width: 160px; }
  .logo-img-wrap   { width: 36px; height: 36px; }
  /* Hide the two icon buttons on tiny phones — keep only hamburger */
  .hdr-icon-btn:not(.btn-search-toggle) { display: none; }
  .btn-myaccount { display: none; }
  /* Hamburger prominent */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    border-radius: 8px !important;
  }
  .hamburger .bar { width: 24px; height: 2.5px; }
}

@media (max-width: 360px) {
  .logo-text { display: none; } /* Only show logo icon on smallest phones */
  .header-inner { padding: 0 8px; }
  .hamburger { width: 44px !important; height: 44px !important; }
}

/* ── FOOTER FONTS — LARGER ACROSS ALL SCREENS ── */
.footer-col ul li a,
.footer-brand-text p,
.footer-contact,
.footer-contact a {
  font-size: 14px !important;
  line-height: 1.75;
}
.footer-col h4 {
  font-size: 13px !important;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.footer-bottom,
.footer-legal a {
  font-size: 13px !important;
  color: rgba(255,255,255,.6) !important;
}
.footer-name { font-size: 16px !important; }

@media (max-width: 480px) {
  .footer-grid { gap: 20px; }
  .footer-col h4 { font-size: 13px !important; }
  .footer-col ul li a { font-size: 14px !important; }
  .footer-contact { font-size: 14px !important; }
  .footer-bottom { font-size: 12px !important; flex-direction: column; text-align: center; }
}

/* ============================================================
   GLOBAL FONT SIZE FLOOR — v5.9.4
   Ensures no text is ever too small anywhere on any page.
   Applied after all other rules to catch inline overrides.
   ============================================================ */

/* Page template content areas — minimum readable sizes */
.section-wrap p,
.section-wrap li,
.section-wrap span:not(.section-tag):not(.pulse):not(.bar),
.section-wrap div:not([style*="font-size:2"]):not([style*="font-size:3"]):not([style*="font-size:4"]) {
  font-size: max(15px, 1em);
  line-height: 1.75;
}

/* All headings — generous sizes */
.section-wrap h2 { font-size: clamp(22px, 3.5vw, 36px); font-weight: 700; line-height: 1.2; }
.section-wrap h3 { font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; line-height: 1.3; }
.section-wrap h4 { font-size: clamp(15px, 2vw, 18px); font-weight: 700; line-height: 1.4; }

/* Tables inside pages */
.section-wrap table td,
.section-wrap table th {
  font-size: 15px;
  line-height: 1.6;
  padding: 10px 12px;
}

/* Form elements */
input, select, textarea, label {
  font-size: 15px !important;
  line-height: 1.5;
}
.form-group label { font-size: 14px !important; font-weight: 600; }

/* Buttons — readable */
.btn-primary, .btn-outline, .form-submit,
button.btn-primary, a.btn-primary {
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4;
}

/* Section tags (eyebrow labels) — can stay small */
.section-tag, .hero-eyebrow, span[style*="text-transform:uppercase"][style*="letter-spacing"] {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Cards */
.service-card p, .news-card p, .db-card p { font-size: 15px !important; }
.service-card h3 { font-size: 18px !important; }
.hours-row { font-size: 15px !important; }

/* Chat panel */
.chat-bubble { font-size: 14px !important; line-height: 1.6; }
.chat-input { font-size: 15px !important; }

/* Contact strips, topbar */
.topbar-item a, .contact-info-item a { font-size: 13px; }

/* Mobile — ensure nothing shrinks below 14px */
@media (max-width: 768px) {
  .section-wrap p,
  .section-wrap li { font-size: 15px !important; line-height: 1.75; }
  .section-wrap h3 { font-size: 18px !important; }
  .section-wrap h4 { font-size: 16px !important; }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom */
}

/* ============================================================
   CHAT BUTTON — CLEAR OF BROWSER UI & FOOTER
   Raised higher on mobile so browser nav bar never covers it
   ============================================================ */
@media (max-width: 768px) {
  /* Move chat bubble up so it clears the browser bottom bar */
  .live-chat-widget {
    bottom: 80px !important;
    right: 16px !important;
    z-index: 1300 !important;
  }
  /* Move back-to-top button away from chat */
  .back-to-top {
    bottom: 140px !important;
    right: 16px !important;
    z-index: 1250 !important;
  }
}

@media (max-width: 480px) {
  .live-chat-widget {
    bottom: 90px !important;
    right: 12px !important;
  }
  .back-to-top {
    bottom: 150px !important;
    right: 12px !important;
  }
}

/* Safe area support — iPhone home bar */
@supports (bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .live-chat-widget {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
    .back-to-top {
      bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================================
   DESIGN STANDARDISATION — v5.9.8
   No rounded cards · Restrained icons · Standard hero size
   Applied globally to catch CSS class-based rounding
   ============================================================ */

/* Remove rounded corners from all cards and panels */
.service-card,
.news-card,
.db-card,
.book-card,
.hours-card,
.event-featured,
.consultation-form,
.booking-panel,
.room-card,
.chat-panel,
.a11y-panel,
.mini-event,
.ai-card,
.myloft-banner,
.section-wrap .reveal > div,
[style*="border-radius:var(--rl)"],
[style*="border-radius:var(--r)"] {
  border-radius: 0 !important;
}

/* Specific named components */
.hours-card       { border-radius: 0; }
.hours-card-head  { border-radius: 0; }
.open-pill        { border-radius: 4px !important; } /* keep pill shape small */
.lang-btn         { border-radius: 4px !important; }
.btn-primary      { border-radius: 0 !important; }
.btn-outline      { border-radius: 0 !important; }
.btn-myaccount    { border-radius: 0 !important; }
.form-submit      { border-radius: 0 !important; }
.hdr-icon-btn     { border-radius: 0 !important; }
.hamburger        { border-radius: 4px !important; }
.back-to-top      { border-radius: 0 !important; }
.chat-toggle-btn  { border-radius: 0 !important; }
.chat-input-row input  { border-radius: 0 !important; }
.hero-search-input     { border-radius: 0 !important; }
.hero-search-btn       { border-radius: 0 !important; }
.hero-qlink            { border-radius: 0 !important; }
.search-tab-row .stab  { border-radius: 0 !important; }
.a11y-btn              { border-radius: 0 !important; }
.a11y-reset            { border-radius: 0 !important; }
.room-card             { border-radius: 0 !important; }
.booking-panel         { border-radius: 0 !important; }

/* Hero sections — consistent, not oversized */
.site-hero { min-height: auto; }
.hero-content { padding: 48px 20px 36px; }

/* Section wrap padding — tighter */
.section-wrap { padding: 48px 20px; }

/* All inputs — sharp */
input, select, textarea, button { border-radius: 0 !important; }
/* Exception — small pill badges only */
.open-pill, .lang-btn, .hamburger,
.section-tag, .news-category, .ai-new {
  border-radius: 3px !important;
}

/* ============================================================
   GLOBAL FONT SIZE INCREASE — v6.0
   All text enlarged. No icons. Clean professional typography.
   ============================================================ */

/* Base size increase */
:root {
  --fs: 18px;
}
body {
  font-size: 18px;
  line-height: 1.8;
}

/* All body text */
p, li, td, th, label, span, div, a {
  font-size: inherit;
}

/* Specific text elements */
p    { font-size: 18px; line-height: 1.8; }
li   { font-size: 18px; line-height: 1.8; }

/* Headings */
h1   { font-size: clamp(28px, 5vw, 48px); font-weight: 700; line-height: 1.15; }
h2   { font-size: clamp(24px, 4vw, 36px); font-weight: 700; line-height: 1.2;  }
h3   { font-size: clamp(20px, 3vw, 26px); font-weight: 700; line-height: 1.3;  }
h4   { font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; line-height: 1.4; }

/* Navigation */
.primary-nav a          { font-size: 15px; font-weight: 600; }
.nav-dropdown-menu a    { font-size: 15px; line-height: 1.7; padding: 10px 18px; }
.mobile-nav-links a     { font-size: 18px; font-weight: 600; }
.menu-section-label     { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }

/* Topbar */
.topbar-item a          { font-size: 14px; }
.open-pill              { font-size: 12px; }

/* Logo */
.logo-text .uni         { font-size: 10px; }
.logo-text .name        { font-size: 17px; font-weight: 700; max-width: none; overflow: visible; text-overflow: unset; }
.logo-text .tag         { font-size: 9px; }

/* Hero */
.hero-title             { font-size: clamp(28px, 6vw, 56px) !important; }
.hero-subtitle          { font-size: 18px !important; line-height: 1.75; }
.hero-eyebrow           { font-size: 12px; }
.stat-number            { font-size: clamp(26px, 4vw, 40px); }
.stat-label             { font-size: 13px; }
.hero-qlink             { font-size: 14px; }
.stab                   { font-size: 14px; }

/* Section tags & labels */
.section-tag            { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.section-title          { font-size: clamp(24px, 4vw, 36px); font-weight: 700; }
.section-desc           { font-size: 18px; line-height: 1.7; }

/* Cards */
.service-card h3        { font-size: 20px; font-weight: 700; }
.service-card p         { font-size: 17px; }
.news-title             { font-size: 19px; font-weight: 700; }
.news-date              { font-size: 14px; }
.news-category          { font-size: 12px; }

/* Hours */
.hours-card-head h3     { font-size: 18px; font-weight: 700; }
.hours-row              { font-size: 17px; }
.hours-row .day-name    { font-size: 17px; }
.hours-row .hour-time   { font-size: 17px; font-weight: 600; }
.contact-info-item a    { font-size: 15px; }

/* About strip */
.about-title            { font-size: clamp(24px, 4vw, 36px); font-weight: 700; }
.about-body             { font-size: 18px; line-height: 1.8; }
.about-stat .num        { font-size: 26px; font-weight: 700; }
.about-stat .lbl        { font-size: 14px; }

/* Mini events */
.mini-event h4          { font-size: 17px; font-weight: 700; }
.mini-event p           { font-size: 15px; }
.mini-date .m           { font-size: 12px; }
.mini-date .d           { font-size: 22px; font-weight: 700; }

/* Buttons */
.btn-primary, .btn-outline, .form-submit { font-size: 16px; font-weight: 700; padding: 13px 26px; }

/* Forms */
input, select, textarea { font-size: 16px !important; line-height: 1.5; }
.form-group label       { font-size: 16px !important; font-weight: 600; }
.consultation-form h3   { font-size: 22px; font-weight: 700; }
.consultation-form p    { font-size: 17px; }

/* Chat */
.chat-panel-title       { font-size: 16px; font-weight: 700; }
.chat-bubble            { font-size: 15px !important; line-height: 1.7; }
.chat-msg-time          { font-size: 12px; }
.chat-input             { font-size: 16px !important; }
.chat-qr                { font-size: 13px; }

/* Quick access bar */
.qa-label               { font-size: 12px; font-weight: 600; }

/* AI strip cards */
.ai-card h4             { font-size: 16px; font-weight: 700; }
.ai-card p              { font-size: 14px; }

/* ── FOOTER — ALL FONTS LARGER ── */
.footer-brand-text p          { font-size: 16px !important; line-height: 1.8; }
.footer-contact               { font-size: 16px !important; }
.footer-contact a             { font-size: 16px !important; }
.footer-col h4                { font-size: 14px !important; letter-spacing: 1px; }
.footer-col ul li a           { font-size: 16px !important; line-height: 2; }
.footer-lang-wrap p           { font-size: 13px !important; }
.footer-bottom                { font-size: 14px !important; color: rgba(255,255,255,.65) !important; }
.footer-legal a               { font-size: 14px !important; color: rgba(255,255,255,.65) !important; }
.footer-uni                   { font-size: 11px !important; }
.footer-name                  { font-size: 17px !important; font-weight: 700; }

/* Newsletter */
.footer-newsletter input      { font-size: 16px !important; }
.footer-newsletter button     { font-size: 15px !important; font-weight: 700; padding: 12px 20px; }

/* Accessibility panel */
.a11y-group-label  { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.a11y-btn          { font-size: 14px; font-weight: 500; }
.a11y-slider label { font-size: 14px; }

/* Mobile — maintain readable sizes */
@media (max-width: 768px) {
  body   { font-size: 17px; }
  p, li  { font-size: 17px !important; }
  h2     { font-size: 24px !important; }
  h3     { font-size: 20px !important; }
  h4     { font-size: 18px !important; }
  .footer-col ul li a { font-size: 16px !important; }
  .footer-contact     { font-size: 15px !important; }
  .footer-bottom      { font-size: 13px !important; }
  .hero-subtitle      { font-size: 16px !important; }
  .section-desc       { font-size: 16px !important; }
  .stat-number        { font-size: 26px; }
  .btn-primary, .btn-outline { font-size: 15px; padding: 12px 20px; }
}

@media (max-width: 480px) {
  body   { font-size: 16px; }
  p, li  { font-size: 16px !important; }
  h2     { font-size: 22px !important; }
  h3     { font-size: 19px !important; }
  .footer-col ul li a { font-size: 15px !important; }
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   HAMBURGER BARS — PROTECTED RULES
   These must never be overridden by global font or spacing rules.
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger .bar,
.hamburger span.bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transition: transform .25s ease, opacity .25s ease;
  font-size: 0 !important;     /* prevent any text/font rules affecting height */
  line-height: 0 !important;
  flex-shrink: 0;
}
/* X animation when menu is open */
.hamburger.is-open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
.hamburger.is-open .bar:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.hamburger.is-open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }

/* Show on tablet and phone */
@media (max-width: 1024px) {
  .hamburger { display: flex !important; }
  .primary-nav { display: none !important; }
}
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  .primary-nav { display: flex !important; }
}

/* ── LOGO NAME — FULL ON LARGE SCREENS, TRUNCATE ONLY ON SMALL ── */

/* Desktop / laptop — show full name */
@media (min-width: 1025px) {
  .logo-text .name {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap;
    font-size: 18px !important;
  }
  .logo-text .uni { font-size: 10px; }
  .logo-text .tag { font-size: 9px; display: block; }
  .site-logo { flex-shrink: 0; } /* never shrink on large screens */
}

/* Tablet (769–1024px) — slightly smaller, still mostly visible */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-text .name {
    max-width: 320px !important;
    font-size: 15px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Phone (≤768px) — truncate to give hamburger room */
@media (max-width: 768px) {
  .logo-text .name {
    max-width: 200px !important;
    font-size: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  .logo-text .name { max-width: 150px !important; font-size: 13px !important; }
  .logo-text .tag  { display: none; }
}

@media (max-width: 360px) {
  .logo-text { display: none; }
}