/* =========================================================
   Creative College theme (19+, adults and companies)
   Built on the shared design system in ../brightclub/assets/styles.css.
   Change the colours here once the exact logo colours are confirmed.
   ========================================================= */
:root {
  --sun: #ff6a4d;      /* Creative College accent (primary buttons) */
  --sun-deep: #f24f30;
  --sky: #3d8fd1;
  --sea: #1fa58f;
  --coral: #ff6a4d;
  --gold: #fec624;     /* shared family yellow, used sparingly */
  --ink: #1d2347;      /* deep indigo */
  --night: #151a36;
  --text: #22263b;
  --muted: #5e637a;
  --mist: #f3f3f8;
  --line: #e0e1ea;
}
.btn--sun { color: #fff; }
.btn--sun:hover { background: var(--sun-deep); }
.tag--sun { background: #ffe5df; color: #a8321b; }

/* Brand bar (all three academies) */
.brandbar { background: var(--night); color: #c5c8d8; font-size: .85rem; }
.brandbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
.brandbar nav { display: flex; gap: 4px; overflow-x: auto; }
.brandbar nav a { color: #c5c8d8; text-decoration: none; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.brandbar nav a[aria-current="true"] { background: var(--sun); color: #fff; font-weight: 600; }
.brandbar nav a:hover:not([aria-current="true"]) { color: #fff; }
.brandbar .contact a { color: #fff; text-decoration: none; margin-left: 16px; white-space: nowrap; }
@media (max-width: 760px) { .brandbar .contact { display: none; } }

.header .logo img { height: 46px; }
.section--night { background: var(--night); color: #d6d8e4; }
.section--night h2, .section--night h3 { color: #fff; }
.page-hero.has-img { position: relative; color: #fff; background: var(--night) center/cover; padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 6vw, 72px); isolation: isolate; }
.page-hero.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,26,54,.94) 0%, rgba(21,26,54,.7) 55%, rgba(21,26,54,.3) 100%); z-index: -1; }
.page-hero.has-img h1, .page-hero.has-img .crumbs, .page-hero.has-img .crumbs a { color: #fff; }
.page-hero.has-img .lead { color: #e1e3ee; }

/* The 70 / 30 split — Creative College's signature element */
.split7030 { display: grid; grid-template-columns: 7fr 3fr; border-radius: 18px; overflow: hidden; font-family: var(--font-head); }
.split7030 > div { padding: 18px 20px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.split7030 .p { background: var(--sun); color: #fff; }
.split7030 .t { background: var(--ink); color: #fff; }
.split7030 b { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.split7030 span { font-weight: 600; font-size: .95rem; }
.split7030 small { display: block; font-family: var(--font-body); font-weight: 400; opacity: .85; font-size: .85rem; margin-top: 4px; }
@media (max-width: 520px) { .split7030 { grid-template-columns: 1fr; } .split7030 > div { min-height: 0; } }

.type-tag { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.type-cursus { background: #e3eefa; color: #1f5f95; }
.type-master { background: #ffe5df; color: #a8321b; }
.type-erkend { background: #dcf3ef; color: #127466; }
.type-jaar { background: var(--ink); color: #fff; }