:root
{
    --page-max-width: 1300px;
    --bs-heading-color: #000 !important;

    --cms-h1-color: #000000;
    --cms-h1-font-family: inherit;
    --cms-h1-font-style: normal;
    --cms-h1-font-weight: 700;
    --cms-h1-font-size: clamp(1.95rem, 1.8rem + 1.5vw, 3rem);

    --cms-h2-color: #000000;
    --cms-h2-font-family: inherit;
    --cms-h2-font-style: normal;
    --cms-h2-font-weight: 400;
    --cms-h2-font-size: clamp(1.463rem, 1.35rem + 1.125vw, 2.25rem);

    --cms-h3-color: #000000;
    --cms-h3-font-family: inherit;
    --cms-h3-font-style: normal;
    --cms-h3-font-weight: 400;
    --cms-h3-font-size: clamp(1.219rem, 1.125rem + 0.938vw, 1.875rem);

    --cms-p-color: #000000;
    --cms-p-font-family: inherit;
    --cms-p-font-style: normal;
    --cms-p-font-weight: 400;
    --cms-p-font-size: inherit;
}

#cms-builder h1 { color: var(--cms-h1-color); font-family: var(--cms-h1-font-family); font-style: var(--cms-h1-font-style); font-weight: var(--cms-h1-font-weight); font-size: var(--cms-h1-font-size); }
#cms-builder h2 { color: var(--cms-h2-color); font-family: var(--cms-h2-font-family); font-style: var(--cms-h2-font-style); font-weight: var(--cms-h2-font-weight); font-size: var(--cms-h2-font-size); }
#cms-builder h3 { color: var(--cms-h3-color); font-family: var(--cms-h3-font-family); font-style: var(--cms-h3-font-style); font-weight: var(--cms-h3-font-weight); font-size: var(--cms-h3-font-size); }
#cms-builder p  { color: var(--cms-p-color);  font-family: var(--cms-p-font-family);  font-style: var(--cms-p-font-style);  font-weight: var(--cms-p-font-weight);  font-size: var(--cms-p-font-size);  }

#cms-page-builder
{
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

#cms-builder
{
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/**** Header *****/
.cms-header
{
    display: flex;
    align-items: center;
    padding: 0.25rem 0px 0.25rem 3rem;
    position: sticky;
    top: 0px;
    background: white;
    z-index: 1000;
    box-shadow: 0px 0px 2px 2px #00000021;
}

.cms-menu-container
{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.cms-menu
{
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    cursor: pointer;
    position: sticky;
    top: 0px;
    z-index: 1000;
}

.cms-my-account
{
    margin-right: 3rem;
    display: flex;
    align-content: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
}

.cms-menu:hover, .cms-my-account:hover
{
    color: #DC3545;
    transition: all 0.1s;
}

.cms-header-right
{
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 30px;
}
/*****************/

.cms-component
{
    border: solid 1px transparent;
    position: relative;
}

#cms-builder [data-cms-comp]
{
    border: solid 1px transparent;
}

[data-cms-comp='image']
{
    overflow: hidden;
}

#cms-builder .comp-hover, [data-cms-comp]:hover
{
    border: solid 1px #FF5722 !important;
    transition: all 0.3s;
}

#cms-builder .comp-selected, #cms-builder .comp-selected:hover
{
    border: solid 1px #FF5722 !important;
    box-shadow: 0px 0px 3px 2px #ff572245 !important;
}

#cms-builder .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable)
{
    border: none;
    box-shadow: none;
}

.cms-main-container
{
    display: flex;
    justify-content: center;
}

.cms-inner-container
{
    max-width: var(--page-max-width);
    width: 100%;
    padding: 0rem 1rem;
    margin: auto;
}

[data-cms-role="editor"] p
{
    margin-bottom: 0;
    line-height: 1.75rem;
}

[data-cms-role="editor"]
{
    padding: 0px !important;
}

/**************** Banner ********************/

.cms-container
{
    position: relative;
    width: 100%;
    overflow: visible;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
}

.hidden
{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.cms-container-inner
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

[data-comp-type="joyn_title"] .cms-container-inner
{
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    display: block;
    align-self: flex-start;
}

.cms-banner-container h2
{
    font-size: clamp(24px, 8vw, 72px);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    margin-bottom: 0;
    color: white;
}

.cms-banner-container p
{
    margin-bottom: .75rem;
    font-size: clamp(12px, 4vw, 22px);
    columns: #bedeff;
    display: inline;
}
/***************/

/******** Settings Sldier **********/

.cms-settings-container
{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    padding-left: 0.5rem;
    max-width: 560px;
    padding-bottom: 1rem;
}

.cms-settings-item
{
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    flex-direction: column;
}

.cms-settings-item-lbl
{
    color: #7b7a7a;
    font-size: 13px;
}

/*
    Two-up grid for settings that pair naturally (primary/secondary, background/text).
    The columns are fixed so the swatches line up even when one label wraps and the
    other does not.
*/
.cms-settings-grid-2
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    width: 100%;
}

.cms-settings-color
{
    width: 110px !important;
    padding: 4px;
    cursor: pointer;
}

.cms-hint-icon
{
    cursor: help;
    line-height: 0;
}

/*
    The one line of guidance above the profile access rules. Kept to the same 500px column as
    the fields it explains, and quiet enough that it reads as help rather than as a value.
*/
.cms-access-rules-note
{
    width: 500px;
    color: #a4a4a4;
    font-size: 12px;
    line-height: 18px;
}

/*
    One quiet line under the two visibility dates, rewritten as they are typed. Deliberately
    plain text rather than a tinted callout — it is a readout of what was entered, not a
    warning, and only the never-appears case earns any colour.
*/
.cms-visibility-note
{
    width: 100%;
    margin-top: -0.4rem;
    font-size: 12px;
    line-height: 1.55;
    color: #9a9a9a;
}

.cms-visibility-note b
{
    font-weight: 400;
    color: #6e6e6e;
}

.cms-visibility-invalid
{
    color: #b47b7b;
}

.cms-visibility-invalid b
{
    color: #b02a37;
}

/*
    Bootstrap appends the tooltip to body, so this cannot be scoped to the settings panel.
    Without the wider box a few sentences of guidance stack up into a very tall column.
*/
.cms-hint-tooltip .tooltip-inner
{
    max-width: 340px;
    text-align: left;
    line-height: 18px;
}
/***********************************/


/******* Speaker Container **********/
.speaker-container, .cards-container
{
    justify-content: center;
    gap: 1.5rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
}

.speaker-container img
{
    position: relative
}

.speaker-container .card, .cards-container .card
{
    align-items: center !important;
    border-radius: 0.5rem;
    height: auto;
}

.speaker-container .card:hover img
{
    transform: scale(1.1);
}

.speaker-container .card-body
{
    margin-top: 1rem;
}

.speaker-container img
{
    width: 8rem;
    height: 8rem;
    transition: all 0.3s;
    margin: auto;
}
/************************************/

#cms-builder .card,
#cms-viewer .card
{
    margin: 0px !important;
    overflow: visible;
}

#cms-builder .card-body,
#cms-viewer .card-body
{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cms-svg-file-remove, .cms-svg-remove-bg
{
    cursor: pointer;
}

.cms-component-actions
{
    display: flex;
    position: absolute;
    right: 0px;
    top: -0.5rem;
    display: none;
    background: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    gap: 1rem;
    z-index: 100;
}

.col .cms-component-actions
{
    top: auto;
    bottom: 0.5rem;
}

.cms-component-actions svg, .cms-component-actions g
{
    vertical-align: middle;
    width: 18px;
    height: 18px;
    fill: var(--primary);
    cursor: pointer;
}

[data-action], .cms-container
{
    position: relative;
}

.div-editable
{
    border-radius: 5px;
    border: solid 1px #e5e5e5;
    padding: 0.5rem;
}

.div-editable:focus
{
    border: solid 1px var(--primary);
}

.cms-settings-header-lbl
{
    width: 100%;
    font-weight: bold;
    margin-top: 1rem;
}

/****** Sponsors *************/
.cms-sponsors
{
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.cms-sponsors img
{
    height: 4rem;
    cursor: pointer;
}

.cms-sponsors img:hover
{
    filter: grayscale(0%);
    transform: scale(1.05, 1.05);
    transition: all 0.5s;
}
/******************************/

.cms-blank-page
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}

.cms-comp-popup-list
{
    border-right: solid 1px #efefef;
}

.cms-comp-popup-list-img-item
{
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    max-width: 600px;
    margin: auto;
}

.cms-comp-popup-list-img-item:hover
{
    background-color: var(--rgba-primary-1);
    transform: scale(1.05, 1.05);
    border-radius: 5px;
}

.cms-comp-popup-list-item
{
    padding: 0.85rem 2rem;
    font-size: 0.9rem;
    min-width:250px;
    transition: background-color 0.2s;
    cursor: pointer;
    border-bottom: solid 1px #eeeeee;
}

.cms-comp-popup-list-item:last-child
{
    border-bottom: none;
    border-bottom-left-radius: 1rem;
}

.cms-comp-popup-list-item:hover
{
    background-color: var(--rgba-primary-1);
}

.cms-comp-popup-list-item-selected,.cms-comp-popup-list-item-selected:hover
{
    background-color: var(--rgba-primary-7);
    font-weight: 600;
    color: white;
}

.cms-comp-popup-img-list
{
    display: none;
    grid-template-columns: repeat(1, 1fr);
    padding: 30px 30px 30px 15px;
}

.cms-comp-popup-img-list-active
{
    display: grid;
    flex-direction: column;
    gap: 15px 0px;
}

/******* Speaker Container **********/
.footer-container
{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.footer-container .col-12:hover
{
    border: solid 1px #6b91e1 !important;
    box-shadow: 0px 0px 3px 1px #6b91e1 !important;
}

.footer-container .cold-md-12
{
    padding: 0px;
}
/************************************/

.btn-lg
{
    padding: 1rem !important;
    font-size: 1.6rem !important;
    letter-spacing: 0.05rem !important;
}

.cms-header a
{
    color: #000 !important;
    text-decoration: none;
}

.cms-footer-lbl
{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.cms-footer-link-container
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms-svg-remove
{
    width: 13px;
    height: 15px;
    fill: grey;
}

.cms-svg-remove:hover
{
    fill: red;
}

.cms-svg-remove-container
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

footer a
{
    text-decoration: none;
    color: #fff !important;
}

footer a:hover
{
    text-decoration: underline;
}

[data-cms-comp="btn_container"]
{
    display: flex;
}

.speaker-container > div, .cards-container > div
{
    min-width: 300px !important;
}

.comp-selected
{
    /* position: relative; */
    overflow: visible;
}

img.comp-selected
{
    overflow: hidden;
}

.comp-selected .comp-highlight-text
{
    top: -1rem;
}

/*
    Builder-only marker on a button that carries a visibility window, so a scheduled or
    finished button can still be found and edited rather than quietly disappearing from the
    canvas. Drawn entirely from data-visibility-state / data-visibility-label, both of which
    the save strips, so none of it can reach the published page.
*/
#cms-builder [data-visibility-state]
{
    position: relative;
}

#cms-builder [data-visibility-state]::after
{
    content: attr(data-visibility-label);
    position: absolute;
    top: -1rem;
    right: 0px;
    padding: 0.15rem 0.4rem;
    font-size: 0.6rem;
    font-weight: normal;
    color: white;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 100;
}

#cms-builder [data-visibility-state="live"]::after
{
    background-color: #146c43;
}

#cms-builder [data-visibility-state="scheduled"]::after
{
    background-color: #b8860b;
}

#cms-builder [data-visibility-state="expired"]::after
{
    background-color: #6e6e6e;
}

/* dimmed so a page of components reads at a glance, but still fully selectable */
#cms-builder [data-visibility-state="scheduled"],
#cms-builder [data-visibility-state="expired"]
{
    opacity: 0.55;
}

.comp-highlight-text
{
    position: absolute;
    top: 0rem;
    left: 0px;
    padding: 0.15rem 0.3rem;
    font-size: 0.6rem;
    color: white;
    background-color: #FF5722;
    border-radius: 5px;
    transition: all 0.3s;
    min-width: auto !important;
    z-index: 100;
    font-weight: normal !important;
}

.cms-inner-container > div.comp-highlight-text
{
    min-width: auto !important;
}

@media screen and (max-width: 767px){
    [data-comp-grp="banner_title"]
    {
        font-size: 3.25rem !important;
    }

    [data-comp-grp="banner_content"]
    {
        font-size: 1.25rem !important;
        line-height: 2rem !important;
    }
}

.btn-container
{
    display: flex;
}

.btn-lnk-primary
{
    color: #004dcf;
}

.btn-lnk-primary:hover
{
    text-decoration: underline;
}

.speaker-container img, .cards-container img
{
    overflow: hidden !important;
}

.cms-container
{
    gap: 1.5rem;
}

body.modal-open
{
  overflow: auto !important;
  padding-right: 0 !important; /* prevents layout jump */
}

span[data-cms-comp="icon"]
{
    position: relative;
}

.cms-icon-grid
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    height: 300px;
    overflow: AUTO;
}

.cms-svg-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.cms-svg-icon:hover
{
    background: var(--rgba-primary-5);
}

/*
    Carousel banner geometry.

    The box must have a FIXED aspect ratio, otherwise there is nothing for admins to author
    against. A viewport-height based height (the old `clamp(280px, 65vh, 600px)`) made the box
    ratio swing from 3.2:1 on a desktop to 0.71:1 on a phone, so `object-cover` cropped away
    most of the artwork on small screens.

    Ratios are written as single decimal numbers on purpose. The admin loads this file through
    less.js (rel="stylesheet/less") while the public site loads the same raw file as plain CSS,
    so `16 / 9` would be evaluated by LESS and the LESS escape ~"16 / 9" would be invalid CSS
    on the public side. `3` / `2` / `1.3333` are valid CSS and LESS-safe.
*/
.swiper {
    width: 100%;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 3;
    max-height: 70vh;
}

@media (max-width: 1023px) {
    .swiper {
        aspect-ratio: 2;
    }
}

@media (max-width: 767px) {
    .swiper {
        aspect-ratio: 1.3333;
    }
}

/*
    "Full image" banner style: the slide takes the image's own ratio, so nothing is ever cropped
    at any resolution for any upload ratio. Paired with Swiper's autoHeight option.
*/
.swiper[data-banner-style="full"] {
    aspect-ratio: auto;
    height: auto;
    max-height: none;
}

.swiper[data-banner-style="full"] .swiper-slide {
    height: auto;
}

.swiper[data-banner-style="full"] .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    border-radius: 12px;
}

/*
    conference/main.css forces `img { display:block !important; margin:auto !important;
    padding-bottom:1.5rem !important }` on every image below 480px, which fights object-fit and
    leaves a gap under the slide. Higher specificity wins over that rule.
*/
@media (max-width: 480px) {
    .swiper-slide img {
        padding-bottom: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
}

footer h1
{
    color: white !important;
}

footer p, footer a
{
    color: oklch(.707 .022 261.325) !important;
}


footer .cms-inner-container
{
    padding: 0rem 0.25rem;
}

[data-cms-comp-grp="header"] .text-white
{
    color: white;
}

[data-cms-comp-grp="header"] .text-gray-300
{
    color: oklch(.872 .01 258.338) !important;
}

[data-cms-comp-grp="header"] .text-green-200
{
    color:  oklch(.925 .084 155.995) !important;
}

/* .fr-counter
{
    display: none !important;
} */

.m-auto
{
    margin: auto;
}

.flex-card-container > div
{
    max-width: 200px;
}

/* the anchor variants are the same tiles once a sponsor logo has been given a link */
.flex-sponsor-container > div,
.flex-sponsor-container > a
{
    min-width: 200px;
}

.flex-sponsor-container-2 > div,
.flex-sponsor-container-2 > a
{
    min-width: 250px;
}

#cms-viewer .fr-view ol,
[data-cms-role="editor"] ol{
  padding-left: 1rem !important;
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

#cms-viewer .fr-view ul,
[data-cms-role="editor"] ul{
  padding-left: 1rem !important;
  list-style-position: outside !important;
  list-style-type: disc;
  margin-top: 0.5rem;
}

#cms-viewer .fr-view li,
[data-cms-role="editor"] li{
  display: list-item !important;
  list-style-type: inherit !important;
  list-style-position: outside !important;
  margin-bottom: 0.75em;
}

.fr-view table.no-border td,
.fr-view table.no-border th {
  border: none;
}

/*
    An icon tile is a flex item of its card column, so text-align never reaches it — the cross
    axis is driven by its margins. These mirror the container Content Alignment setting onto the
    tile. Scoped under .cms-align-*, which is only ever set when an admin picks an alignment, so
    components left untouched keep the margins their template already declares.
*/
.cms-align-center .cms-icon-tile
{
    margin-left: auto;
    margin-right: auto;
}

.cms-align-left .cms-icon-tile
{
    margin-left: 0;
    margin-right: auto;
}

.cms-align-right .cms-icon-tile
{
    margin-left: auto;
    margin-right: 0;
}
.fr-cell-1px-border {
    border: 1px solid !important;
}

.fr-cell-2px-border {
    border: 2px solid !important;
}

.fr-cell-border-red {
    border-color: #e53935 !important;
}

.fr-cell-border-blue {
    border-color: #1e88e5 !important;
}

.fr-cell-border-green {
    border-color: #43a047 !important;
}

.fr-cell-border-orange {
    border-color: #fb8c00 !important;
}

.fr-cell-border-silver {
    border-color: #c0c0c0 !important;
}

/*
 The open-in-new-tab affordance on a CMS page row.

 Kept invisible until the row is hovered so a long page list stays quiet, and
 removed altogether on an unpublished page: the public site will not serve one,
 so offering to open it would only ever be a broken link. The publish button
 keeps data-published current on the row, so this reacts without a reload.
*/
.cms-pli-open {
    display: none;
    align-items: center;
    color: #a1a1a1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

li[data-published="true"] > .cms-page-item .cms-pli-open {
    display: inline-flex;
}

li[data-published="true"] > .cms-page-item:hover .cms-pli-open {
    opacity: 1;
}

.cms-pli-open:hover {
    color: #155dfc;
}