/*
 * Digital Summit - EDS foundation.
 * Brand layer generated by stardust:deploy from DESIGN.md (Mode A brand-faithful);
 * structural layer (body gate, header reservation, section scaffold) preserved
 * from adobe/aem-boilerplate.
 */

/* metric-matched fallbacks (available at first paint; brand faces load via fonts.css) */
@font-face {
  font-family: poppins-fallback;
  src: local('Arial');
  size-adjust: 92.62%;
  ascent-override: 113.39%;
  descent-override: 37.8%;
  line-gap-override: 10.8%;
}

@font-face {
  font-family: lato-fallback;
  src: local('Arial');
  size-adjust: 92.23%;
  ascent-override: 107.02%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}

:root {
  /* brand palette (captured, Mode A pinned) */
  --color-bg: #fff;            /* house-white - brand-faithful inversion: pure white retained */
  --color-fg: #000;            /* ink - pure black retained */
  --color-accent: #189ac6;     /* cyan-stage */
  --color-magenta: #ec008c;    /* magenta-spotlight */
  --color-purple: #9d2ca2;     /* purple-afterparty */
  --color-indigo: #0e0477;     /* indigo-keynote */
  --color-gold: #efac1f;       /* gold-confetti - text on ink/indigo grounds only */
  --color-pink: #f680c5;       /* pink-lanyard - accent words on dark bands only */
  --color-mist: #e3ebf3;       /* mist-panel */

  /* gradients (signature) */
  --gradient-fill: linear-gradient(45deg, #127ba3, #9d2ca2); /* start stop darkened from #189ac6 for 4.5:1 white-text AA */
  --gradient-border: linear-gradient(to right, #ec008c, #189ac6);
  --gradient-display: linear-gradient(135deg, #0e0477 33%, #000 66%);
  --duotone: linear-gradient(135deg, rgb(14 4 119 / 86%), rgb(96 3 112 / 72%) 55%, rgb(236 0 140 / 55%));

  /* type */
  --heading-font-family: 'Poppins', poppins-fallback, sans-serif;
  --body-font-family: 'Lato', lato-fallback, sans-serif;
  --heading-font-size-xxl: 49px;
  --heading-font-size-xl: 39px;
  --heading-font-size-l: 31px;
  --heading-font-size-m: 25px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 16px;
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;
  --body-font-size-lede: 20px;

  /* layout */
  --maxw: 1200px;
  --section-padding: 64px;
  --radius: 20px;
  --radius-pill: 25px;
  --radius-chip: 4px;
  --nav-hairline: rgb(0 0 0 / 15%) 0 0 3px 0;

  /* chrome reservation */
  --nav-height: 68px;
}

@media (width <= 800px) {
  :root { --nav-height: 64px; }
}

/* structural: body gate (runtime adds .appear) - DO NOT REMOVE */
body {
  display: none;
  margin: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.5;
  color: var(--color-fg);
  background-color: var(--color-bg);
}

body.appear { display: block; }

/* structural: header reservation - late chrome must not shift the page */
header { height: var(--nav-height); background: var(--color-bg); }
header .header, footer .footer { visibility: hidden; }
header .header[data-block-status='loaded'],
footer .footer[data-block-status='loaded'] { visibility: visible; }

*, *::before, *::after { box-sizing: border-box; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  line-height: 1.15;
  margin: 0 0 16px;
  text-wrap: balance;
  scroll-margin: calc(var(--nav-height) + 16px);
}

h1 { font-size: var(--heading-font-size-xxl); font-weight: 800; }
h2 { font-size: var(--heading-font-size-xl); font-weight: 700; }
h3 { font-size: var(--heading-font-size-m); font-weight: 700; }
h4 { font-size: var(--heading-font-size-s); font-weight: 600; }
h5, h6 { font-size: var(--heading-font-size-xs); font-weight: 600; }

p, ol, ul, dl, pre, blockquote { margin: 0 0 16px; }

a:any-link { color: var(--color-indigo); }
a:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

::selection { background: var(--color-accent); color: #fff; }

/* captured accent-phrase convention: <em> in headings = brand accent, not italic */
main h1 em, main h2 em, main h3 em { font-style: normal; color: var(--color-magenta); }

/* sections */
main > .section { padding: var(--section-padding) 24px; }
main > .section > div { max-width: var(--maxw); margin: auto; }
main .section:empty { display: none; }

@media (width <= 1024px) {
  :root { --section-padding: 48px; }

  h1 { font-size: var(--heading-font-size-xl); }
}

@media (width <= 640px) {
  :root { --section-padding: 32px; }

  h2 { font-size: var(--heading-font-size-l); }
}

/* default-content section styles (D1 closed set) */
main .section.mist { background: var(--color-mist); }
main .section.on-air { background: var(--color-indigo); color: #fff; }
main .section.on-air a:any-link:not(.button) { color: var(--color-pink); }
main .section.centered { text-align: center; }

/* buttons - the signature dual-gradient pill system (captured, Mode A) */
a.button:any-link, button.button {
  display: inline-block;
  background: var(--gradient-fill) padding-box, var(--gradient-border) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s ease, background 0.2s ease;
}

a.button:hover, button.button:hover {
  background: linear-gradient(90deg, #189ac6, #9d2ca2) padding-box, var(--gradient-border) border-box;
  filter: brightness(1.06);
}

/* primary IS the gradient pill (default); secondary = ink fill, same gradient border */
a.button.secondary, button.button.secondary {
  background: linear-gradient(45deg, #000, #000) padding-box, var(--gradient-border) border-box;
}

a.button.secondary:hover {
  background: linear-gradient(45deg, var(--color-indigo), var(--color-indigo)) padding-box, var(--gradient-border) border-box;
  filter: none;
}

p.button-wrapper { display: inline-flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 16px 16px 0; }

/* chips (broadcast chrome) */
.chip {
  display: inline-block;
  background: var(--color-fg);
  color: var(--color-gold);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-chip);
}

.chip--date { color: var(--color-pink); text-transform: none; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}