/*--------------------------------------------------------------
# Skillset Development — brand layer.
#
# Ink and amber. The sector is a wall of blue (meirc, atton), with
# teal at trainingcred and red at GLOMACS; every one of them runs a
# saturated primary across the whole page. This brand does the
# opposite: near-black ink carries the structure, sand carries the
# sections, and amber appears only where we want a hand to move —
# a button, an active state, a marker. Colour is rationed, so it
# means something when it shows up.
#
# Loaded after theme.css and before skillset.css: it only changes
# the template's tokens, so every component follows automatically.
--------------------------------------------------------------*/

:root {
  /* Type. The field runs on Open Sans, Lato and Source Sans — 2012
     defaults. Jakarta gives the headings a voice; Inter is the most
     legible UI face at the 13–15px this site lives at, on cards and
     tables full of dates and fees. */
  --default-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --nav-font: "Inter", system-ui, sans-serif;

  --background-color: #ffffff;
  --default-color: #334155;   /* slate — body text */
  --heading-color: #0f1b2d;   /* ink */
  --accent-color: #f0a500;    /* amber — fills, never text on white */
  --surface-color: #ffffff;
  --contrast-color: #0f1b2d;  /* what sits ON amber: ink, not white */

  /* Amber fails contrast as text on white (2.0:1), so links get a
     deep amber that passes at 4.9:1 and darkens to ink on hover. */
  --link-color: #8a5a00;

  --ink-900: #0f1b2d;
  --ink-700: #1e3149;
  --sand: #fbf7f0;
}

a { color: var(--link-color); }
a:hover { color: var(--heading-color); }

/* Sections alternate white and sand rather than white and pale blue. */
.light-background {
  --background-color: var(--sand);
  --surface-color: #ffffff;
}

/* The header is the brand's one large block of colour. */
.header {
  --background-color: var(--ink-900);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #f0a500;
  border-bottom: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
}

/* The template's "accent background" is the footer. Ink, not amber:
   a full-width amber block would undo the rationing. */
.accent-background {
  --background-color: var(--ink-900);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #f0a500;
  --surface-color: var(--ink-700);
  --contrast-color: #0f1b2d;
}
.accent-background a { color: color-mix(in srgb, #ffffff 82%, transparent); }
.accent-background a:hover { color: var(--accent-color); }

.dark-background {
  --background-color: var(--ink-900);
  --surface-color: var(--ink-700);
}

/* Headings: Jakarta wants slightly tighter tracking at display sizes. */
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: var(--heading-color); }
h1, h2 { letter-spacing: -0.02em; }
h3, h4 { letter-spacing: -0.01em; }

/* Buttons: amber fill, ink label. The template's primary buttons read
   colour from the accent token, so this is mostly about the label. */
.btn-primary,
.btn.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--ink-900);
  font-weight: 600;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
  background-color: color-mix(in srgb, var(--accent-color) 88%, #000000);
  border-color: color-mix(in srgb, var(--accent-color) 88%, #000000);
  color: var(--ink-900);
}
.btn.btn-outline {
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.btn.btn-outline:hover {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #ffffff;
}
.header .btn-getstarted {
  background-color: var(--accent-color);
  color: var(--ink-900);
  font-weight: 600;
}
.header .btn-getstarted:hover { background-color: color-mix(in srgb, var(--accent-color) 88%, #000000); }

/* The template underlines the active nav item in its accent; amber on
   ink is exactly where that reads well. */
.navmenu > ul > li > a.active,
.navmenu > ul > li > a:hover { color: #ffffff; }
.navmenu > ul > li > a.active:before { background-color: var(--accent-color); }

/* Section titles: the template flanks the heading with two accent rules.
   At 50px of amber either side of every heading that is too much colour
   for this brand — keep one, set it back. */
.section-title :is(h1, h2):before { display: none; }
.section-title :is(h1, h2):after {
  width: 34px;
  background: color-mix(in srgb, var(--accent-color) 75%, transparent);
}

/*--------------------------------------------------------------
# Component corrections.
# The template scopes colour rules per section, so a token change
# alone leaves a trail of blue-era decisions behind: outline
# buttons that were drawn in the accent, counters in the accent,
# and twelve category icons in twelve different colours. Those are
# not brand decisions, they are template defaults, and each one
# spends colour we are deliberately rationing.
--------------------------------------------------------------*/

/* Amber at three strengths: a fill, a graphic, and a text colour
   that survives on white. Pure amber is 2:1 on white and must never
   carry a word or a stroke that matters. */
:root {
  --accent-graphic: #b97d05;  /* 3.6:1 on white — icons, markers */
  --icon-muted: #64748b;      /* metadata icons: label, not accent */
}

/* Outline buttons: the template draws them in the accent inside the
   hero and the CTA, which puts amber text on sand at 2:1. */
.courses-hero .hero-buttons .btn.btn-outline,
.cta .cta-actions .btn.btn-outline {
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.courses-hero .hero-buttons .btn.btn-outline:hover,
.cta .cta-actions .btn.btn-outline:hover {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  color: #ffffff;
}

/* Counters are the loudest type on the page — they belong in ink,
   with the amber saved for the thing you are meant to click. */
.courses-hero .hero-stats .stat-item .number,
.cta .stats-row .stat-item h3 { color: var(--heading-color); }

/* Twelve categories, twelve template colours. One shape instead:
   an amber-tinted disc with an ink glyph, inverting on hover. */
.course-categories .category-card .category-icon,
.course-categories .category-card.category-business .category-icon,
.course-categories .category-card.category-tech .category-icon,
.course-categories .category-card.category-finance .category-icon,
.course-categories .category-card.category-engineering .category-icon,
.course-categories .category-card.category-design .category-icon,
.course-categories .category-card.category-marketing .category-icon,
.course-categories .category-card.category-science .category-icon,
.course-categories .category-card.category-health .category-icon,
.course-categories .category-card.category-language .category-icon,
.course-categories .category-card.category-photography .category-icon,
.course-categories .category-card.category-music .category-icon,
.course-categories .category-card.category-law .category-icon {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}
.course-categories .category-card .category-icon i { color: var(--ink-900); }
.course-categories .category-card:hover .category-icon { background: var(--ink-900); }
.course-categories .category-card:hover .category-icon i { color: var(--accent-color); }
.course-categories .category-card:hover { border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); }
.course-categories .category-card .course-count { color: var(--icon-muted); }