/******************************************************************/
/* Modifications Log                                              */
/* 2026-10-28  Syed+Claude  EVESPARK-1840-4 No outline on anchor-mode sections focused after a scroll */
/* 2026-10-23  Cornelia+Claude  Agenda session lines use the theme's List View Line Width */
/* 2026-10-16  Syed+Claude  EVESPARK-1796-5 Venue map card and FAQ cards use the card theme colours */
/* 2026-08-10  Derek  Added .es-spinner (loading.io rolling spinner) replacing /img/loading*.gif */
/* 2026-07-16  Derek  Added .es-card and venue tab details/map layout */
/* 2026-08-03  Derek  Bootstrap .alert-* variants mapped to our status tokens */
/* 2026-07-31  Derek  Added .es-event-bar (event info bar above the menu bar) */
/******************************************************************/

/******************************************************************/
/* PAGE LEVEL                                                     */
/******************************************************************/
/*
   GLOBAL FONT SCALE
   -----------------
   Event_Microsite_Template__c.Font_Size__c is resolved by themeLoader into --es-font-size,
   a root font-size percentage (Small 75% .. Extra Large 175%). Because it sets the root
   font size, it scales every rem-based size on the page - text, spacing and component
   widths alike.

   Applying the full 75%-175% range on a phone throws the layout out, so the deviation from
   100% is damped as the viewport narrows:

       applied = 100% + (--es-font-size - 100%) * --es-font-size-damping

   At x-large the damping is 1, i.e. the template value is applied verbatim and behaviour is
   unchanged from before. Below that the range narrows progressively - at x-small the
   effective range is only ~94%-119%. Damping is symmetric, so Small stays readable on a
   phone for the same reason Extra Large stops breaking it.

   Each breakpoint's damping can be overridden from a customer stylesheet via the matching
   --es-custom-font-size-damping-* hook (1 = full template scale, 0 = ignore it entirely).
*/
:root {
    /* x-large (>= 1200px): template value applied in full */
    --es-font-size-damping: var(--es-custom-font-size-damping, 1);
    --es-font-size-applied: calc(100% + (var(--es-font-size, 100%) - 100%) * var(--es-font-size-damping, 1));
}

@media all and (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --es-font-size-damping: var(--es-custom-font-size-damping-large, 0.75);
    }
}

@media all and (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --es-font-size-damping: var(--es-custom-font-size-damping-medium, 0.5);
    }
}

@media all and (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --es-font-size-damping: var(--es-custom-font-size-damping-small, 0.35);
    }
}

@media all and (max-width: 575.98px) {
    :root {
        --es-font-size-damping: var(--es-custom-font-size-damping-x-small, 0.25);
    }
}

html {
    font-size: var(--es-font-size-applied);
}

body {
    background-color: var(--es-page-bg-color, lightgrey);
    color: var(--es-content-text-color, #444444);
    font-size: 1rem;
    font-family: var(--es-text-font, Helvetica, Arial, sans-serif);
    background-image: var(--es-page-bg-image);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

/* Ensures all interactive elements show a visible black and white focus ring for accessibility */
.btn-primary:focus,
.btn-secondary:focus,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none; /* remove default outline */
  box-shadow:
    0 0 0 2px #000,   /* black inner ring */
    0 0 0 4px #fff !important;  /* white outer ring */
  /* border-radius: 4px !important;  match element shape */
}

/* Page Loading OVerlay
THIS IS DUPLICATE IN CSSBASE - please keep them in sync*/
.loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:var(--es-page-bg-color, #cccccc);
    opacity: 90%;
    color: var(--es-banner-and-button-color, #444444);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.loadingOverlay .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: var(--es-banner-and-button-color, #444444);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Applying thepulse  animation to the icon */
.loadingOverlay .icon {
    display: inline-block; /* Ensures transform works */
    animation: spin 3s linear infinite;
    fill: var(--es-banner-and-button-color, #444444);
    height: 48px;
}

.loadingOverlay .svg-container {
    position: relative;
    width: 64px; /* Set the desired width for the container */
    height: 64px; /* Set the desired height for the container */
    display: inline-block; /* Ensures transform works */
    animation: pulse 1.5s ease-in-out infinite; /* Pulse with 1.5s duration, easing, and infinite loop */
  }

.loadingOverlay .icon1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensure both SVGs fit within the container */
    height: 100%; /* Ensure both SVGs fit within the container */
    fill: var(--es-banner-and-button-color, #444444);
}

.loadingOverlay .icon2 {
    position: absolute;
    top: 24px;
    left: 16px;
    width: 50%; /* Ensure both SVGs fit within the container */
    height: 50%; /* Ensure both SVGs fit within the container */
    display: inline-block; /* Ensures transform works */
    /* animation: pulse 1.5s ease-in-out infinite; Pulse with 1.5s duration, easing, and infinite loop */
    animation: spin 3s linear infinite;
    fill: var(--es-banner-and-button-color, #444444);
    /* height: 48px; */
}

/*
   INLINE SPINNER
   --------------
   THIS IS DUPLICATE IN CSSBASE - please keep them in sync

   "Rolling" spinner generated by https://loading.io, used in place of the /img/loading.gif
   (16px) and /img/loading32.gif (32px) platform images. Collapsed to a single element - the
   ring is the element's own border and the shared `spin` keyframes below rotate it, which is
   visually identical to loading.io's nested-div + translate(-50%,-50%) version.

   Size and stroke come from the two custom properties, so the -sm / -lg modifiers only
   override those. Markup: <span class="es-spinner es-spinner-lg" aria-hidden="true"></span>
   - aria-hidden because every use is accompanied by visible "Please wait" text.
*/
.es-spinner {
    --es-spinner-size: 32px;
    --es-spinner-stroke: 4px;
    display: inline-block;
    box-sizing: border-box;
    width: var(--es-spinner-size);
    height: var(--es-spinner-size);
    border: var(--es-spinner-stroke) solid var(--es-spinner-color, var(--es-banner-and-button-color, #888888));
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: text-bottom;
    animation: spin 1s linear infinite;
}

/* Modifiers must follow the base rule - equal specificity, so source order decides. */
.es-spinner-sm {
    --es-spinner-size: 16px;
    --es-spinner-stroke: 2px;
}

.es-spinner-lg {
    --es-spinner-size: 64px;
    --es-spinner-stroke: 6px;
}

/* Page-level loading panels sit on the content background, so use the primary button colour to contrast with it */
.booking-wizard-loading,
.ticket-list-loading {
    --es-spinner-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, #888888));
}

.booking-wizard-loading {
    background-color: var(--es-panel-bg-color);
    border-radius: var(--es-card-border-radius);
    border: var(--es-card-border);
    box-shadow: var(--es-card-box-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--es-booking-panel-min-height);
    width: 100%;
    height: 400px;
}

.ticket-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    width: 100%;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Keyframes for the pulse animation */
@keyframes pulse {
    0% {
      transform: scale(1); /* Initial size */
      opacity: 1; /* Fully visible */
    }
    50% {
      transform: scale(1.2); /* Scaled up */
      opacity: 0.7; /* Slightly transparent at the peak */
    }
    100% {
      transform: scale(1); /* Return to the initial size */
      opacity: 1; /* Fully visible again */
    }
  }

/*************************************************
Screen Reader Only Classes
*************************************************/
.es-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.es-sr-only-focusable:active, .es-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/******************************************************************/
/* SITE WIDE BASE AND HELPER CLASSES                              */
/******************************************************************/
h1, h2, h3, h4, h5 {
    font-family: var(--es-heading-font);
    color: var(--es-content-heading-color);
    letter-spacing: -0.02em;
}
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1.1rem;
}

/* Optional per-tab section eyebrow: short line above the section heading. */
.section-eyebrow {
    display: block;
    font-family: var(--es-heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--es-action-link-active-color, var(--es-content-heading-color));
    margin-bottom: 0.25rem;
}

/* Optional per-tab section leader: lead-in text before the section content, */
/* larger and bolder than the standard body text. */
.section-leader {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--es-content-text-color, #444444);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.text-align-left {
    text-align: left;
}
.text-align-right {
    text-align: right;
}
.text-align-center {
    text-align: center;
}

.hidden {
    display: none;
}

a.commandlink{
    color: var(--es-banner-and-button-color, darkgrey);
    text-decoration: none;
}

a.commandlink:hover{
    color: var(--es-panel-heading-color, grey);
    text-decoration: none;
    transform:translateY(-1.5px);
}

/* Override Bootstrap form control styles*/
.form-control {
    background-color: var(--es-input-field-bg-color) !important;
    color: var(--es-input-field-text-color) !important;
    border: 1px solid var(--es-input-field-border-color) !important;
}

/* Override Bootstrap's native-appearance rule for temporal inputs. EVESPARK-1794

   Bootstrap's reboot sets `-webkit-appearance: listbox` on date/time inputs - a 2015 workaround
   for a Mobile Safari line-height bug in Bootstrap's OWN form controls (webkit #139848). Our
   microsite LWCs run under synthetic shadow DOM, so that global rule reaches inside
   lightning-input and lands on the native <input type="date"> that lightning-input renders on
   mobile form factors. Desktop is unaffected: there lightning-input renders lightning-datepicker,
   which is an input type="text".

   With listbox appearance iOS Safari draws the field as a native picker BUTTON rather than a text
   field, so .slds-input's box model no longer applies. That gives us, on iOS only:
     - the value centred instead of left-aligned,
     - the control sized to its intrinsic content rather than the column, widening the row and
       overflowing the booking-wizard delegate modal,
     - a height that matches neither the other fields nor itself - too tall when a date is set,
       collapsed below .slds-input's min-height when it is empty,
     - an EMPTY control labelled with today's date, so an untouched optional date field looks
       filled in and submits with no value.

   Restoring the normal appearance hands the box back to .slds-input, whose
   `min-height: calc(var(--lwc-heightInput) + 2px)` and `line-height: var(--lwc-lineHeightButton)`
   (both set to 2.2rem in c/cssBase) are what size every other field in the form. Empty and filled
   date fields then match their siblings in both states.

   NO !important: bootstrap.min.css loads before this file on every template, so equal specificity
   plus cascade order already wins. Leaving it non-important keeps the customer's own stylesheet
   (loaded after this one) able to override it. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: none;   /* Safari needed the prefix until 15.4; both are listed per our baseline */
    appearance: none;
    width: 100%;
    min-width: 0;               /* without this the control's intrinsic width still widens the row */
}

/* iOS centres the value text inside the control and leaves the inner value box with no height
   when nothing is selected, both of which survive the appearance reset above. `start` rather than
   `left` so RTL translations stay correct. This pseudo-element is WebKit/Blink only - Firefox
   ignores the rule and does not have the bug. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
    text-align: start;
    min-height: 1.2em;
}

/* Override Bootstrap alert colours with our semantic status tokens.
   Bootstrap's own alert colours are hard-coded light tints, so on a theme with
   Overall Color Tone = Dark they render as a light block on a dark page. Routing them
   through the --es-*-{bg,border,text}-color tokens makes the alerts follow the theme tone
   (themeLoader.component / uiUtils.js pick the light or dark palette).

   Bootstrap names the error variant 'danger' where our tokens say 'error' - the mapping is
   done here rather than renaming EventSiteController.msgType, so no Apex or markup changes.

   NO !important here, unlike .form-control above. Bootstrap's rules are single-class
   (.alert-danger) and bootstrap.min.css loads BEFORE this file on both templates, so equal
   specificity plus cascade order already wins. Leaving these non-important is deliberate: it
   keeps the customer's own stylesheet (loaded after this one) able to override them.

   Only 'danger', 'warning' and 'success' are currently emitted by msgType. 'info' and
   'secondary' are included so the mapping covers all five of our status families and a future
   msgType value cannot silently fall back to a light Bootstrap tint. */
.alert-danger {
    color: var(--es-error-text-color);
    background-color: var(--es-error-bg-color);
    border-color: var(--es-error-border-color);
}

.alert-warning {
    color: var(--es-warning-text-color);
    background-color: var(--es-warning-bg-color);
    border-color: var(--es-warning-border-color);
}

.alert-success {
    color: var(--es-success-text-color);
    background-color: var(--es-success-bg-color);
    border-color: var(--es-success-border-color);
}

.alert-info {
    color: var(--es-info-text-color);
    background-color: var(--es-info-bg-color);
    border-color: var(--es-info-border-color);
}

.alert-secondary {
    color: var(--es-neutral-text-color);
    background-color: var(--es-neutral-bg-color);
    border-color: var(--es-neutral-border-color);
}

.delegate-name {
    border-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
}


/* Since Enhanced Theme */
/* Primary Buttons */
.btn-primary {
    background-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-primary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    font-size: 1rem !important;
    min-width: 150px;
}

.btn-primary:disabled, 
.btn-primary.disabled {
    background-color: var(--es-primary-btn-inactive-color, grey) !important;
    border-color: var(--es-primary-btn-inactive-color, grey) !important;
    color: var(--es-primary-btn-inactive-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

.btn-primary:not(:disabled):hover {
    background-color: var(--es-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-primary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
    /* opacity: var(--es-btn-hover-opacity); */
}

/* Secondary/Outline Buttons */
.btn-outline-primary,
.btn-secondary {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-active-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-button-border-radius) !important;
    font-size: 1rem !important;
    min-width: 150px;
}

.btn-outline-primary:active,
.btn-secondary:active {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

.btn-outline-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    /* opacity: var(--es-btn-hover-opacity); */
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.btn-outline-primary:not(:disabled):hover:active,
.btn-secondary:not(:disabled):hover:active {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    /* opacity: var(--es-btn-hover-opacity); */
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.btn-outline-primary:disabled, 
.btn-outline-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-inactive-border-color, grey) !important;
    color: var(--es-secondary-btn-inactive-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

/* Panel Primary Buttons */
.panel .btn-primary,
.btn-panel-primary {
    background-color: var(--es-panel-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-panel-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-primary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    font-size: 1rem !important;
    min-width: 150px;
}

.panel .btn-primary:disabled,
.panel .btn-primary.disabled,
.btn-panel-primary:disabled,
.btn-panel-primary.disabled {
    background-color: var(--es-panel-primary-btn-inactive-color, grey) !important;
    border-color: var(--es-panel-primary-btn-inactive-color, grey) !important;
    color: var(--es-panel-primary-btn-inactive-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

.panel .btn-primary:not(:disabled):hover,
.btn-panel-primary:not(:disabled):hover {
    background-color: var(--es-panel-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-panel-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-primary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    /* opacity: var(--es-btn-hover-opacity); */
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

/* Panel Secondary Buttons */
.panel .btn-outline-primary,
.panel .btn-secondary,
.btn-panel-secondary {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-active-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-button-border-radius) !important;
    border-width: 1px;
    font-size: 1rem !important;
    min-width: 150px;
}

.panel .btn-outline-primary:active,
.panel .btn-secondary:active,
.btn-panel-secondary:active {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

.panel .btn-outline-primary:not(:disabled):hover,
.panel .btn-secondary:not(:disabled):hover,
.btn-panel-secondary:not(:disabled):hover {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-button-border-radius) !important;
    /* opacity: var(--es-btn-hover-opacity); */
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.panel .btn-outline-primary:disabled,
.panel .btn-outline-primary.disabled,
.panel .btn-secondary:disabled,
.panel .btn-secondary.disabled,
.btn-panel-secondary:disabled,
.btn-panel-secondary.disabled {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-inactive-border-color, grey) !important;
    color: var(--es-panel-secondary-btn-inactive-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-button-border-radius) !important;
}

/* Button group seam: when a CTA sits next to a split dropdown-toggle, flatten only
   the two corners where they meet so the pair reads as one pill. The .btn-primary
   rules above set border-radius with !important (incl. on :hover, 0,3,0), so these
   overrides use !important and are scoped by .btn-group to a higher specificity (0,4,0)
   to win in every state. Targets .btn (not .btn-primary) so it also covers outline buttons. */
.btn-group > .btn:not(.dropdown-toggle-split):not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn.dropdown-toggle-split:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Action Links */
/* Reset native/framework button chrome so a <button class="action-link"> renders as a bare link */
button.action-link {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: unset !important;
    width: auto !important;
    text-align: inherit;
    line-height: inherit;
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}

button.action-link:hover,
button.action-link:focus,
button.action-link:active {
    background-color: transparent !important;
    color: var(--es-action-link-hover-color, var(--es-banner-and-button-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

a.action-link,
.action-link {
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem !important;
}

a.action-link:visited {
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}

a.action-link:hover,
.action-link:hover {
    color: var(--es-action-link-hover-color, var(--es-banner-and-button-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

a.action-link:disabled,
a.action-link.disabled,
.action-link:disabled,
.action-link.disabled {
    color: var(--es-action-link-inactive-color, grey) !important;
    cursor: not-allowed;
}

/* Panel Action Links */
.panel a.action-link,
.panel .action-link,
a.panel-action-link,
.panel-action-link {
    color: var(--es-panel-action-link-active-color, var(--es-banner-and-button-color)) !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem !important;
}

.panel a.action-link:visited,
a.panel-action-link:visited {
    color: var(--es-panel-action-link-active-colour, var(--es-banner-and-button-color)) !important;
}

.panel a.action-link:hover,
.panel .action-link:hover,
a.panel-action-link:hover,
.panel-action-link:hover {
    color: var(--es-panel-action-link-hover-color, var(--es-banner-and-button-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.panel a.action-link:disabled,
.panel a.action-link.disabled,
.panel .action-link:disabled,
.panel .action-link.disabled,
a.panel-action-link:disabled,
a.panel-action-link.disabled,
.panel-action-link:disabled,
.panel-action-link.disabled {
    color: var(--es-panel-action-link-inactive-color, grey) !important;
    cursor: not-allowed;
}
/* End */

/* Delegate name (registrationButton). The greeting shown above the CTA mirrors the
   action-link ACTIVE text colour, which is location-dependent: the plain colour on
   the page / below-bar row, the panel colour inside a .panel, the menu text colour
   inside the menu bar (desktop nav + in-bar CTA), and the footer colour in the footer.
   Higher-specificity contextual selectors win over the base rule regardless of order. */
.reg-delegate-name {
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}
.panel .reg-delegate-name {
    color: var(--es-panel-action-link-active-color, var(--es-banner-and-button-color)) !important;
}
nav.navbar .reg-delegate-name,
#mobileRegButtonWrapper .reg-delegate-name {
    color: var(--es-menu-active-text-color, var(--es-action-link-active-color, var(--es-banner-and-button-color))) !important;
}
.footer .reg-delegate-name {
    color: var(--es-footer-action-link-active-color, var(--es-footer-text-color)) !important;
}


/***** override Salesforce styles *****/
.sfdc_richtext {
}

.sfdc_richtext .ql-indent-1 {
    padding-left: 3em;
}
.sfdc_richtext .ql-indent-2 {
    padding-left: 6em;
}
.sfdc_richtext .ql-indent-3 {
    padding-left: 9em;
}

.sfdc_richtext img {
    max-width: 100%;
    height: auto;
}

.sfdc_richtext p {
    margin-bottom: 0px !important;
}

.regpanel .sfdc_richtext p {
    margin-bottom: 0px !important;
    font-size: 1rem !important;
}

.footer .sfdc_richtext p {
    margin-bottom: 0px !important;
    font-size: 1rem !important;
}

.apply-theme {
    font-family: var(--es-text-font) !important;
    font-size: 1rem !important;
}

.apply-theme p,
.apply-theme span,
.apply-theme b,
.apply-theme u,
.apply-theme strong,
.apply-theme em,
.apply-theme strike,
.apply-theme i {
    color: var(--es-content-text-color) !important;
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
}

/* Ensure embedded links display with the theme font*/
.apply-theme a {
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}

.apply-theme a:hover {
    color: var(--es-action-link-hover-color, var(--es-banner-and-button-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.regpanel .apply-theme p,
.regpanel .apply-theme span,
.regpanel .apply-theme b,
.regpanel .apply-theme u,
.regpanel .apply-theme strong,
.regpanel .apply-theme em,
.regpanel .apply-theme strike,
.regpanel .apply-theme i {
    color:var(--es-panel-text-color) !important;
    background-color: transparent !important;
    font-size: 1rem !important;
}

.es-card .apply-theme p,
.es-card .apply-theme span,
.es-card .apply-theme b,
.es-card .apply-theme u,
.es-card .apply-theme strong,
.es-card .apply-theme em,
.es-card .apply-theme strike,
.es-card .apply-theme i {
    color: var(--es-card-text-color) !important;
}

.es-card .apply-theme a {
    color: var(--es-card-link-active-color) !important;
}
.es-card .apply-theme a:hover {
    color: var(--es-card-link-hover-color) !important;
}

.footer .apply-theme p,
.footer .apply-theme span,
.footer .apply-theme b,
.footer .apply-theme u,
.footer .apply-theme strong,
.footer .apply-theme em,
.footer .apply-theme strike,
.footer .apply-theme i {
    color:var(--es-footer-text-color) !important;
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
}

.footer .apply-theme a {
    color: var(--es-footer-action-link-active-color, var(--es-footer-text-color)) !important;
}
.footer .apply-theme a:hover {
    color: var(--es-footer-action-link-hover-color, var(--es-footer-text-color)) !important;
    text-decoration: none !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

/* 2025-01-08 DH: This is not explicitly used in our code - maybe something from the rich text fields in the past */
.htmlDetailElementTable {
    width: 100%;
    height: auto;
}

/* NAVIGATION BAR */
.logoimg {
    max-height: var(--es-logo-size);
}

/* Menu bar (top nav) background. Both the desktop <nav> and the mobile bar carry the
   shared .content class, and the desktop nav wraps its logo/menu in an inner
   `.container.content` div that would otherwise repaint the content background on top of
   the bar. Apply the menu-bar background to the nav AND any .content wrapper inside it so
   the whole bar shows one colour. These rules have higher specificity than the plain
   .content rule. Falls back to the content background when no menu background colour is
   set on the theme (ESDEV-161). */
nav.navbar.content {
    /* Frosted-glass menu bar (ESDEV): the bar is slightly translucent so page content shows
       through, blurred by backdrop-filter. color-mix blends the themed (opaque) menu colour
       toward transparent by --es-menu-bar-opacity. The plain background-color above is an
       opaque fallback for browsers without color-mix support (they keep a solid bar). */
    background-color: var(--es-menu-bar-bg-color, var(--es-content-bg-color, white));
    background-color: color-mix(in srgb, var(--es-menu-bar-bg-color, var(--es-content-bg-color, white)) var(--es-menu-bar-opacity, 80%), transparent);
    -webkit-backdrop-filter: blur(var(--es-menu-bar-blur, 7px));
    backdrop-filter: blur(var(--es-menu-bar-blur, 7px));
}
/* Frosted glass is DESKTOP-ONLY. The mobile bar carries .content too, so override the frost
   back to a solid, un-blurred background. This also removes the backdrop-filter that would
   otherwise (a) neutralise any blur on the menu panels nested inside it and (b) make this nav
   the containing block for the position:fixed overlay menus, cropping them to the bar's box. */
nav.navbar.content.mob-navbar {
    background-color: var(--es-menu-bar-bg-color, var(--es-content-bg-color, white));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Inner .content wrapper inside the desktop nav must NOT repaint the bar, or its layer would
   stack on the translucent nav and cancel the see-through effect. Transparent lets the single
   frosted nav layer (and its blur) show through the wrapper. */
nav.navbar.content .content {
    background-color: transparent;
}

/* Tabs one-pager ('01') logo-only header bar. This sticky header plays the same role as the
   menu bar does on the menu ('02') and anchor ('03') one-pagers, but it is a plain <div>
   carrying .content (not a nav.navbar), so it would otherwise inherit the plain content
   background instead of the menu-bar colour. Give it the same frosted-glass menu-bar treatment
   so the top bar looks consistent across layouts, and make any nested .content wrappers
   transparent so only the single frosted layer shows through (ESDEV-161). */
.logo-header-bar.content {
    background-color: var(--es-menu-bar-bg-color, var(--es-content-bg-color, white));
    background-color: color-mix(in srgb, var(--es-menu-bar-bg-color, var(--es-content-bg-color, white)) var(--es-menu-bar-opacity, 80%), transparent);
    -webkit-backdrop-filter: blur(var(--es-menu-bar-blur, 7px));
    backdrop-filter: blur(var(--es-menu-bar-blur, 7px));
}
.logo-header-bar.content .content {
    background-color: transparent;
}

/* Collapse the bar completely when it has nothing to show. The row is rendered whenever the
   top-button area MIGHT have content (see the render condition in event01template.page), but on
   the tabs layout that area is frequently empty - no logo (or the logo hidden via Hide On Event
   Home Page) together with hideRegButtonsHeader suppressing the register / 'Already registered?'
   buttons - which left a bare ~32px frosted strip pinned above the banner.

   Why CSS and not a tighter rendered= condition: the topButtons panel INSIDE this bar is an AJAX
   rerender target (regpanel, otpChecker and the menus all list it), so it has to stay in the
   component tree or the buttons could never appear later in the session - e.g. once a delegate is
   registered and did is set, hideRegButtonsHeader flips to false. :has() is re-evaluated after
   every rerender, so the bar reappears by itself the moment real content arrives, and collapses
   again if it goes away.

   Content means: the logo link, any visible button, or the active delegate's name. The :not(.d-none)
   guards are needed because actionLinkClass / delegateNameClass hide those elements by adding the
   class rather than by not rendering them. */
.logo-header-bar:not(:has(.navbar-brand, .btn:not(.d-none), .already-registered:not(.d-none), .delegate-name:not(.d-none))) {
    display: none;
}

/******************************************************************/
/* EVENT INFO BAR — one line above the menu bar                    */
/******************************************************************/
/*
   Event name, dates and venue on a single line, rendered by event01home only (the eventInfoBar
   define) and therefore only on the menu ('02') and anchor ('03') layouts. It is the first row of
   the sticky header stack in event01template.page.

   HIDING IT slides the whole stack up by this bar's height, using a negative sticky top offset
   (.es-header-stack-up below), which docks the menu bar flush at the top of the viewport and clips
   the bar above it. Sizes and positions in the document flow do not change at all, which is what
   keeps it stable - see the comment on .es-header-stack-up. The hide/reveal is driven by
   initEventInfoBar in event01template.page.

   Colours come from the banner hooks (banner background colour + banner title colour and font) so
   the strip reads as an extension of the event banner rather than as a second menu bar.
*/
.es-event-bar {
    background-color: var(--es-banner-bg-color, var(--es-banner-and-button-color));
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
    font-size: 0.8125rem;
    line-height: 1.35;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/*
   Slide the sticky header stack up by the info bar's height to hide the bar. Only the stack's own
   sticky offset changes: no element changes size, the page does not get shorter and nothing below
   moves, so the browser has no reason to adjust the scroll position.

   That last part is the whole reason for doing it this way. Collapsing the bar's own height (the
   first implementation) shortened the page, so scroll anchoring scrolled back up to hold the
   content still, the scroll handler read that as a scroll-up and re-opened the bar, and the bar
   flickered. Do not reintroduce anything here that changes layout height on hide.

   top (not transform): a transformed element becomes the containing block for its position:fixed
   descendants, which would crop the mobile slide-out / curtain / full-screen / billboard menus
   rendered inside this stack - the same trap the .mob-navbar backdrop-filter override avoids.
   --es-event-bar-height is measured on the client (the bar is one line of the theme's title font at
   the template's font scale); the fallback covers the moment before the first measurement.
*/
.es-header-stack {
    transition: top 0.25s ease;
}

.es-header-stack.es-header-stack-up {
    top: calc(-1 * var(--es-event-bar-height, 2.5rem));
}

@media (prefers-reduced-motion: reduce) {
    .es-header-stack {
        transition: none;
    }
}

/* Strictly one line, left aligned within the content container: the row never wraps, and the two
   parts that can be long (event name and venue) truncate with an ellipsis. */
.es-event-bar-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
}

.es-event-bar-item {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider before every part except the first. Keeping the separators in CSS rather than in the
   markup means a part that is hidden (event content / invitation-only settings, or the venue below
   md) or simply has no value cannot leave a stray divider behind. */
.es-event-bar-item + .es-event-bar-item::before {
    content: "\2022";
    margin: 0 0.5rem;
    opacity: 0.65;
}

.es-event-bar-name {
    font-weight: 600;
}

/* The dates come first and never give way - they are the shortest part and the one most likely to
   be what the reader wants. */
.es-event-bar-date {
    flex-shrink: 0;
}

/* The name and the venue absorb the squeeze, in proportion to their width. */
.es-event-bar-name,
.es-event-bar-venue {
    flex-shrink: 1;
    min-width: 2.5rem;
}

/* 'Contact Us' link (rendered only when there is a contact address). Pushed to the right of the bar
   by the auto margin, never truncated, and carrying the bar's own colour rather than the theme's
   link colours - it sits on the banner background, not on page content. The padding keeps it clear
   of a truncated venue/event name beside it. The envelope icon leads the label; the underline is on
   the label alone, because an underline running under the icon reads as a mistake. */
.es-event-bar-contact {
    margin-left: auto;
    padding-left: 0.75rem;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

.es-event-bar-contact:hover,
.es-event-bar-contact:focus,
.es-event-bar-contact:visited {
    color: inherit;
}

.es-event-bar-contact:hover {
    opacity: 0.85;
}

.es-event-bar-contact-icon {
    margin-right: 0.35rem;
}

.es-event-bar-contact-text {
    text-decoration: none;
}

@media all and (max-width: 767.98px) {

    /* Not enough width for a meaningful venue name next to the dates and the event name, so drop it
       entirely rather than truncate it to a few characters. */
    .es-event-bar-venue {
        display: none;
    }

    /* The link becomes the envelope icon alone, sized up a little now that it carries the link on
       its own. The label is NOT display:none - it is hidden the screen-reader-safe way (the same
       rules as Bootstrap's .sr-only) so it stays the link's accessible name; the icon itself is
       aria-hidden in the markup. */
    .es-event-bar-contact {
        font-size: 1.15em;
    }

    .es-event-bar-contact-icon {
        margin-right: 0;
    }

    .es-event-bar-contact-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

nav.navbar  {
    padding: 0px;
}

/* Menu bar register/CTA button. A dedicated menu button style using the menu button hooks
   (which alias the menu bar background + active menu text) so the CTA sits on the menu bar
   background. Scoped to the menu contexts: the desktop <nav>, the mobile expanded menu (also
   inside the <nav>), and the mobile CTA row below the bar. Falls back to the primary button
   colours when no menu colours are themed (Basic mode / blank fields) so those sites keep
   their normal CTA. Higher specificity + !important beat the .btn-primary/.btn-secondary
   theme rules the button also carries. Hover uses the menu focus text colour (ESDEV-161). */
nav.navbar .btn,
#mobileRegButtonWrapper .btn {
    background-color: var(--es-menu-button-bg-color, var(--es-primary-btn-active-color)) !important;
    border-color: var(--es-menu-button-bg-color, var(--es-primary-btn-active-color)) !important;
    color: var(--es-menu-button-text-color, var(--es-primary-btn-active-text-color)) !important;
    min-width: 150px;
}

nav.navbar .btn:not(:disabled):hover,
#mobileRegButtonWrapper .btn:not(:disabled):hover {
    /* background-color: var(--es-menu-button-hover-bg-color, var(--es-primary-btn-hover-color, var(--es-banner-and-button-color))) !important;
    border-color: var(--es-menu-button-hover-bg-color, var(--es-primary-btn-hover-color, var(--es-banner-and-button-color))) !important; */
    color: var(--es-menu-button-hover-text-color, var(--es-primary-btn-hover-text-color)) !important;
    background-color: var(--es-menu-button-hover-bg-color, var(--es-primary-btn-hover-color)) !important;
    border-color: var(--es-menu-button-hover-bg-color, var(--es-primary-btn-hover-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

/* Disabled menu bar button: the menu primary button's inactive colours (EVESPARK-1796-10). */
nav.navbar .btn:disabled,
nav.navbar .btn.disabled,
#mobileRegButtonWrapper .btn:disabled,
#mobileRegButtonWrapper .btn.disabled {
    background-color: var(--es-menu-button-inactive-bg-color, var(--es-menu-button-bg-color, var(--es-primary-btn-active-color))) !important;
    border-color: var(--es-menu-button-inactive-bg-color, var(--es-menu-button-bg-color, var(--es-primary-btn-active-color))) !important;
    color: var(--es-menu-button-inactive-text-color, var(--es-menu-button-text-color, var(--es-primary-btn-active-text-color))) !important;
}

/* Secondary (outlined) button in the menu bar: the menu secondary button colours, falling back to
   the main content secondary button. The register CTA is not a secondary button here - it keeps
   the primary rule above (EVESPARK-1796-10). */
nav.navbar .btn.btn-outline-secondary,
nav.navbar .btn.btn-secondary,
#mobileRegButtonWrapper .btn.btn-outline-secondary,
#mobileRegButtonWrapper .btn.btn-secondary {
    background-color: transparent !important;
    border-color: var(--es-menu-secondary-btn-active-border-color, var(--es-secondary-btn-active-border-color)) !important;
    color: var(--es-menu-secondary-btn-active-text-color, var(--es-secondary-btn-active-text-color)) !important;
}

nav.navbar .btn.btn-outline-secondary:not(:disabled):hover,
nav.navbar .btn.btn-secondary:not(:disabled):hover,
#mobileRegButtonWrapper .btn.btn-outline-secondary:not(:disabled):hover,
#mobileRegButtonWrapper .btn.btn-secondary:not(:disabled):hover {
    background-color: transparent !important;
    border-color: var(--es-menu-secondary-btn-hover-border-color, var(--es-secondary-btn-hover-border-color)) !important;
    color: var(--es-menu-secondary-btn-hover-text-color, var(--es-secondary-btn-hover-text-color)) !important;
}

/* "Already registered" link-button shown with the CTA. Styled as a plain link using the menu
   link colours. Falls back to the action-link colours when no menu colours are themed. Same menu
   scoping as the CTA button; higher specificity + !important beat the .action-link rule it also
   carries (ESDEV-161, EVESPARK-1796-10). */
nav.navbar .already-registered.action-link,
#mobileRegButtonWrapper .already-registered.action-link {
    color: var(--es-menu-link-active-color, var(--es-action-link-active-color)) !important;
}

nav.navbar .already-registered.action-link:hover,
#mobileRegButtonWrapper .already-registered.action-link:hover {
    color: var(--es-menu-link-hover-color, var(--es-action-link-hover-color)) !important;
    filter:brightness(1.1);
    transform:translateY(-1.5px);
}

.navbar .nav-link {
    display: inline-grid;
    color: var(--es-menu-active-text-color, var(--es-action-link-active-color)) !important;
    background-color: transparent;
}

.navbar .nav-link:hover {
    color: var(--es-menu-hover-text-color, var(--es-action-link-hover-color)) !important;
}

.navbar .active .nav-link {
    border-bottom: 0.3em solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color)) !important;
    color: var(--es-menu-focus-text-color, var(--es-primary-btn-active-color)) !important;
}

.navbar .active .nav-link:hover {
    border-bottom: 0.3em solid var(--es-menu-hover-text-color, var(--es-primary-btn-active-color)) !important;
    color: var(--es-menu-hover-text-color, var(--es-primary-btn-active-color)) !important;
}

/* ---------------------------------------------------------------------------------------------
   DESKTOP NAV OVERFLOW ("More") MENU
   The number of menu items comes from the theme's content tabs, their labels can be overridden
   per event, and everything scales with the theme font size, so the items can outgrow the bar.
   js/event01/nav-overflow.js moves the items that do not fit into .es-nav-more-menu.
   --------------------------------------------------------------------------------------------- */

/* Allowing the row to wrap is what makes the measurement possible: nav-overflow.js detects
   overflow by looking for an item that has dropped to a second row (see the file header).
   nowrap on the links stops Bootstrap's flex-shrink from squashing labels instead, so each item
   reports its natural width. If the script never loads, the nav degrades to two readable rows. */
.es-nav-menubar {
    flex-wrap: wrap;
}
.es-nav-menubar .nav-link {
    white-space: nowrap;
}

/* The menu must be the only part of the bar that gives way. Flex shrink is otherwise shared out
   across the bar's children, so the logo and the CTA wrapper would absorb part of the squeeze
   (squashing the CTA) and the menu might never wrap — leaving the overflow undetected. Scoped to
   navbar-expand-lg, which is the desktop nav only: the mobile bar and the preview banner
   (navbar-expand-sm) keep Bootstrap's behaviour. */
nav.navbar-expand-lg > .container > *:not(.es-nav-menubar),
nav.navbar-expand-lg > .container-fluid > *:not(.es-nav-menubar) {
    flex-shrink: 0;
}

/* Positioning context for the dropdown. It must be absolute, not fixed: the desktop nav carries
   backdrop-filter (see nav.navbar.content above), which makes it the containing block for fixed
   descendants and would crop the panel to the bar's box. */
.es-nav-more {
    position: relative;
}

/* The toggle is a <button> (so the shared '.navbar-nav a' click handler skips it), which means the
   native button chrome has to be reset back to the look of the nav links beside it. It also needs
   a flex row for the label + caret, overriding the inline-grid on .navbar .nav-link. Its keyboard
   focus ring is shared with the tab strip's buttons (see the #tabs :focus-visible rule below). */
.navbar .es-nav-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    border: 0;
    background: none;
    color: var(--es-menu-active-text-color, var(--es-action-link-active-color)) !important;
    cursor: pointer;
}
.navbar .es-nav-more-toggle:hover {
    color: var(--es-menu-hover-text-color, var(--es-action-link-hover-color)) !important;
}

/* Keep the section indicator visible when the current section has moved into the menu: mark the
   toggle with the same underline the active item would have carried in the bar. */
.es-nav-more:has(.active) > .es-nav-more-toggle {
    border-bottom: 0.3em solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color)) !important;
    color: var(--es-menu-focus-text-color, var(--es-primary-btn-active-color)) !important;
}

.es-nav-more-caret {
    font-size: 0.7em;
    transition: transform 0.15s ease-in-out;
}
.es-nav-more-toggle[aria-expanded="true"] .es-nav-more-caret {
    transform: rotate(180deg);
}

/* The dropdown panel: dropped out of flow below the bar, kept inside the sticky bar's stacking
   context (Bootstrap .sticky-top = z-index 1020) so it paints over the page content, given its own solid background (the frosted
   glass is on the nav itself, which this panel no longer sits on), and capped to the space below
   the bar so a long list scrolls internally instead of being clipped. */
.es-nav-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1020;
    min-width: 12rem;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background-color: var(--es-menu-bar-bg-color, var(--es-content-bg-color, white));
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.es-nav-more-menu.show {
    display: block;
}

/* Items in the panel are a vertical list, so they need the block layout and the compact spacing
   the mobile menus use rather than the horizontal bar's. */
.es-nav-more-menu .nav-link {
    display: block;
    padding: 0.35rem 1rem;
}

/* The active item's desktop underline makes no sense in a vertical list: cancel it and use the
   0.2rem left accent bar, matching the mobile menu panels above. 1rem padding + 0.2rem border
   keeps the labels aligned with the non-active items. */
.es-nav-more-menu .active .nav-link,
.es-nav-more-menu .active .nav-link:hover {
    border-bottom: none !important;
    border-left: 0.2rem solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    padding-left: 0.8rem;
}

/* Mobile menus present a compact vertical list: tighten the inter-item spacing to 0.2rem
   top/bottom and pull the left gutter in to 0.4rem (overrides Bootstrap's default
   .nav-link 0.5rem/1rem). The active item is marked with a 0.2rem left accent bar rather than
   the desktop bottom bar. Billboard is excluded — it keeps its own large-format spacing. */
.mob-navbar .nav-link,
.mob-slideout-panel .nav-link,
.mob-curtain-panel .nav-link,
.mob-fullscreen-panel .nav-link {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.4rem;
}
.mob-navbar .active .nav-link,
.mob-slideout-panel .active .nav-link,
.mob-curtain-panel .active .nav-link,
.mob-fullscreen-panel .active .nav-link {
    /* Left accent bar sits in the gutter: 0.2rem padding-left + 0.2rem border = 0.4rem, so the
       label lines up with the non-active items; cancel the inherited desktop bottom bar. */
    border-bottom: none !important;
    border-left: 0.2rem solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    padding-left: 0.2rem;
}

/* When Theme Microsite Type = Single Page with Tabs */
/* These style the tab strip's buttons, so they are scoped to #tabs. They used to match any
   `.nav-item > button` on the page, which reached two buttons that are not tabs and have no
   business taking the --es-tab-* colours: the mobile menu's register CTA (.mob-menu-cta, which
   this rule out-specified, overriding its intended menu-button colour) and the nav overflow
   toggle (.es-nav-more-toggle). */
/* Base tab - button when NOT active */
#tabs .nav-item > button:not(.active) {
    color: var(--es-tab-active-text-color) !important;
    background-color: var(--es-content-bg-color);
    border-color: var(--es-tab-line-color, #dee2e6) !important;
}

/* Hover - button when NOT active */
#tabs .nav-item > button:not(.active):hover {
    color: var(--es-tab-hover-text-color) !important;
    border-color: var(--es-tab-focus-background-color) !important;
    transform:translateY(-1px);
}

/* Active state */
#tabs .nav-item > button.active,
#tabs .nav-item > button.active:hover {
    color: var(--es-tab-focus-text-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    border-color: var(--es-tab-line-color, #dee2e6 ) !important;
    background-color: var(--es-tab-focus-background-color, transparent) !important;
}
#tabs .nav-item > button.active:hover {
    transform:translateY(-1px);
    border-color: var(--es-tab-focus-background-color) !important;
}

/* Suppress the default ring only where it is replaced by the high-contrast one below. Shared with
   the nav overflow toggle, which needs the same keyboard-focus treatment. */
#tabs .nav-item > button:focus,
.es-nav-more-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

#tabs .nav-item > button:focus-visible,
.es-nav-more-toggle:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px #000,
        0 0 0 4px #fff !important;
    /* border-radius: 4px !important; */
}

.nav-tabs {
    border-bottom: 1px solid var(--es-tab-line-color, #dee2e6 #dee2e6 #fff);
}

.nav-tabs .nav-item {
    margin-top: 3px;
    margin-right: 2px;
}
/* End */

#mobileRegButtonWrapper {
    /*
        No z-index: the CTA row sits in its own non-sticky row below the bar and must scroll
        UNDER the sticky bar (z-index 1020). Any positive z-index here (it was 1020) put the
        CTA on top of the bar instead of behind it (ESDEV-144).
    */
    position: relative;
    /* The mobile counterpart of the menu bar CTA: it takes the menu bar background (over the
       .content background its wrapper div also carries) and the menu button / link colours, the
       same as the CTA in the bar (EVESPARK-1796-10). */
    background-color: var(--es-menu-bar-bg-color, var(--es-content-bg-color, white));
}

/******************************************************************/
/* ESDEV-144 — mobile sticky bar (logo + hamburger), CTA below    */
/******************************************************************/

/*
    Trim the doubled-up horizontal padding on the mobile bar: the <nav> and the inner
    .container each add their own, which crowds wider logos. !important is needed to beat
    Bootstrap's .px-3 utility on the container.
*/
.mob-navbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.mob-navbar > .container,
.mob-navbar > .container-fluid {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/*
   Expanding Accordion menu: Bootstrap's in-flow .collapse expands inside the bar and pushes
   the page content down (what sets it apart from the overlay menu types).
   Inside the sticky bar a menu taller than the viewport (easy on a phone in landscape) would
   be unreachable, so cap it to the viewport less the bar (at most ~4.5rem, the sm/md bar with
   the CTA) and scroll internally. The dvh line overrides vh where supported, accounting for
   mobile browser chrome.
*/
#navbarNavMobile {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cap the mobile logo at 40px (keeps wider logos from crowding the bar) while still
   honouring a smaller theme logo size. */
#orgLogoMobile {
    max-height: min(var(--es-logo-size, 40px), 40px);
    width: auto;
}

/* Register CTA rendered as the last item of the expanded mobile menu. Sized to its content
   (not full-width) and centred within the menu. */
.mob-menu-cta-item {
    margin-top: 1.5rem;
    padding: 0 1rem;
    text-align: center;
}
.mob-menu-cta {
    display: inline-block;
    white-space: normal;
}

/* "Already Registered?" link shown beneath the CTA in the expanded menu. Rendered as a
   button (see mobileNavLinks) to avoid the .navbar-nav anchor click handler, so reset the
   native button chrome back to a plain centred link. */
.mob-menu-already-item {
    padding: 0 1rem 0.25rem;
    text-align: center;
}
.mob-menu-already {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}


.already-registered {
    color: var(--es-banner-and-button-color);
    font-size: 0.7em;
}

/* BANNER */
/* Per-section banner control ('02 - Complex 1 page'): hides the whole banner block
   (image/video, over-banner title and caption) when the active tab section is set to
   'No Banner'. Toggled from event01template.page; content below reflows up. */
.banner-suppressed {
    display: none !important;
}

.banner {
    position: relative;
    background-color:var(--es-banner-and-button-color);
    width: 100%;
    overflow: hidden;
    margin: var(--es-banner-margin, 0);
    border-radius: var(--es-banner-border-radius, 0);
    box-shadow: var(--es-banner-box-shadow, none);
}

/* Image drives the height */
.bannerimage {
    width: 100%;
    height: auto;          /* preserves natural ratio */
    display: block;
}

/* Per-section 'Tab Banner' ('02 - Complex 1 page'): the template banner is hidden (like
   'No Banner') and the section renders its own banner image inline at the top, before the
   eyebrow (see event01home.page). Width follows the containing section: content-area width on
   a fixed-width site, full width on a full-width site. No text overlay - just the image. */

/* Consistent 1rem gap above each tab section's header block (eyebrow + heading). The gap lives
   here (not on the banner) so it is present whether or not a banner precedes it: with a banner
   the banner sits flush to the navbar and this supplies the gap between banner and content;
   without a banner it supplies the gap between the navbar and the content. */
.section-eyebrow,
.tab-section-heading {
    margin-top: 1rem;
}
/* When an eyebrow is present it provides the gap, so the heading stays tight beneath it. */
.section-eyebrow + .tab-section-heading {
    margin-top: 0;
}

.tab-section-banner {
    display: block;
    width: 100%;
    height: auto;          /* preserves natural ratio */
    /* No margins: the banner sits flush under the navbar. The gap below it is supplied by the
       following .tab-section-heading wrapper's top margin. */
}

/* Video banner: fills 100% of the banner width and keeps a 16:9 aspect ratio.
   The padding-top ratio box is bulletproof across browsers; the iframe is
   absolutely positioned to fill it. */
.banner-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;   /* 16:9 */
}

.banner-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* When no event image is configured, the banner background can be themed via
   the --es-banner-*-bg-image styling hooks. The specific hook per breakpoint is
   set in the media queries below (falls back to the event image cascade, which
   is empty here, so absent hooks simply leave the banner-and-button colour). */
.banner-no-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-caption {
    color: var(--es-title-color);
    font-family: var(--es-title-font);
    background-color: var(--es-banner-and-button-color);
    font-size: 1rem;
    width: 100%;
    padding: 0px 8px;
}

/* Content floats over the image */
.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;          /* cover full banner area */
    display: flex;
    /* Horizontal placement of the banner content is driven by the template via the
       --es-banner-justify-content hook; fallback preserves the previous left alignment.
       (Vertical placement is applied to the title column below - see .banner-content .row.) */
    align-items: center;
    justify-content: var(--es-banner-justify-content, flex-start);
    z-index: 1;            /* ensure above image */
    pointer-events: none;  /* Allow clicks to pass through */
}

/* Vertical placement of the banner content is driven by the template via the
   --es-banner-align-items hook. The content wrapper (.container) is full height (h-100),
   so align-items on .banner-content cannot move it; instead the title column's align-self
   is set within the full-height row. align-self accepts the same flex keywords as the hook,
   and !important is required to override Bootstrap's .align-self-center utility on the column. */
.banner-content .row > [class*="col"] {
    align-self: var(--es-banner-align-items, center) !important;
}

.event-title {
    pointer-events: auto;
}

.title {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
    line-height: 1.0;
}

.venue {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

.tagline {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

.date {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

/* PAGE CONTENT */
.content {
    background-color: var(--es-content-bg-color, white);
}

/* Iframe-embedded pages (event01register / event01home with ?layout=embedded) - the body
   section's outer gutter, replacing Bootstrap's .container-fluid default 15px and skipping the
   px-lg-3 / px-xl-5 escalation meant for a genuine (non-embedded) full-width desktop theme. Loads
   after bootstrap.css (event01template.page), so this same-specificity override wins on cascade
   order alone. See event01template.page BODY SECTION. */
.es-embedded-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* The .content div (immediately above) is what actually fills the iframe when embedded - not
   the <body> background - so its themed Background_Colour__c (--es-content-bg-color) is the
   colour an organiser's host page would actually see behind the booking wizard. We have no idea
   what the host page looks like there, so drop it to transparent rather than guessing. The two
   classes together (.content.es-embedded-content) give this higher specificity than the plain
   .content rule above, so it wins regardless of source order and only affects the truly-embedded
   case - every other .content usage (fixed width, a genuinely full-width theme, non-embedded)
   keeps its themed background. */
.content.es-embedded-content {
    background-color: transparent;
}

/* Bootstrap's .row carries a -15px margin on each side, meant to be canceled out by its parent's
   default 15px .container-fluid gutter (row negative margin + col positive padding = flush with
   the container edge). es-embedded-content shrinks that gutter to 0.5rem (8px), so the row's
   untouched -15px margin now overflows ~7px past the container on each side - just enough to add
   a several-pixel horizontal scrollbar to the iframe. Zeroing the row/col gutter here (rather than
   widening the container padding back to 15px, which would defeat the point of the slim embedded
   gutter) keeps the row flush with the 0.5rem padding instead of overflowing it. */
.es-embedded-content > .row {
    margin-left: 0;
    margin-right: 0;
}

.es-embedded-content > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

/* PAGE CONTENT - EVENT01 */
.venueLink {
    color: var(--es-content-text-color);
    text-decoration: underline;
}

.venueLinkDesc {
    color: var(--es-content-text-color);
    font-family: var(--es-text-font);
}

.es-card .venueLink,
.es-card .venueLinkDesc {
    color: var(--es-card-text-color);
}

/* Links on a card use the card link colours, overriding the global .action-link !important */
.es-card .action-link,
.es-card a.action-link:visited {
    color: var(--es-card-link-active-color) !important;
}
.es-card .action-link:hover,
.es-card .action-link:focus {
    color: var(--es-card-link-hover-color) !important;
}

/* Reusable card surface using the theme card styling hooks.
   No padding + overflow:hidden so media (map, carousel images) fills the card
   edge-to-edge and is clipped to the rounded corners. */
.es-card {
    background-color: var(--es-card-bg-color, var(--es-content-bg-color));
    border: var(--es-card-border);
    border-radius: var(--es-card-border-radius);
    box-shadow: var(--es-card-box-shadow);
    overflow: hidden;
}

/* Venue tab - map card floats right on larger screens so the venue text
   (description, address) wraps around and under it, avoiding dead space.
   The map lives in .venue-body (below the heading) so its top aligns with the
   first text element rather than rising up beside the venue-name heading. */
.venue-details-and-map {
    margin-top: 1rem;
}

/* Clearfix so the floated map is contained and the carousels below clear it. */
.venue-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Pad the Google Maps link text back in - it sits below the edge-to-edge map. */
.venue-map .venueLinkDesc {
    padding: 5px 8px;
    margin-bottom: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .venue-map-float {
        float: right;
        width: 50%;
        margin: 0 0 1rem 1.5rem;
    }
}

/* Small screens: stack full width with the map below the venue details.
   The map is first in the DOM (needed for the desktop float), so flex order
   pushes it below the text without changing the markup. */
@media (max-width: 767.98px) {
    .venue-body {
        display: flex;
        flex-direction: column;
    }
    .venue-map-float {
        order: 1;
        margin: 1rem 0 0;
    }
}

/* ===========================================================================
   FAQ accordion  (event home  >  FAQ tab)  — 2026-07-19  Derek
   - Each card uses the theme card styling hooks via .es-card (bg, border,
     radius, box-shadow).
   - Question (header) and answer (body) share ONE background with no divider
     line between them.
   - A small round +/x button sits in the card's top-right corner to show the
     expand/collapse state. Bootstrap toggles .collapsed on the button; a single
     "+" glyph rotates 45deg into an "x" when the card is expanded (no extra
     markup or JS needed).
   =========================================================================== */

/* Separate, rounded cards - override Bootstrap's joined-accordion treatment,
   which strips borders and inner corners from the first/middle/last cards, e.g.
     .accordion>.card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}
   That rule is 0,4,0 specificity, so we scope by the container id (#faqAccordion,
   1,2,0) to reliably win and restore a full border + rounded corners on EVERY
   card, not just the ends. */
#faqAccordion.faq-accordion > .card {
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: var(--es-card-border);
    border-radius: var(--es-card-border-radius);
    color: var(--es-card-text-color);
}

/* Header + body share the card background: drop Bootstrap's header tint,
   bottom divider and the -1px header overlap so there is no line between them. */
.faq-accordion.accordion > .card > .card-header {
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
}
.faq-accordion .card-body {
    padding-top: 0;
}

/* The question toggle: theme heading font/colour, full width, with room on the
   right for the round indicator. Reset Bootstrap's btn-link link styling. */
.faq-accordion .btn-link {
    position: relative;
    padding: 1rem 3.25rem 1rem 1.25rem;
    font-family: var(--es-heading-font);
    color: var(--es-card-heading-color);
    text-decoration: none;
    white-space: normal;   /* allow long questions to wrap */
}
.faq-accordion .btn-link:hover,
.faq-accordion .btn-link:focus,
.faq-accordion .btn-link:active {
    color: var(--es-card-heading-color);
    text-decoration: none;
    box-shadow: none;
}

/* Round +/x indicator in the card's top-right corner. */
.faq-accordion .btn-link::after {
    content: "+";
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--es-card-border, 1px solid rgba(0, 0, 0, 0.15));
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--es-card-heading-color);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
/* Expanded: "+" rotates 45deg into an "x". */
.faq-accordion .btn-link:not(.collapsed)::after {
    transform: rotate(45deg);
    background-color: rgba(0, 0, 0, 0.09);
}

/* FOOTER */
.footer {
    min-height:20px;
    background-color:var(--es-footer-bg-color, darkgrey);
}

.social-icon {
    font-size: 2rem;
    color:var(--es-footer-text-color) !important;
    background-color: transparent !important;
}

.social-icon:hover {
    font-size: 2rem;
    opacity: 0.5;
    /* color:var(--es-banner-and-button-color) !important; */
}


/******************************************************************/
/* REGPANEL                                                       */
/******************************************************************/
.regpanel {
    background-color: var(--es-panel-bg-color, lightgrey);
    color:  var(--es-panel-text-color);
    padding:15px;
    border: var(--es-card-border);
    border-radius: var(--es-card-border-radius);
    box-shadow: var(--es-card-box-shadow);
}

.repanel-nofloat {
    margin-top: 0px;
}

.regpanel h1, .regpanel h2, .regpanel h3, .regpanel h4, .regpanel h5 {
    font-family: var(--es-heading-font);
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* REGISTRATION FORM                                              */
/******************************************************************/
.form-label {
    /* font-size: 0.8rem; */
    margin-top: 2px;
    margin-bottom: 0px;
}

.form-section {
    font-size: 1rem;
    margin-top: 4px;
    margin-bottom: 0px;
}

.form-label .required.control-label:after {
    color: red;
    content: "*";
}

/******************************************************************/
/* AGENDA TAB STYLES                                              */
/******************************************************************/
.agenda {

}

.agenda .dayheading {
    background-color: var(--es-panel-bg-color);
    color: var(--es-panel-heading-color);

    padding: 0.5rem;
    border-radius: 4px;
}

.agenda .dayheading .day-times {
    font-size: 0.8em;
    font-weight: normal;
    opacity: 0.85;
    margin-left: 0.5rem;
}

.agenda .day-intro {
    padding: 0rem 0.5rem 1rem 0.5rem;
}

.agenda .day-overview {
    white-space: pre-line;
}

/* Line the day heading and intro up with the sessions, which keep Bootstrap's 15px column gutter
   from md up (below md the sessions drop to 0.5rem, matching these). */
@media (min-width: 768px) {
    .agenda .dayheading,
    .agenda .day-intro {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.agenda .day-plus-minus {
    float: right;
}

.agenda .dayheading:hover {
    cursor: pointer;
    opacity: 70%;
}

.agenda .session {
    position: relative;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
}

/* The top rule is drawn here rather than on the row: a Bootstrap .row has negative side margins,
   so its own border would run the full width of the container. Card border colour, but the theme's
   List View Line Width - blank or 0px means no line. */
.agenda .session::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    border-top: var(--es-card-border);
    border-top-width: var(--es-list-view-line-width, 0px);
}

.agenda .location {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}
.agenda .time {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}

.agenda .date {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}

.agenda .subject {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: 0px;
    letter-spacing: -.02em;
}

.agenda .session-state {
    position: relative;
    padding: .3rem 0.3rem;
    border-radius: .2rem;
    font-size: .875rem;
    display: inline-block;
    isolation: isolate;
    color: var(--es-neutral-text-color, #383d41);
}

.session-state::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--es-neutral-bg-color, #e2e3e5);
    border: 1px solid var(--es-neutral-border-color, #8d9093);
    border-radius: .2rem;
    z-index: -1;
}

.agenda .speaker {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: 400;
    margin-bottom: 1rem;
}

.agenda .overview {

}

.agenda .overview-truncated {
    max-height: 150px;            /* collapsed height */
    overflow: hidden;
    position: relative;
    transition: max-height 320ms ease;
}

/* gradient overlay at bottom to hint more content */
.overview-truncated::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.0rem;
  pointer-events: none;
  background: linear-gradient( rgba(255,255,255,0), var(--es-content-bg-color) );
}

.agenda .session-time-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}

/* From md up the time column is sized to the widest session time by js/event01/agenda-time-column.js,
   the same on every day; the subject column takes the rest. Without the script (no class) the
   Bootstrap column fractions apply. */
@media (min-width: 768px) {
    .agenda .session-start-time,
    .agenda .session-end-time {
        white-space: nowrap;
    }

    /* One 15px gutter between the times and the subject, not one from each column. */
    .agenda .agenda-time-col {
        padding-right: 0;
    }

    .es-agenda-time-sized .agenda .agenda-time-col {
        flex: 0 0 var(--es-agenda-time-width);
        max-width: var(--es-agenda-time-width);
    }

    .es-agenda-time-sized .agenda .agenda-content-col {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }
}

.agenda .session-start-time {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.agenda .session-to {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 0.5;
}

.agenda .session-end-time {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: 300;
    font-size: 1.0rem;
}

.agenda .session-sub-heading {
    color: var(--es-content-heading-color);
    font-family: var(--es-heading-font);
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 0px;
    margin-top: 0.5rem;
}

.agenda .cal-dropdown-menu {
    min-width: 165px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    margin: 0.125rem 0 0;
    position: absolute;
    z-index: 1;
}

.agenda .cal-dropdown-menu:hover {
    background-color: #f8f9fa;
}


.agenda .dropdown {
    /* align-self: center; */
}

.agenda .add-to-calendar-link {
    font-size: 0.9rem; /* min 12px, scales, max 16px */
    align-self: auto;
    white-space: normal !important;
    line-height: 1.3;
}

/* Show more / Show less and the calendar link read better a step below the 1rem body text.
   !important to beat the site-wide .action-link font-size. */
.agenda .action-link {
    font-size: 0.875rem !important;
}

.agenda .cal-dropdown-menu .dropdown-item {
    padding: 0.2rem 0.5rem !important;
}

/******************************************************************/
/* Mobile Navigation Panels and Overlays                          */
/******************************************************************/

/* ── Shared overlay backdrop ── */
.mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.5);
}
.mob-overlay.show { display: block; }

/* ── Shared close button (replaces BS5 btn-close) ── */
.mob-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    /* Use the menu text colour so the close "✕" stays legible on a dark menu background
       (same fallback chain as .nav-link) (ESDEV-161). */
    color: var(--es-menu-focus-text-color, var(--es-action-link-active-color, var(--es-content-heading-color, #000)));
    opacity: 0.8;
}
.mob-close-btn:hover { opacity: 1; }

/* Bootstrap paints the hamburger as a background-image SVG whose stroke colour is baked in
   (dark grey via .navbar-light), so `color` never had any effect. Repaint it with a CSS mask
   instead: the SVG data URI defines the three-bar shape and background-color fills it, letting
   the theme drive the colour. Its own hook (--es-menu-toggler-color) defaults to the menu text
   colour (same fallback chain as .nav-link) so the icon tracks the menu items unless overridden.
   Scoped to .navbar-light to match Bootstrap's specificity (style.css loads after bootstrap). */
.navbar-light .navbar-toggler-icon {
    background-image: none;
    background-color: var(--es-menu-toggler-color, var(--es-menu-active-text-color, var(--es-action-link-active-color, var(--es-content-heading-color, #000))));
    -webkit-mask: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center;
    mask: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 1;
}
.navbar-toggler-icon:hover { opacity: 0.7; }

/* ── Slide-Out Panel ── */
.mob-slideout-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75vw;
    max-width: 300px;
    background: var(--es-menu-bar-bg-color, var(--es-page-bg-color, #fff));
    z-index: 1050;
    overflow-y: auto;
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
}
/* Slides from the right (logo left or center) */
.mob-slideout-right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}
/* Slides from the left (logo right-aligned) */
.mob-slideout-left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}
.mob-slideout-panel.show {
    transform: translateX(0);
    visibility: visible;
}

/* ── Curtain: drops from top ── */
.mob-curtain-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--es-menu-bar-bg-color, var(--es-page-bg-color, #fff));
    z-index: 1050;
    /* Cap to the viewport and scroll internally so a menu taller than the screen (easy on a
       phone in landscape) stays reachable rather than dropping below the fold. max-height (not
       bottom:0) keeps the curtain only as tall as its content when the menu is short. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.35s ease, visibility 0.35s ease;
}
.mob-curtain-panel.show {
    transform: translateY(0);
    visibility: visible;
}

/* ── Full-Screen Overlay ── */
.mob-fullscreen-panel {
    position: fixed;
    inset: 0;
    background: var(--es-menu-bar-bg-color, var(--es-page-bg-color, #fff));
    z-index: 1050;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mob-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

/* ── Billboard ── */
.mob-billboard-panel {
    position: fixed;
    inset: 0;
    background: var(--es-menu-bar-bg-color, var(--es-page-bg-color, #fff));
    z-index: 1050;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mob-billboard-panel.show {
    opacity: 1;
    visibility: visible;
}
.mob-billboard-nav .nav-link {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 600;
    padding: 0.5rem 0 0.5rem 0.8rem;
    letter-spacing: -0.02em;
}
.mob-billboard-nav .active .nav-link {
    /* Left accent bar (larger than the compact menus to suit the billboard scale): 0.4rem
       padding-left + 0.4rem border = 0.8rem, so the label lines up with the non-active items;
       cancel the inherited desktop bottom bar. */
    border-bottom: none !important;
    border-left: 0.4rem solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    padding-left: 0.4rem;
}

/******************************************************************/
/* End Mobile Navigation Panels and Overlays                      */
/******************************************************************/

/* Small screens: row layout */
@media (max-width: 767.98px) {
    .agenda .session-time-section {
        flex-direction: row ;
        justify-content: left ; /* center items horizontally */
        align-items: center;    /* center items vertically */
    }
    .agenda .session-time-section {

    }

    /* Time stacks above the content here, so line the session up with the day heading and intro
       text (0.5rem) instead of Bootstrap's 15px column gutter. */
    .agenda .session > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .agenda .session::before {
        left: 0.5rem;
        right: 0.5rem;
    }

    .agenda .session-start-time {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }

    .agenda .session-to {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }

    .agenda .session-end-time {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }


    .agenda .dropdown {
        align-self: center;
        margin-left: 0.5rem;
    }

    /* .agenda .dropdown,
    .agenda .add-to-calendar-link {
        width: 100%;
    } */

    /* Mobile registration button: sized to its content and centred by the wrapper's
       .text-center — explicitly NOT full-width. */
    #mobileRegButtonWrapper .btn {
        width: auto;
        min-width: 150px;
        /* No z-index: keep the CTA below the sticky bar (z-index 1020) so it scrolls out of
           sight behind it (ESDEV-144). It previously had z-index 1040 and covered the bar. */
        position: relative;
    }

    /* Left: logo left, hamburger right — default navbar behaviour, nothing needed */

    /* Center: logo centered, hamburger absolute LEFT.
       The hamburger sits on the right for left-aligned (and centre-aligned used to follow it),
       but with the logo in the middle the right-hand side is where the registration CTA goes at
       sm/md (see .logo-text-center .mob-navbar-regbtn) - the two were painted on top of each
       other. Centre alignment therefore reads left-to-right as hamburger / logo / CTA, and the
       hamburger stays on the same side at every mobile width. */
    .logo-text-center {
        /* position: relative; */
        justify-content: center !important;
    }
    .logo-text-center .navbar-brand {
        margin: 0 auto;
    }
    .logo-text-center .navbar-toggler {
        position: absolute;
        left: 1rem;
    }

    /* Right: logo right, hamburger left — default navbar behaviour, nothing needed */
    .logo-text-right .navbar-brand {
        margin-left: auto;
    }

    /* Register split-button: content-width (was width:50% / toggle max-width:12%), centred by
       the wrapper's .text-center like the plain button. */
    #mobileRegButtonWrapper .dropdown-menu {
        left: -130px !important;
    }
}

/* Medium screens (tablets): stack times above dropdown */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .agenda .dropdown,
    .agenda .add-to-calendar-link {
        width: auto;
    }
}



/******************************************************************/
/* REGISTATION MODAL                                              */
/******************************************************************/
.modal {
    background-color: transparent;
}
#regmodal .modal-content {
    background-color: var(--es-panel-bg-color);
    border-width:1px;
    border-style:solid;
    border-color:lightgrey;
}
#regmodal .modal-body {
    padding: 0px;
}
#regmodal .regpanel {
    border-width:0px;
    margin-top: 0 !important;
}
#regmodal .modal-header {
    border-bottom: 1px solid lightgrey;
}
#regmodal .modal-header h2 {
    color: var(--es-panel-heading-color);
    font-family: var(--es-heading-font);
    font-size: 1.5rem;
}
#regmodal .modal-header .close {
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* ALREADY REGISTERED MODAL                                       */
/******************************************************************/
#alreadymodal .modal-content {
    background-color: var(--es-panel-bg-color);
    border-width:1px;
    border-style:solid;
    border-color:lightgrey;
}
#alreadymodal .modal-body {
    padding: 0px;
}
#alreadymodal .regpanel {
    border-width:0px;
    /* Cancel the floating negative margin used for over-banner layout
       when the regpanel is shown inside the modal so content isn't
       pulled under the header/footer. */
    margin-top: 0 !important;
}
#alreadymodal .modal-header {
    border-bottom: 1px solid lightgrey;
}
#alreadymodal .modal-header h2 {
    color: var(--es-panel-heading-color);
    font-family: var(--es-heading-font);
    font-size: 1.5rem;
}
#alreadymodal .modal-header .close {
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* SPARK LINK                                                     */
/******************************************************************/
.spark-link {
    text-decoration: none;
    font-weight: bold;
    color:grey;
}
.spark-link:hover{
    text-decoration: none;
    font-weight: bold;
    color:var(--es-banner-and-button-color);
}

.spark-logo {
    max-height: 80px;
}

/******************************************************************/
/* SPARK PROMO BAND                                               */
/* Attribution band shown below the footer when PromoMode is on.  */
/******************************************************************/
.spark-promo {
    background-color: #f5f6f8;
    border-top: 1px solid #e5e7eb;
    padding: 14px 15px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
}

.spark-promo__eyebrow {
    margin: 0 0 6px 0;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9096a1;
}

.spark-promo__logo {
    display: inline-block;
    height: auto;
    width: auto;
    max-height: 40px;
    max-width: 80%;
}

.spark-promo__tagline {
    margin: 8px auto 0 auto;
    max-width: 500px;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

.spark-promo__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px;
    border: 1px solid var(--es-banner-and-button-color);
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: var(--es-banner-and-button-color);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.spark-promo__cta:hover,
.spark-promo__cta:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: var(--es-banner-and-button-color);
    box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff !important;
}

/******************************************************************/
/* Styling file upload component */
/******************************************************************/
.table-container {
    margin-top: 0px;
    margin-bottom: 5px;
}
.files-table {
    font-size: 12.8px;
    border-collapse: collapse;
    width: 100%;
}
.table-head, .table-column {
    text-align: left;
    padding: 8px;
}
.table-column {
    word-break:break-all;
}
.loader {
    display: none;
}
.table-title {
    margin-top: 10px;
    margin-left: 0px;
    font-size: 12.8px;
    font-weight: bold;
    margin-left: 7px;
    color: #fff
}
.file-upload-error-message {
    color: red
}


/******************************************************************/
/* CSS BELOW STILL TO BE REVIEWED AND MODIFIED FOR CSS PROPERTIES */

/* use in eventspark\staticresouces\eventspark\carousel.js
   Fixed-height carousel: every image fills a consistent-height, full-width box
   and preserves its aspect ratio (object-fit: cover crops the overflow, centered,
   rather than distorting). Height steps down on smaller screens. */
.carousel-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767.98px) {
    .carousel-img {
        height: 240px;
    }
}

/* Used in eventVideo.component */
.video-iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.calendar-svg-icon {
    height: 32px;
    margin-right: 6px;
}

.modal-open .sticky-top-nomove {
    margin-right: auto !important;
    padding-right: 15px !important;
}

/*
   Below the LG breakpoint (< 992px) let .container span the full viewport width
   instead of Bootstrap's fixed max-widths (e.g. 720px at MD). The horizontal
   gutters are preserved by Bootstrap's own container padding.
*/
@media all and (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 100%;
    }
}

/*
   SM/MD range (>= 576px and < 992px): there is room in the mobile menu bar for the
   registration CTA, so it renders inside the bar (.mob-navbar-regbtn) rather than on its own
   row below the bar. Absolute positioning keeps it viewport-centered independent of the logo /
   hamburger widths, and anchors it to the bar row (.mob-bar-row) so it stays put when the
   accordion menu expands below. The one exception is centre logo alignment, where the centre is
   taken by the logo and the CTA is anchored to the right-hand end instead (see below).
*/
@media all and (min-width: 576px) and (max-width: 991.98px) {
    .mob-navbar .mob-bar-row {
        position: relative;
        /*
           Grow the bar to fit the CTA. Being absolutely positioned (below), the CTA adds nothing
           to the bar's height: with a logo the logo made the bar tall enough by accident, but
           without one the bar collapsed to the hamburger's height and the CTA - plus the
           "Already Registered" link beneath it - spilled out of the bar.
           --es-mob-cta-height is the CTA's measured height, published by initMobBarCtaHeight in
           event01template.page (measured, not hard-coded: the button's label, font, split-button
           and "Already Registered" extras all vary by event, theme and delegate state). The extra
           1rem is the clearance above and below it. The 3.5rem fallback applies only if that
           script never runs, and gives the same 4.5rem bar a capped 40px logo would produce.
        */
        min-height: calc(var(--es-mob-cta-height, 3.5rem) + 1rem);
    }
    .mob-navbar .mob-navbar-regbtn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        /* So this button's dropdown menu paints over the expanded accordion menu items
           (#navbarNavMobile) below it instead of behind them. */
        z-index: 1021;
    }
    /*
       Centre logo alignment: the centre of the bar belongs to the logo, so the CTA moves to the
       right-hand end instead (the hamburger has moved to the left for this alignment, see
       .logo-text-center above). 1rem matches the hamburger's inset on the opposite side.
       Still absolute, so the bar's height keeps coming from the min-height above.
    */
    .mob-navbar .logo-text-center .mob-navbar-regbtn {
        left: auto;
        right: 1rem;
        transform: translateY(-50%);
    }
}

/*
   Below sm (< 576px) the registration CTA row is pinned to the bottom of the viewport
   (position:fixed) so it stays reachable while the page scrolls, instead of scrolling away
   with the bar. #mobileRegButtonWrapper carries the .content background so page content
   scrolls under it opaquely, plus a top shadow to separate it from the scrolling content.
   The body gets matching padding-bottom (below) so the bar never hides the end of the page.
   The row is only rendered below sm (d-sm-none), so no media query is needed on the bar itself.
*/
.mob-regbtn-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
}
.mob-regbtn-fixed #mobileRegButtonWrapper {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
}
/*
   Mobile menu open: hide the fixed CTA bar. Every mobile menu variant already carries the same
   Register CTA as its last item (see mobileNavLinks), so this bar is redundant while the menu is
   open — and the accordion menu (#navbarNavMobile, inside the z-index 1020 sticky bar) was
   painted BEHIND this bar (z-index 1030), cropping its lower items. The .es-mob-nav-open class is put on <body> by
   event01home.page whenever any mobile menu opens.
   !important beats the bar wrapper's .d-block utility (Bootstrap sets display with !important).
*/
body.es-mob-nav-open .mob-regbtn-fixed {
    display: none !important;
}
/* Reserve space at the end of the page for the fixed CTA bar (below sm only). Tune this if the
   bar's height changes (button + delegate name + "already registered" link). */



@media all and (max-width: 575.98px) {
    body {
        padding-bottom: 5rem;
    }
}




/* X-SM */
@media all and (max-width: 575px) {

    .banner-no-image {
        min-height: var(--es-banner-x-small-height, 144px);
        background-image: var(--es-banner-x-small-bg-image);
    }
    .spark-logo {
        max-height: 40px;
    }
    .regpanel {
        padding:5px;
        margin-top: 0px;
    }

    .date {
        font-size: 0.6rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 1.5rem;
        margin-top: 0.3rem;
        margin-bottom: 0.15rem;
    }
    .tagline {
        font-size: 0.9rem;
        margin-bottom: 0px;
    }

    .speaker-modal .modal-body .speaker-image {
        display: block;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        height: auto;
        max-width: 100%;
        align-self: center;
    }


    .social-icon {
        padding: 0.3rem 0.3rem;
        font-size: 1.5rem;
    }
    
    .social-icon:hover {
        font-size: 1.5rem;
    }

    #mobileRegButtonWrapper .dropdown-menu {
        left: -112px !important;
    }
}

/* SM */
@media all and (min-width: 576px) and (max-width: 768px) {
    .banner-no-image  {
        min-height: var(--es-banner-small-height, 192px);
        background-image: var(--es-banner-small-bg-image);
    }
    .spark-logo {
        max-height: 40px;
    }
    .regpanel {
        padding:5px;
        margin-top: 0px;
    }

    .date {
        font-size: 0.7rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 1.7rem;
        margin-top: 0.35rem;
        margin-bottom: 0.175rem;
    }
    .tagline {
        font-size: 1.05rem;
        margin-bottom: 0px;
    }

    .speaker-modal .modal-body .speaker-image {
        display: block;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        height: auto;
        max-width: 100%;
        align-self: center;
    }


    .social-icon {
        padding: 0.4rem 0.4rem;
        font-size: 1.75rem;
    }

    .social-icon:hover {
        font-size: 1.75rem;
    }
}

/* MD */
@media all and (min-width: 768px) and (max-width: 992px) {

    .banner-no-image {
        min-height: var(--es-banner-medium-height, 248px);
        background-image: var(--es-banner-medium-bg-image);
    }
    .spark-logo {
        max-height: 50px;
    }
    .regpanel {
        padding:10px;
        margin-top: 0px;
    }

    .date {
        font-size: 0.9rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 2.25rem;
        margin-top: 0.45rem;
        margin-bottom: 0.225rem;
    }
    .tagline {
        font-size: 1.35rem;
        margin-bottom: 0px;
    }

    /* Left: logo left, hamburger right — default navbar behaviour, nothing needed */

    /* Center: logo centered, hamburger absolute LEFT.
       The hamburger sits on the right for left-aligned (and centre-aligned used to follow it),
       but with the logo in the middle the right-hand side is where the registration CTA goes at
       sm/md (see .logo-text-center .mob-navbar-regbtn) - the two were painted on top of each
       other. Centre alignment therefore reads left-to-right as hamburger / logo / CTA, and the
       hamburger stays on the same side at every mobile width. */
    .logo-text-center {
        /* position: relative; */
        justify-content: center !important;
    }
    .logo-text-center .navbar-brand {
        margin: 0 auto;
    }
    .logo-text-center .navbar-toggler {
        position: absolute;
        left: 1rem;
    }

    /* Right: logo right, hamburger left — default navbar behaviour, nothing needed */
    .logo-text-right .navbar-brand {
        margin-left: auto;
    }

    /* Register split-button: content-width, centred by the wrapper's .text-center. */
    #mobileRegButtonWrapper .dropdown-menu {
        left: -115px !important;
    }

}

/* LG */
@media all and (min-width: 992px) and (max-width: 1200px) {


    .already-registered {
        font-size: 0.85em;
    }
    .banner-no-image {
        min-height: var(--es-banner-large-height, 300px);
        background-image: var(--es-banner-large-bg-image);
    }
    .regpanel {
        padding:10px;
        margin-top: max(var(--es-template-regpanel-top-margin), -190px);
    }
    .spark-logo {
        max-height: 60px;
    }

    .date {
        font-size: 1.2rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    .title {
        font-size: 3.0rem;
        margin-top: 0.6rem;
        margin-bottom: 0.3rem;
    }
    .tagline {
        font-size: 1.8rem;
        margin-bottom: 0px;
    }

}

/* XL */
@media all and (min-width: 1200px) {

    .already-registered {
        font-size: 0.85em;
    }
    .banner-no-image {
        min-height: var(--es-banner-height, 380px);
        background-image: var(--es-banner-bg-image);
    }
    .regpanel {
        padding:15px;
        margin-top: max(var(--es-template-regpanel-top-margin), -220px);
    }
    .spark-logo {
        max-height: 70px;
    }


    .date {
        font-size: 1.4rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    .title {
        font-size: 3.5rem;
        margin-top: 0.7rem;
        margin-bottom: 0.35rem;
    }
    .tagline {
        font-size: 2.1rem;
        margin-bottom: 0px;
    }
}

.debugInfo {
    font-family:Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 16px !important;
    overflow: hidden;
    background-color: gold !important;
    color: purple !important;
    border: 2px purple dashed !important;
    padding: 4px;
}

/*
EXPIRIMENTAL CODE
This code is not yet in use and is still being tested.

By applying our own scope (es-scope) to our CSS we can make it more specific than the slds-scope CSS that currently
overrides some of our stylng in the embedded LWC's
*/
.es-scope .lwc-title {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
    line-height: 1.0;
    font-size: 2rem;
}

/******************************************************************/
/* ANCHOR (ONE-PAGER) MICROSITE MODE                             */
/******************************************************************/
/* Microsite type '03 - Scrollable 1 page' renders every section
   stacked and visible instead of showing one tab pane at a time.
   The .anchor-mode class is applied to #tabsContent (see
   EventController.classTabContent). We override Bootstrap 4.3.1's
   tab-pane / .fade hiding so all panes are shown, and add a scroll
   offset + separation so anchor scrolling clears the sticky navbar. */
.anchor-mode > .tab-pane {
    display: block;
    opacity: 1;
}

/* Bootstrap 4.3.1 sets .fade { opacity: 0 } until .show is added;
   in anchor mode panes never receive .show, so force them opaque. */
.anchor-mode .tab-pane.fade {
    opacity: 1;
}

.anchor-mode > .tab-pane,
.anchor-mode section.tab-pane {
    scroll-margin-top: 90px; /* clear the sticky navbar; tune to actual height */
    margin-bottom: 2.5rem;   /* visual separation between stacked sections */
}

/* Sections take script focus after an anchor scroll (keyboard users continue from there);
   the controls inside keep their own focus rings, so no outline around the whole section. */
.anchor-mode > .tab-pane[tabindex="-1"]:focus,
.anchor-mode section.tab-pane[tabindex="-1"]:focus {
    outline: none;
}