/**
 * Topford — Mobile First Platform Optimization
 * Public site + Learning Center + Command Center
 */
:root {
  --mxo-safe-top: env(safe-area-inset-top, 0px);
  --mxo-safe-right: env(safe-area-inset-right, 0px);
  --mxo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mxo-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: clip;
}
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}
iframe, video {
  max-height: 100%;
}
button, a, input, select, textarea {
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px; /* iOS zoom prevention */
}

/* —— Public shell —— */
@media (max-width: 1199px) {
  .brand-name { font-size: 1.05rem; }
  .brand-tagline { font-size: 9px; letter-spacing: .1em; }
  .header-bar { gap: 8px; }
  #site-nav .nav-link { min-height: 44px; display: flex; align-items: center; }
  .nav-drawer-actions .btn-gold,
  .nav-drawer-actions .btn-ghost,
  .nav-drawer-actions .btn-navy {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .site-chrome .bg-navy.text-white\/80,
  .site-chrome > .bg-navy {
    font-size: 10px;
  }
  .brand-link { gap: 8px; max-width: min(62vw, 240px); }
  .brand-name { font-size: .95rem; }
  .brand-tagline { font-size: 8.5px; }
  .header-icon { width: 42px; height: 42px; min-width: 42px; }

  /* Hero & marketing */
  .hero-copy h1,
  section[aria-label] h1 {
    font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
  }
  .hero-copy .flex,
  .hero-copy .mt-8 {
    gap: 10px;
  }
  .hero-copy .btn-gold,
  .hero-copy .btn-line,
  .hero-copy a.btn-gold,
  .hero-copy a.btn-line {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }

  /* Trust strip overlapping hero */
  section.relative.z-10.-mt-12 > div,
  section.-mt-12 > div {
    margin-left: 0;
    margin-right: 0;
  }

  /* Fixed-height media blocks on home */
  .h-\[460px\] {
    height: auto !important;
    min-height: 240px;
    padding: 2rem 1rem;
  }

  /* Membership / card grids */
  .rounded-3xl.overflow-hidden img {
    width: 100%;
  }

  /* Forms & tables on legacy campus pages */
  .form > .btn,
  .form button[type="submit"],
  .panel .btn,
  .login-card .btn {
    width: 100%;
    min-height: 46px;
  }
  .table-wrap {
    margin-inline: -4px;
    border-radius: 12px;
  }
  .page-hero {
    padding-top: calc(24px + var(--mxo-safe-top));
  }
}

@media (max-width: 480px) {
  .brand-tagline { display: block; }
  .header-actions { display: none !important; }
  .max-w-7xl {
    padding-left: max(12px, var(--mxo-safe-left));
    padding-right: max(12px, var(--mxo-safe-right));
  }
  .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
  .section-title,
  .font-serif.text-4xl {
    font-size: clamp(1.55rem, 7.5vw, 2rem) !important;
  }
}

/* —— Learning Center —— */
.sl-body {
  padding-left: var(--mxo-safe-left);
  padding-right: var(--mxo-safe-right);
}
@media (max-width: 900px) {
  body.sl-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  .sl-side {
    padding-top: var(--mxo-safe-top);
    padding-bottom: var(--mxo-safe-bottom);
    width: min(320px, 90vw) !important;
  }
  .sl-menu, .sl-iconbtn, .sl-profile {
    min-width: 42px;
    min-height: 42px;
  }
  .sl-top {
    padding-top: max(10px, var(--mxo-safe-top));
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .sl-wrap {
    padding-bottom: calc(24px + var(--mxo-safe-bottom));
  }
  .sl-table-wrap,
  .sl-card {
    max-width: 100%;
  }
  .sl-table td {
    gap: 12px;
    flex-wrap: wrap;
  }
  .sl-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #5c6573;
    margin-right: auto;
  }
  .sl-pageh {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sl-pageh .btn,
  .sl-pageh a.btn-gold,
  .sl-pageh a.btn-navy {
    width: 100%;
    justify-content: center;
  }
  .sl-stage {
    width: 100% !important;
  }
  .sl-learn-actions .btn,
  .sl-learn-actions a {
    flex: 1 1 140px;
    justify-content: center;
    min-height: 44px;
  }
  .sl-account-menu,
  .sl-drop-menu {
    right: 0;
    left: auto;
    max-width: min(92vw, 320px);
  }
  .sl-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sl-foot a { margin-left: 0; margin-right: 12px; }
}

@media (max-width: 640px) {
  .sl-kpis { grid-template-columns: 1fr 1fr !important; }
  .sl-kpi { padding: 12px; }
  .sl-hub-grid { grid-template-columns: 1fr 1fr; }
  .sl-access-grid { grid-template-columns: 1fr !important; }
  .sl-form input,
  .sl-form select,
  .sl-form textarea {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .sl-kpis { grid-template-columns: 1fr !important; }
  .sl-hub-grid { grid-template-columns: 1fr; }
}

/* —— Command Center —— */
.cc-body {
  padding-left: var(--mxo-safe-left);
  padding-right: var(--mxo-safe-right);
}
@media (max-width: 900px) {
  body.cc-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  .cc-side {
    padding-top: var(--mxo-safe-top);
    padding-bottom: var(--mxo-safe-bottom);
    width: min(320px, 90vw) !important;
  }
  .cc-menu, .cc-iconbtn, .cc-profile {
    min-width: 42px;
    min-height: 42px;
  }
  .cc-top {
    padding-top: max(10px, var(--mxo-safe-top));
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .cc-body-wrap {
    padding-bottom: calc(24px + var(--mxo-safe-bottom));
  }
  .cc-table-wrap {
    -webkit-overflow-scrolling: touch;
    margin-inline: -2px;
  }
  .cc-pageh {
    flex-direction: column;
    align-items: stretch !important;
  }
  .cc-pageh .btn,
  .cc-pageh a.btn-gold,
  .cc-pageh a.btn-navy,
  .cc-pageh button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .cc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .cc-tabs a { flex: none; white-space: nowrap; }
  .cc-account-menu,
  .cc-drop-menu {
    right: 0;
    left: auto;
    max-width: min(92vw, 320px);
  }
  .cc-form input,
  .cc-form select,
  .cc-form textarea,
  .form input,
  .form select,
  .form textarea {
    font-size: 16px;
  }
  .cc-lesson {
    flex-wrap: wrap;
    padding-left: 14px;
  }
  .cc-lesson-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .cc-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .cc-kpis { grid-template-columns: 1fr 1fr !important; }
  .cc-hub-grid { grid-template-columns: 1fr 1fr; }
  .cc-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; }
}

@media (max-width: 380px) {
  .cc-kpis { grid-template-columns: 1fr !important; }
  .cc-hub-grid { grid-template-columns: 1fr; }
}

/* —— Programme detail —— */
@media (max-width: 640px) {
  .pd-hero h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .pd-tabs { gap: 6px; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-mod-row summary { gap: 8px; padding: 12px 10px; }
  .pd-lesson-rows { padding-left: 16px; }
  .pd-cta h2 { font-size: 1.55rem; }
}

/* —— Developer contact FAB —— */
@media (max-width: 640px) {
  .topford-dev-fab,
  .brynathyn-dev-fab,
  [data-dev-contact-fab] {
    right: max(12px, var(--mxo-safe-right)) !important;
    bottom: max(12px, var(--mxo-safe-bottom)) !important;
  }
}