/* =========================================================================
   BSides Chisinau design system
   Loaded last in App.razor, so it takes over from the purchased template
   (templatemo-574-mexant) wherever the two disagree.

   Fonts are self-hosted under assets/fonts. The template declared Poppins but
   only ever loaded Open Sans, so every page was falling back to Arial.
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------ */

@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrainsMonoVar';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrainsmono-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrainsMonoVar';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrainsmono-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ----------------------------------------------------- */

:root {
    --bs-ink:          #080a0f;   /* page background */
    --bs-surface:      #10141c;   /* cards, panels */
    --bs-surface-2:    #161c27;   /* raised panels */
    --bs-line:         rgba(255, 255, 255, 0.09);
    --bs-line-strong:  rgba(255, 255, 255, 0.18);

    --bs-text:         #eef1f6;
    --bs-text-muted:   #98a2b3;
    /* #6a7383 read at 3.4:1 to 4.1:1 depending on the panel it sat on, under the 4.5:1
       AA floor everywhere it was used: footer copyright, hero meta, edition stats,
       agenda break badges. This clears 4.5:1 on every surface in the palette. */
    --bs-text-faint:   #828b9c;

    --bs-accent:       #e8232a;
    --bs-accent-hot:   #ff4b52;
    --bs-accent-dim:   rgba(232, 35, 42, 0.14);

    /* Second accent, used only by the Call for Sponsors button. Cyan is the complement of
       the brand red, so it separates cleanly, and it picks up the teal already in the
       hero photograph instead of introducing a colour from nowhere. */
    --bs-accent-2:     #21c6d8;
    --bs-accent-2-hot: #4ad8e8;
    --bs-accent-2-ink: #05171b;

    --bs-font:  'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-mono:  'JetBrainsMonoVar', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bs-shell:   1180px;
    --bs-gutter:  clamp(20px, 5vw, 48px);
    --bs-section: clamp(72px, 9vw, 132px);
    --bs-radius:  14px;
}

/* ---------- Base ------------------------------------------------------- */

/* No scroll-behavior: smooth here. As a property of the root element it applies to every
   scroll in the document, including ones no one asked for: anything that repositions the page
   stops being instant and becomes a 300ms journey the reader watches. The scrolling this site
   actually wants is asked for explicitly, by jQuery in custom.js for the menu and by
   scrollTo/scrollIntoView with behavior: 'smooth' in EditionPage, and all of it still works. */
html {
    /* the sticky header must not cover anchored sections */
    scroll-padding-top: 96px;
}

html, body {
    background-color: var(--bs-ink);
    color: var(--bs-text);
    font-family: var(--bs-font);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-font);
    color: var(--bs-text);
    letter-spacing: -0.022em;
    line-height: 1.15;
    font-weight: 700;
}

p { color: var(--bs-text-muted); }

a { color: var(--bs-accent-hot); text-decoration: none; }
a:hover { color: var(--bs-accent-hot); }

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

:focus-visible {
    outline: 2px solid var(--bs-accent-hot);
    outline-offset: 3px;
    border-radius: 4px;
}

/* The template's decorative dash; the new layout uses spacing instead. */
.div-dec { display: none !important; }

/* ---------- Shell ------------------------------------------------------ */

.container {
    max-width: var(--bs-shell) !important;
    width: 100% !important;
    padding-left: var(--bs-gutter) !important;
    padding-right: var(--bs-gutter) !important;
    margin-inline: auto !important;
}

/* ---------- Header / nav ----------------------------------------------- */

.header-area {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .28s ease, border-color .28s ease, backdrop-filter .28s ease;
    box-shadow: none !important;
    height: auto !important;
}

/* custom.js toggles this once the page is scrolled */
.header-area.background-header {
    background: rgba(8, 10, 15, 0.82) !important;
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--bs-line);
}

.header-area .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
    background: transparent !important;
}

.header-area .main-nav .logo {
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.header-area .main-nav .logo img {
    height: 40px;
    width: auto;
}

.header-area .main-nav .nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

.header-area .main-nav .nav li { position: relative; }

.header-area .main-nav .nav > li > a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--bs-text-muted) !important;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    /* The template capitalises every word, which turns "Call for Speakers" into
       "Call For Speakers". The copy is written the way it should read. */
    text-transform: none;
    height: auto !important;
    border: 0 !important;
    transition: color .18s ease, background-color .18s ease;
}

.header-area .main-nav .nav > li > a:hover,
.header-area .main-nav .nav > li > a.active {
    color: var(--bs-text) !important;
    background: rgba(255, 255, 255, 0.06);
}

/* The template turns the last nav item into a green pill. Reset it: the only
   strong colour in the header should be the wordmark. */
.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a {
    display: block;
    padding: 9px 14px !important;
    border-radius: 8px;
    background-color: transparent !important;
    color: var(--bs-text-muted) !important;
    font-size: 14.5px;
    font-weight: 500;
    text-transform: none;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--bs-text) !important;
}

/* Submenu (Open Calls): the template draws its own caret on the <li>; hide it
   so we do not end up with two chevrons. */
.header-area .main-nav .nav li.has-sub::after { display: none !important; }

.header-area .main-nav .nav li.has-sub > a::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 8px;
    vertical-align: middle;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 218px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--bs-surface-2);
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu,
.header-area .main-nav .nav li.has-sub:focus-within ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--bs-text-muted) !important;
    font-size: 14px;
    font-weight: 500;
    background: transparent !important;
    text-transform: none;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover,
.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
    color: var(--bs-text) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* The template also singles out the last submenu entry. */
.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
    padding: 9px 12px !important;
    border-radius: 8px;
    background: transparent !important;
    color: var(--bs-text-muted) !important;
    font-size: 14px;
    text-transform: none;
}

/* Mobile menu trigger.

   The template positions this absolutely at top: 33px; right: 40px. Switching it to
   position: relative does not retire those offsets: they became relative offsets and pushed
   the button 33px below the 78px nav line, where the template's overflow: hidden on .main-nav
   cut off its lower half. The inset has to be reset explicitly. */
.header-area .main-nav .menu-trigger {
    display: none;
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 40px; height: 40px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 10px;
    cursor: pointer;
    /* The span holds the word "Menu" for assistive tech; the three bars are the visual. */
    font-size: 0;
}

/* No overflow: hidden here. The span is the middle bar and its two pseudo-elements are the
   outer bars, so clipping the span to its own 1.8px height leaves a single dash. */
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after {
    position: absolute;
    left: 11px;
    width: 18px; height: 1.8px;
    background: var(--bs-text);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}

.header-area .main-nav .menu-trigger span { top: 19px; }
.header-area .main-nav .menu-trigger span::before { content: ''; left: 0; top: -6px; }
.header-area .main-nav .menu-trigger span::after  { content: ''; left: 0; top: 6px; }

/* Open state. The template stretches all three bars to width: 100% of the button, which turns
   the X into a 38px cross that overshoots its own frame. Hold them at the bar width. */
.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span::before,
.header-area .main-nav .menu-trigger.active span::after {
    width: 18px;
    background: var(--bs-text);
}

.header-area .main-nav .menu-trigger.active span { background: transparent; }
.header-area .main-nav .menu-trigger.active span::before { transform: translateY(6px) rotate(45deg); }
.header-area .main-nav .menu-trigger.active span::after  { transform: translateY(-6px) rotate(-45deg); }

/* 994px, not 991px, on purpose. The template switches the header to its mobile drawer at
   max-width: 994px and back to a row at min-width: 995px. A 991px boundary here left 992,
   993 and 994 uncovered: the template's drawer rules applied, ours did not, and the header
   rendered as a permanently open white panel with no logo and an unreachable menu. Any
   viewport can land there, a browser zoom step is enough. Keep this in step with the
   template's 995px edge. */
@media (max-width: 994px) {
    /* The template clips .main-nav to hide its own slide-down menu. This layout drops the
       panel below the header instead, so the clip only ever cuts something off. */
    .header-area .main-nav { overflow: visible; }

    .header-area .main-nav .menu-trigger { display: block; }

    .header-area .main-nav .nav {
        display: none;
        position: absolute;
        top: 78px; left: 0; right: 0;
        /* The template pushes the panel down by a header height it no longer has. */
        margin-top: 0 !important;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px var(--bs-gutter) 18px;
        background: rgba(8, 10, 15, 0.97) !important;
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--bs-line);
        border-bottom: 1px solid var(--bs-line);
        text-align: left;
    }

    /* Below 995px the template restyles the whole menu as its own light drawer: white rows,
       #eee separators, 50px line-height and centred text, most of it !important. Undo it,
       otherwise the panel opens as a white block in the middle of a dark page. */
    .header-area .main-nav .nav li {
        width: 100%;
        background: transparent;
        border: 0;
    }

    .header-area .main-nav .nav li:first-child { border-top: 0; }

    .header-area .main-nav .nav > li > a {
        height: auto !important;
        line-height: 1.4 !important;
        padding: 12px 4px !important;
        background: transparent !important;
        color: var(--bs-text-muted) !important;
        font-size: 16px;
        text-align: left;
    }

    /* The last item carries its own rule from the desktop block; match it to the rest. */
    .header-area .main-nav .nav > li:last-child > a {
        height: auto !important;
        line-height: 1.4 !important;
        padding: 12px 4px !important;
        font-size: 16px;
        text-align: left;
    }

    .header-area .main-nav .nav > li > a:hover,
    .header-area .main-nav .nav > li > a.active {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--bs-text) !important;
    }

    /* The template hides submenus outright on mobile, which would strand the Open Calls
       entries: they are reachable nowhere else once the menu collapses. */
    .header-area .main-nav .nav li.has-sub ul.sub-menu {
        display: block;
        height: auto;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 14px;
        border-left: 1px solid var(--bs-line);
        margin: 2px 0 6px;
    }

    .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
        height: auto !important;
        line-height: 1.4 !important;
        padding: 10px 12px !important;
        background: transparent !important;
        color: var(--bs-text-muted) !important;
        text-align: left;
    }

    .header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
        background: rgba(255, 255, 255, 0.07) !important;
        color: var(--bs-text) !important;
    }
}

/* ---------- Buttons ---------------------------------------------------- */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.green-button,
.orange-button,
.accent-button { display: inline-flex; }

.green-button a,
.orange-button a,
.accent-button a,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-family: var(--bs-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    /* the template capitalises every word, which turns "Call for Speakers"
       into "Call For Speakers" */
    text-transform: none !important;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease;
}

/* Primary: the only strong red on the page besides the wordmark */
.green-button a,
.btn-danger {
    background: var(--bs-accent) !important;
    border-color: var(--bs-accent) !important;
    color: #fff !important;
}

.green-button a:hover,
.btn-danger:hover {
    background: var(--bs-accent-hot) !important;
    border-color: var(--bs-accent-hot) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Call for Sponsors. Solid cyan against the solid red primary: the two calls carry
   equal weight, and dark text on cyan clears WCAG AA comfortably. */
.accent-button a {
    background: var(--bs-accent-2) !important;
    border-color: var(--bs-accent-2) !important;
    color: var(--bs-accent-2-ink) !important;
    font-weight: 700;
}

.accent-button a:hover {
    background: var(--bs-accent-2-hot) !important;
    border-color: var(--bs-accent-2-hot) !important;
    color: var(--bs-accent-2-ink) !important;
    transform: translateY(-1px);
}

/* Secondary: ghost. Replaces the template's clashing green/orange pair. */
.orange-button a {
    background: transparent !important;
    border-color: var(--bs-line-strong) !important;
    color: var(--bs-text) !important;
}

.orange-button a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: var(--bs-text) !important;
    transform: translateY(-1px);
}

/* ---------- Hero ------------------------------------------------------- */

/* The template fixes the hero at `height: calc(100vh - 0px)` and absolutely
   positions the text block at `width: 50%`. Both are undone here: the hero grows
   with its content, and the copy gets a real column. */
.swiper-container {
    position: relative;
    height: auto !important;
    min-height: 100svh;
    display: flex;
    background: var(--bs-ink) !important;
}

.swiper-wrapper,
.swiper-slide { width: 100%; height: auto; }

.slide-inner {
    position: relative !important;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto !important;
    min-height: 100svh;
    padding: 130px 0 84px;
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
}

.slide-inner .header-text {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
}

/* Two scrims: one horizontal so the text column stays readable, one at the
   bottom so the hero dissolves into the next section instead of cutting off. */
.slide-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(6, 8, 12, 0.90) 0%, rgba(6, 8, 12, 0.70) 34%,
                                 rgba(6, 8, 12, 0.20) 62%, rgba(6, 8, 12, 0.04) 100%),
        linear-gradient(to bottom, rgba(6, 8, 12, 0.55) 0%, rgba(6, 8, 12, 0) 26%,
                                    rgba(6, 8, 12, 0) 62%, var(--bs-ink) 100%);
    pointer-events: none;
}

.slide-inner > .container { position: relative; z-index: 2; }

.header-text { max-width: 820px; }

/* The hero column sits inside a Bootstrap col-lg-8; let it use the full shell. */
.slide-inner .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

/* Selectors match the template's own `.slide-inner .header-text …` specificity. */
.slide-inner .header-text h1,
.header-text h1 {
    font-size: clamp(2.6rem, 6.6vw, 4.9rem) !important;
    font-weight: 800;
    letter-spacing: -0.038em;
    line-height: 1.03;
    margin: 0 0 20px;
    color: #fff;
    text-transform: none;
}

.header-text h1 .hero-year { color: var(--bs-accent-hot); }

.slide-inner .header-text p,
.header-text p {
    max-width: 58ch;
    margin: 0;
    color: var(--bs-text-muted) !important;
    font-size: 1.02rem !important;
    line-height: 1.7;
    text-transform: none;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 28px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--bs-line);
    max-width: 620px;
    font-family: var(--bs-mono);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    color: var(--bs-text);
}

.hero-meta .sep { color: var(--bs-text-faint); }
.hero-meta .hero-venue { color: var(--bs-text-muted); }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 7px 15px 7px 12px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    font-family: var(--bs-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-text);
}

.hero-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bs-accent-hot);
}

.hero-eyebrow.is-past { color: var(--bs-text-muted); }
.hero-eyebrow.is-past::before { background: var(--bs-text-faint); }

/* Selector carries the same weight as `.slide-inner .header-text p` above,
   which would otherwise zero these margins out. */
.slide-inner .header-text p.hero-note,
.header-text p.hero-note {
    max-width: 56ch;
    margin: 26px 0 0 !important;
    padding-left: 16px;
    border-left: 2px solid var(--bs-accent);
    color: var(--bs-text-muted) !important;
    font-size: 0.95rem !important;
}

/* The template sets `display: inline` here and floats the buttons, so margins
   were being dropped entirely. Force the flex row back. */
.slide-inner .header-text .buttons,
.header-text .buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px !important;
}

.slide-inner .header-text .buttons .green-button,
.slide-inner .header-text .buttons .orange-button,
.slide-inner .header-text .buttons .accent-button {
    display: inline-flex !important;
    float: none !important;
    margin-right: 0 !important;
}

/* ---------- Sections --------------------------------------------------- */

section { position: relative; }

.section-heading {
    margin-bottom: 44px;
    text-align: left;
}

/* h4 and h6 are both used for section titles across the page; give them the
   same treatment so "Our Partners" does not read as a different rank. */
.section-heading h4,
.section-heading h6 {
    margin: 0;
    color: var(--bs-text) !important;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important;
    font-weight: 700;
    letter-spacing: -0.028em;
    text-transform: none !important;
    line-height: 1.15;
}

.section-heading::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 18px;
    background: var(--bs-accent);
}

/* A small mono label above each section heading. It carries a fact rather than a
   decoration (the date, the speaker count), and alternating its colour between the
   two accents is what stops one dark section blurring into the next. */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--bs-accent-hot);
    font-family: var(--bs-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.section-eyebrow.is-cyan { color: var(--bs-accent-2); }

.section-heading.on-cyan::after { background: var(--bs-accent-2); }

/* Soft off-screen light behind a section. Large, heavily blurred and very low
   opacity, so it reads as depth rather than as a coloured blob. */
.lit { position: relative; overflow: hidden; }

.lit > * { position: relative; z-index: 1; }

.lit::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.13;
    pointer-events: none;
}

.lit.lit-cyan::before {
    background: var(--bs-accent-2);
    top: -18rem;
    right: -14rem;
}

.lit.lit-red::before {
    background: var(--bs-accent);
    bottom: -22rem;
    left: -16rem;
}

@media (prefers-reduced-motion: no-preference) {
    .lit::before { transition: opacity .4s ease; }
}

/* About. Selectors are written as `section.about-us` to match the template's
   own specificity, which is element+class rather than class alone. */
section.about-us {
    padding: var(--bs-section) 0;
    background: var(--bs-ink);
    background-image: none;
}

section.about-us .section-heading {
    text-align: left;
    margin-bottom: 44px;
}

/* The heading sits in an offset column that centred it; align it with every
   other section heading on the page. */
section.about-us .row > .offset-lg-3 {
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
}

.about-us .right-content {
    height: 100%;
    padding: 30px 28px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
}

.about-us .right-content h4 {
    margin: 0 0 12px;
    font-size: 1.18rem;
    font-weight: 600;
}

.about-us .right-content p {
    margin: 0;
    font-size: 0.97rem;
}

/* CTA band. The template paints a photo (cta-bg.jpg) behind this via
   `section.simple-cta`, so the override has to carry the same element+class weight. */
section.simple-cta {
    padding: clamp(48px, 6vw, 76px) 0;
    background-image: none !important;
    background: linear-gradient(180deg, var(--bs-surface) 0%, var(--bs-ink) 100%);
    border-top: 1px solid var(--bs-line);
    border-bottom: 1px solid var(--bs-line);
}

section.simple-cta .row { align-items: center; row-gap: 24px; }

section.simple-cta h4 {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.25;
    color: var(--bs-text);
}

section.simple-cta h4 em {
    font-style: normal;
    color: var(--bs-accent-hot);
}

section.simple-cta h4 strong { font-weight: 700; color: var(--bs-text); }

section.simple-cta .buttons { justify-content: flex-end; }

@media (max-width: 991px) {
    .simple-cta .buttons { justify-content: flex-start; }
}

/* The CTA band is also used, with .partners-section, for the partner wall;
   that variant supplies its own padding and must not inherit the borders. */
section.simple-cta.partners-section {
    background: var(--bs-ink);
    border-top: 0;
    border-bottom: 0;
}

/* Legal links strip */
section.partners {
    padding: 30px 0 !important;
    background: var(--bs-ink);
    border-top: 1px solid var(--bs-line);
}

section.partners .row { gap: 6px 4px; }

section.partners a {
    color: var(--bs-text-faint) !important;
    font-size: 13.5px;
    text-decoration: none !important;
    transition: color .18s ease;
}

section.partners a:hover { color: var(--bs-text) !important; }

/* Footer */
footer {
    padding: 26px 0 34px;
    background: var(--bs-ink);
    text-align: left;
}

footer p {
    margin: 0;
    color: var(--bs-text-faint);
    font-family: var(--bs-mono);
    font-size: 12.5px;
}

/* ---------- Legal pages ------------------------------------------------ */

/* These pages carried no header, no logo and no footer, and put their text on a white card
   in the middle of a dark site, which made them read as documents from somewhere else.
   They now share the site's chrome through Components/LegalPage.razor and its palette here.

   The rules live in this global sheet rather than beside that component on purpose: the body
   of each page is declared by the page, not by the component, so scoped CSS would style the
   header and footer and silently miss every heading, list and paragraph passed into it. */

/* The header is fixed and transparent because custom.js paints it in on scroll. That script
   only loads on the edition pages, so anywhere else it has to arrive solid or the text
   scrolls underneath it. */
.header-area.is-solid {
    background: rgba(8, 10, 15, 0.92);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--bs-line);
}

/* Shared by the legal pages and the past events index. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 9px;
    color: var(--bs-text) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.back-link::before { content: '←'; color: var(--bs-text-faint); }

.back-link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.32);
}

.legal-hero {
    padding: 150px 0 0;
    background: var(--bs-ink);
}

.legal-hero h1 {
    margin: 0;
    color: var(--bs-text);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.legal-standfirst {
    max-width: 58ch;
    margin: 18px 0 0;
    color: var(--bs-text-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

.legal-body {
    padding: 40px 0 var(--bs-section);
    background: var(--bs-ink);
}

/* A measure, not a page width. Legal text is read line by line and 100ch of it is punishing. */
.legal-column {
    max-width: 78ch;
}

.legal-column .section-heading {
    margin: 54px 0 18px;
}

.legal-column > .section-heading:first-child {
    margin-top: 0;
}

/* The site's section headings are display sized. A document with fifteen of them needs a
   rank below that, or every paragraph reads as its own chapter. */
.legal-column .section-heading h4 {
    font-size: 1.32rem !important;
    letter-spacing: -0.02em;
}

.legal-column .section-heading::after {
    width: 34px;
    margin-top: 14px;
}

.legal-column p {
    margin: 0 0 14px;
    color: var(--bs-text-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-column strong {
    color: var(--bs-text);
    font-weight: 600;
}

.legal-column ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.legal-column li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 22px;
    color: var(--bs-text-muted);
    line-height: 1.7;
}

.legal-column li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-accent);
}

.legal-column a {
    color: var(--bs-accent-hot);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-column a:hover { color: var(--bs-text); }

/* Separates the document from the strip of sibling policies below it. */
.legal-links {
    border-top: 1px solid var(--bs-line);
}

/* ---------- Modals ----------------------------------------------------- */

.modal-content {
    background: var(--bs-surface) !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
    color: var(--bs-text);
}

.modal-header { border-bottom: 1px solid var(--bs-line) !important; }
.modal-body { padding: 26px 28px 30px; }

.modal-title,
.modal-body h4,
.modal-body h5 { color: var(--bs-text) !important; }

.modal-body h4 { font-size: 1.35rem; }
.modal-body h5 { font-size: 1.02rem; font-weight: 600; }

.modal-body p,
.modal-body li,
.modal-body small { color: var(--bs-text-muted) !important; }

.modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: .55;
}

.modal .btn-close:hover { opacity: 1; }

.modal .form-label {
    display: block;
    margin-bottom: 10px;
    color: var(--bs-text);
    font-size: 0.93rem;
    font-weight: 500;
}

.modal .form-control {
    background: var(--bs-ink) !important;
    border: 1px solid var(--bs-line-strong) !important;
    border-radius: 10px !important;
    color: var(--bs-text) !important;
    font-size: 0.95rem;
    padding: 11px 14px;
}

.modal .form-control::placeholder { color: var(--bs-text-faint); }

.modal .form-control:focus {
    border-color: var(--bs-accent) !important;
    box-shadow: 0 0 0 3px var(--bs-accent-dim) !important;
}

.modal .form-check-input {
    background-color: var(--bs-ink);
    border-color: var(--bs-line-strong);
}

.modal .form-check-input:checked {
    background-color: var(--bs-accent);
    border-color: var(--bs-accent);
}

.modal .form-check-label { color: var(--bs-text-muted); }

.modal .info-item i {
    font-size: 1.3rem;
    color: var(--bs-accent-hot);
}

.modal .info-item h6 {
    margin-top: 10px;
    color: var(--bs-text) !important;
    font-size: 0.9rem;
    font-weight: 600;
}

.modal .info-item a { color: var(--bs-text-muted) !important; font-size: 0.9rem; }
.modal .info-item a:hover { color: var(--bs-accent-hot) !important; }

.form-message { font-family: var(--bs-mono); font-size: 0.86rem; }

/* ---------- Print ------------------------------------------------------ */

@media print {
    /* Keep the dark palette rather than printing white-on-white. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .header-area { position: static; }

    /* The hero is a full-viewport panel on screen; on paper it is just a header. */
    .swiper-container,
    .slide-inner { min-height: 0 !important; }

    .slide-inner { padding: 40px 0 !important; }

    /* Agenda abstracts are collapsed by script; show them all on paper. */
    .agenda-details,
    .agenda-details.hidden { display: block !important; max-height: none !important; }

    .faq-answer { max-height: none !important; }

    .agenda-item-modern,
    .faq-item,
    .speakers .card { break-inside: avoid; }

    .modal, .menu-trigger { display: none !important; }
}

/* ---------- Motion ----------------------------------------------------- */

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