/* ═══════════════════════════════════════════════════════════════════
   Mark VII Technical Academy — PUBLIC site design
   Mirrors www.markvii.net: dark navy header zone, floating pill nav
   with dropdown overlays, bold hero with gradient-shift headlines,
   white content sections, navy footer.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy: #123253;          /* corporate --color-blue-dark */
  --navy-deep: #0b1f36;
  --corp-blue: #126eb6;     /* corporate --color-nice-blue */
  --corp-cyan: #5dc2d5;
  --royal: #1d4ed8;
  --violet: #7c3aed;
  --corp-orange: #7c3aed;   /* corporate CTA accent — used ONCE per page max */
  --grad-text: linear-gradient(90deg, #123253 0%, #1d4ed8 45%, #7c3aed 100%);
  --grad-text-light: linear-gradient(90deg, #ffffff 0%, #bfdbfe 55%, #c4b5fd 100%);
  --pub-bg: #ffffff;
  --pub-section: #eef1f5;   /* corporate light-grey section band */
  --pub-text: #123253;
  --pub-text-2: #47586c;
  --pub-border: #dde4ec;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
}

.mvii-public * { box-sizing: border-box; }
body.mvii-public {
  margin: 0;
  font-family: var(--font-body);
  background: var(--pub-bg);
  color: var(--pub-text);
  -webkit-font-smoothing: antialiased;
}
.mvii-public h1, .mvii-public h2, .mvii-public h3, .mvii-public h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--navy);
}
.mvii-public a { color: var(--corp-blue); }
/* <a>-based buttons must keep their own label colors */
.mvii-public a.pub-btn { text-decoration: none; }
.mvii-public a.pub-btn-primary, .mvii-public a.pub-btn-orange { color: #fff; }
.mvii-public a.pub-btn-light { color: var(--navy); }
.mvii-public a.pub-btn-outline { color: #fff; }

/* ── Header zone (dark, sits above hero like markvii.net) ────────── */
.pub-header {
  position: relative; z-index: 200;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, #1b4a7a 100%);
  padding: 0 clamp(16px, 4vw, 56px);
}
.pub-header-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; gap: 18px;
}
.pub-logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.pub-logo-mark {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff;
}
.pub-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.pub-logo-name { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }
.pub-logo-sub { color: rgba(255,255,255,.7); font-size: 12px; text-transform: uppercase; letter-spacing: .24em; display: block; margin-top: 2px; }
.pub-utility { display: flex; align-items: center; gap: 18px; }
.pub-utility a {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; font-weight: 500;
}
.pub-utility a:hover { color: #fff; }
.pub-utility .pub-login-btn {
  background: var(--corp-blue); color: #fff; padding: 7px 18px; border-radius: 999px;
  font-weight: 600; transition: background .18s;
}
.pub-utility .pub-login-btn:hover { background: #0f5c99; }

/* Floating pill nav (the markvii.net signature) */
.pub-navwrap { padding-bottom: 24px; position: relative; }
.pub-nav {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 5px;
  max-width: 1100px;
  margin: 0 auto;                 /* centered like markvii.net */
  box-shadow: 0 6px 24px rgba(11, 31, 54, .25);
}
.pub-nav-item { position: relative; }
.pub-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 26px; border-radius: 999px;
  color: var(--navy); text-decoration: none;
  font-size: 16px; font-weight: 600;
  transition: background .15s, color .15s;
  white-space: nowrap; border: none; background: none; cursor: pointer;
  font-family: var(--font-body);
}
.pub-nav-link:hover, .pub-nav-item.open > .pub-nav-link { background: var(--navy); color: #fff; }
.pub-nav-link.active { background: var(--corp-blue); color: #fff; }
.pub-nav-caret { font-size: 9px; opacity: .6; }

/* Dropdown: full-width translucent navy overlay running the length of the
   nav bar — mirrors the markvii.net mega-menu treatment */
.pub-nav-item { position: static; }
.pub-dd {
  position: absolute; top: calc(100% - 14px); left: 0; right: 0;
  max-width: 1100px; margin: 0 auto;
  background: rgba(11, 31, 54, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 26px 60px rgba(11,31,54,.4);
  padding: 26px 34px 30px;
  display: grid;                                   /* mega-menu columns */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px 26px; align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 190;
}
.pub-nav-item.open > .pub-dd, .pub-nav-item:hover > .pub-dd {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.pub-dd a {
  display: block; padding: 13px 12px;
  color: #fff; text-decoration: none; font-size: 17px; font-weight: 600;
  border-radius: 10px;
  font-family: var(--font-display);
}
.pub-dd a span { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.65); margin-top: 3px; font-family: var(--font-body); }
.pub-dd a:hover { background: rgba(255,255,255,.1); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .pub-nav { flex-wrap: wrap; border-radius: 20px; max-width: none; }
  .pub-dd { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding: 4px 0 8px 16px; border-radius: 12px; }
  .pub-nav-item.open > .pub-dd { display: grid; grid-template-columns: 1fr; }
}

/* ── Hero (interactive overlay banner) ───────────────────────────── */
.pub-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 45%, #1b4a7a 78%, #3b2f77 100%);
  color: #fff;
  padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 56px);
  margin-top: -1px;
}
/* animated sheen — the "interactive" light movement over the banner */
.pub-hero::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(ellipse 42% 55% at var(--mx, 70%) var(--my, 35%),
              rgba(93,194,213,.16) 0%, rgba(29,78,216,.10) 45%, transparent 70%);
  transition: background .2s;
  pointer-events: none;
}
.pub-hero::after {
  content: ''; position: absolute; left: -30%; top: 0; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.045) 50%, transparent 70%);
  animation: pub-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pub-sheen { 0%,100% { transform: translateX(0); } 50% { transform: translateX(160%); } }
.pub-hero-inner { position: relative; max-width: 1100px; }
.pub-hero h1 {
  margin: 0 0 14px; color: #fff;
  font-size: clamp(34px, 5.4vw, 62px); font-weight: 700; line-height: 1.08;
}
.pub-hero h1 .grad {
  background: var(--grad-text-light);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pub-hero p { margin: 0 0 30px; max-width: 680px; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.65; color: rgba(255,255,255,.85); }
.pub-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.pub-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pub-btn-primary { background: var(--corp-blue); color: #fff; }
.pub-btn-primary:hover { background: #0f5c99; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18,110,182,.4); }
.pub-btn-light { background: #fff; color: var(--navy); }
.pub-btn-light:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,255,255,.22); }
.pub-btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.pub-btn-outline:hover { box-shadow: inset 0 0 0 2px #fff; }
.pub-btn-orange { background: var(--corp-orange); color: #fff; }
.pub-btn-orange:hover { background: #6d28d9; transform: translateY(-2px); }

/* ── Content sections ────────────────────────────────────────────── */
.pub-section { padding: clamp(44px, 7vw, 90px) clamp(16px, 4vw, 56px); }
.pub-section.alt { background: var(--pub-section); }
.pub-section-inner { max-width: 1100px; margin: 0 auto; }
.pub-h2 {
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.15; margin: 0 0 10px;
}
.pub-h2 .grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Gradient-shift: the signature color transition on headline accents.
      Applies to every .grad accent site-wide (hero, section, page titles). ── */
@keyframes pub-grad-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.pub-hero h1 .grad, .pub-h2 .grad, .cf-title .grad, .lgl-title .grad {
  background-size: 220% 100%;
  animation: pub-grad-shift 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pub-hero h1 .grad, .pub-h2 .grad, .cf-title .grad, .lgl-title .grad { animation: none; }
}

/* one-line headline (drops back to wrapping on small screens) */
.pub-h2.oneline { white-space: nowrap; font-size: clamp(17px, 2.45vw, 34px); }
@media (max-width: 700px) { .pub-h2.oneline { white-space: normal; } }
.pub-lede { font-size: 17.5px; color: var(--pub-text-2); line-height: 1.7; max-width: 760px; margin: 0 0 32px; }

/* Cards (catalog, feature tiles) */
.pub-grid { display: grid; gap: 22px; }
.pub-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pub-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .pub-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .pub-grid-3, .pub-grid-2 { grid-template-columns: 1fr; } }

.pub-card {
  background: #fff; border: 1px solid var(--pub-border); border-radius: 18px;
  padding: 26px;
  transition: transform .18s, box-shadow .18s;
}
.pub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18,50,83,.12); }
.pub-card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  background: linear-gradient(120deg, var(--navy), var(--corp-blue));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.pub-card-icon svg { width: 22px; height: 22px; }
.pub-card h3 { margin: 0 0 6px; font-size: 19px; }
.pub-card .sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--corp-blue); margin: 0 0 8px; }
.pub-card p { margin: 0; font-size: 14.5px; color: var(--pub-text-2); line-height: 1.65; }
.pub-card .pub-card-link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--corp-blue); text-decoration: none; }
.pub-card .pub-card-link:hover { text-decoration: underline; }

/* ── Forms (public request/enrollment forms) ─────────────────────── */
.pub-form-card {
  background: #fff; border: 1px solid var(--pub-border); border-radius: 18px;
  padding: clamp(22px, 4vw, 40px); max-width: 860px; margin: 0 auto;
  box-shadow: 0 10px 34px rgba(18,50,83,.08);
}
.pub-field { margin-bottom: 16px; }
.pub-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.pub-input, .pub-select, .pub-textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--pub-border); border-radius: 10px;
  font-family: var(--font-body); font-size: 14.5px; color: var(--pub-text);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pub-input:focus, .pub-select:focus, .pub-textarea:focus {
  outline: none; border-color: var(--corp-blue); box-shadow: 0 0 0 3px rgba(18,110,182,.15);
}
.pub-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pub-form-row { grid-template-columns: 1fr; } }

/* ── Footer ──────────────────────────────────────────────────────── */
.pub-footer {
  background: var(--navy-deep); color: rgba(255,255,255,.75);
  padding: 40px clamp(16px, 4vw, 56px) 28px;
  font-size: 13.5px;
}
.pub-footer-inner { max-width: 1100px; margin: 0 auto; }
.pub-footer-top { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pub-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.pub-footer a { color: rgba(255,255,255,.75); text-decoration: none; display: block; padding: 3px 0; }
.pub-footer a:hover { color: #fff; }
.pub-footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 18px; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* legacy element cleanup on public pages */
body.mvii-public .navbar, body.mvii-public .topbar, body.mvii-public .auth-nav { display: none !important; }

/* "Coming soon" marker for features not yet live (strict palette: violet) */
.pub-soon {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(124,58,237,.12); color: #5b21b6;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-family: var(--font-body);
}
.pub-card.soon { opacity: .92; }
.pub-card.soon .pub-card-link { color: var(--pub-text-2); pointer-events: none; }