/*
 * VRI public design-system guardrails.
 *
 * This file is intentionally loaded after the page/component stylesheets.
 * It keeps the shared public-facing typography, label treatment, dark teal
 * feature-band treatment, card motion, and form controls consistent across
 * pages while allowing page-specific layout, spacing, imagery, and responsive
 * behavior to remain specialized.
 */

:root {
  --vri-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vri-font-display: "Cormorant Garamond", Georgia, serif;

  --vri-label-bar: linear-gradient(90deg, var(--gold-700), var(--gold-500));

  --vri-feature-band-background:
    linear-gradient(135deg, rgba(4, 76, 89, 0.96), rgba(7, 87, 97, 0.92));
  --vri-feature-band-text: #ffffff;
  --vri-feature-band-muted: rgba(255, 255, 255, 0.82);
  --vri-feature-band-strong: rgba(255, 255, 255, 0.94);
  --vri-feature-band-radius: 34px;
  --vri-feature-band-shadow: 0 28px 64px rgba(4, 76, 89, 0.22);
  --vri-feature-quote-background: rgba(255, 255, 255, 0.08);
  --vri-feature-quote-border: rgba(255, 255, 255, 0.12);

  --vri-feature-button-background: rgba(255, 255, 255, 0.78);
  --vri-feature-button-background-hover: rgba(255, 255, 255, 0.92);
  --vri-feature-button-border: rgba(255, 255, 255, 0.24);
  --vri-feature-button-border-hover: rgba(255, 255, 255, 0.38);
  --vri-feature-button-text: var(--teal-900);

  --vri-card-hover-lift: -8px;

  --vri-form-control-weight: 500;
  --vri-form-choice-weight: 400;
  --vri-form-checkbox-size: 14px;
  --vri-form-radio-size: 16px;
  --vri-form-choice-border: rgba(4, 76, 89, 0.38);
  --vri-form-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239d6f0c' d='M1.5 2h9L6 6.5z'/%3E%3C/svg%3E");
  --vri-form-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' d='M5.45 10.65 2.35 7.55 3.8 6.1 5.45 7.75 10.25 2.95 11.7 4.4Z'/%3E%3C/svg%3E");
}

/* One body/UI typeface everywhere, including native select controls. */
body,
button,
input,
textarea,
select {
  font-family: var(--vri-font-sans);
}

/* Canonical VRI display typography. */
.brand-title,
.footer-brand-title,
.hero-copy h1,
.section-head h2,
.card h3,
.panel h3,
.metric-panel h3,
.project-term__identity h2,
.project-looking-ahead h2 {
  font-family: var(--vri-font-display);
}

/* Labels and controls always use the shared sans-serif face. */
.eyebrow,
.section-label,
.card-label,
.feature-quote strong,
.btn,
.quick-chip,
.pill,
.price-tag {
  font-family: var(--vri-font-sans);
}

/* Gold-bar labels are a single site-wide visual language. */
.section-label::before,
.card-label::before {
  background: var(--vri-label-bar);
}

/*
 * For Mentors uses the same canonical card language as the rest of the public
 * site. Several mentor labels are <p class="card-label"> elements; the more
 * specific rules below prevent generic .card p rules from overriding their
 * label color, spacing, or type scale.
 */
body.mentors-page .grid-2 .card,
body.mentors-page .grid-3 .card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.94));
  border: 1px solid rgba(4, 76, 89, 0.1);
  box-shadow: var(--shadow-sm);
}

body.mentors-page .card .card-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--teal-700);
  font-family: var(--vri-font-sans);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.mentors-page .card .card-label::before {
  width: 26px;
  height: 2px;
  flex: 0 0 26px;
  border-radius: 999px;
  background: var(--vri-label-bar);
}

body.mentors-page .card h3 {
  margin: 0 0 14px;
  color: var(--teal-950);
  font-family: var(--vri-font-display);
  font-size: 2rem;
  line-height: 1;
}

body.mentors-page .card > p:not(.card-label) {
  margin: 0;
  color: var(--muted);
  font-family: var(--vri-font-sans);
  font-size: 1rem;
  line-height: 1.8;
}

body.mentors-page .grid-2 .card:hover,
body.mentors-page .grid-3 .card:hover {
  transform: translateY(var(--vri-card-hover-lift));
  box-shadow: var(--shadow-lg);
  border-color: rgba(4, 76, 89, 0.16);
}

/* Compensation rows remain a pricing component, but share the public card surface. */
body.mentors-page .pricing-row {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.94));
  border: 1px solid rgba(4, 76, 89, 0.1);
  box-shadow: var(--shadow-sm);
}

body.mentors-page .pricing-row strong {
  color: var(--teal-950);
  font-family: var(--vri-font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

body.mentors-page .pricing-row span {
  color: var(--muted);
  font-family: var(--vri-font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
}

/*
 * Universal public-card motion.
 *
 * Older templates opt some cards into pointer-following 3D tilt with data-tilt.
 * The design system deliberately neutralizes those inline transforms so cards
 * never rotate, skew, scale, or chase the cursor. Every standard card-like
 * surface now uses one restrained vertical lift, matching For Mentors.
 */
[data-tilt] {
  transform: none !important;
  transform-style: flat !important;
  will-change: auto !important;
}

.card,
details.faq-card,
.pathway-card,
.pricing-row {
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  details.faq-card:hover,
  .pathway-card:hover,
  .pricing-row:hover,
  [data-tilt]:hover {
    transform: translateY(var(--vri-card-hover-lift)) !important;
    box-shadow: var(--shadow-lg);
    border-color: rgba(4, 76, 89, 0.16);
  }

  /* Pathway cards previously added scale on hover/focus; keep motion vertical only. */
  .pathway-card:focus-visible {
    transform: translateY(var(--vri-card-hover-lift)) !important;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .card:hover,
  details.faq-card:hover,
  .pathway-card:hover,
  .pricing-row:hover,
  [data-tilt]:hover {
    transform: none !important;
  }
}

/*
 * Canonical dark teal informational band.
 * Page-specific CSS may adjust width, grid columns, or spacing, but it should
 * not create a second color/radius/shadow treatment for this component.
 */
.feature-band {
  background: var(--vri-feature-band-background);
  border-radius: var(--vri-feature-band-radius);
  color: var(--vri-feature-band-text);
  box-shadow: var(--vri-feature-band-shadow);
}

.feature-band::before {
  background: radial-gradient(circle, rgba(229, 181, 59, 0.24), transparent 60%);
}

.feature-band .section-label,
.feature-band p,
.feature-band li {
  color: var(--vri-feature-band-muted);
}

.feature-band h3 {
  color: var(--vri-feature-band-text);
}

.feature-band .feature-quote {
  display: flex;
  flex-direction: column;
  background: var(--vri-feature-quote-background);
  border-color: var(--vri-feature-quote-border);
}

.feature-band .feature-quote strong {
  color: var(--gold-300);
}

.feature-band .feature-quote p,
.feature-band .feature-quote li {
  color: var(--vri-feature-band-strong);
}

/*
 * Every action inside a dark teal feature band uses the same translucent-white
 * button treatment. This includes both .btn and .quick-chip variants so page
 * markup cannot accidentally create a darker teal action inside the band.
 */
.feature-band .btn,
.feature-band .quick-chip {
  background: var(--vri-feature-button-background);
  border-color: var(--vri-feature-button-border);
  color: var(--vri-feature-button-text);
  box-shadow: var(--shadow-sm);
}

.feature-band .btn:hover,
.feature-band .btn:focus-visible,
.feature-band .quick-chip:hover,
.feature-band .quick-chip:focus-visible {
  background: var(--vri-feature-button-background-hover);
  border-color: var(--vri-feature-button-border-hover);
  color: var(--teal-950);
  box-shadow: var(--shadow-md);
}

/*
 * Feature-band actions sit at the lower-right of the inset panel. This gives
 * the Founder’s Note band the same composition as the Research Archive band
 * and keeps multi-button groups aligned consistently across the site.
 */
.feature-band .feature-quote .card-actions,
.feature-band .feature-quote .quick-links {
  margin-top: auto !important;
  padding-top: 18px;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: stretch;
}

/*
 * Universal public form system.
 *
 * The Mentor Application is the visual reference for standard controls. The
 * Student Registration, Interest, Waitlist, Mentor Application, Ask VRI, and
 * future .vri-form surfaces must share one control vocabulary: regular-weight
 * entry text, the same gold select arrow, the same SVG checkbox, the same
 * radio treatment, and calm plain-language choice rows.
 */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .ask-vri-form,
  .vri-form
) {
  font-family: var(--vri-font-sans);
}

/* Field wrappers must not make the user's entered text inherit bold weight. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) .registration-field {
  font-weight: 400;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .ask-vri-form,
  .vri-form
) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .ask-vri-form,
  .vri-form
) textarea,
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) select {
  font-family: var(--vri-font-sans) !important;
  font-size: 1rem !important;
  font-weight: var(--vri-form-control-weight) !important;
  line-height: 1.4;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="file"] {
  font-family: var(--vri-font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .ask-vri-form,
  .vri-form
) input::placeholder,
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .ask-vri-form,
  .vri-form
) textarea::placeholder {
  font-weight: 400 !important;
}

/* One down-triangle treatment for every standard form select. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) select:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 46px !important;
  background-image: var(--vri-form-select-arrow) !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) select option {
  font-family: var(--vri-font-sans);
  font-weight: 400;
}

/* Choice copy reads like normal form text, not like another heading. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(
  .registration-checkbox-option,
  .registration-radio-option,
  .mentor-agreement-row,
  .vri-prep-check-option,
  .vri-software-option,
  .vri-schedule-option,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"])
) {
  font-weight: var(--vri-form-choice-weight) !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(
  .registration-checkbox-option,
  .registration-radio-option,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"])
) > span {
  font-weight: var(--vri-form-choice-weight) !important;
  letter-spacing: 0;
  text-transform: none;
}

/* Standard choices stay visually quiet, matching the Mentor Application. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(.registration-checkbox-option, .registration-radio-option) {
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(.registration-checkbox-option, .registration-radio-option):is(:hover, :focus-within) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(.registration-checkbox-option, .registration-radio-option)::before,
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) :is(.registration-checkbox-option, .registration-radio-option)::after {
  content: none !important;
  display: none !important;
}

/* Canonical SVG checkbox: this is the Mentor Application control made universal. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: var(--vri-form-checkbox-size) !important;
  height: var(--vri-form-checkbox-size) !important;
  min-width: var(--vri-form-checkbox-size) !important;
  min-height: var(--vri-form-checkbox-size) !important;
  max-width: var(--vri-form-checkbox-size) !important;
  max-height: var(--vri-form-checkbox-size) !important;
  flex: 0 0 var(--vri-form-checkbox-size) !important;
  box-sizing: border-box !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--vri-form-choice-border) !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--vri-form-checkbox-size) var(--vri-form-checkbox-size) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  accent-color: transparent !important;
  forced-color-adjust: none;
  cursor: pointer;
  vertical-align: top;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"]::before,
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"]:checked {
  border-color: var(--teal-700) !important;
  background-color: var(--teal-700) !important;
  background-image: var(--vri-form-checkbox-check) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(17, 111, 123, 0.48) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="checkbox"]:disabled {
  border-color: rgba(4, 76, 89, 0.2) !important;
  background-color: rgba(4, 76, 89, 0.06) !important;
  cursor: not-allowed;
  opacity: 0.58;
}

/* Canonical radio: restrained teal dot with the same geometry on every form. */
:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-grid !important;
  place-content: center !important;
  width: var(--vri-form-radio-size) !important;
  height: var(--vri-form-radio-size) !important;
  min-width: var(--vri-form-radio-size) !important;
  min-height: var(--vri-form-radio-size) !important;
  max-width: var(--vri-form-radio-size) !important;
  max-height: var(--vri-form-radio-size) !important;
  flex: 0 0 var(--vri-form-radio-size) !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1.4px solid rgba(4, 76, 89, 0.36) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"]::before {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--teal-700) !important;
  transform: scale(0) !important;
  transition: transform 120ms ease;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"]::after {
  content: none !important;
  display: none !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"]:checked {
  border-color: var(--teal-700) !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

:is(
  body.register-page #registration-app,
  body.interest-page #interest-app,
  body.waitlist-page #waitlist-app,
  body.mentor-application-page #mentor-application-app,
  .vri-form
) input[type="radio"]:focus-visible {
  outline: 2px solid rgba(17, 111, 123, 0.48) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  :root {
    --vri-form-checkbox-size: 20px;
    --vri-form-radio-size: 20px;
  }

  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .ask-vri-form,
    .vri-form
  ) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .ask-vri-form,
    .vri-form
  ) textarea,
  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .vri-form
  ) select {
    font-size: 16px !important;
  }

  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .vri-form
  ) select:not([multiple]) {
    padding-right: 44px !important;
    background-position: right 16px center !important;
  }

  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .vri-form
  ) input[type="checkbox"]:checked {
    background-size: 18px 18px !important;
  }

  :is(
    body.register-page #registration-app,
    body.interest-page #interest-app,
    body.waitlist-page #waitlist-app,
    body.mentor-application-page #mentor-application-app,
    .vri-form
  ) input[type="radio"]::before {
    width: 10px !important;
    height: 10px !important;
  }
}