/**
 * shadcn front theme — public marketing site.
 *
 * Sibling of the "Daftari" login design: Bricolage Grotesque display,
 * Public Sans body, IBM Plex Mono for registry numbers, the college's own
 * colour arriving through the --ss-* tokens (tokens.css + theme_vars.php).
 * Every colour is var(--ss-token, #hex) so the page renders correctly even
 * if a token sheet fails to load. The two deliberate literals are the
 * daftari margin-rule red (#c0453a) — a fixed motif, like the state
 * colours, not a brand value — and white-on-ink text.
 *
 * Constraints (HANDOFF.md): no color-mix(), no CSS nesting, no oklch() —
 * old Android WebView. Dark values come free from tokens.css; the ink
 * surfaces (topbar, CTA band, footer, hero fallback) are the same in both
 * modes, exactly like the login ground.
 */

:root {
  --sf-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --sf-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sf-margin-rule: #c0453a;
  --sf-container: 1160px;
}

/* ---------------------------------------------------------------- base */

html {
  -webkit-text-size-adjust: 100%;
}

body.sf {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ss-foreground, #17111a);
  background: var(--ss-background, #ffffff);
  -webkit-font-smoothing: antialiased;
}

body.sf h1,
body.sf h2,
body.sf h3,
body.sf h4 {
  font-family: var(--sf-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ss-foreground, #17111a);
  margin: 0 0 12px;
}

body.sf a {
  color: var(--ss-primary, #832b6c);
  text-decoration: none;
}

body.sf a:hover,
body.sf a:focus {
  color: var(--ss-primary-hover, #6d2459);
  text-decoration: none;
}

body.sf img {
  max-width: 100%;
  height: auto;
}

body.sf :focus-visible {
  outline: 2px solid var(--ss-ring, #832b6c);
  outline-offset: 2px;
}

.sf-container {
  max-width: var(--sf-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------- buttons */

.sf-btn {
  display: inline-block;
  font-family: var(--sf-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--ss-radius, 0.625rem);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-align: center;
  white-space: nowrap;
}

body.sf .sf-btn.sf-btn--primary {
  background: var(--ss-primary, #832b6c);
  color: var(--ss-primary-foreground, #ffffff);
}

body.sf .sf-btn.sf-btn--primary:hover,
body.sf .sf-btn.sf-btn--primary:focus {
  background: var(--ss-primary-hover, #6d2459);
  color: var(--ss-primary-foreground, #ffffff);
}

body.sf .sf-btn.sf-btn--ghost {
  background: transparent;
  color: var(--ss-foreground, #17111a);
  border-color: var(--ss-border, #e8e4ea);
}

body.sf .sf-btn.sf-btn--ghost:hover,
body.sf .sf-btn.sf-btn--ghost:focus {
  border-color: var(--ss-primary, #832b6c);
  color: var(--ss-primary, #832b6c);
  background: var(--ss-primary-soft, #f6ecf3);
}

/* On ink surfaces (CTA band, hero fallback) */
body.sf .sf-btn.sf-btn--light {
  background: #ffffff;
  color: var(--ss-primary-dark, #521b44);
}

body.sf .sf-btn.sf-btn--light:hover,
body.sf .sf-btn.sf-btn--light:focus {
  background: var(--ss-primary-soft, #f6ecf3);
  color: var(--ss-primary-dark, #521b44);
}

body.sf .sf-btn.sf-btn--outline-light {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

body.sf .sf-btn.sf-btn--outline-light:hover,
body.sf .sf-btn.sf-btn--outline-light:focus {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------- topbar */

.sf-topbar {
  background: var(--ss-ground-2, #170812);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.sf-topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 4px 0;
}

body.sf .sf-topbar a {
  color: rgba(255, 255, 255, 0.82);
}

body.sf .sf-topbar a:hover,
body.sf .sf-topbar a:focus {
  color: #ffffff;
}

.sf-topbar-contacts,
.sf-topbar-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.sf-topbar .fa {
  margin-right: 6px;
  opacity: 0.75;
}

.sf-topbar-links .sf-theme-toggle a {
  display: inline-block;
  padding: 2px 4px;
}

/* ----------------------------------------------------------------- nav */

.sf-nav {
  background: var(--ss-card, #ffffff);
  border-bottom: 1px solid var(--ss-border, #e8e4ea);
  position: sticky;
  top: 0;
  z-index: 200;
}

.sf-nav--scrolled {
  box-shadow: var(--ss-shadow-pop, 0 4px 16px -2px rgba(23, 17, 26, 0.12));
}

.sf-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 20px;
}

.sf-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sf-logo img {
  max-height: 52px;
  width: auto;
}

.sf-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-menu > li {
  position: relative;
}

.sf-menu > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ss-foreground, #17111a);
  border-radius: var(--ss-radius-xs, 0.375rem);
}

.sf-menu > li > a:hover,
.sf-menu > li > a:focus {
  color: var(--ss-primary, #832b6c);
  background: var(--ss-accent, #f7f5f8);
}

.sf-menu > li.sf-active > a {
  color: var(--ss-primary, #832b6c);
  background: var(--ss-primary-soft, #f6ecf3);
}

.sf-menu .sf-caret {
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.6;
}

.sf-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--ss-card, #ffffff);
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius, 0.625rem);
  box-shadow: var(--ss-shadow-pop, 0 4px 16px -2px rgba(23, 17, 26, 0.12));
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  display: none;
  z-index: 210;
}

.sf-menu li.sf-open > .sf-submenu {
  display: block;
}

@media (min-width: 961px) {
  .sf-menu li:hover > .sf-submenu {
    display: block;
  }
}

body.sf .sf-submenu a {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ss-foreground, #17111a);
  border-radius: var(--ss-radius-xs, 0.375rem);
}

body.sf .sf-submenu a:hover,
body.sf .sf-submenu a:focus {
  background: var(--ss-accent, #f7f5f8);
  color: var(--ss-primary, #832b6c);
}

.sf-nav-cta {
  flex-shrink: 0;
}

/* Duplicate CTA inside the collapsible menu — mobile only */
.sf-nav-cta--menu {
  display: none;
}

.sf-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius-xs, 0.375rem);
  padding: 9px 12px;
  color: var(--ss-foreground, #17111a);
  font-size: 17px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero */

.sf-hero {
  background: var(--ss-background, #ffffff);
  padding: 56px 0 0;
}

.sf-hero-in {
  display: flex;
  align-items: center;
  gap: 48px;
}

.sf-hero-copy {
  flex: 1 1 50%;
  min-width: 0;
}

.sf-hero-media {
  flex: 1 1 45%;
  min-width: 0;
}

.sf-eyebrow {
  font-family: var(--sf-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-primary, #832b6c);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--sf-margin-rule);
}

.sf-hero-title {
  font-size: 40px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  margin: 0 0 18px;
}

.sf-hero-sub {
  font-size: 18px;
  color: var(--ss-muted-foreground, #6f6577);
  max-width: 34em;
  margin: 0 0 28px;
}

.sf-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Photo collage — two offset columns, bizspace-style */
.sf-collage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sf-collage-col {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sf-collage-col--offset {
  padding-top: 40px;
}

.sf-collage img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--ss-radius, 0.625rem);
  border: 1px solid var(--ss-border, #e8e4ea);
}

.sf-collage-col--offset img {
  min-height: 180px;
  max-height: 420px;
}

.sf-collage-col img {
  min-height: 120px;
  max-height: 210px;
}

.sf-collage-col--offset img:only-child {
  max-height: 440px;
  min-height: 320px;
}

/* Hero fallback when the school has uploaded no banner photos yet:
   the login's ink ground with the school logo on paper. Never blank. */
.sf-hero-ground {
  position: relative;
  border-radius: var(--ss-radius, 0.625rem);
  min-height: 340px;
  background: var(--ss-ground-2, #170812);
  background: linear-gradient(155deg, var(--ss-ground-1, #3c1332) 0%, var(--ss-ground-2, #170812) 78%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-hero-ground::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(closest-side, var(--ss-ground-glow, #5a2049) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
}

.sf-hero-ground img {
  position: relative;
  max-height: 120px;
  max-width: 60%;
  background: #ffffff;
  padding: 18px 26px;
  border-radius: var(--ss-radius, 0.625rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------- stats band (signature)
   A ledger row: mono numerals sitting on a ruled line, the daftari red
   margin rule down the left — the school's registry, in public. */

.sf-stats {
  margin: 26px 0 0;
  transform: translateY(50%);
}

.sf-stats-in {
  display: flex;
  background: var(--ss-card, #ffffff);
  border: 1px solid var(--ss-border, #e8e4ea);
  border-left: 3px solid var(--sf-margin-rule);
  border-radius: var(--ss-radius, 0.625rem);
  box-shadow: var(--ss-shadow-pop, 0 4px 16px -2px rgba(23, 17, 26, 0.12));
  overflow: hidden;
}

.sf-stat {
  flex: 1 1 25%;
  padding: 22px 26px 18px;
  border-left: 1px solid var(--ss-border, #e8e4ea);
  min-width: 0;
}

.sf-stat:first-child {
  border-left: none;
}

.sf-stat-value {
  font-family: var(--sf-mono);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ss-foreground, #17111a);
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ss-border, #e8e4ea);
  font-variant-numeric: tabular-nums;
}

.sf-stat-label {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-muted-foreground, #6f6577);
}

/* When the stats band is present it overlaps into the next section */
.sf-hero--with-stats {
  padding-bottom: 0;
}

.sf-after-stats {
  padding-top: 110px;
}

/* ------------------------------------------------------------- sections */

.sf-section {
  padding: 72px 0;
}

.sf-section--muted {
  background: var(--ss-muted, #f7f5f8);
}

.sf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.sf-section-title {
  font-size: 30px;
  margin: 0;
}

.sf-section-link {
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- cards */

.sf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sf-grid > * {
  flex: 1 1 280px;
  min-width: 0;
}

.sf-card {
  background: var(--ss-card, #ffffff);
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius, 0.625rem);
  box-shadow: var(--ss-shadow, 0 1px 2px 0 rgba(23, 17, 26, 0.05));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.sf-card:hover {
  box-shadow: var(--ss-shadow-pop, 0 4px 16px -2px rgba(23, 17, 26, 0.12));
  border-color: var(--ss-ring, #832b6c);
}

body.sf .sf-card-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-bottom: 1px solid var(--ss-border, #e8e4ea);
}

.sf-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.sf-card-title {
  font-size: 17px;
  margin: 0 0 8px;
}

body.sf .sf-card-title a {
  color: var(--ss-foreground, #17111a);
}

body.sf .sf-card-title a:hover,
body.sf .sf-card-title a:focus {
  color: var(--ss-primary, #832b6c);
}

.sf-card-text {
  font-size: 14.5px;
  color: var(--ss-muted-foreground, #6f6577);
  margin: 0 0 14px;
}

.sf-card-meta {
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ss-primary, #832b6c);
  margin: 0 0 8px;
}

.sf-card-foot {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
}

/* Course cards get a mono index — a course register */
.sf-course-index {
  font-family: var(--sf-mono);
  font-size: 12.5px;
  color: var(--ss-muted-foreground, #6f6577);
  display: block;
  margin-bottom: 10px;
}

/* News list (right column of the events row) */
.sf-newslist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-newslist li {
  border-bottom: 1px solid var(--ss-border, #e8e4ea);
  padding: 14px 0;
}

.sf-newslist li:first-child {
  padding-top: 0;
}

body.sf .sf-newslist a {
  color: var(--ss-foreground, #17111a);
  font-weight: 500;
  display: block;
}

body.sf .sf-newslist a:hover,
body.sf .sf-newslist a:focus {
  color: var(--ss-primary, #832b6c);
}

.sf-newslist .sf-date {
  font-family: var(--sf-mono);
  font-size: 12px;
  color: var(--ss-muted-foreground, #6f6577);
  display: block;
  margin-bottom: 3px;
}

.sf-split {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.sf-split-main {
  flex: 1 1 62%;
  min-width: 0;
}

.sf-split-side {
  flex: 1 1 32%;
  min-width: 0;
}

/* --------------------------------------------------------------- gallery */

.sf-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sf-gallery a {
  flex: 1 1 200px;
  display: block;
  border-radius: var(--ss-radius, 0.625rem);
  overflow: hidden;
  border: 1px solid var(--ss-border, #e8e4ea);
  min-width: 0;
}

body.sf .sf-gallery img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  transition: transform 0.18s ease;
}

body.sf .sf-gallery a:hover img {
  transform: scale(1.03);
}

/* -------------------------------------------------------------- CTA band */

.sf-cta-band {
  background: var(--ss-ground-2, #170812);
  background: linear-gradient(155deg, var(--ss-ground-1, #3c1332) 0%, var(--ss-ground-2, #170812) 80%);
  color: #ffffff;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.sf-cta-band::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 130%;
  background: radial-gradient(closest-side, var(--ss-ground-glow, #5a2049) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.85;
}

.sf-cta-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.sf-cta-band .sf-eyebrow {
  color: #ffffff;
  opacity: 0.85;
}

body.sf .sf-cta-title {
  color: #ffffff;
  font-size: 30px;
  margin: 0 0 8px;
}

body.sf .sf-cta-text {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 36em;
}

.sf-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- footer */

.sf-footer {
  background: var(--ss-ground-2, #170812);
  color: rgba(255, 255, 255, 0.78);
  padding: 56px 0 0;
  font-size: 14.5px;
}

.sf-footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 44px;
}

.sf-footer-col {
  flex: 1 1 220px;
  min-width: 0;
}

.sf-footer-col--brand {
  flex: 1.4 1 260px;
}

body.sf .sf-footer h3 {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sf-mono);
  font-weight: 500;
  margin: 0 0 16px;
}

body.sf .sf-footer a {
  color: rgba(255, 255, 255, 0.78);
}

body.sf .sf-footer a:hover,
body.sf .sf-footer a:focus {
  color: #ffffff;
}

.sf-footer-logo img {
  max-height: 46px;
  width: auto;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: var(--ss-radius-xs, 0.375rem);
  margin-bottom: 14px;
}

.sf-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-footer ul li {
  margin-bottom: 9px;
}

.sf-footer .co-ico {
  margin-right: 9px;
  opacity: 0.6;
}

.sf-social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

body.sf .sf-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

body.sf .sf-social a:hover,
body.sf .sf-social a:focus {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.sf-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 18px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.sf-copy p {
  margin: 0;
}

/* ------------------------------------------------------------ inner pages */

.sf-page-band {
  background: var(--ss-muted, #f7f5f8);
  border-bottom: 1px solid var(--ss-border, #e8e4ea);
  padding: 40px 0;
}

.sf-page-band h1 {
  margin: 0;
  font-size: 32px;
}

.sf-page-band .sf-eyebrow {
  margin-bottom: 10px;
}

.sf-page-body {
  padding: 48px 0 72px;
}

/* CMS-authored HTML — style what the editor produces */
.sf-prose {
  max-width: 78em;
}

/* The form-builder emits a floated form ("form-horizontal col-sm-12") and
   Bootstrap floats inside CMS content; contain them so the page keeps its
   height and the footer never wraps around the fields. */
.sf-prose::after,
.sf-page-body .sf-container::after {
  content: "";
  display: block;
  clear: both;
}

body.sf .sf-footer {
  clear: both;
}

.sf-prose p {
  margin: 0 0 16px;
}

.sf-prose h1,
.sf-prose h2 {
  font-size: 26px;
  margin: 28px 0 14px;
}

.sf-prose h3,
.sf-prose h4 {
  font-size: 20px;
  margin: 24px 0 12px;
}

.sf-prose ul,
.sf-prose ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.sf-prose img {
  border-radius: var(--ss-radius, 0.625rem);
}

.sf-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
}

.sf-prose table td,
.sf-prose table th {
  border: 1px solid var(--ss-border, #e8e4ea);
  padding: 8px 12px;
}

.sf-prose blockquote {
  border-left: 3px solid var(--sf-margin-rule);
  margin: 0 0 16px;
  padding: 4px 0 4px 18px;
  color: var(--ss-muted-foreground, #6f6577);
}

/* Bootstrap-3 form-builder forms (contact us / complain) inside prose.
   site.css loads after bootstrap.min.css, so equal-specificity rules win. */
body.sf .form-control {
  height: 42px;
  border: 1px solid var(--ss-input, #e8e4ea);
  border-radius: var(--ss-radius-sm, 0.5rem);
  box-shadow: none;
  color: var(--ss-foreground, #17111a);
  background: var(--ss-card, #ffffff);
  font-size: 14.5px;
}

body.sf textarea.form-control {
  height: auto;
}

body.sf .form-control:focus {
  border-color: var(--ss-ring, #832b6c);
  box-shadow: 0 0 0 3px var(--ss-primary-soft, #f6ecf3);
}

body.sf .control-label {
  color: var(--ss-foreground, #17111a);
  font-weight: 500;
}

body.sf .btn-primary {
  background: var(--ss-primary, #832b6c);
  border-color: var(--ss-primary, #832b6c);
  color: var(--ss-primary-foreground, #ffffff);
  border-radius: var(--ss-radius-sm, 0.5rem);
  padding: 9px 22px;
}

body.sf .btn-primary:hover,
body.sf .btn-primary:focus,
body.sf .btn-primary:active {
  background: var(--ss-primary-hover, #6d2459);
  border-color: var(--ss-primary-hover, #6d2459);
}

body.sf .alert-success {
  background: var(--ss-success-bg, #f1f8e9);
  border-color: var(--ss-success-border, #cfe3b4);
  color: var(--ss-success, #4d7d22);
  border-radius: var(--ss-radius-sm, 0.5rem);
}

body.sf .alert-danger {
  background: var(--ss-danger-bg, #fdf2f4);
  border-color: var(--ss-danger-border, #f3c9d2);
  color: var(--ss-danger, #c81e40);
  border-radius: var(--ss-radius-sm, 0.5rem);
}

/* AJAX pagination links */
body.sf .pagination > li > a,
body.sf .pagination > li > span {
  color: var(--ss-primary, #832b6c);
  border-color: var(--ss-border, #e8e4ea);
  background: var(--ss-card, #ffffff);
}

body.sf .pagination > .active > a,
body.sf .pagination > .active > span {
  background: var(--ss-primary, #832b6c);
  border-color: var(--ss-primary, #832b6c);
  color: var(--ss-primary-foreground, #ffffff);
}

/* Article detail */
.sf-article-meta {
  font-family: var(--sf-mono);
  font-size: 13px;
  color: var(--ss-muted-foreground, #6f6577);
  margin: 0 0 20px;
}

body.sf .sf-article-feature {
  border-radius: var(--ss-radius, 0.625rem);
  margin-bottom: 26px;
  max-height: 440px;
  object-fit: cover;
  width: 100%;
}

/* Application chooser (pages/apply): start-new vs continue cards */
.sf-apply-wrap {
  padding: 40px 0 64px;
}

.sf-choice {
  display: flex;
  gap: 28px;
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}

.sf-choice-card {
  flex: 1 1 50%;
  min-width: 0;
}

.sf-choice-body {
  padding: 28px 30px 30px;
}

.sf-choice-title {
  font-size: 23px;
  margin: 0 0 10px;
}

.sf-choice-foot {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 900px) {
  .sf-choice {
    flex-direction: column;
  }
}

/* -------------------------------------------------------- cookie consent */

body.sf .cookieConsent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  background: var(--ss-card, #ffffff);
  color: var(--ss-foreground, #17111a);
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius, 0.625rem);
  box-shadow: var(--ss-shadow-pop, 0 4px 16px -2px rgba(23, 17, 26, 0.12));
  padding: 16px 20px;
  font-size: 14px;
  display: none;
}

body.sf .cookieConsentOK {
  display: inline-block;
  margin-left: 12px;
  background: var(--ss-primary, #832b6c);
  color: var(--ss-primary-foreground, #ffffff);
  padding: 7px 18px;
  border-radius: var(--ss-radius-sm, 0.5rem);
  cursor: pointer;
  font-weight: 600;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .sf-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 960px) {
  .sf-nav-toggle {
    display: block;
  }

  .sf-nav-in {
    flex-wrap: wrap;
  }

  .sf-nav-menu {
    display: none;
    width: 100%;
    order: 4;
    padding-bottom: 14px;
  }

  .sf-nav--open .sf-nav-menu {
    display: block;
  }

  .sf-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .sf-submenu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--ss-border, #e8e4ea);
    border-radius: 0;
    margin: 0 0 0 14px;
    padding: 0;
  }

  .sf-nav-cta {
    display: none;
  }

  .sf-nav-cta--menu {
    display: block;
    margin-top: 12px;
  }

  .sf-hero-in {
    flex-direction: column;
    gap: 36px;
  }

  .sf-stats {
    transform: none;
    margin: 40px 0 0;
  }

  .sf-after-stats {
    padding-top: 72px;
  }

  .sf-stats-in {
    flex-wrap: wrap;
  }

  .sf-stat {
    flex: 1 1 45%;
  }

  .sf-stat:nth-child(3) {
    border-left: none;
  }

  .sf-stat:nth-child(3),
  .sf-stat:nth-child(4) {
    border-top: 1px solid var(--ss-border, #e8e4ea);
  }

  .sf-split {
    flex-direction: column;
    gap: 40px;
  }

  .sf-section {
    padding: 56px 0;
  }
}

@media (max-width: 640px) {
  .sf-topbar-contacts li.sf-optional {
    display: none;
  }

  .sf-hero {
    padding-top: 36px;
  }

  .sf-hero-title {
    font-size: 32px;
  }

  .sf-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sf-collage-col--offset {
    padding-top: 20px;
  }

  .sf-stat {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid var(--ss-border, #e8e4ea);
  }

  .sf-stat:first-child {
    border-top: none;
  }

  .sf-cta-title {
    font-size: 25px;
  }
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  body.sf *,
  body.sf *::before,
  body.sf *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* ------------------------------------------- applicant shell (base_layout)
   The chrome the admission pages get while the Front CMS is off: a slim
   sticky bar and a one-band footer, no CMS menus. Every rule is scoped to
   body.sf-app so it never touches layout.php, and carries the body prefix
   because site.css already claims `body.sf a` / `body.sf h1..h4`. */

body.sf-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

body.sf-app .sf-app-main {
  flex: 1 0 auto;
  padding: 32px 0 56px;
}

/* --- top bar */

body.sf-app .sf-nav--app .sf-nav-in {
  min-height: 64px;
  gap: 12px;
  flex-wrap: nowrap;
}

body.sf-app .sf-app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

body.sf-app .sf-app-crest {
  max-height: 44px;
  width: auto;
  flex-shrink: 0;
}

body.sf-app .sf-app-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

body.sf-app .sf-app-school {
  font-family: var(--sf-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ss-foreground, #17111a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.sf-app .sf-app-eyebrow {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-primary, #832b6c);
  margin-top: 3px;
}

body.sf-app .sf-app-links {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

body.sf-app .sf-app-links > li > a:not(.sf-btn) {
  display: inline-block;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--ss-muted-foreground, #6f6577);
}

body.sf-app .sf-app-links > li > a:not(.sf-btn):hover,
body.sf-app .sf-app-links > li > a:not(.sf-btn):focus {
  color: var(--ss-primary, #832b6c);
}

body.sf-app .sf-app-links .fa {
  margin-right: 5px;
  opacity: 0.8;
}

body.sf .sf-btn.sf-btn--sm {
  padding: 9px 14px;
  font-size: 13.5px;
}

/* The toggle partial is shared with the topbar, whose rule is scoped to
   .sf-topbar-links; here it sits on the light bar. */
body.sf-app .sf-app-links .sf-theme-toggle a {
  display: inline-block;
  padding: 6px 8px;
  font-size: 16px;
  color: var(--ss-foreground, #17111a);
}

/* Sticky asides were tuned for the 74px CMS bar. */
body.sf-app .sfw-aside,
body.sf-app .sfd-rail {
  top: 84px;
}

/* --- footer */

body.sf-app .sf-app-footer {
  padding: 32px 0 0;
  font-size: 14px;
}

body.sf-app .sf-app-footer-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 40px;
  padding-bottom: 24px;
}

body.sf-app .sf-app-footer-brand strong {
  display: block;
  color: #ffffff;
  font-family: var(--sf-display);
  font-size: 16px;
  margin-bottom: 4px;
}

body.sf-app .sf-app-footer-brand p {
  margin: 0;
}

body.sf-app .sf-app-footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.sf-app .sf-app-footer-contact li {
  margin: 0;
}

/* --- legacy review page (online_admission_review) — still the Inspinia
   template; these were its yellow-theme styles, on tokens. */

body.sf-app .sf-app-main--legacy .entered {
  font-family: var(--sf-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
}

body.sf-app .sf-app-main--legacy .pagetitleh2 {
  background: var(--ss-muted, #f7f5f8);
  border-bottom: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius-xs, 0.375rem) var(--ss-radius-xs, 0.375rem) 0 0;
  margin: 0 0 10px;
  padding: 8px 15px;
  font-size: 15px;
  font-weight: 600;
}

body.sf-app .sf-app-main--legacy .printcontent {
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius, 0.625rem);
  padding: 0 15px;
  margin-bottom: 16px;
  overflow-x: auto;
}

body.sf-app .sf-app-main--legacy .printcontent p {
  margin-bottom: 0;
}

body.sf-app .sf-app-main--legacy .form-group {
  word-break: break-word;
}

body.sf-app .sf-app-main--legacy .reflist {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.sf-app .sf-app-main--legacy .reflist li {
  border: 1px solid var(--ss-border, #e8e4ea);
  border-radius: var(--ss-radius-xs, 0.375rem);
  background: var(--ss-muted, #f7f5f8);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

body.sf-app .sf-app-main--legacy .reflist li span {
  display: block;
  font-family: var(--sf-mono);
  font-weight: 500;
}

body.sf-app .sf-app-main--legacy .statusright {
  float: right;
}

body.sf-app .sf-app-main--legacy .statusimg {
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}

body.sf-app .sf-app-main--legacy .statusimg li {
  display: inline-block;
  text-align: center;
}

body.sf-app .sf-app-main--legacy .statusimg li + li {
  padding-left: 20px;
}

body.sf-app .sf-app-main--legacy .statusimg li img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 5px;
}

body.sf-app .sf-app-main--legacy .statusimg p {
  margin-bottom: 0;
}

body.sf-app .sf-app-main--legacy .btn.printbtndrakgray {
  background: transparent;
  color: var(--ss-foreground, #17111a);
  border-color: var(--ss-border, #e8e4ea);
}

body.sf-app .sf-app-main--legacy .btn.printbtndrakgray:hover,
body.sf-app .sf-app-main--legacy .btn.printbtndrakgray:focus {
  border-color: var(--ss-primary, #832b6c);
  color: var(--ss-primary, #832b6c);
  background: var(--ss-primary-soft, #f6ecf3);
}

body.sf-app .sf-app-main--legacy .spaceb40 {
  padding-bottom: 40px;
}

/* --- responsive */

@media (max-width: 640px) {
  body.sf-app .sf-container {
    padding: 0 16px;
  }

  body.sf-app .sf-app-main {
    padding: 20px 0 40px;
  }

  body.sf-app .sf-app-optional {
    display: none;
  }

  body.sf-app .sf-app-crest {
    max-height: 36px;
  }

  body.sf-app .sf-app-school {
    font-size: 15px;
  }

  body.sf-app .sf-app-footer-in {
    flex-direction: column;
    gap: 14px;
  }

  body.sf-app .sf-app-main--legacy .statusright,
  body.sf-app .sf-app-main--legacy .statusimg {
    float: none;
    margin-top: 10px;
  }
}