/* ============================================================
   Bootstrap 5 + Ark theme navbar compatibility fixes.
   Ark was built for Bootstrap 3 (float-based); BS5 uses flexbox.
   ============================================================ */

/* 0. Accessibility: skip-to-content link + visible keyboard focus.
   Ark's theme has no skip link and relies on the browser's default focus ring,
   which several of its own rules suppress (outline: none on links/buttons) —
   restore a visible ring for keyboard users. */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #fff;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--brand-color, #2c5282);
}
.skip-to-content:focus {
    top: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-color, #2c5282) !important;
    outline-offset: 2px !important;
}

/* 1. BS5 makes nav.navbar a flex container — Ark needs block/float layout */
.header nav.navbar {
    display: block;
}

/* Ensure header and its dropdowns always sit above the date/venue bar below */
.header {
    position: relative;
    z-index: 100;
}

/* 2. Desktop: single-row flex layout — logo left, nav right */
@media (min-width: 992px) {
    .header .navbar .container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    /* 3. Show nav at desktop — BS5 hides .collapse by default */
    .header .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
    }

    .header .navbar-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    .header .navbar-nav > .nav-item {
        display: block;
        position: relative;
    }

    /* Prevent nav link text from wrapping */
    .header .navbar-nav > .nav-item > a {
        white-space: nowrap;
    }

    /* Keep dropdown menu out of flow so it doesn't shift the nav row */
    .header .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
    }
}

/* 3b. Ark's default dropdown item padding (8px 20px) reads cramped for our
   short menus (2-3 items) — give items more breathing room top/bottom.
   display:block is required: this <a> has no display set upstream, so it
   defaults to inline — an inline element's vertical padding paints a
   background box that bleeds above/below the line without actually
   growing the <li> row, so one item's hover/active highlight overlaps
   the next item's row. */
.header .dropdown-menu .dropdown-menu-item .dropdown-menu-item-child {
    display: block;
    padding: 12px 24px;
    line-height: 1.4;
}

/* 3c. Committees nav item: "Committees" itself is now a real link (navigates
   to the Committees page), so the submenu is opened via this separate caret
   button instead of Bootstrap's dropdown-toggle. Desktop still also reveals
   the submenu on hover regardless of this button's state (see global.css). */
.header .navbar-nav .dropdown-caret {
    background: none;
    border: none;
    padding: 0 4px;
    margin-left: 2px;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

/* 4. Mobile: BS5 uses .show for expanded state */
@media (max-width: 991px) {
    .header .navbar-collapse {
        display: none;
    }
    .header .navbar-collapse.show,
    .header .navbar-collapse.collapsing {
        display: block !important;
    }
}

/* 5. Ensure .container inside navbar clears floats */
.header .navbar .container::after {
    content: "";
    display: table;
    clear: both;
}

/* 6. Bootstrap 5 underlines all <a> by default; Bootstrap 3 did not.
   Ark theme expects no underlines. Strip them site-wide for nav/buttons. */
a,
a:hover,
a:focus {
    text-decoration: none !important;
}

/* btn-link should keep its default look but no underline */
.btn.btn-link,
.btn.btn-link:hover,
.btn.btn-link:focus {
    text-decoration: none !important;
}

/* 7. Logo text fallback (when no image logo is set).
   Ark fixes navbar-logo to 100px wide — too narrow for text.
   Also reset link colour so it doesn't show as blue. */
.header .navbar-logo {
    width: auto;
    max-width: 220px;
}
.header .navbar-logo .navbar-logo-wrap {
    color: inherit;
    text-decoration: none;
}
.header .navbar-logo .navbar-logo-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    text-decoration: none;
}
.header .navbar-logo .navbar-logo-line1 {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-color, #2c5282);
    text-transform: lowercase;
    letter-spacing: 1px;
}
.header .navbar-logo .navbar-logo-line2 {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-color, #2c5282);
    text-transform: lowercase;
    letter-spacing: 1px;
}

/* 7b. Uploaded image logo — global.css caps it at 85px wide, too small once
   navbar-logo itself was widened above; 200px/90px then proved too big. */
.header .navbar-logo .navbar-logo-img {
    width: auto;
    max-width: 145px;
    max-height: 56px;
}

/* 7c. Homepage "About" intro video — sized by its own column width via aspect-ratio instead
   of Ark's equal-height-ib (a fixed 500px height shared with the text column regardless of
   either side's actual content), so it scales naturally at any viewport/description length. */
.sai-intro-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}
.sai-intro-text {
    flex: 1 1 0;
}
.sai-intro-video-col {
    flex: 1 1 0;
}
.sai-intro-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transition: box-shadow .25s ease;
}
.sai-intro-video:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
}
.sai-intro-video img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity .25s ease, transform .35s ease;
}
.sai-intro-video:hover img {
    opacity: 0.95;
    transform: scale(1.03);
}
.sai-intro-video .fa-play-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    transition: transform .25s ease, background .25s ease;
}
.sai-intro-video:hover .fa-play-circle {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--brand-color, #2c5282);
}
@media (max-width: 992px) {
    .sai-intro-row {
        flex-direction: column;
    }
}

/* 8. Breadcrumb trail shown above the h1 in the generic breadcrumbs-v5 hero
   header (saiconference.com hub + legal/CFP/committee pages). */
.sai-breadcrumb-trail {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.6);
}
.sai-breadcrumb-trail .sai-breadcrumb-link {
    color: rgba(255, 255, 255, 0.6);
}
.sai-breadcrumb-trail .sai-breadcrumb-link:hover {
    color: #fff;
    text-decoration: underline !important;
}
.sai-breadcrumb-trail .sai-breadcrumb-sep {
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.4);
}
.sai-breadcrumb-trail .sai-breadcrumb-current {
    color: rgba(255, 255, 255, 0.85);
}

/* 8b. Slim inline page header (_PageHeader.cshtml) — light background variant
   of the breadcrumb trail, replacing the old dark breadcrumbs-v5 banner. */
.sai-page-header .sai-breadcrumb-trail {
    color: #8792a2;
}
.sai-page-header .sai-breadcrumb-trail .sai-breadcrumb-link {
    color: #8792a2;
}
.sai-page-header .sai-breadcrumb-trail .sai-breadcrumb-link:hover {
    color: var(--brand-color, #2c5282);
}
.sai-page-header .sai-breadcrumb-trail .sai-breadcrumb-sep {
    color: #cbd5e0;
}
.sai-page-header .sai-breadcrumb-trail .sai-breadcrumb-current {
    color: #374151;
}

.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

/*--------------------------------------------------
    Legacy-style Form CSS (Payment/Contact forms)
----------------------------------------------------*/
.row-fluid {
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.row-fluid .label {
    display: block;
    float: left;
    min-height: 30px;
    margin-left: 2.564102564102564%;
    box-sizing: border-box;
    text-align: left;
    width: 30%;
}
.row-fluid .label p { margin: 0; }
.row-fluid ul { display: inline-block; }
.row-fluid .errored input { border: 2px solid #f2d3ce !important; }
.row-fluid .field input,
.row-fluid .field textarea,
.row-fluid .field select {
    width: 65%;
    border: 1px solid #e6e6e6;
    min-height: 30px;
    border-radius: 2px;
    padding: 4px 8px;
}
.row-fluid .field select {
    height: 38px;
    padding: 4px 32px 4px 12px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%23666' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
    cursor: pointer;
}
.row-fluid .field .submit-meta-row,
.row-fluid .field .help-block { width: 65%; }
.row-fluid .radiofield input {
    border: 1px solid #e6e6e6;
    min-height: 45px;
    vertical-align: middle;
}
.row-fluid .radiofield span {
    min-height: 45px;
    vertical-align: middle;
    padding-left: 10px;
}
@media (max-width: 767px) {
    .row-fluid .label,
    .row-fluid .field input,
    .row-fluid .field textarea { width: 100%; float: none; }
    .row-fluid { padding-left: 15px; }
}

/* 9. Conferences hub (/) hero — dark gradient, no image dependency since not
   every series has a hero photo uploaded. */
.sai-hub-hero {
    position: relative;
    background: radial-gradient(circle at 15% 20%, #2a3f66 0%, transparent 45%),
                radial-gradient(circle at 85% 80%, #1f6f6b 0%, transparent 40%),
                linear-gradient(135deg, #141a29 0%, #1e2a42 55%, #141a29 100%);
    color: #fff;
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
}
/* Faint dot-grid texture for depth, sits behind all hero content */
.sai-hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}
.sai-hub-hero .container { position: relative; z-index: 1; }
.sai-hub-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 22px;
}
.sai-hub-hero-eyebrow i { color: #4ed7c8; }
.sai-hub-hero-title {
    /* Must be explicit, not inherited — global.css's bare "h1{color:#34343c}" rule sets color
       directly on every h1 element, and any element-level declaration always beats inheritance
       regardless of selector specificity. Without this, the title renders as near-invisible dark
       grey on the hero's dark gradient background. */
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
}
.sai-hub-hero-title .sai-hub-hero-accent {
    background: linear-gradient(90deg, #4ed7c8, #6ea8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sai-hub-hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    max-width: 620px;
    margin: 0 auto 34px;
}
.sai-hub-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.sai-hub-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.sai-hub-hero-btn:hover { text-decoration: none; transform: translateY(-2px); }
.sai-hub-hero-btn-primary {
    background: linear-gradient(90deg, #2fb8ac, #3d8bff);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(61, 139, 255, 0.55);
}
.sai-hub-hero-btn-primary:hover {
    color: #fff;
    box-shadow: 0 14px 28px -8px rgba(61, 139, 255, 0.7);
}
.sai-hub-hero-btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.sai-hub-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767px) {
    .sai-hub-hero { padding: 64px 0 50px; }
    .sai-hub-hero-title { font-size: 1.85rem; }
}

/* 9b. Split variant — used when a hub intro video is configured; text left, video right */
.sai-hub-hero-split .container,
.sai-hub-hero-split .sai-hub-hero-eyebrow,
.sai-hub-hero-split .sai-hub-hero-title,
.sai-hub-hero-split .sai-hub-hero-subtitle,
.sai-hub-hero-split .sai-hub-hero-ctas {
    text-align: left;
    justify-content: flex-start;
}
.sai-hub-hero-split .sai-hub-hero-subtitle { margin: 0 0 34px; max-width: none; }
.sai-hub-hero-split .sai-hub-hero-ctas { margin-bottom: 30px; }
.sai-hub-hero-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sai-hub-hero-video:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6);
}
.sai-hub-hero-video img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.85;
}
.sai-hub-hero-video i.fa-play-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: #fff;
    text-shadow: 0 4px 16px rgba(0,0,0,.6);
    transition: transform 0.2s ease;
}
.sai-hub-hero-video:hover i.fa-play-circle { transform: translate(-50%, -50%) scale(1.1); }
@media (max-width: 991px) {
    .sai-hub-hero-split .col-md-5 { margin-top: 30px; }
}

/* 10. Conference cards on the hub page — coloured icon band up top instead of
   depending on a per-conference photo (not every series has one uploaded). */
.sai-conf-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sai-conf-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.sai-conf-card-band {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    overflow: hidden;
    /* Layered on top of the inline brand background-color set per conference, so every
       card gets the same subtle depth regardless of which brand hex is used. */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.35) 100%);
    background-blend-mode: overlay;
}
/* Compact modifier — used on the Call for Papers page, where the cards are
   quick-nav links rather than the main showcase, so a shorter band suits better. */
.sai-conf-card-band-sm { height: 70px; }

.sai-conf-card-band > i.sai-conf-card-band-icon {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.95);
    font-size: 26px;
}
.sai-conf-card-band-watermark {
    position: absolute;
    right: 6px;
    bottom: -22px;
    font-size: 78px;
    color: rgba(255, 255, 255, 0.16);
    z-index: 0;
}
.sai-conf-card-band-venue {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
}
.sai-conf-card-status {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px 4px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.sai-conf-card-status i {
    font-size: 6px;
    color: #2ecc71;
    margin-right: 5px;
}
/* "service-block-v2-title" isn't an actual defined class in this theme (dead reference), so the
   card title h3 was falling back to Bootstrap's bare default (24px) — too large next to the
   rest of the card's much smaller text. Scoped to this card only so it doesn't affect any other
   h3 on the site. */
.sai-conf-card-body h3 {
    font-size: 19px;
    line-height: 1.35;
}
.sai-conf-card-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.85;
}
.sai-conf-track-chip {
    display: inline-block;
    background: transparent;
    border: 1px solid;
    margin: 0 6px 6px 0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.sai-conf-track-chip-more {
    display: inline-block;
    background: transparent;
    border: 1px solid #d1d5db;
    color: #6b7280;
    margin: 0 6px 6px 0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.sai-conf-card-link {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.sai-conf-card-link i {
    margin-left: 3px;
    transition: margin-left 0.15s ease;
}
.sai-conf-card-link:hover i {
    margin-left: 7px;
}
/* 9b. Hub page trust strip — a row of short credibility chips (real self-reported numbers)
   plus real third-party press coverage below, which is a stronger credibility signal than
   repeating stats shown again further down the page. */
.sai-hub-stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    padding: 22px 0;
}
.sai-hub-stat-chip {
    color: #34343c;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}
.sai-hub-stat-chip i {
    color: var(--brand-color, #2c2c2c);
    margin-right: 7px;
}
@media (max-width: 767px) {
    .sai-hub-stat-chip { white-space: normal; }
}
.sai-hub-bignum-strip {
    background: linear-gradient(120deg, #1f2430, #333a4a);
    padding: 46px 0;
}
.sai-hub-bignum-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 32px 0;
}
.sai-hub-bignum {
    flex: 1 1 160px;
    max-width: 220px;
    padding: 0 20px;
    color: #fff;
}
.sai-hub-bignum-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
}
.sai-hub-bignum-label {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.3px;
}
@media (max-width: 767px) {
    .sai-hub-bignum-value { font-size: 1.9rem; }
}
.sai-uni-marquee-wrap {
    padding: 30px 0 34px;
    overflow: hidden;
}
.sai-uni-marquee-title {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8a92;
    margin-bottom: 18px;
}
.sai-uni-marquee-track {
    display: flex;
    width: max-content;
    animation: sai-uni-marquee 32s linear infinite;
}
.sai-uni-marquee-wrap:hover .sai-uni-marquee-track {
    animation-play-state: paused;
}
.sai-uni-marquee-item {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-size: 1.02rem;
    font-weight: 600;
    color: #45454e;
    padding: 0 34px;
    border-right: 1px solid #e2e2e8;
}
.sai-uni-marquee-item i {
    color: var(--brand-color, #5b2a86);
}
@keyframes sai-uni-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .sai-uni-marquee-track { animation: none; }
}
.sai-media-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.sai-media-strip a {
    display: inline-flex;
    align-items: center;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.sai-media-strip a:hover {
    opacity: 1;
    filter: grayscale(0%);
}
.sai-media-strip img {
    max-height: 52px;
    max-width: 160px;
    width: auto;
}

.sai-conf-card-body {
    padding: 26px 26px 24px;
    flex: 1;
}

/* 11. Notable-speakers trust chips on the hub page. */
.sai-speaker-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.sai-speaker-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 8px 16px;
}
.sai-speaker-chip i {
    color: var(--brand-color, #2c5282);
}
.dropdown-submenu:hover .dropdown-menu { display: block; }

/* SAI hub header nav — dark glass bar matching the redesigned hero */
.sai-hub-nav {
    background: rgba(20, 26, 41, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    padding: 14px 0;
}
.sai-hub-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff !important;
}
.sai-hub-nav-brand i {
    color: #4ed7c8;
    font-size: 1.05rem;
}
.sai-hub-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    padding: 8px 14px !important;
    transition: color 0.2s ease;
}
.sai-hub-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, #4ed7c8, #6ea8ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.sai-hub-nav .nav-link:hover,
.sai-hub-nav .nav-link:focus,
.sai-hub-nav .nav-link.active {
    color: #fff !important;
}
.sai-hub-nav .nav-link:hover::after,
.sai-hub-nav .nav-link:focus::after,
.sai-hub-nav .nav-link.active::after {
    transform: scaleX(1);
}
.sai-hub-nav-dropdown {
    background: #1b2436;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}
.sai-hub-nav-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.82);
}
.sai-hub-nav-dropdown .dropdown-item:hover,
.sai-hub-nav-dropdown .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.sai-hub-nav-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.sai-hub-nav-socials a:hover {
    background: linear-gradient(90deg, #2fb8ac, #3d8bff);
    color: #fff !important;
}

/* Call for Papers — per-conference submission rounds table */
.sai-cfp-round-table {
    width: 100%;
    max-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.sai-cfp-round-table thead tr th {
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 18px;
}
.sai-cfp-round-table tbody td {
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
    color: #374151;
}
.sai-cfp-round-table tbody tr:nth-child(even) {
    background: #f9fafb;
}