/*
 * Component styling for public-facing pages, built on top of design-tokens.css.
 * Restyles the existing Bootstrap class vocabulary (.btn, .form-control, .card,
 * .navbar, .alert, .form-check) already emitted by allauth/elements/* and the
 * marketing templates, so nav/footer/buttons/forms/cards modernize together
 * without rewriting every template's markup. Loaded only on public pages —
 * corp.css (dashboard) is untouched.
 */

/* ---------- Base ---------- */

.public-page {
  font-family: var(--font-sans);
  color: var(--color-ink-900);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

.public-page h1,
.public-page h2,
.public-page h3,
.public-page h4,
.public-page h5,
.public-page h6 {
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
  letter-spacing: -0.01em;
}

.public-page p {
  line-height: var(--leading-normal);
  color: var(--color-ink-700);
}

.public-page a {
  color: var(--color-primary-600);
  transition: color var(--transition-fast);
}

.public-page a:hover {
  color: var(--color-primary-700);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-3);
  z-index: 2000;
  background: var(--color-primary-700);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
  color: #fff;
}

/* Visible focus states everywhere on public pages */
.public-page :focus-visible,
.public-page .btn:focus-visible,
.public-page .form-control:focus,
.public-page .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Buttons ---------- */

.public-page .btn {
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.35rem;
  font-size: var(--text-base);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  border-width: 1.5px;
}

.public-page .btn:hover {
  transform: translateY(-1px);
}

.public-page .btn:active {
  transform: translateY(0);
}

.public-page .btn:disabled,
.public-page .btn.disabled {
  transform: none;
  opacity: 0.6;
}

.public-page .btn-primary,
.public-page .btn-success {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.public-page .btn-primary:hover,
.public-page .btn-success:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.public-page .btn-secondary {
  background: var(--color-ink-100);
  border-color: var(--color-ink-100);
  color: var(--color-ink-900);
}

.public-page .btn-secondary:hover {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-ink-900);
}

.public-page .btn-outline-primary {
  background: transparent;
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
}

.public-page .btn-outline-primary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

.public-page .btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.public-page .btn-link {
  font-weight: 600;
  color: var(--color-primary-600);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
}

.public-page .btn-link:hover {
  text-decoration: underline;
  color: var(--color-primary-700);
}

.public-page .btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: var(--text-lg);
  border-radius: var(--radius-md);
}

.public-page .btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: var(--text-sm);
}

.public-page .btn[disabled][aria-busy="true"] {
  position: relative;
  color: transparent !important;
}

.public-page .btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: public-spin 0.7s linear infinite;
}

@keyframes public-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Nav-specific CTA buttons (nav-link + btn combo used in public-nav.html) */
.public-page .navbar .btn.nav-link {
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
}

/* ---------- Forms ---------- */

.public-page .form-control,
.public-page .form-select {
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  font-size: var(--text-base);
  color: var(--color-ink-900);
  background: var(--color-input-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.public-page .form-control::placeholder,
.public-page .form-select::placeholder {
  color: var(--color-input-placeholder);
  opacity: 1;
}

.public-page .form-control:hover,
.public-page .form-select:hover {
  border-color: var(--color-primary-300);
}

.public-page .form-control:focus,
.public-page .form-select:focus {
  background: var(--color-input-bg-focus);
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}

.public-page .form-control.is-invalid {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.public-page .form-control.is-invalid:focus {
  background: var(--color-input-bg-focus);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.public-page label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
  margin-bottom: var(--space-1);
  display: inline-block;
}

.public-page .form-text {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.public-page .invalid-feedback {
  color: var(--color-danger);
  font-size: var(--text-xs);
  font-weight: 600;
}

.public-page .form-check-input {
  border: 1.5px solid var(--color-input-border);
  background-color: var(--color-input-bg);
  width: 1.1em;
  height: 1.1em;
}

.public-page .form-check-input:checked {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.public-page .form-check-input:focus {
  box-shadow: var(--focus-ring);
}

.public-page .form-check-label {
  font-weight: 400;
  color: var(--color-ink-700);
}

/* Required-field indicator, applied by public-ui.js */
.public-page .required-marker {
  color: var(--color-danger);
  margin-left: 0.15rem;
}

/* Password visibility toggle, injected by public-ui.js */
.public-page .password-field-wrap {
  position: relative;
}

.public-page .password-field-wrap .form-control {
  padding-right: 2.75rem;
}

.public-page .password-toggle-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.public-page .password-toggle-btn:hover {
  color: var(--color-primary-600);
}

.public-page .password-toggle-btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Password strength meter, injected by public-ui.js */
.public-page .password-strength {
  margin-top: var(--space-2);
}

.public-page .password-strength-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.public-page .password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.public-page .password-strength[data-level="weak"] .password-strength-fill {
  width: 25%;
  background: var(--color-danger);
}

.public-page .password-strength[data-level="fair"] .password-strength-fill {
  width: 50%;
  background: var(--color-warning);
}

.public-page .password-strength[data-level="good"] .password-strength-fill {
  width: 75%;
  background: var(--color-primary-500);
}

.public-page .password-strength[data-level="strong"] .password-strength-fill {
  width: 100%;
  background: var(--color-success);
}

.public-page .password-strength-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-1);
  display: block;
}

/* ---------- Cards (entrance forms + marketing cards) ---------- */

.public-page .card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

.public-page .card-body {
  padding: var(--space-6);
}

.public-page .card-footer {
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.public-page .card:hover {
  box-shadow: var(--shadow-md);
}

/* Auth entrance/manage pages all share this wrapper class (bg-white shadow--box)
   instead of .card — restyle it the same way so every login/signup/password
   page updates together without touching each template. */
.public-page .shadow--box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

/* ---------- Alerts ---------- */

.public-page .alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.public-page .alert-primary,
.public-page .alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-primary-200);
  color: var(--color-primary-800);
}

.public-page .alert-danger {
  background: var(--color-danger-bg);
  border-color: #fecaca;
  color: #991b1b;
}

.public-page .alert-success {
  background: var(--color-success-bg);
  border-color: #bbf7d0;
  color: #166534;
}

.public-page .alert-warning {
  background: var(--color-warning-bg);
  border-color: #fde68a;
  color: #92400e;
}

/* ---------- Navbar ---------- */

.public-page .public-nav {
  /* Sticky, not fixed: it still pins to the top of the viewport while
     scrolling, but (unlike fixed) it stays in normal document flow, so it
     can never overlap the content or footer that follows it — including
     on pages with blank/short content. */
  position: sticky;
  top: 0;
  background: var(--color-navbar-bg);
  border-top: 3px solid var(--color-navbar-accent);
  border-bottom: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
  z-index: 1030;
}

.public-page .public-nav.is-scrolled {
  box-shadow: var(--shadow-lg);
}

.public-page .public-nav .navbar {
  min-height: var(--header-height);
  background: transparent !important;
}

.public-page .public-nav .navbar-brand {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-navbar-text) !important;
  letter-spacing: -0.01em;
}

.public-page .public-nav .nav-link {
  color: var(--color-navbar-text-muted) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.6rem 0.9rem !important;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.public-page .public-nav .nav-link:hover,
.public-page .public-nav .nav-link:focus-visible {
  color: var(--color-navbar-text) !important;
  background: var(--color-navbar-hover-bg);
}

.public-page .public-nav .nav-link.is-active {
  color: var(--color-navbar-text) !important;
  background: var(--color-navbar-active-bg);
  font-weight: 700;
}

/* CTA buttons sit on the same blue bar as their background token, so they
   need bar-specific treatments or they'd disappear into it. */
.public-page .public-nav .btn-primary {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-primary-700);
}

.public-page .public-nav .btn-primary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-50);
  color: var(--color-primary-800);
}

.public-page .public-nav .btn-outline-primary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--color-navbar-text);
}

.public-page .public-nav .btn-outline-primary:hover {
  background: var(--color-navbar-hover-bg);
  border-color: var(--color-navbar-text);
  color: var(--color-navbar-text);
}

/* Mobile collapse panel: keep the same blue surface (a touch darker for
   depth) so the bar reads as one continuous, harmonized component instead
   of flipping to a white panel with a color/contrast jump. */
@media (max-width: 767px) {
  .public-page .public-nav .navbar-collapse.show,
  .public-page .public-nav .navbar-collapse.collapsing {
    background: var(--color-navbar-bg-elevated);
    border-top: 1px solid var(--color-navbar-hover-bg);
    box-shadow: var(--shadow-lg);
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  .public-page .public-nav .navbar-nav .nav-item {
    width: 100%;
  }

  .public-page .public-nav .navbar-nav .btn.nav-link {
    display: inline-block;
    margin-top: var(--space-2);
  }
}

.public-page .public-nav .navbar-toggler {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
}

.public-page .public-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(2);
}

.public-page .public-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* ---------- Footer ---------- */

.public-page .public-footer {
  background: var(--color-ink-900);
  color: var(--color-ink-300);
  margin-top: var(--space-10);
}

.public-page .public-footer h4 {
  color: #fff;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.public-page .public-footer a {
  color: var(--color-ink-300);
  text-decoration: none;
}

.public-page .public-footer a:hover {
  color: #fff;
}

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

.public-page .public-footer li {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.public-page .public-footer .footer--border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Marketing sections (hero, feature grid, testimonials) ---------- */

.public-page .hero {
  background: linear-gradient(160deg, var(--color-primary-700) 0%, var(--color-primary-600) 55%, var(--color-primary-500) 100%);
  color: #fff;
  padding: var(--space-10) var(--space-4);
  text-align: center;
  border-radius: var(--radius-lg);
}

.public-page .hero h1,
.public-page .hero h2,
.public-page .hero h3 {
  color: #fff;
}

/* Full-bleed page header/hero banner — sits directly below the nav in
   normal document flow (same blue family, one shade deeper so the two
   read as related but distinct surfaces). Used for the page.html CMS
   wrapper, pricing.html and features.html top headers. */
.public-page .page-header {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary-800) 0%, var(--color-primary-600) 60%, var(--color-primary-500) 100%);
  color: #fff;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  overflow: hidden;
}

.public-page .page-header h1,
.public-page .page-header h2,
.public-page .page-header h3,
.public-page .page-header h4 {
  color: #fff;
  position: relative;
  z-index: 1;
}

.public-page .page-header p {
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

.public-page .page-header a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Legacy corp.css helper classes used inside page headers (breadcrumbs,
   title dividers) were designed for a light background — re-tint them so
   they stay readable on the new dark blue header. */
.public-page .page-header .corp-breadcrumbs {
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}

.public-page .page-header .corp-breadcrumbs a {
  color: #fff;
  text-decoration: underline;
}

.public-page .page-header .divider--line {
  border-top-color: rgba(255, 255, 255, 0.35);
}

/* Buttons inside either hero surface sit on the brand blue, so they need
   the same light-on-dark inversion used in the navbar or they'd vanish. */
.public-page .hero .btn-primary,
.public-page .page-header .btn-primary {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-primary-700);
}

.public-page .hero .btn-primary:hover,
.public-page .page-header .btn-primary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-50);
  color: var(--color-primary-800);
}

.public-page .hero .btn-outline-primary,
.public-page .page-header .btn-outline-primary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.public-page .hero .btn-outline-primary:hover,
.public-page .page-header .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 767px) {
  .public-page .page-header {
    padding: var(--space-6) var(--space-3);
  }
}

.public-page .hero p {
  color: rgba(255, 255, 255, 0.9);
}

.public-page .feature-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: 100%;
  background: var(--color-surface);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.public-page .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.public-page .feature-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary-600);
}

.public-page .scroll-row {
  display: flex;
  overflow-x: auto;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.public-page .scroll-row > * {
  flex-shrink: 0;
}

.public-page .scroll-row::-webkit-scrollbar {
  height: 6px;
}

.public-page .scroll-row::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.public-page .testimonial-card {
  scroll-snap-align: start;
  min-width: 300px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface-muted);
}

.public-page .testimonial-card p {
  font-style: italic;
  color: var(--color-ink-700);
}

.public-page .testimonial-card footer {
  color: var(--color-ink-500);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ---------- Pricing cards (public_user/pricing.html) ---------- */

.public-page .price-list li {
  margin: 1rem 0.5rem;
}

.public-page .card--pricing {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

.public-page .card--pricing:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---------- Feature grid (public_user/features.html) ---------- */

.public-page img.img-zoom {
  transition: transform var(--transition-base);
  border-radius: var(--radius-md);
  width: 100%;
}

.public-page .card img.img-zoom {
  border-radius: 0;
  border-top: 1px solid var(--color-border);
}

.public-page .card:hover img.img-zoom,
.public-page img.img-zoom:hover {
  transform: scale(1.02);
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .public-page .hero {
    padding: var(--space-8) var(--space-3);
  }

  .public-page .card-body {
    padding: var(--space-4);
  }
}