/* =========================================================
   UIC 2026 - page-wide styles
   Section-specific styles live in each section's template.

   ISOLATION
   - Everything here is scoped to .uic-section, so nothing leaks
     to the rest of the site.
   - The reset below cancels the global site styles
     (variables.css / OTM.css / Tailwind preflight) inside UIC
     sections, so only UIC CSS applies there.

   RULES FOR SECTION CSS
   - Always prefix with the section class:
       .uic-hero .uic-hero-title { ... }
   - For headings (h1-h6) add !important to font-size,
     font-weight and line-height (variables.css forces them).
   ========================================================= */

/* ---------- Tokens (Municipalika theme) ----------
   Every value here is a colour/font the Municipalika site already uses.
   Site variables (variables.css) are referenced where they exist,
   with the same value as fallback. */
.uic-section {
  /* Dark blue banners (hero, dark cards, awards, contact) */
  --uic-banner: var(--secondary, #00407b);
  /* White backgrounds */
  --uic-white: var(--white, #ffffff);
  /* Buttons + hover */
  --uic-green: #00ba94;
  --uic-green-dark: #00936f;
  --uic-gradient-green: linear-gradient(90deg, var(--uic-green-dark) 0%, var(--uic-green) 100%);
  /* Headings */
  --uic-heading: #043652;
  /* Body text */
  --uic-text: #364153;
  /* Light section backgrounds */
  --uic-bg-light: #e9f9ff;
  /* Table row tint (site page background) */
  --uic-row-tint: var(--bg, #fafaff);
  /* Borders / divider lines on white (site navbar + button border) */
  --uic-border-light: #e9ebef;
  /* Soft card shadow (site cards) */
  --uic-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  /* Text on dark banners */
  --uic-text-light: #d5ebff;
  --uic-text-muted: rgb(174, 214, 251);
  /* Borders / panels on dark banners */
  --uic-border: rgba(255, 255, 255, 0.1);
  --uic-radius: 8px;
  --uic-radius-lg: 16px;
  /* Site font */
  --uic-font: var(--font-family, "Geist", sans-serif);
}

/* ---------- Base ---------- */
.uic-section {
  padding: 80px 0;
  font-family: var(--uic-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--uic-text);
}

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

/* ---------- Reset global site styles inside UIC ---------- */
.uic-section :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  color: inherit;
}

.uic-section :is(p, span, li, label, small, strong) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.uic-section :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uic-section a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------- Buttons ----------
   Match the site's buttons (.mainBtn in OTM.css + homepage "Watch Highlights"):
   40px tall, 24px side padding, 16px/600, 12px radius, green gradient,
   only as wide as the text on every screen size.
   Every button ends with <i class="fa-solid fa-arrow-right">. */
.uic-section .uic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  height: 40px;
  padding: 0 24px;
  white-space: nowrap;
  font-family: var(--uic-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.uic-section .uic-btn i {
  font-size: 14px;
  transition: transform 0.25s ease;
}

.uic-section .uic-btn:hover i,
.uic-section .uic-btn:focus i {
  transform: translateX(3px);
}

.uic-section .uic-btn-primary {
  border: 0;
  background: var(--uic-gradient-green);
  color: var(--uic-white);
}

.uic-section .uic-btn-primary:hover,
.uic-section .uic-btn-primary:focus {
  background: var(--uic-gradient-green);
  box-shadow: 0 8px 20px rgba(0, 147, 111, 0.28);
  transform: translateY(-2px);
  color: var(--uic-white);
}

/* White button on dark backgrounds (hero "Sponsor Now") */
.uic-section .uic-btn-outline {
  background: var(--uic-white);
  border-color: var(--uic-white);
  color: var(--dark, #1a202a);
}

.uic-section .uic-btn-outline:hover,
.uic-section .uic-btn-outline:focus {
  background: #e1f0ff;
  border-color: #e1f0ff;
  color: var(--dark, #1a202a);
}

/* Dark filled button ("Download UIC Brief"); on hover it stays filled and
   shifts to the lighter Municipalika navy with the same lift as the green one */
.uic-section .uic-btn-outline-dark {
  background: var(--uic-heading);
  border-color: var(--uic-heading);
  color: var(--uic-white);
}

.uic-section .uic-btn-outline-dark:hover,
.uic-section .uic-btn-outline-dark:focus {
  background: var(--secondary, #00407b);
  border-color: var(--secondary, #00407b);
  box-shadow: 0 8px 20px rgba(0, 64, 123, 0.28);
  transform: translateY(-2px);
  color: var(--uic-white);
}

/* ---------- Shared section heading ---------- */
.uic-section .uic-title {
  margin: 0 0 12px;
}

/* Every UIC section heading (h2) matches the site's h2 in variables.css:
   Geist 500, 44px / 125%, --dark. The doubled .uic-section outranks the
   per-section title rules in each template, so sizes are set only here. */
.uic-section.uic-section h2 {
  font-family: var(--uic-font);
  font-size: 44px !important;
  font-weight: 500 !important;
  line-height: 125% !important;
  letter-spacing: -0.03em;
  color: var(--dark, #1a202a);
}

/* Full-width headings (directly in .container) are centred, along with a
   subtitle right under them. Headings inside a column beside an image or
   card (about, why, dates) stay left-aligned with their text. */
.uic-section.uic-section .container > h2 {
  text-align: center;
}

.uic-section.uic-section .container > h2 + :is(.uic-subtitle, .uic-themes-subtitle) {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Headings on the dark blue sections (awards, contact) stay white */
.uic-section.uic-section h2.uic-title-light {
  color: var(--uic-white);
}

@media (min-width: 1900px) {
  .uic-section.uic-section h2 {
    font-size: 46px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
  .uic-section.uic-section h2 {
    font-size: 36px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .uic-section.uic-section h2 {
    font-size: 32px !important;
    line-height: 118% !important;
  }
}

@media (max-width: 767.98px) {
  .uic-section.uic-section h2 {
    font-size: 33px !important;
    line-height: 110% !important;
  }
}

@media (max-width: 365px) {
  .uic-section.uic-section h2 {
    font-size: 30px !important;
  }
}

/* Mobile/tablet (columns stacked): every heading and subheading is centred,
   including the ones that sit in a column on desktop. Body text stays left. */
@media (max-width: 991.98px) {
  .uic-section.uic-section h2 {
    text-align: center;
  }

  .uic-section.uic-section :is(.uic-subtitle, .uic-themes-subtitle, .uic-why-subtitle, .uic-awards-subtitle, .uic-award-group-title) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Hero: title, subtitle, description, buttons and dates */
  .uic-section.uic-hero :is(.uic-hero-title, .uic-hero-subtitle, .uic-hero-desc) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .uic-section.uic-hero :is(.uic-hero-ctas, .uic-hero-dates) {
    justify-content: center;
    text-align: center;
  }

  /* All text is centred on mobile/tablet */
  .uic-section.uic-section {
    text-align: center;
  }

  /* Icon lists (why participate, submission bullets): icon sits inline
     before the text so centred multi-line items stay tidy */
  .uic-section.uic-section :is(.uic-why-item, .uic-award-ceremony) {
    display: block;
  }

  .uic-section.uic-section :is(.uic-why-item, .uic-award-ceremony) > i {
    display: inline-block;
    margin: 0 8px 0 0;
  }

  .uic-section.uic-section :is(.uic-hero-ctas, .uic-sub-cta-btns, .uic-criteria-pills) {
    justify-content: center;
  }

  /* Dot bullets (submission): dot sits inline before the centred text */
  .uic-section.uic-section .uic-sub-bullets li {
    padding-left: 0;
  }

  .uic-section.uic-section .uic-sub-bullets li::before {
    position: static;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }

  /* Image + text sections: heading -> image -> text.
     The text column "dissolves" (display: contents) so its heading and
     body can be ordered around the image column. */
  .uic-stack.uic-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .uic-stack > .uic-stack-text {
    display: contents;
  }

  .uic-stack > .uic-stack-text > * {
    order: 3;
    width: 100%;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }

  .uic-stack > .uic-stack-text > .uic-stack-head {
    order: 1;
  }

  .uic-stack > .uic-stack-media {
    order: 2;
    margin: 4px 0 28px;
  }
}

.uic-section .uic-subtitle {
  max-width: 720px;
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--uic-text);
}

.uic-section .uic-subtitle-light {
  color: var(--uic-text-light);
}

.uic-section .uic-title-only {
  margin-bottom: 40px;
}

@media (max-width: 767.98px) {
  .uic-section {
    padding: 56px 0;
  }

  .uic-section .uic-subtitle {
    margin-bottom: 28px;
    font-size: 16px;
  }

  .uic-section .uic-title-only {
    margin-bottom: 28px;
  }
}