/* EM College V31 shared design system. Page-specific layouts belong in their
 * own clearly scoped files; this file contains only reusable global rules. */
:root {
  --em-red: #e2252d;
  --em-red-dark: #bd1720;
  --em-navy: #192a3d;
  --em-ink: #263547;
  --em-muted: #647080;
  --em-page: #eef3f6;
  --em-soft: #f6f8fa;
  --em-white: #fff;
  --em-line: rgba(25, 42, 61, .13);
  --em-width: 1120px;
  --em-space: 72px;
  --em-radius: 16px;
  --em-shadow: 0 12px 30px rgba(15, 39, 66, .08);
  --em-hero-height: 380px;
}

body.emc-v31-wordpress {
  background: var(--em-page);
  color: var(--em-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.emv2-shell,
.emv3-shell,
.wrap,
.em-shell {
  width: min(var(--em-width), calc(100% - 44px));
  margin-inline: auto;
}

.emv2-header { background: var(--em-red); }
.emv2-nav-inner { height: 60px; min-height: 60px; }
.emv2-brand img {
  width: 58px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

/* The legacy homepage stylesheet added a white logo tile. V31 intentionally
 * keeps the original transparent logo treatment on every page. */
body.home .emv2-brand img {
  width: 58px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

.emv2-footer { padding: 34px 22px 0; }
.emv2-footer-grid { gap: 28px; font-size: 14px; line-height: 1.5; }
.emv2-footer h3 { margin-bottom: 10px; font-size: 16px; }
.emv2-footer a,
.emv2-footer p { margin-block: 4px; font-size: 14px; line-height: 1.5; }
.emv2-footer-brand img { width: 62px; }
.emv2-footer-bottom { margin-top: 24px; padding: 12px 0; font-size: 12px; }

.em-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--em-red);
  border-radius: 999px;
  background: var(--em-red);
  color: #fff;
  font-weight: 800;
}
.em-button:hover { background: var(--em-red-dark); border-color: var(--em-red-dark); }

/* Shared bottom CTA: Home, About, FSL and ESL use this single component. */
.em-cta-section { padding: 38px 0; background: var(--em-page); }
.ema-page .em-cta-section { background: var(--em-soft); }
.em-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 34px;
  padding: 30px;
  border-radius: var(--em-radius);
  background: var(--em-red);
  color: #fff;
}
.em-cta-section .em-cta-panel { margin-top: 0; }
.em-cta-panel h2 { margin: 0 0 5px; color: #fff; font-size: 26px; line-height: 1.2; }
.em-cta-panel p { margin: 0; color: rgba(255,255,255,.86); }
.em-cta-panel > a {
  min-width: 160px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #fff;
  text-align: center;
  font-weight: 850;
}
.em-cta-panel > a:hover { background: #fff; color: var(--em-red); }

@media (max-width: 820px) {
  :root { --em-hero-height: 320px; }
  .emv2-brand img { width: 58px; }
}

@media (max-width: 620px) {
  :root { --em-space: 52px; --em-radius: 14px; }
  .emv2-shell,
  .emv3-shell,
  .wrap,
  .em-shell { width: min(var(--em-width), calc(100% - 32px)); }
  .emv2-footer { padding: 30px 18px 0; }
  .em-cta-section { padding: 30px 0; }
  .em-cta-panel { grid-template-columns: 1fr; padding: 26px 22px; text-align: center; }
  .em-cta-panel > a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}