/* APDI - Minimal base styles (Tailwind handles the heavy lifting) */

:root {
  --navy: #0E2240;
  --navy-700: #14315C;
  --navy-600: #1E4A72;
  --gold: #2563EB;
  --gold-pale: #EFF6FF;
  --white: #FFFFFF;
  --off-white: #F8F7F4;
  --border: #E2E8F0;
  --border-strong: #CBD5E0;
  --text-secondary: #4A5568;
  --text-muted: #718096;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Accent ramp (brand blue) — aliases of --gold for clarity in new components */
  --accent: #2563EB;
  --accent-strong: #1D4ED8;
  --accent-pale: #EFF6FF;

  /* Surfaces & elevation (modern portal chrome) */
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --canvas: #F6F8FB;
  --shadow-xs: 0 1px 2px rgba(14, 34, 64, 0.05);
  --shadow-sm: 0 2px 8px rgba(14, 34, 64, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 34, 64, 0.09);
  --shadow-lg: 0 16px 40px rgba(14, 34, 64, 0.14);

  /* Per-role accent (used for the identity chip / dashboards) */
  --role-graduate: #2563EB;
  --role-professional: #7C3AED;
  --role-company: #0D9488;
  --role-admin: #B45309;

  /* Semantic status colours */
  --success: #03543F;
  --success-soft: #DEF7EC;
  --warning: #92400E;
  --warning-soft: #FEF3C7;
  --danger: #9B1C1C;
  --danger-soft: #FDE8E8;
}

/* Fonts are loaded via <link> in _HeadAssets.cshtml (faster than @import) */

/* Smooth scroll & font smoothing */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Reset links */
a { color: inherit; text-decoration: none; }

/* Form elements inherit font */
input, select, textarea, button { font-family: inherit; }

/* Select arrow */
select.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Scroll animations */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate-delay="4"] { transition-delay: 0.4s; }
[data-animate-delay="5"] { transition-delay: 0.5s; }

/* Hero background animation */
@keyframes scrollDown {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-scroll-line {
  animation: scrollDown 1.8s ease-in-out infinite;
}

/* Validation */
.field-validation-error { display: block; font-size: 0.8125rem; color: #dc2626; margin-top: 0.25rem; }
.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }
.validation-summary-errors li { font-size: 0.875rem; color: #dc2626; margin-bottom: 0.25rem; }
/* Hide the validation summary box when there are no errors (avoids an empty red box) */
.validation-summary-valid { display: none; }

/* Auth page entrance animations (one-shot fade/slide-in on load) */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { opacity: 0; animation: authFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up { animation: none; opacity: 1; transform: none; }
}

/* Submit-button loading state (see initFormSubmitState in site.js) */
button[disabled], .btn[disabled], button.is-loading { opacity: 0.7; cursor: not-allowed; }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Country-code phone control (Views/Shared/_PhoneField.cshtml) ─────────────────
   A country dropdown beside a number box, with the selected dial code shown as an
   attached prefix. site.css is loaded AFTER tailwind.output.css in every layout, so
   these rules win over the Tailwind utilities on the auth-variant markup without
   needing !important. */
.phone-field {
  display: grid;
  /* Both columns must be able to SHRINK. A fixed 10rem country column starved the number
     input down to ~34px wherever the control sits in a half-width form row (Register puts
     Phone beside Email). The country select gives ground first — it still shows the flag
     and the start of the name, and the dial code is repeated in the prefix box beside the
     number, so nothing is lost when it clips. */
  grid-template-columns: minmax(6rem, 11rem) minmax(9rem, 1fr);
  gap: 8px;
  align-items: start;
}
/* Narrower than the two minimums combined (~15rem + gap) they cannot both stay usable —
   stack instead of overflowing the card. */
@media (max-width: 380px) {
  .phone-field { grid-template-columns: minmax(0, 1fr); }
}

/* Long country names would otherwise stretch the column; let the select clip them. */
.phone-field__country {
  min-width: 0;
  text-overflow: ellipsis;
}

.phone-field__entry {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* The dial code is rendered, never typed — it comes from the dropdown and the server
   prepends it. Sized by content so +1 and +1268 both sit correctly. */
.phone-field__dial {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1.5px solid #CBD5E0;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: #F1F5F9;
  color: #475569;
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.phone-field__number {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ── Main Site Navigation Polish ─────────────────────────────────────────── */
#nav-hamburger .hamburger-bar {
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
#nav-hamburger.is-active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav-hamburger.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#nav-hamburger.is-active .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}