/* ==================================================
   Saudi GFX - merged foundation stylesheet
   Verified merge structure for the combined base + main CSS

   Merge layout used in this version:
   1) Foundation tokens and reset
   2) Base layout and typography
   3) Global utilities and legacy spacing helpers
   4) Reusable UI primitives and shared surfaces
   5) Page modules in document order
   6) Responsive overrides
   7) Accessibility and legacy cleanup at the end
================================================== */

/* ==================================================
   1. Theme tokens
   Core design variables shared across all merged layers
================================================== */

:root {
    --bg: #000000;
    --bg-soft: #111111;
    --bg-panel: #161616;
    --bg-panel-2: #1d1d1d;
    --bg-border: #3f3f3f;
    --text: #cccccc;
    --text-strong: #ffffff;
    --text-muted: #a3a3a3;
    --accent-1: #399bff;
    --accent-2: #ee71f9;
    --header-height: 72px;
    --section-space: clamp(72px, 10vw, 120px);
    --content-width: 1100px;
    --content-width-narrow: 900px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.22);
    --gradient-accent: linear-gradient(45deg, var(--accent-1) 0%, var(--accent-2) 100%);
    --gradient-hero: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.98) 100%);
    --transition: 220ms ease;
}

/* ==================================================
   2. Reset and base
   Shared browser normalization and element defaults
================================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-soft);
    color: var(--text);
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.map img {
    max-width: none;
}

iframe {
    width: 100%;
    border: 0;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

ul,
ol {
    list-style: none;
}

::selection {
    background: #000000;
    color: #ffffff;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);
}

button,
input,
select,
textarea {
    font: inherit;
}

.stop-scroll {
    overflow: hidden;
}

/* ==================================================
   3. Layout base
   Page shell, content width, and section anchoring
================================================== */

.wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 1600px;
    background: var(--bg);
    overflow: clip;
}

.container {
    width: min(100%, var(--content-width));
}

section {
    position: relative;
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ==================================================
   4. Typography
   Type hierarchy shared by page modules and utilities
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-strong);
    position: relative;
    line-height: 1.1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.header .logo,
a.link,
input[type="text"] {
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hero-content h3,
.block-ticket .block-price .block-type {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p,
li,
span {
    color: var(--text);
}

p {
    line-height: 1.8;
}

strong {
    color: var(--text-strong);
    font-weight: 700;
}

em {
    font-style: italic;
}

.title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.08;
    font-weight: 300;
    text-transform: none;
    letter-spacing: -0.02em;
}

.title-lead,
p.title-lead {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.8;
    color: var(--text);
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.sub-title-0 {
    font-size: clamp(1.65rem, 2.3vw, 2.1rem);
    font-weight: 300;
    text-transform: none;
}

.sub-title-1 {
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 300;
    text-transform: none;
}

.sub-title-2 {
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    font-weight: 300;
    text-transform: none;
}

.sub-title-3 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    color: var(--text);
}

.gradient-text,
.gradient-text:visited {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-1);
}

.gradient-text:hover,
.gradient-text:focus {
    opacity: 0.88;
}

/* ==================================================
   5. Global helpers and utilities
   Low-level helpers plus retained legacy spacing classes
================================================== */

.front-p {
    position: relative;
    z-index: 100;
}

.uppercase {
    text-transform: uppercase;
}

.white {
    color: #ffffff;
}

.top {
    position: relative;
    top: -10px;
}

.not-mb {
    margin-bottom: 0 !important;
}

.pd-0 {
    padding: 0 !important;
}

.brd-bottom {
    border-bottom: 1px solid var(--bg-border);
}

.bg-dark {
    background: #0f0f0f;
}

.bg-black {
    background: #090909;
}

.vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* legacy utility classes still used in markup */
.pt-10 { padding-top: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pt-25 { padding-top: 25px !important; }
.pb-25 { padding-bottom: 25px !important; }
.pt-30 { padding-top: 30px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pt-60 { padding-top: 60px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pt-70 { padding-top: 70px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pt-80 { padding-top: 80px !important; }
.pb-80 { padding-bottom: 80px !important; }
.pt-90 { padding-top: 90px !important; }
.pb-90 { padding-bottom: 90px !important; }
.pt-100 { padding-top: 100px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pt-120 { padding-top: 120px !important; }
.pb-120 { padding-bottom: 120px !important; }
.pt-130 { padding-top: 130px !important; }
.pb-130 { padding-bottom: 130px !important; }
.pt-140 { padding-top: 140px !important; }
.pb-140 { padding-bottom: 140px !important; }
.pt-150 { padding-top: 150px !important; }
.pb-150 { padding-bottom: 150px !important; }
.pt-160 { padding-top: 160px !important; }
.pb-160 { padding-bottom: 160px !important; }
.pt-200 { padding-top: 200px !important; }
.pb-200 { padding-bottom: 200px !important; }
.pt-250 { padding-top: 250px !important; }
.pb-250 { padding-bottom: 250px !important; }

.mt-5 { margin-top: 5px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mt-70 { margin-top: 70px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mt-80 { margin-top: 80px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mt-90 { margin-top: 90px !important; }
.mb-90 { margin-bottom: 90px !important; }
.mt-100 { margin-top: 100px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mt-130 { margin-top: 130px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mt-150 { margin-top: 150px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mt-200 { margin-top: 200px !important; }
.mb-200 { margin-bottom: 200px !important; }
.mt-350 { margin-top: 350px !important; }

/* ==================================================
   6. Buttons and links
   Shared interactive primitives used across modules
================================================== */

.but {
    display: inline-block;
    position: relative;
    color: #ffffff;
    padding: 11px 40px;
    border-radius: 999px;
    background: var(--gradient-accent);
    transition: transform var(--transition), opacity var(--transition);
}

.but:hover,
.but:focus {
    opacity: 0.92;
}

a.link {
    position: relative;
    display: inline-block;
    font-weight: 600;
    min-height: 22px;
}

a.link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 4;
    background: var(--gradient-accent);
}

p a,
span a {
    position: relative;
}

p a::after,
span a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1),
                transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    background: var(--gradient-accent);
}

p a:hover::after,
span a:hover::after,
p a:focus::after,
span a:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================================
   7. Shared surfaces and components
   Reusable cards, forms, image shells, and overlays
================================================== */

.block-form,
.block-tabs,
.block-tab,
.block-ticket,
.registry-form {
    border-radius: var(--radius-sm);
}

.block-tabs,
.block-tab {
    background: var(--bg-panel);
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.block-faq {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.4rem 1.5rem;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.block-faq h4 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none;
    line-height: 1.35;
}

.block-speaker {
    height: 100%;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.block-img {
    position: relative;
    min-height: 380px;
    height: 100%;
}

.block-speaker .block-img .background-img {
    filter: grayscale(1);
    transition: filter var(--transition), transform 500ms ease;
}

.block-speaker:hover .block-img .background-img {
    filter: grayscale(0.15);
    transform: scale(1.03);
}

.block-info-2 {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 14px;
    z-index: 4;
}

.block-info-2 p {
    margin-bottom: 0;
}



.block-info-2 strong {
    display: inline;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

.block-info-2 span {
    display: block;
    margin-top: 0.15rem;
    color: #ededed;
    font-size: 0.82rem;
    line-height: 1.15;
}

.block-content li {
    color: #f0f0f0;
    line-height: 1.45;
    font-size: 0.88rem;
}





.block-content {
    margin-top: 0.95rem;
}


.background-img {
    position: absolute;
    inset: 0;
    background-color: #353031;
    background-position: 50% 50% !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    z-index: 0;
}

.background-img img {
    display: none;
}

.overlay::before,
.overlay.soft::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.overlay::before {
    background: var(--gradient-hero);
}

.overlay.soft::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.92) 100%);
}

/* ==================================================
   8. Loader
   Startup-only loading layer placed before page modules
================================================== */

.loader {
    position: fixed;
    inset: 0;
    background: #111111;
    z-index: 9999;
}

.loader-inner {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loading-spinner {
    width: 100px;
    height: 100px;
    animation: spinner-rotate 2s ease-in-out infinite;
}

.spinner {
    stroke-linecap: round;
    animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
}

@keyframes spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-color {
    0%, 100% { stroke: #399bff; }
    20% { stroke: #ee71f9; }
    40% { stroke: #399bff; }
    60% { stroke: #ee71f9; }
    80% { stroke: #399bff; }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -125px;
    }
}

/* ==================================================
   9. Header + navigation
   Fixed site header and mobile toggle behavior
================================================== */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 999;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
}

.header .container {
    width: min(100%, 1200px);
}

.header .row {
    align-items: center;
}

.header .logo {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: var(--text-strong);
    position: relative;
}

.site-logo-text {
    display: inline-block;
    line-height: 1;
}

.main-nav {
    position: relative;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
}

.main-nav li {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 500;
    margin-left: 0;
    letter-spacing: 0.02em;
}

.main-nav li a {
    color: var(--text-strong);
    display: inline-block;
    padding: 0.8rem 0;
    position: relative;
    opacity: 0.92;
}

.main-nav li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.4rem;
    width: 100%;
    height: 2px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.main-nav li a:hover,
.main-nav li a:focus {
    opacity: 1;
}

.main-nav li a:hover::after,
.main-nav li a:focus::after {
    transform: scaleX(1);
}

.toggle-mobile-but {
    position: relative;
}

.mobile-but {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    z-index: 1001;
}

.mobile-but .lines,
.mobile-but .lines::before,
.mobile-but .lines::after {
    width: 22px;
    height: 2px;
    background: #ffffff;
    display: block;
    content: "";
    transition: transform var(--transition), opacity var(--transition);
}

.mobile-but .lines {
    position: absolute;
    top: 15px;
    left: 5px;
}

.mobile-but .lines::before {
    transform: translateY(-7px);
}

.mobile-but .lines::after {
    transform: translateY(5px);
}

.toggle-mobile-but.active .mobile-but .lines {
    background: transparent;
}

.toggle-mobile-but.active .mobile-but .lines::before {
    transform: translateY(0) rotate(45deg);
}

.toggle-mobile-but.active .mobile-but .lines::after {
    transform: translateY(-2px) rotate(-45deg);
}

/* ==================================================
   10. Hero
   Intro slider, hero overlays, and primary title sizing

   Layer model:
   - section.hero creates the viewport-sized stacking context
   - .main-slider fills that space as the background media layer
   - .background-img provides the actual cover image inside each slide
   - .overlay pseudo-elements darken the media for text readability
   - .inner-hero and .hero-content stay above everything as the copy layer
   This preserves the original visual intent while making the merged layout explicit.
*/

section.hero {
  position: relative;
  background: #353031;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

section.single-hero {
  min-height: 400px;
}

/* Background slider must be pinned to the hero so it behaves like a true
   backdrop layer rather than occupying normal document flow. */
.main-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.main-slider,
.main-slider .slides,
.main-slider .slides li {
  min-height: 100vh;
  min-height: 100svh;
  height: 100%;
}

.main-slider .slides li {
  position: relative;
}

/* Shared image and overlay primitives are defined once in the shared
surfaces/components section above. The hero keeps only hero-specific
stacking, sizing, and content-layer rules here. */


/* Foreground copy remains vertically centered within the hero viewport and
   sits above both the media and the overlay. */
section.hero .inner-hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 32px) 0 48px;
}

.hero-content {
  position: relative;
  z-index: 6;
  width: 100%;
  text-align: center;
  padding-inline: 16px;
}

.hero-content .row,
.hero-content .col-sm-12 {
  position: relative;
  z-index: 2;
}

h1.large {
    color: var(--text-strong);
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    line-height: 0.98;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.04em;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

h2.large {
    color: var(--text-strong);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.06;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

h3.large {
  color: var(--text-strong);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.18;
  font-weight: 700;
  text-transform: none;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-content h2:not(.large) {
  color: var(--text-strong);
  font-size: clamp(1rem, 1.75vw, 1.35rem);
  line-height: 1.35;
  font-weight: 500;
  text-transform: none;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-content h2:not(.large) em {
  font-style: italic;
  font-weight: 300;
}

.hero-content h3 {
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--text-strong);
  text-transform: none;
  font-weight: 300;
  line-height: 1.2;
}

.hero-content p {
  font-size: clamp(0.95rem, 1.3vw, 1rem);
  font-weight: 500;
  margin-bottom: clamp(0.7rem, 2vw, 1.3rem);
  color: var(--text-strong);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.hero-content p.uppercase {
  text-transform: uppercase;
}

.hero-content p a {
  color: var(--text-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-content p a:hover,
.hero-content p a:focus {
  opacity: 0.9;
}












/* ==================================================
   11. Shared section rhythm
   Consistent vertical spacing for major content sections
================================================== */

#workshops,
#speakers,
#schedule,
#faq,
#mc25-winners,
#about,
#global-partnership,
footer .top-footer {
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
}

/* ==================================================
   12. Workshops
   Introductory content block and centered reading layout
================================================== */

.workshops-content {
    width: min(100%, var(--content-width-narrow));
    margin: 0 auto;
}

.workshops-content .title,
.workshops-content .title-lead {
    text-align: center;
}

.workshops-content .workshops-text {
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
}

.workshops-content .workshops-text + .workshops-text {
    margin-top: 1.5rem;
}

/* ==================================================
   13. Speakers
   Speaker cards, image treatment, and speaker metadata
================================================== */

.block-info-2 a {
    color: var(--text-strong);
    margin-left: 8px;
    font-size: 1rem;
    vertical-align: middle;
}

.speaker-subtitle em {
    font-style: italic;
}

#speakers .row:last-child > [class*="col-"] {
    margin-bottom: 1.5rem;
}

/* ==================================================
   14. Schedule
   Tabbed schedule navigation and session detail blocks
================================================== */

.schedule .container + .container {
    margin-top: 1rem;
}

.block-tabs li {
    position: relative;
    border-bottom: 1px solid var(--bg-border);
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.block-tabs li:last-child {
    border-bottom: 0;
}

.block-tabs li.active {
    background: #252525;
}

.block-tabs li strong,
.block-date strong {
    display: inline-block;
    font-size: 1rem;
    margin-right: 0.35rem;
}

.block-tabs li span,
.block-date span {
    display: inline;
    color: var(--text);
    font-size: 0.95rem;
}

.block-tabs li i,
.block-tab li i {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.85rem;
    color: var(--text-strong);
}

.block-tab > li {
    display: none;
}

.block-tab > li.active {
    display: block;
}

.block-tab li .block-date {
    background: #252525;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bg-border);
}

.block-tab .block-detail {
    border-bottom: 1px solid var(--bg-border);
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    background: transparent;
}

.block-tab > li > .block-detail:last-child {
    border-bottom: 0;
}

.block-tab .block-detail .time {
    display: block;
    color: var(--text-strong);
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.block-tab .block-detail .topic {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
}

.block-tab .block-detail .speaker {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-strong);
}

.block-tab .block-detail p {
    margin-bottom: 0.5rem;
}

.block-tab .block-detail .block-detail {
    margin-top: 0.9rem;
    padding: 0;
    border: 0;
}

.block-tab .block-detail .block-detail:hover {
    background: transparent;
}

/* ==================================================
   15. FAQ
   FAQ-specific copy spacing layered onto shared FAQ shell
================================================== */

.block-faq p {
    margin-bottom: 0;
}

/* ==================================================
   16. Winners
   Winners section content width and heading treatment
================================================== */

.mc-winners,
.mc25-winners {
    position: relative;
}

.mc25-winners-content {
    width: min(100%, 900px);
    margin: 0 auto;
}

#mc25-winners .card-header {
    color: var(--text-strong);
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

#mc25-winners p {
    color: var(--text-strong);
    letter-spacing: 0.05em;
}

/* ==================================================
   17. About
   Centered about section with retained legacy topic list styling
================================================== */

.about-content {
    width: min(100%, var(--content-width-narrow));
    margin: 0 auto;
    text-align: center;
}

.about-content .title,
.about-content .title-lead,
.about-content .events-intro {
    text-align: center;
}

.about-content ul.block-topic {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 20px auto 0;
    padding-left: 1.4rem;
    text-align: left !important;
}

ul.block-topic li,
.about-content ul.block-topic li {
    display: list-item;
    color: var(--text-strong);
    line-height: 1.85;
    font-size: 1rem;
    font-weight: 600;
    text-align: left !important;
}

.about-content .title-lead span {
    display: block;
    position: static;
    top: auto;
}

/* ==================================================
   18. Partnership
   Partnership logo layout and row alignment tweaks
================================================== */

#global-partnership img {
    width: min(100%, 260px);
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0.96;
}

#global-partnership .row.vertical-align + .row.vertical-align {
    min-height: 40px;
}

#global-partnership .col-sm-12 p {
    margin: 0;
    line-height: 1;
}

/* ==================================================
   19. Support block
   Small adjacent text/link adjustments near support content
================================================== */

.container .sub-title-1 + p {
    margin-top: 0.6rem;
}

.container .sub-title-1 + p a {
    font-size: 1.05rem;
    font-weight: 600;
}

/* ==================================================
   20. Footer
   Footer background, text, and compact bottom bar sizing
================================================== */

footer {
    background: #0f0f0f;
}

.top-footer {
    color: var(--text-muted);
}

.top-footer p {
    max-width: 56ch;
}

.bottom-footer {
    font-size: 12px;
    min-height: 40px;
}

/* ==================================================
   21. Utility cleanup
   Alignment fixes for legacy grid utility combinations
================================================== */

.col-md-10.text-right,
.col-md-3.col-sm-3.text-right {
    text-align: right;
}

@media (max-width: 991px) {
    .col-md-10.text-right,
    .col-md-3.col-sm-3.text-right {
        text-align: left;
    }
}

/* ==================================================
   22. Responsive
   Breakpoint overrides kept after all module definitions
================================================== */

@media (max-width: 1199px) {
    .main-nav ul {
        gap: 0.35rem 1rem;
    }

    .main-nav li {
        font-size: 0.78rem;
    }

    .block-img {
        min-height: 340px;
    }
}

@media (max-width: 991px) {
    :root {
        --header-height: 68px;
    }

    .header .container {
        width: min(100%, 100%);
        padding-left: 16px;
        padding-right: 16px;
    }

    .header .row {
        position: relative;
    }

    .header .logo {
        min-height: 48px;
        font-size: 1.35rem;
    }

    .mobile-but {
        display: block;
    }

    .main-nav {
        margin-top: 0.25rem;
    }

    .main-nav ul {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.5rem 0 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-nav li {
        display: block;
        width: 100%;
    }

    .main-nav li a {
        display: inline-block;
        padding: 0.7rem 0;
    }

    .main-nav li a::after {
        bottom: 0.2rem;
    }

    section.hero .inner-hero {
        padding-top: calc(var(--header-height) + 24px);
    }

    .block-tab,
    .block-tabs {
        margin-top: 1rem;
    }

    .vertical-align {
        display: block;
    }
}

@media (max-width: 767px) {
    :root {
        --section-space: 84px;
    }

    .title {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .title-lead {
        font-size: 1rem;
    }

    section.hero,
    .main-slider,
    .main-slider .slides,
    .main-slider .slides li,
    section.hero .inner-hero {
        min-height: 100vh;
        min-height: 100svh;
    }

    section.hero .inner-hero {
        align-items: center;
        padding: calc(var(--header-height) + 22px) 0 32px;
    }

    .hero-content {
        padding-inline: 18px;
    }

    .hero-content h1.large,
    .hero-content h2.large,
    .hero-content h3.large,
    .hero-content h2:not(.large),
    .hero-content p {
        max-width: 24ch;
        margin-left: auto;
        margin-right: auto;
    }

    .block-img {
        min-height: 320px;
    }

    .block-info-2 {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .block-faq {
        padding: 1.15rem 1.1rem;
    }

    .about-content,
    .workshops-content,
    .mc25-winners-content {
        width: min(100%, 92%);
    }

    #global-partnership .col-md-4,
    #global-partnership .col-sm-4 {
        margin-bottom: 1.5rem;
    }

    .top-footer .col-sm-4 {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 575px) {
    :root {
        --header-height: 64px;
    }

    .header {
        min-height: var(--header-height);
    }

    .header .logo {
        font-size: 1.2rem;
    }

    .hero-content {
        padding-inline: 14px;
    }

    h1.large {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
    }

    h2.large {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    h3.large {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

    .hero-content h2:not(.large) {
        font-size: 1rem;
    }

    .hero-content p {
        font-size: 0.92rem;
    }

    .block-img {
        min-height: 300px;
    }

    .block-tabs li,
    .block-tab .block-detail,
    .block-tab li .block-date {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .block-tabs li strong,
    .block-date strong {
        display: block;
        margin-right: 0;
        margin-bottom: 0.2rem;
    }

    #mc25-winners .card-header {
        font-size: 1.5rem !important;
    }
}

/* ==================================================
   23. Reduced motion
   Accessibility override kept after all animations and transitions
================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================
   24. Legacy special-case cleanup
   Retained third-party map suppression from the original base layer
================================================== */

a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"] {
    display: none !important;
}

.gmnoprint a,
.gmnoprint span,
.gm-style-cc {
    display: none;
}

.gmnoprint div {
    background: none !important;
}