/* DAK CSS: responsive-final-pass.css */
/* ======================================================================
   DAK RESPONSIVE FINAL PASS — 2026-09-23
   Phone + touch-tablet fixes only. Approved laptop/desktop layout remains
   untouched. Tablet rules are gated by html.dak-tablet.
   ====================================================================== */

/* ---------- Phone + tablet: remove the white separator below newsletter ---------- */
@media (max-width: 767px) {
  .newsletter {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
  }
  .newsletter + .footer,
  .footer { margin-top: 0 !important; }
}

html.dak-tablet .newsletter {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
}
html.dak-tablet .newsletter + .footer,
html.dak-tablet .footer { margin-top: 0 !important; }

/* ---------- Tablet navigation: language + theme are always visible ---------- */
html.dak-tablet #navbar {
  height: 76px !important;
  padding: 0 20px !important;
  gap: 10px !important;
}
html.dak-tablet #navbar .logo { min-width: 0 !important; flex: 0 1 auto !important; }
html.dak-tablet #navbar .logo img {
  width: auto !important;
  height: 54px !important;
  max-width: min(215px, 31vw) !important;
  object-fit: contain !important;
}
html.dak-tablet #navbar .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-inline-start: auto !important;
  min-width: 0 !important;
}
html.dak-tablet #navbar .nav-links > a { display: none !important; }
html.dak-tablet #navbar .nav-links > .theme-control--desktop,
html.dak-tablet #navbar .nav-links > .lang-toggle { display: inline-flex !important; }
html.dak-tablet #navbar .theme-control--desktop { margin: 0 !important; }
html.dak-tablet #navbar .theme-trigger {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 13px !important;
}
html.dak-tablet #navbar .theme-trigger-chevron { display: none !important; }
html.dak-tablet #navbar .theme-trigger-icon svg { width: 20px !important; height: 20px !important; }
html.dak-tablet #navbar .lang-toggle {
  min-width: 72px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .hamburger {
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
}

/* Also keep the same controls available inside the opened tablet menu. */
html.dak-tablet .mobile-menu {
  top: 76px !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 92px) !important;
  padding: 14px !important;
  gap: 3px !important;
  overflow-y: auto !important;
}
html.dak-tablet .mobile-menu > .lang-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--pf-border, #dbe3e9) !important;
  border-radius: 12px !important;
  background: var(--pf-surface-2, #f3f6f8) !important;
}
html.dak-tablet .mobile-menu .theme-control--mobile {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 9px !important;
  border: 1px solid var(--pf-border, #dbe3e9) !important;
  border-radius: 13px !important;
  background: var(--pf-surface-2, #f3f6f8) !important;
}

/* ---------- Tablet child-journey form ---------- */
html.dak-tablet .journey-premium-card {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
html.dak-tablet .journey-story-panel,
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 28px !important;
}
html.dak-tablet .journey-form-head {
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
}
html.dak-tablet .journey-form-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 15px !important;
}
html.dak-tablet .journey-form-head strong {
  display: block !important;
  font-size: 27px !important;
  line-height: 1.08 !important;
  margin: 0 0 4px !important;
}
html.dak-tablet .journey-form-head small {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px 16px !important;
  align-items: start !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child { grid-column: 1 / -1 !important; }
html.dak-tablet .journey-input-group {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 7px !important;
}
html.dak-tablet .journey-input-group label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: start !important;
  white-space: normal !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 54px !important;
  margin-top: 2px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

/* ---------- Tablet floating actions: never overlap ---------- */
html.dak-tablet .dak-ai-bubble {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 19px !important;
}
html.dak-tablet .dak-ai-bubble .dak-bot-mark,
html.dak-tablet .dak-ai-bubble svg { width: 36px !important; height: 36px !important; }
html.dak-tablet .back-to-top {
  right: max(27px, env(safe-area-inset-right)) !important;
  bottom: max(102px, calc(env(safe-area-inset-bottom) + 94px)) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
}
html.dak-tablet .wa-fab,
html.dak-tablet[dir="rtl"] .wa-fab {
  left: max(24px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  width: 56px !important;
  height: 56px !important;
}

/* ---------- Tablet calendar ---------- */
html.dak-tablet .calendar-view-switch {
  width: min(620px, 100%) !important;
  margin: 0 auto 20px !important;
  padding: 5px !important;
  gap: 5px !important;
  border-radius: 16px !important;
}
html.dak-tablet .calendar-view-tab {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-radius: 12px !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-shell {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  min-width: 0 !important;
}
html.dak-tablet .calendar-board {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 22px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
html.dak-tablet .calendar-topline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 0 20px !important;
  padding: 2px 0 18px !important;
  text-align: center !important;
}
html.dak-tablet .calendar-brand {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(150px,190px) minmax(0,1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html.dak-tablet[dir="rtl"] .calendar-brand { grid-template-columns: minmax(0,1fr) minmax(150px,190px) !important; }
html.dak-tablet .calendar-official-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html.dak-tablet .calendar-brand img {
  width: 100% !important;
  max-width: 185px !important;
  height: auto !important;
  max-height: 62px !important;
  object-fit: contain !important;
}
html.dak-tablet .calendar-brand-copy {
  min-width: 0 !important;
  text-align: start !important;
}
html.dak-tablet[dir="rtl"] .calendar-brand-copy { text-align: right !important; }
html.dak-tablet .calendar-brand-title {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-brand-copy .section-label {
  display: block !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  letter-spacing: .14em !important;
  text-align: inherit !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-year-pill {
  min-width: 0 !important;
  width: auto !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  align-self: center !important;
}
html.dak-tablet .month-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
  min-width: 0 !important;
}
html.dak-tablet .month-card { min-width: 0 !important; overflow: hidden !important; }
html.dak-tablet .month-head {
  grid-template-columns: minmax(0,1fr) 104px !important;
  gap: 7px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
}
html.dak-tablet[dir="rtl"] .month-head { grid-template-columns: 104px minmax(0,1fr) !important; }
html.dak-tablet .school-days { width: 104px !important; font-size: 10.5px !important; }
html.dak-tablet .mini-cal { width: 100% !important; table-layout: fixed !important; }
html.dak-tablet .mini-cal th { font-size: 9px !important; padding: 7px 0 !important; }
html.dak-tablet .mini-cal td { height: 30px !important; font-size: 12px !important; }
html.dak-tablet .key-panel {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
  min-width: 0 !important;
}
html.dak-tablet .key-card { min-width: 0 !important; padding: 18px !important; }
html.dak-tablet .summary-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
html.dak-tablet .summary-table th,
html.dak-tablet .summary-table td {
  padding: 8px 5px !important;
  font-size: 10.5px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html.dak-tablet .events-calendar { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
html.dak-tablet .events-calendar-head { grid-template-columns: minmax(0,1fr) auto !important; gap: 16px !important; padding: 24px !important; }
html.dak-tablet .events-body { grid-template-columns: 1fr !important; }
html.dak-tablet .events-side { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
html.dak-tablet .month-strip { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

/* ---------- Tablet assistant window ---------- */
html.dak-tablet .dak-ai-chat.dak-v4 {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  width: min(430px, calc(100vw - 48px)) !important;
  height: min(640px, calc(100dvh - 72px)) !important;
  min-height: 500px !important;
  border-radius: 24px !important;
}
html.dak-tablet .dak-v4-header { min-height: 66px !important; padding: 11px 12px !important; }
html.dak-tablet .dak-ai-messages.dak-v4-messages { padding: 16px !important; }
html.dak-tablet .dak-v4-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
html.dak-tablet .dak-v4-topic { min-height: 72px !important; }
html.dak-tablet .dak-v4-composer textarea { font-size: 16px !important; }

/* ---------- General tablet overflow / touch QA ---------- */
html.dak-tablet body { overflow-x: hidden !important; }
html.dak-tablet :is(.container,.calendar-shell,.calendar-board,.month-grid,.key-panel,.journey-premium-card,.journey-form-panel,.journey-story-panel,.events-calendar,.events-body) { min-width: 0 !important; }
html.dak-tablet :is(input,select,textarea,button,a) { -webkit-tap-highlight-color: transparent; }
html.dak-tablet :is(input,select,textarea) { font-size: 16px; }

@media (max-width: 820px) {
  html.dak-tablet .calendar-brand {
    grid-template-columns: 150px minmax(0,1fr) !important;
    gap: 14px !important;
  }
  html.dak-tablet[dir="rtl"] .calendar-brand { grid-template-columns: minmax(0,1fr) 150px !important; }
  html.dak-tablet .calendar-brand img { max-width: 150px !important; }
  html.dak-tablet .calendar-brand-title { font-size: 27px !important; }
  html.dak-tablet .calendar-brand-copy .section-label { font-size: 9.5px !important; }
  html.dak-tablet .key-panel { grid-template-columns: 1fr !important; }
  html.dak-tablet .events-side { grid-template-columns: 1fr !important; }
}

@media (max-width: 740px) {
  /* If a small tablet reports a narrow CSS viewport, keep the calendar readable. */
  html.dak-tablet .month-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Assistant focus mode: keep floating controls out of the conversation ---------- */
@media (max-width: 767px) {
  body.dak-chat-open .back-to-top,
  body.dak-chat-open .wa-fab,
  body.dak-chat-open .wa-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

html.dak-tablet body.dak-chat-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
html.dak-tablet body.dak-chat-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(8,20,36,.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html.dak-tablet body.dak-chat-open .back-to-top,
html.dak-tablet body.dak-chat-open .wa-fab,
html.dak-tablet body.dak-chat-open .wa-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Tablet tables: never create page-level horizontal overflow ---------- */
html.dak-tablet :is(.home-adm-table-wrap,.age-table-wrap,.responsive-table-shell,.table-wrap) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
}
html.dak-tablet :is(.age-table,.home-adm-age-table) {
  min-width: 620px !important;
  width: max-content !important;
  max-width: none !important;
}


/* DAK CSS: tablet-laptop-header.css */
/* ======================================================================
   DAK iPad / Tablet Header — Laptop-style navigation
   2026-09-23
   Applies only when tablet-detect.js adds html.dak-tablet.
   Desktop/laptop and phone layouts are intentionally untouched.
   ====================================================================== */

html.dak-tablet #navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  width: 100% !important;
  min-height: 126px !important;
  height: auto !important;
  padding: 12px 18px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px 12px !important;
  background: rgba(255,255,255,.985) !important;
  border-bottom: 1px solid rgba(26,35,50,.09) !important;
  box-shadow: 0 8px 24px rgba(15,38,61,.055) !important;
  overflow: visible !important;
}

html.dak-tablet #navbar .logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 58px !important;
  line-height: 0 !important;
}
html.dak-tablet #navbar .logo img {
  display: block !important;
  width: auto !important;
  height: 58px !important;
  max-width: min(300px, 44vw) !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

/* No mobile drawer on iPad/tablet: all navigation is visible like laptop. */
html.dak-tablet #navbar .hamburger {
  display: none !important;
}
html.dak-tablet .mobile-menu,
html.dak-tablet .mobile-menu.open,
html.dak-tablet .mobile-menu-backdrop,
html.dak-tablet .mobile-menu-backdrop.is-open {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.dak-tablet #navbar .nav-links {
  order: 3 !important;
  position: static !important;
  display: flex !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px 5px !important;
  overflow: visible !important;
}

html.dak-tablet #navbar .nav-links > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  color: var(--text, #1A2332) !important;
  font-size: 11.4px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .nav-links > a:not(.nav-portal-btn):hover,
html.dak-tablet #navbar .nav-links > a:not(.nav-portal-btn):focus-visible {
  background: var(--gray, #F5F7FA) !important;
  color: var(--purple, #6B3FA0) !important;
}

html.dak-tablet #navbar .nav-links > a.nav-portal-btn,
html.dak-tablet #navbar .nav-links > a.nav-portal-btn:visited {
  color: #fff !important;
  background: linear-gradient(135deg,#6B3FA0 0%,#7B4CC4 100%) !important;
  border: 1px solid rgba(107,63,160,.28) !important;
  box-shadow: 0 5px 13px rgba(107,63,160,.11) !important;
  padding-inline: 10px !important;
}

/* Laptop-style appearance and language controls stay at the top right. */
html.dak-tablet #navbar .nav-links > .theme-control--desktop,
html.dak-tablet #navbar .nav-links > .lang-toggle {
  display: inline-flex !important;
  position: absolute !important;
  top: 14px !important;
  z-index: 2 !important;
}
html.dak-tablet #navbar .nav-links > .theme-control--desktop {
  inset-inline-end: 96px !important;
  margin: 0 !important;
}
html.dak-tablet #navbar .theme-trigger {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(26,35,50,.13) !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(26,35,50,.06) !important;
}
html.dak-tablet #navbar .theme-trigger-text,
html.dak-tablet #navbar .theme-trigger-chevron {
  display: none !important;
}
html.dak-tablet #navbar .theme-trigger-icon,
html.dak-tablet #navbar .theme-trigger-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html.dak-tablet #navbar .nav-links > .lang-toggle {
  inset-inline-end: 18px !important;
  min-width: 70px !important;
  width: 70px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(26,35,50,.13) !important;
  background: #fff !important;
  color: var(--navy, #1A2332) !important;
  box-shadow: 0 5px 16px rgba(26,35,50,.06) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .nav-links > .lang-toggle .lang-toggle-track {
  display: none !important;
}
html.dak-tablet #navbar .nav-links > .lang-toggle .lang-toggle-label {
  display: inline !important;
}

/* Dark theme keeps the exact same geometry. */
html.dak-tablet[data-theme="dark"] #navbar {
  background: rgba(12,25,40,.985) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.20) !important;
}
html.dak-tablet[data-theme="dark"] #navbar .nav-links > a:not(.nav-portal-btn) {
  color: #eef4f8 !important;
}
html.dak-tablet[data-theme="dark"] #navbar .theme-trigger,
html.dak-tablet[data-theme="dark"] #navbar .nav-links > .lang-toggle {
  background: #14243a !important;
  color: #eef4f8 !important;
  border-color: rgba(255,255,255,.13) !important;
}

/* Larger iPads can use a true single-row laptop header. */
@media (min-width: 1000px) {
  html.dak-tablet #navbar {
    min-height: 82px !important;
    height: 82px !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html.dak-tablet #navbar .logo {
    height: 58px !important;
  }
  html.dak-tablet #navbar .logo img {
    height: 58px !important;
    max-height: 58px !important;
    max-width: 238px !important;
  }
  html.dak-tablet #navbar .nav-links {
    order: initial !important;
    position: static !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-inline-start: auto !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 1px !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    min-height: 32px !important;
    padding: 5px 5px !important;
    font-size: 10.1px !important;
  }
  html.dak-tablet #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 7px !important;
  }
  html.dak-tablet #navbar .nav-links > .theme-control--desktop,
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
  }
  html.dak-tablet #navbar .theme-trigger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    width: 62px !important;
    min-width: 62px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    padding-inline: 7px !important;
    font-size: 11px !important;
  }
}

/* Intermediate iPads: keep all links visible and readable without a drawer. */
@media (min-width: 700px) and (max-width: 999px) {
  html.dak-tablet #navbar .nav-links {
    padding-inline: 2px !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    font-size: 11.2px !important;
    padding-inline: 8px !important;
  }
}

/* ======================================================================
   iPad logo visibility hard-fix
   Only one official lockup may be visible at a time. The generic tablet
   image rule above intentionally sizes logo images, but must not override
   the light/dark visibility rules from dark-mode.css.
   ====================================================================== */
html.dak-tablet #navbar .logo .logo-light {
  display: block !important;
}
html.dak-tablet #navbar .logo .logo-dark {
  display: none !important;
}
html.dak-tablet[data-theme="dark"] #navbar .logo .logo-light {
  display: none !important;
}
html.dak-tablet[data-theme="dark"] #navbar .logo .logo-dark {
  display: block !important;
}


/* ======================================================================
   iPad calendar/header single-row compact fix
   Keep all top navigation items on one row on iPad landscape and wide
   tablet widths, especially on Calendar where long labels + portals used
   to wrap into a second line.
   ====================================================================== */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.dak-tablet #navbar {
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  html.dak-tablet #navbar .logo {
    height: 50px !important;
  }
  html.dak-tablet #navbar .logo img {
    height: 50px !important;
    max-height: 50px !important;
    max-width: 180px !important;
  }
  html.dak-tablet #navbar .nav-links {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    min-height: 30px !important;
    padding: 4px 4px !important;
    font-size: 9.2px !important;
    letter-spacing: -0.01em !important;
  }
  html.dak-tablet #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 6px !important;
    border-radius: 8px !important;
  }
  html.dak-tablet #navbar .theme-trigger {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    width: 56px !important;
    min-width: 56px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
  }
}


/* ======================================================================
   iPad Calendar — keep both portal buttons on one line
   Prevents "Portal" from wrapping below the campus name.
   Calendar page/tablet only.
   ====================================================================== */
@media (min-width: 700px) and (max-width: 1199px) {
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn,
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn:visited {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    line-height: 1 !important;
  }
}

/* Give the portals a little extra room on common iPad landscape widths
   without changing the approved laptop/desktop header. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.dak-tablet body.page-calendar #navbar .nav-links {
    column-gap: 0 !important;
  }
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 6px !important;
    font-size: 9px !important;
  }
}


/* DAK CSS: tablet-final-refinement.css */
/* ======================================================================
   DAK iPad / Tablet Final Refinement — 2026-09-23
   Tablet-only. Keeps approved phone + laptop/desktop layouts untouched.
   ====================================================================== */

/* ---------- Journey: retain the polished laptop visual language ---------- */
html.dak-tablet .journey-premium-card {
  max-width: 1080px !important;
  margin: 34px auto 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(26,35,50,.08) !important;
  box-shadow: 0 24px 62px rgba(26,35,50,.10) !important;
}

html.dak-tablet .journey-story-panel {
  padding: 40px 40px 34px !important;
  min-height: 450px !important;
}
html.dak-tablet .journey-story-top { margin-bottom: 28px !important; }
html.dak-tablet .journey-story-panel h3 {
  max-width: 560px !important;
  font-size: clamp(31px,4.2vw,40px) !important;
  line-height: 1.08 !important;
  margin-bottom: 12px !important;
}
html.dak-tablet .journey-story-panel p {
  max-width: 610px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 18px !important;
}

/* Undo the generic <=980px stacked-road treatment on real tablets. */
html.dak-tablet .glowing-journey-path {
  min-height: 238px !important;
  margin-top: 18px !important;
  padding: 0 !important;
  border-radius: 26px !important;
}
html.dak-tablet .journey-road {
  display: block !important;
  inset: 16px 18px 18px !important;
  width: calc(100% - 36px) !important;
  height: calc(100% - 34px) !important;
}
html.dak-tablet .journey-moving-light { display: block !important; }
html.dak-tablet .journey-road-step {
  position: absolute !important;
  width: 142px !important;
  margin: 0 !important;
  display: block !important;
  padding: 13px 13px 14px !important;
  border-radius: 20px !important;
  transform: none !important;
}
html.dak-tablet .journey-road-step .road-icon {
  margin: 0 0 9px !important;
  flex: none !important;
}
html.dak-tablet .journey-road-step.step-start {
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  top: auto !important;
}
html.dak-tablet .journey-road-step.step-grow {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%,-50%) !important;
}
html.dak-tablet .journey-road-step.step-grad {
  right: 20px !important;
  left: auto !important;
  top: 20px !important;
  bottom: auto !important;
}
html.dak-tablet[dir="rtl"] .journey-road-step.step-start,
html.dak-tablet[lang="ar"] .journey-road-step.step-start {
  right: 20px !important;
  left: auto !important;
}
html.dak-tablet[dir="rtl"] .journey-road-step.step-grad,
html.dak-tablet[lang="ar"] .journey-road-step.step-grad {
  left: 20px !important;
  right: auto !important;
}
html.dak-tablet .journey-path-pills {
  margin-top: 18px !important;
  justify-content: center !important;
  gap: 9px !important;
}

/* Laptop-like two-panel layout where tablet width genuinely allows it. */
@media (min-width: 1000px) {
  html.dak-tablet .journey-premium-card {
    grid-template-columns: minmax(0,1.08fr) minmax(360px,.82fr) !important;
  }
  html.dak-tablet .journey-story-panel,
  html.dak-tablet .journey-form-panel {
    min-height: 100% !important;
  }
}
@media (max-width: 999px) {
  html.dak-tablet .journey-premium-card { grid-template-columns: 1fr !important; }
}

/* ---------- Journey form: clean labels, no overlap, comfortable fields ---------- */
html.dak-tablet .journey-form-panel {
  padding: 34px 36px 36px !important;
}
html.dak-tablet .journey-form-panel::before { display: none !important; }
html.dak-tablet .journey-form-head {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 24px !important;
  padding: 0 0 20px !important;
}
html.dak-tablet .journey-form-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  flex: 0 0 50px !important;
}
html.dak-tablet .journey-form-head strong {
  font-size: 22px !important;
  line-height: 1.12 !important;
  margin: 0 0 5px !important;
}
html.dak-tablet .journey-form-head small {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr) !important;
  gap: 20px 18px !important;
  align-items: start !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child {
  grid-column: 1 / -1 !important;
}
html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  position: static !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  align-self: start !important;
}
html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-align: start !important;
  white-space: normal !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.dak-tablet .journey-premium-inputs select:disabled {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  html.dak-tablet .journey-form-panel { padding: 30px 26px 32px !important; }
  html.dak-tablet .journey-premium-inputs,
  html.dak-tablet .journey-inputs { grid-template-columns: 1fr !important; }
  html.dak-tablet .journey-dob-field,
  html.dak-tablet .journey-grade-field { grid-column: 1 / -1 !important; }
}

/* ---------- Tablet footer: compact, laptop-like, no white wedges ---------- */
html.dak-tablet .newsletter {
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
}
html.dak-tablet .newsletter-card {
  margin-bottom: 0 !important;
}
html.dak-tablet .newsletter + .footer,
html.dak-tablet .footer {
  margin-top: 0 !important;
  border-radius: 0 !important;
}
html.dak-tablet .footer {
  padding: 34px 30px 24px !important;
  overflow: hidden !important;
}
html.dak-tablet .footer-grid {
  width: min(100%,1120px) !important;
  grid-template-columns: minmax(0,1.45fr) minmax(150px,.75fr) minmax(150px,.75fr) !important;
  gap: 32px !important;
  margin: 0 auto 22px !important;
  align-items: start !important;
}
html.dak-tablet .footer-grid > div:first-child,
html.dak-tablet .footer-col {
  min-width: 0 !important;
}
html.dak-tablet .footer-brand-name { font-size: 19px !important; margin-bottom: 9px !important; }
html.dak-tablet .footer-brand-name span { font-size: 10.5px !important; }
html.dak-tablet .footer-desc {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
  margin-bottom: 12px !important;
  max-width: 480px !important;
}
html.dak-tablet .footer-contact {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
}
html.dak-tablet .footer-col h4 {
  margin-bottom: 12px !important;
  font-size: 11px !important;
}
html.dak-tablet .footer-col ul li { margin-bottom: 7px !important; }
html.dak-tablet .footer-col ul li a { font-size: 12.5px !important; }
html.dak-tablet .footer-bottom {
  width: min(100%,1120px) !important;
  margin: 0 auto !important;
  padding-top: 17px !important;
  gap: 12px 20px !important;
  font-size: 11.5px !important;
  flex-wrap: wrap !important;
}
html.dak-tablet .footer-bottom-links {
  gap: 14px !important;
  flex-wrap: wrap !important;
}
html.dak-tablet .footer-bottom-links a { font-size: 11.5px !important; }

@media (max-width: 900px) {
  html.dak-tablet .footer { padding: 30px 26px 22px !important; }
  html.dak-tablet .footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 24px 30px !important;
  }
  html.dak-tablet .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  html.dak-tablet .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}


/* ======================================================================
   DAK iPad / Tablet Journey Form Clean Fix — 2026-09-23
   Final tablet-only override. Keeps phone and laptop/desktop untouched.
   ====================================================================== */
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  grid-template-columns: minmax(0,1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-inputs .compact,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}
html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs input[type="date"],
html.dak-tablet .journey-premium-inputs select {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html.dak-tablet .journey-premium-inputs select {
  padding-inline-end: 44px !important;
}
html.dak-tablet .journey-premium-inputs select:disabled {
  opacity: .9 !important;
  cursor: default !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  height: auto !important;
  margin-top: 2px !important;
  padding: 14px 18px !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}
/* Give the tablet form its own calm readable measure. */
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
}
@media (max-width: 999px) {
  html.dak-tablet .journey-form-panel {
    padding: 30px 30px 32px !important;
  }
}
@media (max-width: 780px) {
  html.dak-tablet .journey-form-panel {
    padding: 28px 24px 30px !important;
  }
  html.dak-tablet .journey-form-head strong {
    font-size: 21px !important;
  }
}

/* 2026-09-23 — iPad/tablet DOB value alignment polish */
html.dak-tablet #journeyDob {
  text-align: center !important;
  text-align-last: center !important;
  padding-inline: 46px !important;
  line-height: 56px !important;
}
html.dak-tablet #journeyDob::-webkit-date-and-time-value {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
html.dak-tablet #journeyDob::-webkit-datetime-edit {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
html.dak-tablet #journeyDob::-webkit-datetime-edit-fields-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
html.dak-tablet #journeyDob::-webkit-calendar-picker-indicator {
  margin: 0 !important;
}


/* DAK CSS: tablet-journey-stability.css */
/* DAK Tablet Journey Stability Fix — 2026-09-23
   Tablet-only. Prevents iPad form stretching, clipping and awkward field layout. */
html.dak-tablet .journey-premium-section,
html.dak-tablet .journey-premium-section .container {
  overflow-x: clip !important;
}

html.dak-tablet .journey-premium-card {
  width: calc(100% - 40px) !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin: 30px auto 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.dak-tablet .journey-story-panel,
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* The form itself stays calm and readable on tablets. */
html.dak-tablet .journey-form-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 30px 32px 32px !important;
}

html.dak-tablet .journey-form-head {
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
}

html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-inputs .compact,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  overflow: visible !important;
}

html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: start !important;
  white-space: normal !important;
}

html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.dak-tablet .journey-premium-inputs input[type="date"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  padding-inline: 14px !important;
}

html.dak-tablet .journey-premium-inputs select {
  padding-inline-end: 42px !important;
}

html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  height: auto !important;
  margin: 2px 0 0 !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* Portrait iPads: one calm vertical composition. */
@media (max-width: 899px) {
  html.dak-tablet .journey-premium-card {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
  }
  html.dak-tablet .journey-story-panel {
    padding: 34px 30px 30px !important;
  }
  html.dak-tablet .journey-form-panel {
    padding: 28px 30px 30px !important;
  }
}

/* Landscape / larger tablets: use the laptop-style two-panel composition,
   while keeping the form controls stacked so they never crush each other. */
@media (min-width: 900px) {
  html.dak-tablet .journey-premium-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
    gap: 0 !important;
  }
  html.dak-tablet .journey-story-panel {
    min-height: 100% !important;
    padding: 38px 36px 34px !important;
  }
  html.dak-tablet .journey-form-panel {
    min-height: 100% !important;
    padding: 34px 32px !important;
  }
}

html.dak-tablet[dir="rtl"] .journey-premium-inputs input,
html.dak-tablet[dir="rtl"] .journey-premium-inputs select,
html.dak-tablet[lang="ar"] .journey-premium-inputs input,
html.dak-tablet[lang="ar"] .journey-premium-inputs select {
  text-align: right !important;
}


/* DAK CSS: calendar-header-refresh.css */

/* ================================================================
   Academic Calendar board header refresh — trial
   Replaces duplicated school-name copy with a functional title.
   Calendar page only.
   ================================================================ */

.page-calendar .calendar-topline-refresh {
  direction: ltr;
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(250px, 1.15fr) minmax(145px, .7fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(18px, 3vw, 42px) !important;
  margin: 0 0 22px !important;
  padding: 8px 2px 20px !important;
  border-bottom: 1px solid rgba(26,35,50,.08);
  text-align: initial !important;
}

.page-calendar .calendar-brand-refresh {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
}

.page-calendar .calendar-brand-refresh .calendar-official-logo {
  width: 100% !important;
  justify-content: flex-start !important;
}

.page-calendar .calendar-brand-refresh .calendar-official-logo img {
  width: auto !important;
  max-width: min(100%, 255px) !important;
  max-height: 76px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.page-calendar .calendar-heading-refresh {
  min-width: 0;
  text-align: center;
  line-height: 1.1;
}

.page-calendar .calendar-heading-primary {
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(24px, 2.45vw, 36px);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.page-calendar .calendar-heading-secondary {
  margin-top: 4px;
  color: var(--teal);
  font-weight: 800;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.25;
}

.page-calendar .calendar-heading-primary-ar,
.page-calendar .calendar-heading-secondary-ar,
.page-calendar .calendar-year-label-ar {
  display: none;
}

html[dir="rtl"] .page-calendar .calendar-heading-primary-en,
html[dir="rtl"] .page-calendar .calendar-heading-secondary-en,
html[dir="rtl"] .page-calendar .calendar-year-label-en {
  display: none;
}

html[dir="rtl"] .page-calendar .calendar-heading-primary-ar,
html[dir="rtl"] .page-calendar .calendar-heading-secondary-ar,
html[dir="rtl"] .page-calendar .calendar-year-label-ar {
  display: block;
}

.page-calendar .calendar-heading-primary-ar {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

.page-calendar .calendar-heading-secondary-en,
html[dir="rtl"] .page-calendar .calendar-heading-secondary-ar {
  display: block;
}

html[dir="rtl"] .page-calendar .calendar-heading-secondary-en {
  display: none;
}


.page-calendar .calendar-year-pill-refresh {
  justify-self: end;
  align-self: center !important;
  width: auto !important;
  min-width: 142px !important;
  padding: 9px 16px 10px !important;
  border: 1px solid rgba(218,171,31,.48) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,230,.88)) !important;
  box-shadow: 0 8px 22px rgba(190,145,15,.09) !important;
  text-align: center !important;
  color: var(--navy) !important;
}

.page-calendar .calendar-year-label {
  display: block;
  margin-bottom: 3px;
  color: rgba(26,35,50,.52);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-calendar .calendar-year-label-ar {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 9.5px;
}

.page-calendar .calendar-year-pill-refresh strong {
  display: block;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.05;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: -.02em;
}

/* Dark mode */
html[data-theme="dark"] .page-calendar .calendar-topline-refresh {
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .page-calendar .calendar-heading-primary {
  color: #f5f8fb;
}
html[data-theme="dark"] .page-calendar .calendar-campus-refresh {
  color: rgba(236,243,248,.58);
}
html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh {
  border-color: rgba(218,171,31,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(218,171,31,.045)) !important;
  box-shadow: none !important;
  color: #f5f8fb !important;
}
html[data-theme="dark"] .page-calendar .calendar-year-label {
  color: rgba(236,243,248,.56);
}

/* Tablet */
html.dak-tablet .page-calendar .calendar-topline-refresh {
  grid-template-columns: minmax(170px,.9fr) minmax(230px,1.15fr) minmax(130px,.6fr) !important;
  gap: 18px !important;
  padding: 6px 0 18px !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh {
  display: flex !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
  max-width: 190px !important;
  max-height: 62px !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary {
  font-size: clamp(24px, 3.1vw, 30px) !important;
  white-space: normal !important;
}

html.dak-tablet .page-calendar .calendar-heading-secondary {
  font-size: 11px !important;
}


html.dak-tablet .page-calendar .calendar-year-pill-refresh {
  justify-self: end !important;
  padding: 8px 12px 9px !important;
  min-width: 125px !important;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
  font-size: 17px !important;
}

/* Phone */
@media (max-width: 760px) {
  .page-calendar .calendar-topline-refresh {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: center !important;
    padding: 4px 0 15px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }

  .page-calendar .calendar-brand-refresh,
  .page-calendar .calendar-brand-refresh .calendar-official-logo {
    justify-content: center !important;
  }

  .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: min(84%, 260px) !important;
    max-height: 58px !important;
    margin-inline: auto !important;
  }

  .page-calendar .calendar-heading-primary {
    font-size: clamp(24px, 7.2vw, 30px) !important;
  }

  .page-calendar .calendar-heading-secondary {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  .page-calendar .calendar-year-pill-refresh {
    justify-self: center !important;
    min-width: 132px !important;
    padding: 8px 14px 9px !important;
  }

  .page-calendar .calendar-year-pill-refresh strong {
    font-size: 17px !important;
  }
}


/* ================================================================
   Calendar header typography + iPad refinement
   Desktop keeps the 3-column composition.
   iPad uses a cleaner 2-row composition:
   logo + year on top, title centered underneath.
   ================================================================ */

/* More elegant heading typography on every device */
.page-calendar .calendar-heading-primary-en {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

.page-calendar .calendar-heading-primary-ar {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.page-calendar .calendar-heading-secondary {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.page-calendar .calendar-heading-secondary-en {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
}

.page-calendar .calendar-heading-secondary-ar {
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: .01em !important;
}

.page-calendar .calendar-heading-refresh::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--teal), var(--purple));
  opacity: .78;
}

/* iPad / tablet: avoid squeezing logo, title and year into one row */
html.dak-tablet .page-calendar .calendar-topline-refresh {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "brand year"
    "heading heading" !important;
  gap: 12px 18px !important;
  align-items: center !important;
  padding: 8px 6px 17px !important;
  margin-bottom: 20px !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh {
  grid-area: brand !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo {
  justify-content: flex-start !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
  max-width: 225px !important;
  max-height: 68px !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh {
  grid-area: heading !important;
  width: 100% !important;
  max-width: 620px !important;
  justify-self: center !important;
  padding-top: 3px !important;
  text-align: center !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary {
  font-size: clamp(28px, 4vw, 36px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

html.dak-tablet .page-calendar .calendar-heading-secondary {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh::after {
  width: 48px;
  margin-top: 9px;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh {
  grid-area: year !important;
  justify-self: end !important;
  min-width: 132px !important;
  padding: 9px 13px 10px !important;
  border-radius: 14px !important;
}

html.dak-tablet .page-calendar .calendar-year-label {
  font-size: 8px !important;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
  font-size: 18px !important;
}

/* A little more breathing room on larger landscape iPads */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    padding-inline: 10px !important;
    gap: 14px 24px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 245px !important;
    max-height: 72px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 36px !important;
  }
}

/* Phone: retain the existing stacked layout, only improve the title font */
@media (max-width: 760px) {
  .page-calendar .calendar-heading-primary-en {
    font-size: clamp(26px, 7.5vw, 31px) !important;
  }

  .page-calendar .calendar-heading-primary-ar {
    font-size: clamp(25px, 7vw, 30px) !important;
  }

  .page-calendar .calendar-heading-refresh::after {
    width: 38px;
    margin-top: 7px;
  }
}


/* ================================================================
   iPad precision pass
   Landscape iPad = clean 3-column header like laptop.
   Portrait iPad = compact 2-row header.
   Phone + desktop remain unchanged.
   ================================================================ */

/* Keep the English title modern/professional on iPad */
html.dak-tablet .page-calendar .calendar-heading-primary-en {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-ar {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* LANDSCAPE / wide iPad: one balanced row */
@media (min-width: 900px) and (max-width: 1199px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: 220px minmax(0, 1fr) 132px !important;
    grid-template-areas: "brand heading year" !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 12px 14px 18px !important;
    margin-bottom: 20px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo {
    justify-content: flex-start !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 218px !important;
    max-height: 66px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: center !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 30px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-secondary {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh::after {
    width: 40px !important;
    height: 2px !important;
    margin-top: 7px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    grid-area: year !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 128px !important;
    padding: 8px 12px 9px !important;
    border-radius: 13px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-label {
    margin-bottom: 3px !important;
    font-size: 7.5px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    font-size: 17px !important;
  }
}

/* PORTRAIT / narrower iPad: compact, centered and not stretched */
@media (min-width: 700px) and (max-width: 899px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(0, 1fr) 124px !important;
    grid-template-areas:
      "brand year"
      "heading heading" !important;
    align-items: center !important;
    gap: 8px 14px !important;
    padding: 9px 10px 15px !important;
    margin-bottom: 18px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh {
    grid-area: brand !important;
    justify-self: start !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 200px !important;
    max-height: 60px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    grid-area: year !important;
    min-width: 118px !important;
    padding: 7px 10px 8px !important;
    border-radius: 12px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-label {
    font-size: 7px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    font-size: 16px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: auto !important;
    max-width: 560px !important;
    justify-self: center !important;
    padding-top: 2px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 28px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-secondary {
    margin-top: 3px !important;
    font-size: 10.5px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh::after {
    width: 38px !important;
    margin-top: 6px !important;
  }
}

/* Prevent any accidental stretch or overlap on iPad */
html.dak-tablet .page-calendar .calendar-topline-refresh > * {
  min-width: 0 !important;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh {
  white-space: nowrap !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh {
  overflow: visible !important;
}


/* ================================================================
   iPad edge-balance pass
   Reduces the excessive empty space on the left/right of the
   Academic Calendar header without affecting phone or desktop.
   ================================================================ */
@media (min-width: 700px) and (max-width: 1199px) {
  html.dak-tablet .page-calendar .calendar-board {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html.dak-tablet .page-calendar .calendar-topline-refresh {
    width: 100% !important;
    max-width: none !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    justify-self: end !important;
    margin-right: 0 !important;
  }
}

/* Wide / landscape iPad: use more of the available horizontal space. */
@media (min-width: 900px) and (max-width: 1199px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: 205px minmax(0, 1fr) 124px !important;
    gap: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 17px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 205px !important;
    max-height: 64px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 29px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    min-width: 122px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Portrait iPad: push logo/year closer to their natural edges,
   while keeping the title centered below. */
@media (min-width: 700px) and (max-width: 899px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 8px 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 195px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    min-width: 116px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh {
    max-width: 600px !important;
  }
}


/* ================================================================
   iPad only — restore the original Calendar header feel
   Logo | Academic Year | 2026–2027
   Removes the repeated school-name copy completely.
   Phone and desktop/laptop remain unchanged.
   ================================================================ */
@media (min-width: 700px) and (max-width: 1199px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: minmax(155px, 210px) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand heading year" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(14px, 2.2vw, 24px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    padding: 4px 0 17px !important;
    border-bottom: 1px solid rgba(26,35,50,.08) !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    width: auto !important;
    max-width: min(100%, 205px) !important;
    max-height: 64px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Middle text goes back to the simple original "Academic Year" style. */
  html.dak-tablet .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    justify-self: stretch !important;
    overflow: visible !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary,
  html.dak-tablet .page-calendar .calendar-heading-secondary {
    display: none !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh::before {
    content: "Academic Year";
    display: block;
    color: var(--navy);
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(20px, 2.7vw, 28px);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  html.dak-tablet[dir="rtl"] .page-calendar .calendar-heading-refresh::before {
    content: "العام الدراسي";
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
  }

  /* No decorative underline in the restored iPad version. */
  html.dak-tablet .page-calendar .calendar-heading-refresh::after {
    display: none !important;
    content: none !important;
  }

  /* Right side goes back to the simple yellow year pill from the first design. */
  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    grid-area: year !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 128px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--yellow) !important;
    box-shadow: none !important;
    color: var(--navy) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Avoid repeating "Academic Year" inside the year pill. */
  html.dak-tablet .page-calendar .calendar-year-label {
    display: none !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    display: block !important;
    margin: 0 !important;
    color: var(--navy) !important;
    font-size: clamp(16px, 2vw, 19px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
  }

  html[data-theme="dark"].dak-tablet .page-calendar .calendar-heading-refresh::before {
    color: #f5f8fb !important;
  }

  html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh,
  html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    color: #17263b !important;
  }
}

/* Narrow portrait iPads: same original composition, just proportionally tighter. */
@media (min-width: 700px) and (max-width: 899px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(145px, 180px) minmax(0, 1fr) 116px !important;
    gap: 10px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 178px !important;
    max-height: 58px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh::before {
    font-size: 20px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    min-width: 116px !important;
    padding: 9px 10px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    font-size: 16px !important;
  }
}


/* ================================================================
   FINAL iPad restore — all real iPads, including 12.9" / 1366px
   The previous restore stopped at 1199px, so wide iPads could fall
   back to the refreshed desktop "Academic Calendar" title.
   This block intentionally keys off html.dak-tablet with NO max-width.
   ================================================================ */
html.dak-tablet .page-calendar .calendar-topline-refresh {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) 132px !important;
  grid-template-areas: "brand heading year" !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(12px, 2vw, 24px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 5px 0 17px !important;
  border-bottom: 1px solid rgba(26,35,50,.08) !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh {
  grid-area: brand !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
  width: auto !important;
  max-width: min(100%, 215px) !important;
  max-height: 66px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* Hide refreshed title/subtitle completely on every real iPad. */
html.dak-tablet .page-calendar .calendar-heading-primary,
html.dak-tablet .page-calendar .calendar-heading-secondary {
  display: none !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh {
  grid-area: heading !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-self: stretch !important;
  overflow: visible !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh::before {
  content: "Academic Year" !important;
  display: block !important;
  color: var(--navy) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(20px, 2.25vw, 28px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

html[dir="rtl"].dak-tablet .page-calendar .calendar-heading-refresh::before {
  content: "العام الدراسي" !important;
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh::after {
  display: none !important;
  content: none !important;
}

/* Simple original yellow year box. */
html.dak-tablet .page-calendar .calendar-year-pill-refresh {
  grid-area: year !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 128px !important;
  margin: 0 !important;
  padding: 10px 15px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--yellow) !important;
  box-shadow: none !important;
  color: var(--navy) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html.dak-tablet .page-calendar .calendar-year-label {
  display: none !important;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
  display: block !important;
  margin: 0 !important;
  color: var(--navy) !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
}

html[data-theme="dark"].dak-tablet .page-calendar .calendar-heading-refresh::before {
  color: #f5f8fb !important;
}

html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh,
html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh strong {
  color: #17263b !important;
}

/* Portrait/narrow iPad tightening */
@media (max-width: 899px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(145px, 180px) minmax(0, 1fr) 116px !important;
    gap: 10px !important;
  }

  html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 178px !important;
    max-height: 58px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh::before {
    font-size: 20px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh {
    min-width: 116px !important;
    padding: 9px 10px !important;
  }

  html.dak-tablet .page-calendar .calendar-year-pill-refresh strong {
    font-size: 16px !important;
  }
}


/* ================================================================
   Phone — match the approved iPad Calendar header style
   Logo | Academic Year | 2026–2027
   No repeated school name, no Academic Calendar title block.
   ================================================================ */
@media (max-width: 760px) {
  .page-calendar .calendar-topline-refresh {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand year"
      "heading heading" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px 12px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 5px 0 14px !important;
    border-bottom: 1px solid rgba(26,35,50,.08) !important;
    text-align: initial !important;
  }

  .page-calendar .calendar-brand-refresh {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-calendar .calendar-brand-refresh .calendar-official-logo {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    width: auto !important;
    max-width: min(100%, 190px) !important;
    max-height: 56px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Hide the refreshed title/subtitle on phone, just like iPad. */
  .page-calendar .calendar-heading-primary,
  .page-calendar .calendar-heading-secondary {
    display: none !important;
  }

  .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    justify-self: stretch !important;
    overflow: visible !important;
  }

  .page-calendar .calendar-heading-refresh::before {
    content: "Academic Year" !important;
    display: block !important;
    color: var(--navy) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }

  html[dir="rtl"] .page-calendar .calendar-heading-refresh::before {
    content: "العام الدراسي" !important;
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .page-calendar .calendar-heading-refresh::after {
    display: none !important;
    content: none !important;
  }

  .page-calendar .calendar-year-pill-refresh {
    grid-area: year !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 108px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--yellow) !important;
    box-shadow: none !important;
    color: var(--navy) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .page-calendar .calendar-year-label {
    display: none !important;
  }

  .page-calendar .calendar-year-pill-refresh strong {
    display: block !important;
    margin: 0 !important;
    color: var(--navy) !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
  }

  html[data-theme="dark"] .page-calendar .calendar-heading-refresh::before {
    color: #f5f8fb !important;
  }

  html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh,
  html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh strong {
    color: #17263b !important;
  }
}

@media (max-width: 390px) {
  .page-calendar .calendar-topline-refresh {
    gap: 7px 8px !important;
  }

  .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: 165px !important;
    max-height: 52px !important;
  }

  .page-calendar .calendar-heading-refresh::before {
    font-size: 17px !important;
  }

  .page-calendar .calendar-year-pill-refresh {
    min-width: 100px !important;
    padding: 7px 9px !important;
  }

  .page-calendar .calendar-year-pill-refresh strong {
    font-size: 14px !important;
  }
}


/* ================================================================
   FINAL — Laptop-style Calendar title on iPad + Phone
   Same visual identity as desktop:
   Academic Calendar
   التقويم الأكاديمي
   but proportionally sized for each device.
   No repeated school name.
   ================================================================ */

/* ---------------- iPad / Tablet ---------------- */
html.dak-tablet .page-calendar .calendar-heading-refresh::before {
  display: none !important;
  content: none !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-en,
html.dak-tablet .page-calendar .calendar-heading-secondary-en {
  display: block !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-ar,
html.dak-tablet .page-calendar .calendar-heading-secondary-ar {
  display: none !important;
}

html[dir="rtl"].dak-tablet .page-calendar .calendar-heading-primary-en,
html[dir="rtl"].dak-tablet .page-calendar .calendar-heading-secondary-en {
  display: none !important;
}

html[dir="rtl"].dak-tablet .page-calendar .calendar-heading-primary-ar,
html[dir="rtl"].dak-tablet .page-calendar .calendar-heading-secondary-ar {
  display: block !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-en {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  color: var(--navy) !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-ar {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--navy) !important;
}

html.dak-tablet .page-calendar .calendar-heading-secondary {
  margin-top: 3px !important;
  color: var(--teal) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

html.dak-tablet .page-calendar .calendar-heading-secondary-en {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
}

html.dak-tablet .page-calendar .calendar-heading-secondary-ar {
  font-family: 'DM Sans', sans-serif !important;
}

html.dak-tablet .page-calendar .calendar-heading-refresh::after {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 2px !important;
  margin: 7px auto 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--teal), var(--purple)) !important;
  opacity: .78 !important;
}

/* Wide / landscape iPad — like laptop, one row */
@media (min-width: 900px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: 205px minmax(0, 1fr) 124px !important;
    grid-template-areas: "brand heading year" !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 2px 17px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    text-align: center !important;
    padding: 0 !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 28px !important;
    line-height: 1.03 !important;
    white-space: normal !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-secondary {
    font-size: 10.5px !important;
  }
}

/* Portrait / narrower iPad — logo + year above, title centered below */
@media (min-width: 700px) and (max-width: 899px) {
  html.dak-tablet .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    grid-template-areas:
      "brand year"
      "heading heading" !important;
    gap: 8px 12px !important;
    padding: 7px 0 15px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: 520px !important;
    justify-self: center !important;
    text-align: center !important;
    padding-top: 2px !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-primary {
    font-size: 27px !important;
    line-height: 1.05 !important;
  }

  html.dak-tablet .page-calendar .calendar-heading-secondary {
    font-size: 10.5px !important;
  }
}

/* ---------------- Phone ---------------- */
@media (max-width: 760px) {
  .page-calendar .calendar-heading-refresh::before {
    display: none !important;
    content: none !important;
  }

  .page-calendar .calendar-heading-primary-en,
  .page-calendar .calendar-heading-secondary-en {
    display: block !important;
  }

  .page-calendar .calendar-heading-primary-ar,
  .page-calendar .calendar-heading-secondary-ar {
    display: none !important;
  }

  html[dir="rtl"] .page-calendar .calendar-heading-primary-en,
  html[dir="rtl"] .page-calendar .calendar-heading-secondary-en {
    display: none !important;
  }

  html[dir="rtl"] .page-calendar .calendar-heading-primary-ar,
  html[dir="rtl"] .page-calendar .calendar-heading-secondary-ar {
    display: block !important;
  }

  .page-calendar .calendar-topline-refresh {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand year"
      "heading heading" !important;
    gap: 7px 10px !important;
    padding: 5px 0 13px !important;
  }

  .page-calendar .calendar-heading-refresh {
    grid-area: heading !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: center !important;
    text-align: center !important;
    padding: 2px 4px 0 !important;
  }

  .page-calendar .calendar-heading-primary-en {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(23px, 7vw, 29px) !important;
    line-height: 1.02 !important;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
    color: var(--navy) !important;
  }

  .page-calendar .calendar-heading-primary-ar {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
    font-size: clamp(22px, 6.6vw, 28px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: var(--navy) !important;
  }

  .page-calendar .calendar-heading-secondary {
    margin-top: 2px !important;
    color: var(--teal) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .page-calendar .calendar-heading-secondary-en {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  }

  .page-calendar .calendar-heading-secondary-ar {
    font-family: 'DM Sans', sans-serif !important;
  }

  .page-calendar .calendar-heading-refresh::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    margin: 6px auto 0 !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, var(--teal), var(--purple)) !important;
    opacity: .78 !important;
  }
}

/* Dark mode title colors */
html[data-theme="dark"] .page-calendar .calendar-heading-primary {
  color: #f5f8fb !important;
}


/* Dark-mode contrast safeguard for the Academic Year box */
html[data-theme="dark"]:not(.dak-tablet) .page-calendar .calendar-year-pill-refresh {
  border-color: rgba(255,204,44,.52) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,204,44,.07)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  color: #f7f9fb !important;
}
html[data-theme="dark"]:not(.dak-tablet) .page-calendar .calendar-year-pill-refresh strong {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"]:not(.dak-tablet) .page-calendar .calendar-year-label {
  color: rgba(239,244,248,.78) !important;
}

html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh {
  background: var(--yellow) !important;
  border-color: transparent !important;
  color: #17263b !important;
}
html[data-theme="dark"].dak-tablet .page-calendar .calendar-year-pill-refresh strong {
  color: #17263b !important;
  text-shadow: none !important;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh {
    background: var(--yellow) !important;
    border-color: transparent !important;
    color: #17263b !important;
  }
  html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh strong {
    color: #17263b !important;
    text-shadow: none !important;
  }
}


/* DAK CSS: calendar-premium-masthead-final.css */

/* ================================================================
   Academic Calendar — Premium Masthead Trial
   Keeps the approved content/order, upgrades only the visual treatment.
   ================================================================ */

.page-calendar .calendar-topline-refresh {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 24px !important;
  padding: 22px 24px 21px !important;
  border: 1px solid rgba(26,35,50,.08) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 5% 18%, rgba(0,188,212,.10), transparent 31%),
    radial-gradient(circle at 94% 10%, rgba(107,63,160,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,252,253,.96)) !important;
  box-shadow:
    0 14px 34px rgba(26,35,50,.07),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Thin school-colour ribbon, not a heavy divider. */
.page-calendar .calendar-topline-refresh::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  width: auto !important;
  height: 3px !important;
  margin: 0 !important;
  border-radius: 99px 99px 0 0 !important;
  background:
    linear-gradient(90deg,
      var(--teal) 0 38%,
      var(--purple) 38% 72%,
      var(--yellow) 72% 100%) !important;
  opacity: .86 !important;
  z-index: 3;
}

/* Very subtle decorative calendar dots. */
.page-calendar .calendar-topline-refresh::before {
  content: "";
  position: absolute;
  width: 88px;
  height: 42px;
  right: 178px;
  top: 16px;
  opacity: .11;
  background-image:
    radial-gradient(circle, var(--teal) 2px, transparent 2.4px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: -1;
}

.page-calendar .calendar-brand-refresh,
.page-calendar .calendar-heading-refresh,
.page-calendar .calendar-year-pill-refresh {
  position: relative;
  z-index: 2;
}

/* Logo remains official but sits more comfortably. */
.page-calendar .calendar-brand-refresh .calendar-official-logo img {
  max-width: min(100%, 245px) !important;
  max-height: 72px !important;
  filter: drop-shadow(0 5px 10px rgba(26,35,50,.045));
}

/* Title: same typography, cleaner hierarchy. */
.page-calendar .calendar-heading-primary-en {
  font-size: clamp(29px, 2.65vw, 39px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.page-calendar .calendar-heading-primary-ar {
  font-size: clamp(27px, 2.45vw, 35px) !important;
}

.page-calendar .calendar-heading-secondary {
  margin-top: 6px !important;
  font-size: clamp(11px, .95vw, 13px) !important;
}

/* Small accent under the title only. */
.page-calendar .calendar-heading-refresh {
  position: relative;
  padding-bottom: 8px;
}

.page-calendar .calendar-heading-refresh::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,var(--teal),var(--purple));
  opacity: .78;
}

/* Year becomes a polished badge instead of a plain box. */
.page-calendar .calendar-year-pill-refresh {
  min-width: 144px !important;
  padding: 11px 15px 12px !important;
  border: 1px solid rgba(218,171,31,.50) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(255,204,44,.22), transparent 34%),
    linear-gradient(180deg,#fffdf7,#fff8df) !important;
  box-shadow:
    0 10px 24px rgba(190,145,15,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.page-calendar .calendar-year-label {
  color: rgba(26,35,50,.54) !important;
  letter-spacing: .10em !important;
}

.page-calendar .calendar-year-pill-refresh strong {
  color: var(--navy) !important;
  font-size: clamp(18px,1.65vw,22px) !important;
}

/* Dark mode */
html[data-theme="dark"] .page-calendar .calendar-topline-refresh {
  border-color: rgba(255,255,255,.075) !important;
  background:
    radial-gradient(circle at 5% 18%, rgba(0,188,212,.08), transparent 31%),
    radial-gradient(circle at 94% 10%, rgba(107,63,160,.10), transparent 30%),
    linear-gradient(180deg,#112238,#0e1d30) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.17) !important;
}

html[data-theme="dark"] .page-calendar .calendar-topline-refresh::before {
  opacity: .08;
}

html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh {
  border-color: rgba(255,204,44,.34) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(255,204,44,.10), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,204,44,.04)) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .page-calendar .calendar-year-pill-refresh strong {
  color: #fff !important;
}

html[data-theme="dark"] .page-calendar .calendar-year-label {
  color: rgba(239,245,249,.66) !important;
}

/* iPad / tablet: keep the layout controlled and elegant. */
html.dak-tablet .page-calendar .calendar-topline-refresh {
  padding: 18px 18px 18px !important;
  gap: 14px !important;
  border-radius: 19px !important;
}

html.dak-tablet .page-calendar .calendar-topline-refresh::before {
  right: 142px;
  top: 14px;
  transform: scale(.88);
  transform-origin: top right;
}

html.dak-tablet .page-calendar .calendar-topline-refresh::after {
  left: 18px;
  right: 18px;
}

html.dak-tablet .page-calendar .calendar-brand-refresh .calendar-official-logo img {
  max-width: 200px !important;
  max-height: 62px !important;
}

html.dak-tablet .page-calendar .calendar-heading-primary-en {
  font-size: clamp(26px,3.2vw,32px) !important;
}

html.dak-tablet .page-calendar .calendar-year-pill-refresh {
  min-width: 122px !important;
  padding: 9px 11px 10px !important;
}

/* Phone: same concept, stacked and clean — no extra decoration clutter. */
@media (max-width: 760px) {
  .page-calendar .calendar-topline-refresh {
    padding: 16px 14px 17px !important;
    border-radius: 17px !important;
    gap: 9px !important;
  }

  .page-calendar .calendar-topline-refresh::before {
    display: none !important;
  }

  .page-calendar .calendar-topline-refresh::after {
    left: 14px;
    right: 14px;
    height: 2px !important;
  }

  .page-calendar .calendar-brand-refresh .calendar-official-logo img {
    max-width: min(78%,220px) !important;
    max-height: 56px !important;
  }

  .page-calendar .calendar-heading-primary-en {
    font-size: clamp(25px,7.4vw,30px) !important;
  }

  .page-calendar .calendar-heading-primary-ar {
    font-size: clamp(23px,6.8vw,28px) !important;
  }

  .page-calendar .calendar-heading-refresh {
    padding-bottom: 7px;
  }

  .page-calendar .calendar-year-pill-refresh {
    min-width: 118px !important;
    padding: 8px 12px 9px !important;
  }

  .page-calendar .calendar-year-pill-refresh strong {
    font-size: 16px !important;
  }
}


/* DAK CSS: calendar-print-professional.css */

/* ================================================================
   DAK Academic Calendar — ONE PAGE / FULL COLOUR PRINT
   Screen styles are untouched.
   Designed to fit the full 2026–2027 academic calendar on one
   A4 landscape sheet while preserving the colour coding.
   ================================================================ */

.print-calendar-legend { display: none; }

@media print {
  @page {
    size: A4 landscape;
    margin: 4mm;
  }

  html,
  body {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #17263b !important;
    overflow: hidden !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Print ONLY the academic calendar document. */
  #navbar,
  .mobile-menu,
  .page-hero,
  .calendar-view-switch,
  .key-panel,
  .calendar-actions,
  .print-tip,
  .calendar-view-panel[data-calendar-panel="events"],
  footer,
  .footer,
  .back-to-top,
  .dak-assistant-launcher,
  .dak-assistant-panel,
  .dak-ai-bubble,
  .wa-fab,
  .wa-menu,
  .wa-backdrop,
  .skip-link {
    display: none !important;
  }

  .section,
  .section.section-gray,
  .container,
  .calendar-shell,
  .calendar-view-panel,
  #academic-calendar {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #academic-calendar {
    height: 200mm !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
  }

  .calendar-shell {
    grid-template-columns: 1fr !important;
  }

  .calendar-board {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0,1fr) auto !important;
    width: 100% !important;
    height: 198mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: .28mm solid #d8e2e8 !important;
    border-radius: 3mm !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* ---------- Premium coloured masthead ---------- */
  .calendar-topline-refresh {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 54mm minmax(0,1fr) 37mm !important;
    grid-template-areas: "brand heading year" !important;
    align-items: center !important;
    gap: 4mm !important;
    min-height: 19mm !important;
    margin: 0 !important;
    padding: 2.3mm 4mm 2.8mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 3% 18%, rgba(0,188,212,.10), transparent 24%),
      radial-gradient(circle at 94% 10%, rgba(107,63,160,.08), transparent 25%),
      linear-gradient(180deg,#ffffff,#fbfcfd) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .calendar-topline-refresh::before {
    display: none !important;
    content: none !important;
  }

  .calendar-topline-refresh::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 4mm !important;
    right: 4mm !important;
    bottom: 0 !important;
    width: auto !important;
    height: .9mm !important;
    margin: 0 !important;
    border-radius: 99px !important;
    background:
      linear-gradient(90deg,
        #00b8cb 0 40%,
        #6b3fa0 40% 72%,
        #f5b52b 72% 100%) !important;
    opacity: 1 !important;
  }

  .calendar-brand-refresh {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .calendar-brand-refresh .calendar-official-logo {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .calendar-brand-refresh .calendar-official-logo img {
    display: block !important;
    width: auto !important;
    max-width: 49mm !important;
    max-height: 13.5mm !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
  }

  .calendar-logo-dark { display: none !important; }
  .calendar-logo-light { display: block !important; }

  .calendar-heading-refresh {
    grid-area: heading !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .calendar-heading-refresh::before,
  .calendar-heading-refresh::after {
    display: none !important;
    content: none !important;
  }

  .calendar-heading-primary-en,
  .calendar-heading-primary-ar {
    color: #17263b !important;
    font-size: 17pt !important;
    line-height: .98 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  .calendar-heading-primary-en {
    font-family: 'Playfair Display', Georgia, serif !important;
    letter-spacing: -.035em !important;
  }

  .calendar-heading-primary-ar {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  }

  .calendar-heading-secondary {
    margin-top: .8mm !important;
    color: #00a1b2 !important;
    font-size: 6.8pt !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }

  .calendar-year-pill-refresh {
    grid-area: year !important;
    justify-self: end !important;
    width: 34mm !important;
    min-width: 34mm !important;
    margin: 0 !important;
    padding: 2mm 1.8mm !important;
    border: .35mm solid #e4b62b !important;
    border-radius: 2.7mm !important;
    background:
      radial-gradient(circle at 92% 8%, rgba(245,181,43,.18), transparent 36%),
      #fffaf0 !important;
    color: #17263b !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .calendar-year-label {
    display: block !important;
    margin-bottom: .5mm !important;
    color: #667384 !important;
    font-size: 5.2pt !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
  }

  .calendar-year-pill-refresh strong {
    display: block !important;
    color: #17263b !important;
    font-size: 11.8pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  /* ---------- Compact colour legend ---------- */
  .print-calendar-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7mm !important;
    min-height: 6.5mm !important;
    padding: 1.1mm 3mm !important;
    border-bottom: .2mm solid #dfe7ec !important;
    background:
      linear-gradient(90deg,rgba(0,188,212,.035),rgba(107,63,160,.035)) !important;
    color: #536171 !important;
    font-size: 5.5pt !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .print-calendar-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.2mm !important;
  }

  .print-calendar-legend i {
    display: inline-block !important;
    width: 2.2mm !important;
    height: 2.2mm !important;
    border-radius: 50% !important;
  }

  .print-calendar-legend i.event { background: #00a8b8 !important; }
  .print-calendar-legend i.start { background: #6b3fa0 !important; }
  .print-calendar-legend i.holiday { background: #f3a31d !important; }
  .print-calendar-legend i.end { background: #177d91 !important; }

  /* ---------- ALL 12 MONTHS ON ONE PAGE: 4 × 3 ---------- */
  .month-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: repeat(3,minmax(0,1fr)) !important;
    gap: 1.7mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2mm 2.4mm !important;
    overflow: hidden !important;
  }

  .month-card {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: .22mm solid #d8e2e8 !important;
    border-radius: 2mm !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .month-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 22mm !important;
    align-items: center !important;
    gap: .8mm !important;
    min-height: 6.3mm !important;
    padding: 1.15mm 1.6mm !important;
    color: #fff !important;
  }

  .month-card.term-a .month-head {
    background: linear-gradient(135deg,#00a9bd,#18bed0) !important;
  }

  .month-card.term-b .month-head {
    background: linear-gradient(135deg,#603793,#7b4caf) !important;
  }

  .month-card.term-c .month-head {
    background: linear-gradient(135deg,#f19b17,#ffb32f) !important;
  }

  .month-card.summer .month-head {
    background: linear-gradient(135deg,#f1c83e,#ffd967) !important;
    color: #17263b !important;
  }

  .month-title {
    color: inherit !important;
    font-size: 7.3pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .school-days {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22mm !important;
    min-height: 4.5mm !important;
    padding: .55mm .8mm !important;
    border: .18mm solid rgba(255,255,255,.18) !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,.17) !important;
    color: inherit !important;
    font-size: 5.25pt !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }

  .mini-cal {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: #fff !important;
  }

  .mini-cal th {
    height: 3.9mm !important;
    padding: .3mm 0 !important;
    background: #f2f6f8 !important;
    color: #35465a !important;
    border: 0 !important;
    border-bottom: .18mm solid #dfe7ec !important;
    font-size: 4.35pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .mini-cal td {
    height: 4mm !important;
    padding: 0 !important;
    background: #fff !important;
    color: #243347 !important;
    border: .16mm solid #e8edf1 !important;
    font-size: 5.7pt !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .mini-cal td.muted {
    background: #fafcfd !important;
    color: #c8d1d8 !important;
  }

  /* Preserve all existing date colours. */
  .mini-cal td.event {
    background: #dff5f7 !important;
    color: #006f79 !important;
  }

  .mini-cal td.start {
    background: #eee5f5 !important;
    color: #4f2f78 !important;
  }

  .mini-cal td.holiday {
    background: #fff0d7 !important;
    color: #815009 !important;
  }

  .mini-cal td.exam {
    background: #f8e1e1 !important;
    color: #8c2c2c !important;
  }

  .mini-cal td.end {
    background: #dff5f7 !important;
    color: #006f79 !important;
    box-shadow: inset 0 -.65mm 0 #00a8b8 !important;
  }

  .month-note {
    min-height: 4.7mm !important;
    margin-top: auto !important;
    padding: .85mm 1.4mm !important;
    border-top: .18mm solid #e2e9ed !important;
    background: #f8fafb !important;
    color: #6d7a89 !important;
    font-size: 4.85pt !important;
    line-height: 1.08 !important;
  }

  /* ---------- Single neat footer ---------- */
  .calendar-board::after {
    content: "Dorat Al Khaleej International Private School  •  Academic Calendar 2026–2027  •  Holidays are subject to official announcements.";
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 6mm !important;
    padding: 1mm 3mm !important;
    border-top: .22mm solid #dfe7ec !important;
    background: #fbfcfd !important;
    color: #6f7b88 !important;
    font-size: 5.1pt !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html[dir="rtl"] .calendar-board::after {
    content: "مدرسة درة الخليج الدولية الخاصة  •  التقويم الأكاديمي 2026–2027  •  الإجازات خاضعة للإعلانات الرسمية.";
    font-family: 'Noto Sans Arabic',Tahoma,Arial,sans-serif !important;
  }

  /* Never print browser-only decorations. */
  a[href]::after { content: none !important; }

  * {
    animation: none !important;
    transition: none !important;
  }
}


/* ================================================================
   Important date emphasis — one-page print
   Highlight the DATE NUMBER, not the whole cell.
   ================================================================ */
@media print {
  .mini-cal td .cal-day-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 4.6mm !important;
    height: 4.6mm !important;
    padding: 0 .5mm !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Keep marked cells white; emphasis stays on the number itself. */
  .mini-cal td.event,
  .mini-cal td.start,
  .mini-cal td.holiday,
  .mini-cal td.end {
    background: #fff !important;
    color: #243347 !important;
    box-shadow: none !important;
  }

  .mini-cal td.event .cal-day-number {
    background: #00a8b8 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .35mm #d8f2f5 !important;
    font-weight: 900 !important;
  }

  .mini-cal td.start .cal-day-number {
    background: #6b3fa0 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .35mm #eee5f5 !important;
    font-weight: 900 !important;
  }

  .mini-cal td.holiday .cal-day-number {
    background: #f3a31d !important;
    color: #17263b !important;
    box-shadow: 0 0 0 .35mm #fff0d7 !important;
    font-weight: 900 !important;
  }

  .mini-cal td.end .cal-day-number {
    background: #177d91 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .35mm #dff5f7 !important;
    font-weight: 900 !important;
  }

  /* Tiny secondary marker helps visibility on colour printers at low saturation. */
  .mini-cal td.event .cal-day-number::after,
  .mini-cal td.start .cal-day-number::after,
  .mini-cal td.holiday .cal-day-number::after,
  .mini-cal td.end .cal-day-number::after {
    content: "" !important;
    position: absolute !important;
    right: -.55mm !important;
    top: -.55mm !important;
    width: 1.25mm !important;
    height: 1.25mm !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: .28mm solid currentColor !important;
  }
}


/* DAK CSS: calendar-important-days-all-devices.css */

/* ================================================================
   Academic Calendar — Important Days Highlight
   SCREEN ONLY: Phone + iPad/Tablet + Laptop/Desktop.
   Print keeps its own dedicated one-page styling.
   ================================================================ */

@media screen {

  /* Keep the table itself clean; highlight only the date number. */
  .page-calendar .mini-cal td.event,
  .page-calendar .mini-cal td.start,
  .page-calendar .mini-cal td.holiday,
  .page-calendar .mini-cal td.end {
    background: #fff !important;
    color: #243142 !important;
    box-shadow: none !important;
  }

  .page-calendar .mini-cal td .cal-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 3px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      background .16s ease;
  }

  /* Important date */
  .page-calendar .mini-cal td.event .cal-day-number {
    background: rgba(0,168,184,.13);
    color: #006d78;
    box-shadow: inset 0 0 0 1.5px rgba(0,168,184,.58);
    font-weight: 900;
  }

  /* Semester / term start */
  .page-calendar .mini-cal td.start .cal-day-number {
    background: rgba(107,63,160,.13);
    color: #54307d;
    box-shadow: inset 0 0 0 1.5px rgba(107,63,160,.58);
    font-weight: 900;
  }

  /* Holiday */
  .page-calendar .mini-cal td.holiday .cal-day-number {
    background: rgba(243,163,29,.17);
    color: #825200;
    box-shadow: inset 0 0 0 1.5px rgba(243,163,29,.62);
    font-weight: 900;
  }

  /* Year-end date */
  .page-calendar .mini-cal td.end .cal-day-number {
    background: rgba(23,125,145,.13);
    color: #0a6575;
    box-shadow: inset 0 0 0 1.5px rgba(23,125,145,.58);
    font-weight: 900;
  }

  /* Small colour marker makes special dates easy to scan. */
  .page-calendar .mini-cal td.event .cal-day-number::after,
  .page-calendar .mini-cal td.start .cal-day-number::after,
  .page-calendar .mini-cal td.holiday .cal-day-number::after,
  .page-calendar .mini-cal td.end .cal-day-number::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1.5px solid #fff;
  }

  .page-calendar .mini-cal td.event .cal-day-number::after { background: #00a8b8; }
  .page-calendar .mini-cal td.start .cal-day-number::after { background: #6b3fa0; }
  .page-calendar .mini-cal td.holiday .cal-day-number::after { background: #f3a31d; }
  .page-calendar .mini-cal td.end .cal-day-number::after { background: #177d91; }

  @media (hover:hover) and (pointer:fine) {
    .page-calendar .mini-cal td.event:hover .cal-day-number,
    .page-calendar .mini-cal td.start:hover .cal-day-number,
    .page-calendar .mini-cal td.holiday:hover .cal-day-number,
    .page-calendar .mini-cal td.end:hover .cal-day-number {
      transform: translateY(-1px) scale(1.05);
    }
  }

  /* Dark mode */
  html[data-theme="dark"] .page-calendar .mini-cal td.event,
  html[data-theme="dark"] .page-calendar .mini-cal td.start,
  html[data-theme="dark"] .page-calendar .mini-cal td.holiday,
  html[data-theme="dark"] .page-calendar .mini-cal td.end {
    background: var(--dark-surface) !important;
    color: #eaf1f6 !important;
  }

  html[data-theme="dark"] .page-calendar .mini-cal td.event .cal-day-number {
    background: rgba(0,188,212,.16);
    color: #91edf4;
    box-shadow: inset 0 0 0 1.5px rgba(0,188,212,.58);
  }

  html[data-theme="dark"] .page-calendar .mini-cal td.start .cal-day-number {
    background: rgba(139,92,190,.18);
    color: #dfc8f4;
    box-shadow: inset 0 0 0 1.5px rgba(139,92,190,.60);
  }

  html[data-theme="dark"] .page-calendar .mini-cal td.holiday .cal-day-number {
    background: rgba(243,163,29,.18);
    color: #ffd991;
    box-shadow: inset 0 0 0 1.5px rgba(243,163,29,.62);
  }

  html[data-theme="dark"] .page-calendar .mini-cal td.end .cal-day-number {
    background: rgba(23,125,145,.20);
    color: #a8ebf0;
    box-shadow: inset 0 0 0 1.5px rgba(70,181,198,.58);
  }

  html[data-theme="dark"] .page-calendar .mini-cal td.event .cal-day-number::after,
  html[data-theme="dark"] .page-calendar .mini-cal td.start .cal-day-number::after,
  html[data-theme="dark"] .page-calendar .mini-cal td.holiday .cal-day-number::after,
  html[data-theme="dark"] .page-calendar .mini-cal td.end .cal-day-number::after {
    border-color: var(--dark-surface);
  }

  /* Tablet */
  html.dak-tablet .page-calendar .mini-cal td .cal-day-number {
    min-width: 24px;
    height: 24px;
  }

  /* Phone */
  @media (max-width: 760px) {
    .page-calendar .mini-cal td .cal-day-number {
      min-width: 23px;
      height: 23px;
      font-size: inherit;
    }

    .page-calendar .mini-cal td.event .cal-day-number::after,
    .page-calendar .mini-cal td.start .cal-day-number::after,
    .page-calendar .mini-cal td.holiday .cal-day-number::after,
    .page-calendar .mini-cal td.end .cal-day-number::after {
      width: 4px;
      height: 4px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-calendar .mini-cal td .cal-day-number {
    transition: none !important;
  }
}


/* DAK CSS: all-pages-phone-card-polish.css */

/* =================================================================
   DAK — ALL INNER PAGES PHONE CARD POLISH V1.3
   Phone only (<=620px). iPad / Tablet / Laptop / Desktop unchanged.
   Purpose: smaller, calmer, more consistent cards without harming
   readability, touch targets, tables, forms, or branded identities.
   ================================================================= */
@media (max-width:620px){

  body.dak-inner-page{
    --pc-radius:16px;
    --pc-radius-lg:18px;
    --pc-pad:15px;
    --pc-gap:10px;
    --pc-shadow:0 8px 22px rgba(26,35,50,.065);
  }

  /* ---------------------------------------------------------------
     Shared card rhythm
     --------------------------------------------------------------- */
  body.dak-inner-page :is(
    .team-general,
    .branch-detail,
    .home-adm-panel,
    .home-adm-card,
    .step-card,
    .dress-card,
    .faq-item,
    .calendar-board,
    .month-card,
    .key-card,
    .events-calendar,
    .event-item,
    .contact-form-card,
    .office-hours-card,
    .map-card,
    .info-card,
    .facility-card,
    .bus-card,
    .pa-route-box,
    .pa-route-card,
    .pa-route-mini,
    .pa-workspace,
    .pa-question-wrap,
    .pa-option,
    .pa-result-card,
    .pa-result-section,
    .pa-official-resource,
    .pa-ig-verified,
    .pa-verified-section,
    .fv-form,
    .fv-result,
    .fv-poster-frame,
    .prog-full-card,
    .subject-item,
    .curriculum-card,
    .credential-card,
    .error-card
  ){
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.dak-inner-page :is(
    .team-general,
    .branch-detail,
    .home-adm-panel,
    .step-card,
    .dress-card,
    .faq-item,
    .month-card,
    .key-card,
    .contact-form-card,
    .office-hours-card,
    .map-card,
    .info-card,
    .facility-card,
    .bus-card,
    .pa-route-box,
    .pa-route-card,
    .pa-workspace,
    .pa-question-wrap,
    .pa-result-card,
    .pa-result-section,
    .pa-official-resource,
    .pa-verified-section,
    .fv-form,
    .fv-result,
    .prog-full-card,
    .curriculum-card,
    .credential-card,
    .error-card
  ){
    border-radius:var(--pc-radius-lg) !important;
    box-shadow:var(--pc-shadow) !important;
  }

  /* Touch devices should not jump on hover */
  body.dak-inner-page :is(
    .branch-detail,.home-adm-card,.step-card,.dress-card,.faq-item,
    .month-card,.key-card,.event-item,.info-card,.facility-card,.bus-card,
    .pa-route-card,.pa-route-mini,.pa-option,.pa-result-section,
    .subject-item,.curriculum-card,.credential-card
  ):hover{
    transform:none !important;
  }

  /* ---------------------------------------------------------------
     ABOUT — Mission / Values / Campuses
     --------------------------------------------------------------- */
  body.dak-inner-page .mission-grid{
    gap:10px !important;
  }
  body.dak-inner-page .mission-card{
    min-height:0 !important;
    padding:18px 16px !important;
    border-radius:17px !important;
  }
  body.dak-inner-page .mission-card h3{
    margin-bottom:8px !important;
    font-size:19px !important;
    line-height:1.18 !important;
  }
  body.dak-inner-page .mission-card > p{
    font-size:12.5px !important;
    line-height:1.58 !important;
  }
  body.dak-inner-page .mission-card.values .values-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:14px !important;
  }
  body.dak-inner-page .mission-card.values .value-item{
    padding:4px 2px !important;
  }
  body.dak-inner-page .value-icon{
    margin-bottom:5px !important;
    font-size:22px !important;
  }
  body.dak-inner-page .value-title{
    font-size:11.5px !important;
  }
  body.dak-inner-page .value-desc{
    font-size:10.5px !important;
    line-height:1.45 !important;
  }
  body.dak-inner-page .team-general{
    margin-top:20px !important;
    padding:18px 16px !important;
  }
  body.dak-inner-page .team-general p{
    font-size:12.5px !important;
    line-height:1.65 !important;
  }
  body.dak-inner-page .branch-detail-grid{
    gap:11px !important;
    margin-top:28px !important;
  }
  body.dak-inner-page .branch-detail-header{
    min-height:118px !important;
    padding:19px 17px !important;
  }
  body.dak-inner-page .branch-detail-header h3{
    margin-bottom:5px !important;
    font-size:24px !important;
  }
  body.dak-inner-page .branch-detail-header p{
    font-size:10px !important;
  }
  body.dak-inner-page .branch-detail-body{
    padding:15px !important;
  }
  body.dak-inner-page .branch-detail-row{
    gap:5px !important;
    padding:11px 13px !important;
    box-sizing:border-box !important;
  }
  body.dak-inner-page .branch-detail-row strong{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }
  body.dak-inner-page .branch-detail-row span{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:11.5px !important;
    line-height:1.52 !important;
    overflow-wrap:anywhere !important;
  }
  body.dak-inner-page .branch-detail-row a{
    display:inline !important;
    line-height:1.52 !important;
    overflow-wrap:anywhere !important;
  }

  /* ---------------------------------------------------------------
     ADMISSION REQUIREMENTS
     --------------------------------------------------------------- */
  body.dak-inner-page .home-adm-grid{
    gap:11px !important;
  }
  body.dak-inner-page .home-adm-panel{
    padding:16px !important;
  }
  body.dak-inner-page .home-adm-panel-top{
    margin-bottom:12px !important;
  }
  body.dak-inner-page .home-adm-panel-top h3{
    font-size:20px !important;
    line-height:1.16 !important;
  }
  body.dak-inner-page .home-adm-panel-top p{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
  body.dak-inner-page .home-adm-cards{
    gap:8px !important;
    margin-top:12px !important;
  }
  body.dak-inner-page .home-adm-card{
    gap:9px !important;
    padding:11px 12px !important;
    border-radius:13px !important;
    box-shadow:none !important;
  }
  body.dak-inner-page .home-adm-card span{
    margin-top:1px !important;
    font-size:16px !important;
  }
  body.dak-inner-page .home-adm-card strong{
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
  body.dak-inner-page .home-adm-side-cta{
    gap:12px !important;
  }
  body.dak-inner-page .home-adm-cta-title{
    font-size:16px !important;
  }
  body.dak-inner-page .home-adm-cta-sub{
    font-size:11px !important;
    line-height:1.5 !important;
  }

  /* ---------------------------------------------------------------
     ADMISSIONS — Steps / Dress cards
     --------------------------------------------------------------- */
  body.dak-inner-page .steps-grid,
  body.dak-inner-page .dress-grid{
    gap:10px !important;
  }
  body.dak-inner-page .step-card,
  body.dak-inner-page .dress-card{
    min-height:0 !important;
    padding:16px 14px !important;
  }
  body.dak-inner-page .step-num{
    width:36px !important;
    height:36px !important;
    margin-bottom:9px !important;
    font-size:15px !important;
  }
  body.dak-inner-page .step-card h3,
  body.dak-inner-page .dress-card h3{
    margin-bottom:6px !important;
    font-size:16.5px !important;
    line-height:1.24 !important;
  }
  body.dak-inner-page .step-card p,
  body.dak-inner-page .dress-card p,
  body.dak-inner-page .dress-card li{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
  body.dak-inner-page .dress-card ul li{
    padding:6px 0 !important;
  }

  /* ---------------------------------------------------------------
     FAQ — tighter but touch-safe
     --------------------------------------------------------------- */
  body.dak-inner-page .faq-list{
    gap:8px !important;
  }
  body.dak-inner-page .faq-item{
    border-radius:14px !important;
    box-shadow:0 5px 16px rgba(26,35,50,.055) !important;
  }
  body.dak-inner-page .faq-question{
    min-height:58px !important;
    grid-template-columns:34px minmax(0,1fr) 30px !important;
    gap:9px !important;
    padding:11px 12px !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
  }
  body.dak-inner-page .faq-num{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page .faq-arrow{
    width:30px !important;
    height:30px !important;
    font-size:13px !important;
  }
  body.dak-inner-page .faq-answer{
    padding-left:55px !important;
    padding-right:12px !important;
    font-size:11.5px !important;
    line-height:1.62 !important;
  }
  body[dir="rtl"].dak-inner-page .faq-answer,
  html[dir="rtl"] body.dak-inner-page .faq-answer{
    padding-right:55px !important;
    padding-left:12px !important;
  }

  /* ---------------------------------------------------------------
     CALENDAR — cards only; table/grid logic preserved
     --------------------------------------------------------------- */
  body.dak-inner-page.page-calendar .calendar-shell{
    gap:12px !important;
  }
  body.dak-inner-page.page-calendar .calendar-board{
    padding:12px !important;
    border-radius:18px !important;
  }
  body.dak-inner-page.page-calendar .month-grid{
    gap:9px !important;
  }
  body.dak-inner-page.page-calendar .month-card{
    border-radius:14px !important;
    overflow:hidden !important;
  }
  body.dak-inner-page.page-calendar .month-head{
    padding:9px 10px !important;
  }
  body.dak-inner-page.page-calendar .month-title{
    font-size:14px !important;
  }
  body.dak-inner-page.page-calendar .month-eyebrow{
    font-size:8px !important;
  }
  body.dak-inner-page.page-calendar .month-note{
    padding:8px 9px !important;
    font-size:9px !important;
    line-height:1.4 !important;
  }
  body.dak-inner-page.page-calendar .key-panel{
    gap:9px !important;
  }
  body.dak-inner-page.page-calendar .key-card{
    padding:13px 12px !important;
    border-radius:14px !important;
  }
  body.dak-inner-page.page-calendar .key-date{
    font-size:12px !important;
  }
  body.dak-inner-page.page-calendar .key-text{
    font-size:10.5px !important;
    line-height:1.45 !important;
  }
  body.dak-inner-page.page-calendar .events-calendar{
    border-radius:16px !important;
  }
  body.dak-inner-page.page-calendar .events-calendar-head{
    gap:10px !important;
    padding:16px 14px !important;
  }
  body.dak-inner-page.page-calendar .events-title{
    font-size:23px !important;
  }
  body.dak-inner-page.page-calendar .events-subtitle{
    font-size:11px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page.page-calendar .events-body{
    gap:10px !important;
    padding:12px !important;
  }
  body.dak-inner-page.page-calendar .event-item{
    grid-template-columns:48px 30px minmax(0,1fr) !important;
    gap:6px !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }
  body.dak-inner-page.page-calendar .event-symbol{
    width:29px !important;
    height:29px !important;
    border-radius:9px !important;
  }
  body.dak-inner-page.page-calendar .event-copy strong{
    font-size:11.5px !important;
    line-height:1.4 !important;
  }
  body.dak-inner-page.page-calendar .event-type{
    font-size:8px !important;
  }
  body.dak-inner-page.page-calendar .events-side{
    gap:9px !important;
  }

  /* ---------------------------------------------------------------
     CONTACT + CAMPUS DETAIL PAGES
     --------------------------------------------------------------- */
  body.dak-inner-page .contact-grid,
  body.dak-inner-page .info-grid{
    gap:11px !important;
  }
  body.dak-inner-page :is(.contact-form-card,.office-hours-card,.info-card){
    padding:17px 15px !important;
  }
  body.dak-inner-page .info-card h2,
  body.dak-inner-page .info-card h3,
  body.dak-inner-page .contact-form-card h2,
  body.dak-inner-page .office-hours-card h3{
    font-size:20px !important;
    line-height:1.18 !important;
  }
  body.dak-inner-page .info-card p{
    margin-bottom:12px !important;
    font-size:12px !important;
    line-height:1.58 !important;
  }
  body.dak-inner-page .info-row{
    gap:4px !important;
    padding:9px 0 !important;
  }
  body.dak-inner-page .info-row .lbl{
    font-size:10.5px !important;
  }
  body.dak-inner-page .info-row .val{
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
  body.dak-inner-page .info-icon{
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
    font-size:17px !important;
  }
  body.dak-inner-page .map-card{
    border-radius:17px !important;
  }
  body.dak-inner-page .map-card iframe{
    height:230px !important;
  }
  body.dak-inner-page .map-open{
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page .hours-row-item{
    padding:12px 14px !important;
    gap:10px !important;
    font-size:11.5px !important;
    border-radius:15px !important;
    box-sizing:border-box !important;
  }
  body.dak-inner-page .hours-row-item strong{
    display:block !important;
    margin:0 !important;
    line-height:1.22 !important;
  }
  body.dak-inner-page .hours-row-item small{
    display:block !important;
    margin-top:4px !important;
    line-height:1.4 !important;
  }
  body.dak-inner-page .hours-row-item span{
    line-height:1.2 !important;
  }
  body.dak-inner-page .portal-big{
    min-height:44px !important;
    padding:9px 13px !important;
    font-size:11px !important;
  }
  body.dak-inner-page .portal-big::after{
    width:25px !important;
    height:25px !important;
    font-size:13px !important;
  }

  /* Contact office card remains fully usable */
  body.dak-inner-page .office-status-card{
    padding:14px !important;
    border-radius:16px !important;
  }
  body.dak-inner-page .office-status-title{
    font-size:13px !important;
  }
  body.dak-inner-page .office-status-note{
    font-size:10.5px !important;
  }
  body.dak-inner-page .office-status-actions{
    gap:7px !important;
  }
  body.dak-inner-page .office-status-action{
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:10px !important;
  }

  /* ---------------------------------------------------------------
     FACILITIES
     --------------------------------------------------------------- */
  body.dak-inner-page .facilities-grid,
  body.dak-inner-page .bus-grid{
    gap:10px !important;
  }
  body.dak-inner-page .facility-card,
  body.dak-inner-page .bus-card{
    min-height:0 !important;
    padding:0 !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }
  body.dak-inner-page .facility-header{
    padding:15px 14px !important;
  }
  body.dak-inner-page .facility-icon{
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
    font-size:18px !important;
  }
  body.dak-inner-page .facility-header h3{
    font-size:17px !important;
  }
  body.dak-inner-page .facility-body{
    padding:14px !important;
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
  body.dak-inner-page .activity-chip{
    padding:5px 8px !important;
    font-size:9px !important;
  }

  /* ---------------------------------------------------------------
     STUDENT PATHWAY ADVISOR
     --------------------------------------------------------------- */
  body.dak-inner-page.pa-page .pa-shell{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body.dak-inner-page.pa-page .pa-route-box{
    padding:15px !important;
  }
  body.dak-inner-page.pa-page .pa-route-box-head{
    margin-bottom:11px !important;
  }
  body.dak-inner-page.pa-page .pa-route-box-title{
    font-size:21px !important;
  }
  body.dak-inner-page.pa-page .pa-route-mini{
    min-height:58px !important;
    gap:9px !important;
    padding:10px 11px !important;
    border-radius:14px !important;
  }
  body.dak-inner-page.pa-page .pa-route-mini-code{
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }
  body.dak-inner-page.pa-page .pa-route-mini strong{
    font-size:11.5px !important;
  }
  body.dak-inner-page.pa-page .pa-route-mini small{
    font-size:9px !important;
  }
  body.dak-inner-page.pa-page .pa-route-grid{
    gap:10px !important;
  }
  body.dak-inner-page.pa-page .pa-route-card{
    min-height:0 !important;
    padding:16px 15px !important;
    border-radius:16px !important;
  }
  body.dak-inner-page.pa-page .pa-route-top{
    margin-bottom:13px !important;
  }
  body.dak-inner-page.pa-page .pa-route-tag{
    font-size:8.5px !important;
  }
  body.dak-inner-page.pa-page .pa-route-number{
    font-size:11px !important;
  }
  body.dak-inner-page.pa-page .pa-route-card h3{
    margin-bottom:7px !important;
    font-size:20px !important;
    line-height:1.12 !important;
  }
  body.dak-inner-page.pa-page .pa-route-card p{
    font-size:11px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page.pa-page .pa-route-meta{
    gap:5px !important;
    margin-top:11px !important;
  }
  body.dak-inner-page.pa-page .pa-route-meta span{
    padding:5px 7px !important;
    font-size:8.5px !important;
  }
  body.dak-inner-page.pa-page .pa-route-cta{
    min-height:42px !important;
    margin-top:12px !important;
    font-size:10px !important;
  }
  body.dak-inner-page.pa-page .pa-workspace{
    padding:13px !important;
  }
  body.dak-inner-page.pa-page .pa-workspace-top{
    gap:8px !important;
    margin-bottom:11px !important;
  }
  body.dak-inner-page.pa-page .pa-question-wrap{
    padding:15px !important;
    border-radius:16px !important;
  }
  body.dak-inner-page.pa-page .pa-question-title{
    font-size:20px !important;
    line-height:1.14 !important;
  }
  body.dak-inner-page.pa-page .pa-question-sub{
    font-size:11px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page.pa-page .pa-options{
    gap:8px !important;
  }
  body.dak-inner-page.pa-page .pa-option{
    min-height:52px !important;
    padding:10px 11px !important;
    border-radius:13px !important;
  }
  body.dak-inner-page.pa-page .pa-option strong{
    font-size:11.5px !important;
  }
  body.dak-inner-page.pa-page .pa-option small{
    font-size:9.5px !important;
    line-height:1.4 !important;
  }
  body.dak-inner-page.pa-page .pa-result-card{
    padding:15px !important;
  }
  body.dak-inner-page.pa-page .pa-result-grid{
    gap:9px !important;
  }
  body.dak-inner-page.pa-page .pa-result-section{
    padding:13px !important;
    border-radius:14px !important;
  }
  body.dak-inner-page.pa-page .pa-result-section h3{
    font-size:14px !important;
  }
  body.dak-inner-page.pa-page .pa-result-section :is(li,p){
    font-size:10.5px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page.pa-page .pa-mini-row{
    padding:8px 0 !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page.pa-page .pa-official-resource{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:10px !important;
    padding:13px !important;
  }
  body.dak-inner-page.pa-page .pa-official-resource-mark{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }
  body.dak-inner-page.pa-page .pa-ig-verified{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:10px !important;
    padding:13px !important;
    border-radius:14px !important;
  }
  body.dak-inner-page.pa-page .pa-ig-verified-mark{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }
  body.dak-inner-page.pa-page .pa-ig-verified-copy strong{
    font-size:11.5px !important;
  }
  body.dak-inner-page.pa-page .pa-ig-verified-copy p{
    font-size:9.5px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page.pa-page .pa-source-actions,
  body.dak-inner-page.pa-page .pa-result-actions{
    gap:7px !important;
  }
  body.dak-inner-page.pa-page .pa-btn,
  body.dak-inner-page.pa-page .pa-source-link{
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:9.5px !important;
  }

  /* ---------------------------------------------------------------
     FUTURE VISION
     --------------------------------------------------------------- */
  body.dak-inner-page .fv-wrap{
    gap:11px !important;
  }
  body.dak-inner-page .fv-form{
    padding:17px 15px !important;
    border-radius:17px !important;
  }
  body.dak-inner-page .fv-form-title{
    font-size:21px !important;
    line-height:1.16 !important;
  }
  body.dak-inner-page .fv-form-sub{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  body.dak-inner-page .fv-field{
    margin-bottom:11px !important;
  }
  body.dak-inner-page .fv-label{
    margin-bottom:5px !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page :is(.fv-input,.fv-select){
    min-height:44px !important;
    padding:9px 11px !important;
    border-radius:12px !important;
    font-size:16px !important; /* prevents iOS input zoom */
  }
  body.dak-inner-page .fv-dreams{
    gap:7px !important;
  }
  body.dak-inner-page .fv-dreams button{
    min-height:44px !important;
    padding:8px 9px !important;
    border-radius:12px !important;
    font-size:10px !important;
  }
  body.dak-inner-page .fv-generate-btn,
  body.dak-inner-page .fv-action-btn{
    min-height:44px !important;
    padding:9px 12px !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page .fv-result{
    padding:14px !important;
    border-radius:17px !important;
  }
  body.dak-inner-page .fv-poster-frame{
    border-radius:16px !important;
  }

  /* ---------------------------------------------------------------
     PROGRAMMES — programme panels / subject / credentials
     --------------------------------------------------------------- */
  body.dak-inner-page .prog-tabs{
    gap:6px !important;
  }
  body.dak-inner-page .prog-tab{
    min-height:42px !important;
    padding:7px 10px !important;
    font-size:10px !important;
  }
  body.dak-inner-page .prog-full-card{
    border-radius:17px !important;
  }
  body.dak-inner-page .prog-full-left,
  body.dak-inner-page .prog-full-right{
    padding:17px 15px !important;
  }
  body.dak-inner-page .prog-full-left .icon{
    margin-bottom:10px !important;
    font-size:36px !important;
  }
  body.dak-inner-page .prog-full-left h2{
    font-size:22px !important;
  }
  body.dak-inner-page .prog-full-left p,
  body.dak-inner-page .prog-full-right p{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
  body.dak-inner-page .secondary-programmes{
    gap:5px !important;
    margin-bottom:10px !important;
  }
  body.dak-inner-page .secondary-programme{
    min-height:36px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    font-size:10px !important;
  }
  body.dak-inner-page .subject-grid{
    gap:7px !important;
    margin-bottom:18px !important;
  }
  body.dak-inner-page .subject-item{
    min-height:76px !important;
    padding:10px 8px !important;
    border-radius:12px !important;
    gap:7px !important;
    font-size:10.5px !important;
  }
  body.dak-inner-page .subject-item span{
    font-size:15px !important;
  }
  body.dak-inner-page .prog-features{
    margin-bottom:18px !important;
  }
  body.dak-inner-page .prog-features li{
    gap:7px !important;
    padding:6px 0 !important;
    font-size:10.5px !important;
    line-height:1.48 !important;
  }
  body.dak-inner-page .curriculum-grid{
    gap:9px !important;
  }
  body.dak-inner-page .curriculum-card,
  body.dak-inner-page .credential-card{
    min-height:0 !important;
    padding:14px !important;
    border-radius:16px !important;
  }
  body.dak-inner-page .credential-stage{
    min-height:118px !important;
    border-radius:13px !important;
  }
  body.dak-inner-page .credential-logo-frame{
    min-height:86px !important;
    padding:8px !important;
  }
  body.dak-inner-page .credential-copy{
    padding-top:11px !important;
  }
  body.dak-inner-page .credential-copy h3{
    font-size:16.5px !important;
    line-height:1.2 !important;
  }
  body.dak-inner-page .credential-copy p{
    font-size:10.5px !important;
    line-height:1.5 !important;
  }

  /* ---------------------------------------------------------------
     404 / simple utility cards
     --------------------------------------------------------------- */
  body.dak-inner-page .error-card{
    padding:20px 16px !important;
  }
}

/* Very narrow phones: small final trim, no squeezed controls. */
@media (max-width:360px){
  body.dak-inner-page .hours-row-item{
    padding:11px 12px !important;
  }

  body.dak-inner-page .branch-detail-row{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body.dak-inner-page :is(
    .mission-card,.team-general,.branch-detail-body,.home-adm-panel,
    .step-card,.dress-card,.contact-form-card,.office-hours-card,.info-card,
    .pa-route-card,.pa-question-wrap,.pa-result-card,.fv-form,.fv-result,
    .prog-full-left,.prog-full-right,.curriculum-card,.credential-card
  ){
    padding-left:13px !important;
    padding-right:13px !important;
  }

  body.dak-inner-page.pa-page .pa-route-card h3,
  body.dak-inner-page .prog-full-left h2{
    font-size:19px !important;
  }

  body.dak-inner-page.page-calendar .event-item{
    grid-template-columns:45px 28px minmax(0,1fr) !important;
  }
}


/* DAK CSS: site-life.css */
/* ================================================================
   DAK SITE LIFE V2.6
   Quiet page/scroll motion. No content is hidden if JavaScript fails.
   ================================================================ */
body.dak-life-ready{animation:dakLifePageSettle .32s ease-out}
.dak-life-watch.dak-life-inview{animation:dakLifeSectionIn .58s cubic-bezier(.2,.72,.2,1)}
@keyframes dakLifePageSettle{from{opacity:.985}to{opacity:1}}
@keyframes dakLifeSectionIn{from{opacity:.94;transform:translateY(8px)}to{opacity:1;transform:none}}

/* A very quiet ambient drift on large screens only; keeps mobile GPU work low. */
@media (min-width:701px) and (prefers-reduced-motion:no-preference){
  .dak-live-section::before{animation:dakLifeGridDrift 24s ease-in-out infinite alternate}
  .branches-section::before{animation:dakLifeGlowA 18s ease-in-out infinite alternate}
  .branches-section::after{animation:dakLifeGlowB 22s ease-in-out infinite alternate}
}
@keyframes dakLifeGridDrift{from{transform:translate3d(-5px,-3px,0)}to{transform:translate3d(7px,5px,0)}}
@keyframes dakLifeGlowA{from{transform:translate3d(-5px,0,0) scale(.98)}to{transform:translate3d(10px,8px,0) scale(1.04)}}
@keyframes dakLifeGlowB{from{transform:translate3d(5px,3px,0) scale(1)}to{transform:translate3d(-9px,-5px,0) scale(1.035)}}

/* Touch acknowledgement without changing layouts. */
@media (hover:none){
  :where(.branch-link,.ql-card,.dak-live-calendar-link,.dak-live-card-link,.dak-live-mini-link,.office-status-action):active{transform:scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  body.dak-life-ready,.dak-life-watch.dak-life-inview{animation:none!important}
  .dak-live-section::before,.branches-section::before,.branches-section::after{animation:none!important}
}


/* DAK CSS: quality-production.css */
/* ================================================================
   DAK PRODUCTION QUALITY LAYER — V7.8
   Non-layout polish only. Keeps approved responsive geometry intact.
   ================================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  scroll-padding-top: 96px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

img {
  image-rendering: auto;
}

a,
button,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

::selection {
  background: rgba(0, 188, 212, .22);
  color: #142436;
}

html[data-theme="dark"] ::selection {
  background: rgba(0, 188, 212, .34);
  color: #ffffff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(0, 188, 212, .48);
  outline-offset: 3px;
}

@supports (text-wrap: balance) {
  .hero-title,
  .page-title,
  .section-title,
  .branch-name,
  .journey-form-head strong,
  .pa-hero h1,
  .pa-intro-head h2,
  .fv-title,
  h1,
  h2 {
    text-wrap: balance;
  }
}

@media (min-width: 900px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 151, 167, .55) rgba(20, 36, 54, .06);
  }

  html::-webkit-scrollbar {
    width: 10px;
  }

  html::-webkit-scrollbar-track {
    background: rgba(20, 36, 54, .045);
  }

  html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 188, 212, .72), rgba(107, 63, 160, .64));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
}

@media (max-width: 899px) {
  html {
    scroll-padding-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}