/* =====================
   Shared CTA button styles
   Colours defined in layouts/partials/head.html Tailwind config
   ===================== */

.proefles-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.proefles-cta-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--color-accent);
  padding: 1rem 2.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  align-self: flex-start;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.proefles-cta-btn:hover {
  background: var(--color-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.proefles-cta-btn--primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 8px 24px rgba(0, 53, 128, 0.3);
}

.proefles-cta-btn--primary:hover {
  background: var(--color-primary-light);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 53, 128, 0.4);
}

.proefles-cta-main {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
}

.proefles-cta-sub {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
  margin-top: 4px;
}

.proefles-cta-btn--white {
  background: white;
  color: var(--color-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.proefles-cta-btn--white:hover {
  background: var(--color-primary-light);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 65, 154, 0.4);
}

/* =====================
   Responsive typography — site-wide
   Breakpoints: <480px (small phones), 480–639px (large phones), 640px+ (Tailwind sm), 1024px+ (Tailwind lg)
   ===================== */

:root {
  --text-badge: 11px;
  --text-hero-h1: 1.875rem;  /* 30px */
  --text-hero-p: 0.875rem;   /* 14px */
  --text-btn: 0.875rem;      /* 14px */
  --text-starbar: 10px;
}

@media (min-width: 480px) {
  :root {
    --text-badge: 12px;
    --text-hero-h1: 2.125rem;  /* 34px */
    --text-hero-p: 1rem;      /* 16px */
    --text-btn: 1rem;
    --text-starbar: 11px;
  }
}

@media (min-width: 640px) {
  :root {
    --text-badge: 12px;
    --text-hero-h1: 2.25rem;  /* 36px */
    --text-hero-p: 1.125rem;  /* 18px */
    --text-btn: 1rem;
    --text-starbar: 12px;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-badge: 12px;
    --text-hero-h1: 3.75rem;  /* 60px — matches lg:text-6xl */
    --text-hero-p: 1.5rem;    /* 24px — matches lg:text-2xl */
    --text-btn: 1rem;
    --text-starbar: 12px;
  }
}

/* =====================
   Hero typography — uses responsive variables from :root
   ===================== */

.hero-badges { font-size: var(--text-badge); }
.hero-h1     { font-size: var(--text-hero-h1); }
.hero-p      { font-size: var(--text-hero-p); }
.hero-btn    { font-size: var(--text-btn); }
.hero-starbar span { font-size: var(--text-starbar); }