/*
  QWAKU HQ WEBSITE - page layout only (qwaku.com).
  Colours, type, spacing, corners and shadows all come from the design system copy in
  ../design-system/ (semantic names only). No new colours are set in this file.
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-body), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
/* anchor jumps stop below the sticky navigation bar */
[id] { scroll-margin-top: 96px; }

.skip-link {
  position: absolute; left: var(--spacing-m); top: -100px; z-index: 100;
  padding: var(--spacing-s) var(--spacing-m); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--text-primary);
}
.skip-link:focus { top: var(--spacing-m); }

/* ---------- page width and section rhythm ---------- */
.site-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-xl); }
.site-section { padding: var(--spacing-xxl) 0 0; }
.site-section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--spacing-m); margin-bottom: var(--spacing-l);
}
.site-section__intro { display: flex; flex-direction: column; gap: var(--spacing-s); max-width: 640px; }
.site-eyebrow { color: var(--text-brand); }
.site-lede { color: var(--text-secondary); }
.site-grid { display: grid; gap: var(--spacing-l); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grid--brands { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-m); }

/* ---------- navigation extras ---------- */
.site-nav__actions { display: flex; align-items: center; gap: var(--spacing-s); }
.site-theme-toggle .site-theme-toggle__sun { display: none; }
[data-theme="dark"] .site-theme-toggle .site-theme-toggle__sun { display: block; }
[data-theme="dark"] .site-theme-toggle .site-theme-toggle__moon { display: none; }
.q-nav__panel-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--spacing-s); }
.q-nav__panel-foot .q-button { margin-top: 0; }

/* ---------- hero ---------- */
.site-hero { padding: var(--spacing-xxl) 0 0; }
.site-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--spacing-xl); align-items: center; }
.site-hero__text { display: flex; flex-direction: column; gap: var(--spacing-l); }
.site-hero__title { color: var(--text-primary); }
.site-hero__title em { font-style: normal; color: var(--text-brand); }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-s); }
.site-hero__domains { color: var(--text-secondary); }

.site-hero__panel {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-l);
  min-height: 420px; padding: var(--spacing-l); border-radius: var(--radius-card);
  background: var(--gradient-brand-depth); color: var(--text-on-brand); box-shadow: var(--shadow-m);
}
.site-hero__panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-m); }
.site-hero__panel-mark { width: 72px; height: 72px; color: var(--text-on-brand); }
.site-hero__panel-mark svg { width: 100%; height: 100%; display: block; }
.site-hero__panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-s); }
.site-hero__panel-list li { display: flex; align-items: center; gap: var(--spacing-s); }
.site-hero__panel-list .q-icon { color: var(--text-on-brand); }

/* ---------- courses strip ---------- */
.site-courses {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center;
  padding: var(--spacing-xl); border-radius: var(--radius-card);
  background: var(--bg-surface); border: var(--border-width-default) solid var(--border-subtle); box-shadow: var(--shadow-s);
}
.site-courses__text { display: flex; flex-direction: column; gap: var(--spacing-m); align-items: flex-start; }
.site-courses__form { display: flex; flex-direction: column; gap: var(--spacing-m); }
.site-courses__row { display: flex; gap: var(--spacing-s); align-items: flex-start; }
.site-courses__row .q-field { flex: 1; }
.site-courses__row .q-button { margin-top: calc(var(--font-size-16) * 1.5 + var(--spacing-s)); }

/* ---------- brands band (always on the teal brand background, like the footer) ---------- */
.site-brands {
  margin-top: var(--spacing-xxl); padding: var(--spacing-xxl) 0; background: var(--bg-brand); color: var(--text-on-brand);
}
.site-brands .site-eyebrow, .site-brands .site-lede, .site-brands h2 { color: var(--text-on-brand); }
.site-brand-card .q-card__body { height: 100%; }
.site-brand-card .q-card__link { margin-top: auto; }
.site-brand-card--soon .q-card__link { color: var(--text-secondary); }

/* ---------- closing call to action ---------- */
.site-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-l);
  margin: var(--spacing-xxl) 0; padding: var(--spacing-xl); border-radius: var(--radius-card);
  background: var(--bg-surface); border: var(--border-width-default) solid var(--border-subtle); box-shadow: var(--shadow-s);
}
.site-cta__text { display: flex; flex-direction: column; gap: var(--spacing-s); max-width: 560px; }

/* ---------- footer extras ---------- */
.q-footer > * { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ---------- smaller screens ---------- */
@media (max-width: 999px) {
  .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-hero__grid, .site-courses { grid-template-columns: 1fr; }
  .site-hero__panel { min-height: 320px; }
}
@media (max-width: 899px) {
  .site-nav__actions .q-nav__cta { display: none; }
}
@media (max-width: 699px) {
  .site-container { padding: 0 var(--spacing-m); }
  .site-section, .site-hero { padding-top: var(--spacing-xl); }
  .site-brands { margin-top: var(--spacing-xl); padding: var(--spacing-xl) 0; }
  .site-grid { grid-template-columns: 1fr; }
  .site-hero__title.type-display-01 { font-size: var(--font-size-42); }
  .site-courses, .site-cta { padding: var(--spacing-l); }
  .site-cta { margin: var(--spacing-xl) 0; }
  .site-courses__row { flex-direction: column; align-items: stretch; }
  .site-courses__row .q-button { margin-top: 0; }
  .q-footer { padding: var(--spacing-xl) var(--spacing-m); }
}

/* the hero panel sits on the brand gradient, so its logo mark uses the on-teal colours in both modes (same rule as the footer) */
.site-hero__panel { --logo-mark: var(--color-secondary-500); --logo-tail: var(--color-logo-tail-on-teal); }