/* CPDtv corporate website — styling ported from the cpd2succeed design system
 * (src/styles/tokens.css + global.css) so this site complements the app and the
 * marketing site at cpd2succeed.co.za.
 * Brand red #f50303 + black on white, sampled from the CPDtv logo.
 * Course content © CPDtv (Pty) Ltd · Platform © Accounter (Pty) Ltd. */

:root {
  --brand-red: #f50303;
  --brand-red-hover: #c80202;
  --brand-red-active: #a30101;
  --brand-red-tint: #fde6e6;
  --brand-black: #0a0a0a;
  --brand-white: #ffffff;

  --grey-50: #f7f7f8;
  --grey-100: #ececee;
  --grey-200: #d8d8dc;
  --grey-300: #b9b9c0;
  --grey-400: #9a9aa2;
  --grey-500: #6e6e76;
  --grey-600: #56565e;
  --grey-700: #3a3a40;
  --grey-800: #1f1f23;
  --grey-900: #131316;

  --color-bg: var(--brand-white);
  --color-surface: var(--grey-50);
  --color-border: var(--grey-200);
  --color-text: var(--brand-black);
  --color-text-muted: var(--grey-500);
  --color-primary: var(--brand-red);
  color-scheme: light;
  --color-success: #1a7f4b;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.10);

  --container-max: 1120px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-8);
}

/* Buttons */
.btn {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 2px solid transparent;
}
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--primary { background: var(--brand-red); color: var(--brand-white); }
.btn--primary:hover { background: var(--brand-red-hover); text-decoration: none; }
.btn--outline { background: transparent; color: var(--brand-black); border-color: var(--brand-black); }
.btn--outline:hover { background: var(--brand-black); color: var(--brand-white); text-decoration: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--brand-white); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 64px; }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.site-header__brand:hover { text-decoration: none; }
.site-header__logo { height: 32px; width: auto; display: block; }
.site-header__wordmark { font-weight: var(--font-weight-black); font-size: var(--text-lg); color: var(--brand-black); letter-spacing: -0.01em; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header__link { color: var(--brand-black); font-weight: var(--font-weight-medium); font-size: var(--text-sm); }
.site-header__link:hover { color: var(--brand-red); text-decoration: none; }
.site-header__cta { padding: var(--space-2) var(--space-4); }
@media (max-width: 640px) {
  .site-header__wordmark { display: none; }
  .site-header__nav { gap: var(--space-4); }
  .site-header__link:not(.site-header__cta) { display: none; }
}

/* Hero */
.hero { background: linear-gradient(180deg, var(--brand-white) 0%, var(--brand-red-tint) 100%); padding-block: var(--space-16); border-bottom: 4px solid var(--brand-red); }
.hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--brand-red); margin: 0 0 var(--space-3); }
.hero__headline { font-size: var(--text-3xl); font-weight: var(--font-weight-black); line-height: 1.1; margin: 0 0 var(--space-4); max-width: 20ch; }
.hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; margin: 0 0 var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Learning areas + generic card grid */
.section { padding-block: var(--space-16); }
.section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.area-card { background: var(--brand-white); border: 1px solid var(--color-border); border-top: 4px solid var(--brand-red); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); }
.area-card__name { font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin: 0; }
.area-card__body { color: var(--color-text-muted); margin: 0; font-size: var(--text-sm); }

/* Feature / benefit rows */
.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 70ch; margin: 0 0 var(--space-8); }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.benefits li { position: relative; background: var(--brand-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); font-size: var(--text-sm); }
.benefits li::before { content: "✓"; position: absolute; left: var(--space-4); color: var(--brand-red); font-weight: var(--font-weight-black); }

/* Compliance highlight band */
.band { background: var(--brand-black); color: var(--grey-100); padding-block: var(--space-12); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.band__stat { font-size: var(--text-3xl); font-weight: var(--font-weight-black); color: var(--brand-white); line-height: 1; }
.band__stat span { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--grey-300); margin-top: var(--space-2); }
.band__text { max-width: 46ch; margin: 0; color: var(--grey-200); }
.band__tag { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--brand-white); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.contact-card { background: var(--brand-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.contact-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-red); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-2); }
.contact-card__value { margin: 0; font-size: var(--text-base); color: var(--color-text); }

/* Contact form */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form { background: var(--brand-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.field .req { color: var(--brand-red); }
.field .opt { color: var(--color-text-muted); font-weight: var(--font-weight-normal); font-size: var(--text-xs); }
.field input, .field textarea {
  font-family: var(--font-sans); font-size: var(--text-base);
  padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--brand-white); color: var(--color-text);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand-red); outline-offset: 1px; border-color: var(--brand-red); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { align-self: flex-start; }
.contact-form .btn:disabled { opacity: 0.6; cursor: progress; }
.form-status { margin: 0; font-size: var(--text-sm); min-height: 1.2em; }
.form-status--ok { color: var(--color-success); font-weight: var(--font-weight-medium); }
.form-status--error { color: var(--brand-red-active); font-weight: var(--font-weight-medium); }

/* Footer */
.site-footer { margin-top: auto; background: var(--brand-black); color: var(--grey-200); padding-block: var(--space-12); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__brand { font-weight: var(--font-weight-black); color: var(--brand-white); font-size: var(--text-lg); margin: 0; }
.site-footer__legal { margin: 0; font-size: var(--text-sm); color: var(--grey-300); }
.site-footer__legal a { color: var(--grey-100); }

/* Legal / policy page */
.legal { max-width: 760px; padding-block: var(--space-12); }
.legal h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.legal p, .legal li { line-height: 1.7; color: var(--color-text); }
.legal ul { padding-left: var(--space-6); }
.legal li { margin-bottom: var(--space-2); }
.legal__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.legal__footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }