/* =========================================================
   SASOL AI INDABA - BRAND FIXES (all pages)
   Linked LAST on every page so it overrides the page styles.
   Flat brand look: one accent colour, square corners, no
   borders, outlines, shadows, glows, gradients or pulsing.
   ========================================================= */

:root {
  --brand-accent: #2C93D9;

  /* Neutral blue surfaces (not accents) */
  --brand-bg: #003961;
  --brand-surface: #002B49;
  --brand-field: #001E33;
  --brand-text: #FFFFFF;

  /* Typography: one family and one scale for every page */
  --brand-font: Arial, Helvetica, sans-serif;
  --type-title: clamp(32px, 5vw, 44px);
  --type-label: 15px;
  --type-session: 17px;
  --type-body: 17px;
  --type-button: 16px;
}

/* Every accent variable points at the one accent; every grey becomes white */
:root,
body.landing-page,
body.profile-page {
  --sasol-blue: var(--brand-accent);
  --ai-cyan: var(--brand-accent);
  --blue-soft: var(--brand-accent);

  --sasol-grey: var(--brand-text);
  --sasol-muted: var(--brand-text);
  --text-secondary: var(--brand-text);
  --ai-electric: var(--brand-text);
  --ai-muted: var(--brand-text);

  --sasol-line: transparent;
  --border-light: transparent;
}


/* =========================================================
   1, 4, 10. NO SHADOWS, GLOWS, ROUNDED CORNERS OR PULSING
   ========================================================= */

*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* No borders or outlines; native radios/checkboxes keep their own control drawing */
*:not(input[type="radio"]):not(input[type="checkbox"]),
*::before,
*::after {
  border: 0 !important;
  outline: none !important;
}

input[type="radio"],
input[type="checkbox"] {
  outline: none !important;
  accent-color: var(--brand-accent) !important;
}


/* =========================================================
   SOLID BLUE BACKGROUNDS (no glows or vignettes)
   ========================================================= */

body.landing-page,
body.profile-page {
  background: var(--brand-bg) !important;
  color: var(--brand-text);
}

body.landing-page::after,
body.profile-page::after {
  display: none !important;
}

body.profile-page .profile-card,
.nav-burger,
.nav-menu,
body.profile-page .session-dialog::backdrop {
  backdrop-filter: none !important;
}


/* =========================================================
   7. WHITE TEXT (no grey)
   ========================================================= */

.agenda-notice,
.agenda-summary,
.agenda-detail,
.personal-agenda-welcome,
.personal-agenda-venue,
.personal-agenda-message,
.nav-menu .nav-logout,
body.profile-page .agreement,
body.profile-page .session-dialog-option,
body.profile-page .event-copy,
body.profile-page .event-copy p {
  color: var(--brand-text) !important;
}

body.profile-page .details input,
body.profile-page .details input:read-only {
  color: var(--brand-text);
  opacity: 1;
}

input::placeholder {
  color: var(--brand-text) !important;
  opacity: 1;
}


/* =========================================================
   6. ONE ACCENT: times, eyebrows, labels, links
   ========================================================= */

.agenda-time,
.personal-agenda-time,
.personal-agenda-category,
.landing-eyebrow,
body.profile-page legend,
body.profile-page .agreement a {
  color: var(--brand-accent);
}


/* =========================================================
   CARDS AND PANELS - solid fills
   ========================================================= */

.agenda-stream,
.personal-agenda-card,
.personal-agenda-message,
body.profile-page .profile-card,
body.profile-page .session-dialog,
.nav-menu {
  background: var(--brand-surface) !important;
}

/* 8. Hover = solid colour change only */
.agenda-stream:hover {
  transform: none;
  background: var(--brand-field) !important;
}

/* 2. Agenda rows and session rows: no left border, solid fill */
.agenda-list li {
  background: var(--brand-bg);
}

body.profile-page .session,
body.profile-page .session.has-selection {
  background: var(--brand-surface);
}

/* 3. Venue: plain text, no pill */
.agenda-venue {
  padding: 0;
  background: none;
  color: var(--brand-accent);
}

/* Personal link field */
.personal-link-value {
  background: var(--brand-field);
}


/* =========================================================
   5. BUTTONS - solid accent, hover/focus = solid white
   ========================================================= */

.personal-agenda-button,
.landing-title,
.nav-burger,
body.profile-page .primary-button,
body.profile-page .session-trigger,
body.profile-page .session.has-selection .session-trigger,
body.profile-page .session-dialog-actions button,
body.profile-page .session-dialog-actions button:last-child {
  background: var(--brand-accent) !important;
  color: var(--brand-text) !important;
  transform: none !important;
}

.personal-agenda-button:hover,
.personal-agenda-button:focus-visible,
.landing-title:hover,
.landing-title:focus-visible,
.nav-burger:hover,
.nav-burger:focus-visible,
body.profile-page .primary-button:hover:not(:disabled),
body.profile-page .primary-button:focus-visible,
body.profile-page .session-trigger:hover,
body.profile-page .session-trigger:focus-visible,
body.profile-page .session.has-selection .session-trigger:hover,
body.profile-page .session.has-selection .session-trigger:focus-visible,
body.profile-page .session-dialog-actions button:hover,
body.profile-page .session-dialog-actions button:focus-visible {
  background: var(--brand-text) !important;
  color: var(--brand-bg) !important;
  transform: none !important;
}

.nav-burger span {
  background: var(--brand-text);
}

.nav-burger:hover span,
.nav-burger:focus-visible span {
  background: var(--brand-bg);
}


/* =========================================================
   MENU, OPTION ROWS AND FIELDS - hover/focus = solid accent
   ========================================================= */

.nav-menu a,
.nav-menu button {
  background: transparent;
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu button:hover,
.nav-menu button:focus-visible,
.nav-menu a[aria-current="page"],
body.profile-page .radio-label:hover,
body.profile-page .radio-label:has(input:focus-visible),
body.profile-page .session-dialog-option:hover,
body.profile-page .session-dialog-option:has(input:focus-visible) {
  background: var(--brand-accent) !important;
  color: var(--brand-text);
}

body.profile-page .agreement a:hover,
body.profile-page .agreement a:focus-visible {
  color: var(--brand-text);
}

body.profile-page .agreement:has(input:focus-visible) label {
  color: var(--brand-accent);
}

body.profile-page fieldset {
  background: var(--brand-bg);
}

body.profile-page .details input,
body.profile-page .pickup-site-field select,
.personal-link-value {
  background-color: var(--brand-field) !important;
}

body.profile-page .details input:focus,
body.profile-page .pickup-site-field select:focus,
.personal-link-value:focus {
  background-color: var(--brand-surface) !important;
}

body.profile-page .initials-avatar {
  background: var(--brand-accent);
  color: var(--brand-text);
}

body.profile-page .status-message {
  background: var(--brand-accent);
  color: var(--brand-text);
}


/* =========================================================
   TYPOGRAPHY
   One font, normal letter-spacing, no forced capitals and
   one type scale (--type-*) for every page.
   ========================================================= */

html,
body,
h1, h2, h3, h4, h5, h6,
p,
a,
button,
input,
select,
option,
textarea,
label,
legend,
dialog {
  font-family: var(--brand-font);
}

*,
*::before,
*::after {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Page titles: Welcome, Event Agenda, My Personal Agenda, Register / My Registration */
.landing-panel h1,
body.profile-page .profile-card h1 {
  font-size: var(--type-title) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* Section and category labels */
.landing-eyebrow,
.agenda-stream-heading h2,
.agenda-venue,
.personal-agenda-category,
.personal-agenda-message h2,
body.profile-page legend,
body.profile-page .event-copy h2 {
  font-size: var(--type-label) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Session titles and times */
.agenda-time,
.agenda-list li > span,
.agenda-list li > div > strong,
.agenda-list li > div > span,
.personal-agenda-time,
.personal-agenda-card h2,
body.profile-page .session-label,
body.profile-page .session-dialog h2 {
  font-size: var(--type-session) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Body and detail text */
.agenda-notice,
.agenda-summary,
.agenda-detail,
.personal-agenda-welcome,
.personal-agenda-venue,
.personal-agenda-message,
.personal-agenda-message p,
.personal-link-value,
.personal-link-status,
body.profile-page .details input,
body.profile-page .pickup-site-field select,
body.profile-page .radio-label,
body.profile-page .agreement,
body.profile-page .session-dialog-option,
body.profile-page .status-message,
body.profile-page .event-copy p {
  color: var(--brand-text) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Buttons and menu items */
.personal-agenda-button,
.landing-title,
.nav-menu a,
.nav-menu button,
body.profile-page .primary-button,
body.profile-page .session-trigger,
body.profile-page .session-dialog-actions button {
  font-size: var(--type-button) !important;
  font-weight: 700 !important;
}


/* =========================================================
   AI INDABA BACKGROUND IMAGE
   Agenda, my-agenda and register/profile pages (the splash page
   sets its own in landing.css). Cards and panels stay solid.
   ========================================================= */

body.agenda-page,
body.my-agenda-page,
body.indaba-bg {
  background: #003961 url("../assets/images/bg-desktop.webp") center / cover no-repeat fixed !important;
}

@media (max-width: 1024px) {
  body.agenda-page,
  body.my-agenda-page,
  body.indaba-bg {
    background: #003961 url("../assets/images/bg-tablet.webp") center / cover no-repeat scroll !important;
  }
}

@media (max-width: 600px) {
  body.agenda-page,
  body.my-agenda-page,
  body.indaba-bg {
    background: #003961 url("../assets/images/bg-mobile.webp") center / cover no-repeat scroll !important;
  }
}

/* The image replaces the background grid */
body.agenda-page::before,
body.my-agenda-page::before,
body.indaba-bg::before {
  display: none !important;
}


/* =========================================================
   FORM PANELS: question headings sit inside the panel
   (a floated legend is laid out like a normal heading
   instead of straddling the fieldset edge)
   ========================================================= */

body.profile-page fieldset {
  padding: 20px;
}

body.profile-page legend {
  float: left;
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  padding: 0;
}

body.profile-page fieldset > :not(legend) {
  clear: both;
}