/* ==========================================================================
   Material Academy — Components
   One component, one definition. Requires tokens.css and base.css.
   Every interactive component defines hover, focus-visible, active and
   disabled states.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;                 /* tap target floor */
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — the institution speaking */
.btn--primary { background: var(--brand-800); color: #fff; border-color: var(--brand-800); }
.btn--primary:hover  { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.btn--primary:active { background: var(--brand-950); border-color: var(--brand-950); }

/* Accent — reserved for the single most important action on a page */
.btn--accent { background: var(--accent-700); color: #fff; border-color: var(--accent-700); }
.btn--accent:hover  { background: var(--accent-800); border-color: var(--accent-800); color: #fff; }
.btn--accent:active { background: var(--accent-800); }

/* Secondary — outlined */
.btn--secondary { background: transparent; color: var(--brand-800); border-color: var(--border-brand); }
.btn--secondary:hover  { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-900); }
.btn--secondary:active { background: var(--brand-100); }

/* Ghost — lowest emphasis */
.btn--ghost { background: transparent; color: var(--brand-700); border-color: transparent; }
.btn--ghost:hover  { background: var(--brand-50); color: var(--brand-900); }
.btn--ghost:active { background: var(--brand-100); }

.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-7); font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: var(--space-5); }

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
}
.label .req { color: var(--error); margin-inline-start: 2px; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  color: var(--ink-900);
  border: 1px solid var(--border-control);   /* 3:1 — a real control boundary */
  border-radius: var(--radius);
  transition: border-color var(--transition), background-color var(--transition);
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-600); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--paper-sunken);
  color: var(--ink-400);
  cursor: not-allowed;
}

/* Error state — colour is never the only signal; there is always text too. */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--error);
}
.field-hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-600);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card__body { padding: var(--space-5); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* Interactive card: hairline darkens, no shadow theatre */
.card--link { display: block; text-decoration: none; color: inherit; transition: border-color var(--transition); }
.card--link:hover { border-color: var(--border-brand); }
.card--link:hover .card__title { color: var(--brand-900); }

/* ==========================================================================
   Course card — the money component
   ========================================================================== */
.course-card { display: flex; flex-direction: column; height: 100%; }
.course-card__media { aspect-ratio: 16 / 10; background: var(--paper-sunken); overflow: hidden; }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; }
.course-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.course-card__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.course-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm); color: var(--ink-600);
}
.course-card__price {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge--brand   { background: var(--brand-100);   color: var(--brand-800);  border-color: var(--brand-200); }
.badge--accent  { background: var(--accent-100);  color: var(--accent-800); border-color: var(--accent-200); }
.badge--success { background: var(--success-bg);  color: var(--success); }
.badge--error   { background: var(--error-bg);    color: var(--error); }
.badge--neutral { background: var(--paper-sunken);color: var(--ink-700);    border-color: var(--rule); }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}
.alert p:last-child { margin-bottom: 0; }
.alert__title { font-family: var(--font-sans); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.alert--info    { background: var(--brand-50);    border-color: var(--brand-300);   color: var(--ink-900); }
.alert--success { background: var(--success-bg);  border-color: var(--success);     color: var(--ink-900); }
.alert--warning { background: var(--warning-bg);  border-color: var(--warning);     color: var(--ink-900); }
.alert--error   { background: var(--error-bg);    border-color: var(--error);       color: var(--ink-900); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; background: var(--paper-raised); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; }
.table thead th {
  background: var(--paper-sunken);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-700);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.table tbody tr + tr td { border-top: 1px solid var(--rule); }
.table tbody tr:hover td { background: var(--brand-50); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs { font-size: var(--text-sm); color: var(--ink-600); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-400); }
.breadcrumbs [aria-current="page"] { color: var(--ink-900); font-weight: var(--weight-medium); }

/* Site header and navigation now live in assets/css/nav.css. */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero__inner { padding-block: var(--space-9); }
@media (min-width: 48rem) { .hero__inner { padding-block: var(--space-11); } }
.hero h1 { max-width: 18ch; }
.hero p { font-size: var(--text-lg); color: var(--ink-700); max-width: 56ch; }
.hero__actions { margin-top: var(--space-6); }

/* A restrained credibility strip. Real figures only — never invented. */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
.fact__value { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--brand-800); line-height: 1.1; }
.fact__label { font-size: var(--text-sm); color: var(--ink-600); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--brand-950); color: var(--brand-200); padding-block: var(--space-9) var(--space-6); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: var(--text-base); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.site-footer a { color: var(--brand-200); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--text-sm); color: var(--brand-300); }

/* Footer links are a genuine mobile tap surface, not inline prose, so they
   get a real target. 20px text + 12px padding top and bottom = 44px. */
.site-footer li a {
  display: inline-block;
  padding-block: var(--space-3);
}