/*
Theme Name:         ASCA 2027 (Child Theme)
Template:           asca
Theme URI:          https://roots.io/sage/
Description:        ASCA 2027 "Infinite Possibilities" conference theme — warm editorial: cream canvas, deep teal ink, orange/amber accents. Child theme of the shared ASCA Sage parent.
Version:            1.0.0
Author:             Creative2
Text Domain:        sage
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.1
Requires at least:  5.9
*/

/*--------------------------------------------------------------
# 2027 Design Tokens
  Brand colors flow from ACF Conference Settings > Brand Colors
  (see partials/brand-variables in the parent theme):
    --color-primary        #E56B24  orange (CTA)
    --color-primary-alt    #F2A62B  amber (CTA hover / gradient end)
    --color-secondary      #0C6E75  deep teal
    --color-secondary-alt  #159A9C  teal (eyebrows)
    --color-tertiary       #EFA429  gold/amber
    --color-tertiary-alt   #681334  berry
    --color-links          #E56B24
    --color-in-person-tag  #0C6E75
    --color-virtual-tag    #681334
  The static values below are 2027-only tokens that are not
  editor-managed.
--------------------------------------------------------------*/
:root {
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-wordmark: 'Archivo Black', 'Sora', sans-serif;

  --c27-cream: #fbf4e7;
  --c27-cream-90: rgba(251, 244, 231, 0.92);
  --c27-ink: #123a3d;
  --c27-body: #3c5b5d;
  --c27-muted: #8aa5a4;
  --c27-berry: #681334;
  --c27-teal-deep: #0c6e75;
  --c27-teal: #159a9c;
  --c27-mint: #7fd8d2;
  --c27-wash-teal: #d6eeea;
  --c27-wash-amber: #fdead1;
  --c27-wash-peach: #fbe0d2;
  --c27-amber: #efa429;
  --c27-orange: #e56b24;
  --c27-logo-orange: #f78320;
  --c27-card-border: rgba(18, 58, 61, 0.08);
  --c27-card-shadow: 0 22px 48px -36px rgba(18, 58, 61, 0.5);
  --c27-card-shadow-lg: 0 26px 54px -30px rgba(18, 58, 61, 0.5);
  --c27-footer-text: #cfe0de;
  --c27-footer-muted: #7fa09e;
  --c27-grad-dark: linear-gradient(160deg, #0c6e75 0%, #123a3d 100%);
  --c27-grad-menu: linear-gradient(150deg, #0b3a40, #123a3d 58%, #0e5158);
  --c27-grad-cta: linear-gradient(
    100deg,
    var(--color-tertiary, #efa429),
    var(--color-primary, #e56b24)
  );
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
  background-color: var(--c27-cream);
  color: var(--c27-ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: none;
}

@media (min-width: 1536px) {
  h2 {
    font-size: 3rem;
  }
}

::selection {
  background: var(--c27-wash-amber);
  color: var(--c27-ink);
}

/* Body copy rhythm inherited from prose-*; keep body tone */
main {
  color: var(--c27-body);
}

main h1,
main h2,
main h3,
main h4 {
  color: var(--c27-ink);
}

/*--------------------------------------------------------------
# Eyebrows, badges, dividers
--------------------------------------------------------------*/
.c27-eyebrow {
  display: block;
  width: fit-content;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary-alt, var(--c27-teal));
}

.c27-eyebrow--amber {
  color: var(--color-tertiary, var(--c27-amber));
}

.c27-eyebrow--mint {
  color: var(--c27-mint);
}

.c27-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c27-wash-amber);
  color: #c2531c;
}

.c27-badge--teal {
  background: #e4efee;
  color: #4e7371;
}

.c27-divider {
  display: flex;
  align-items: center;
  gap: 22px;
}

.c27-divider::before,
.c27-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}

.c27-divider::before {
  background: linear-gradient(90deg, transparent, rgba(18, 58, 61, 0.18));
}

.c27-divider::after {
  background: linear-gradient(90deg, rgba(18, 58, 61, 0.18), transparent);
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.c27-card {
  background: #fff;
  border: 1px solid var(--c27-card-border);
  border-radius: 20px;
  box-shadow: var(--c27-card-shadow);
}

.c27-card--flat {
  box-shadow: none;
}

.c27-icon-chip {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c27-wash-teal);
  color: var(--c27-teal-deep);
}

.c27-icon-chip--amber {
  background: var(--c27-wash-amber);
  color: #d98a24;
}

.c27-icon-chip--peach {
  background: var(--c27-wash-peach);
  color: #d2551c;
}

/*--------------------------------------------------------------
# Buttons — pill language for every parent .btn
--------------------------------------------------------------*/
.btn {
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  border-width: 2px;
}

.btn.btn-lg {
  padding: 18px 38px;
  font-size: 1.125rem;
}

.btn-solid-primary {
  box-shadow: 0 16px 34px -12px
    color-mix(in srgb, var(--color-primary, #e56b24) 60%, transparent);
}

.btn-solid-primary:hover {
  background: color-mix(in srgb, var(--color-primary, #e56b24) 88%, #000);
  border-color: color-mix(in srgb, var(--color-primary, #e56b24) 88%, #000);
  color: #fff;
}

.btn-solid-secondary {
  box-shadow: 0 16px 34px -14px
    color-mix(in srgb, var(--color-secondary, #0c6e75) 60%, transparent);
}

.btn-outline-primary,
.btn-outline-secondary {
  background: transparent;
}

.btn-outline-secondary {
  border-color: color-mix(in srgb, var(--color-secondary, #0c6e75) 40%, transparent);
  color: var(--color-secondary, #0c6e75);
}

.btn-outline-secondary:hover {
  background: var(--color-secondary, #0c6e75);
  border-color: var(--color-secondary, #0c6e75);
  color: #fff;
}

.btn-cream {
  background: var(--c27-cream);
  border-color: var(--c27-cream);
  color: var(--c27-ink);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.35);
}

.btn-cream:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c27-teal-deep);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: transparent;
  /* Scroll-linked announcement-bar retract (set by c27-components.js):
     --c27-topbar-shift = min(scrollY, bar height). Slides the fixed header up
     1:1 with the page so the teal top bar scrolls away like in-flow content;
     the burger row pins at the viewport top once the bar is gone. `top`, not
     transform — a transformed header would become the containing block for
     the fixed off-canvas menu nested inside it. */
  top: calc(-1 * var(--c27-topbar-shift, 0px));
}

/* Header clearance (2026-09-01, Maddy: "increasing the bottom padding of the
   header isn't doing anything"). Because #header is position:fixed, nothing
   below it is pushed down by its height — padding added to the header only
   makes the header taller. The heroes carry the space instead, as
   header height + a design gap (home: #hero_home_2027 below; inner pages:
   --c27-hero-pt on .c27-hero-editorial), so the whole page follows whatever
   template 940 holds: the announcement bar, its two-line wrap on phones, the
   row's padding, or the bar being removed.

   c27-components.js overwrites --c27-header-h with the measured UNSCROLLED
   header height. The fallbacks below mirror the template as of 2026-09-01
   (bar 59px + row 102px on desktop; row 76px from Elementor's tablet
   breakpoint down; bar 86px once its one line of text wraps) so the first
   paint already lands where the measurement will. */
:root {
  --c27-header-h: 10.0625rem; /* 161px */
}

@media (max-width: 1024px) {
  :root {
    --c27-header-h: 8.4375rem; /* 135px: row padding drops to 0.75rem */
  }
}

@media (max-width: 470px) {
  :root {
    --c27-header-h: 10.125rem; /* 162px: the bar text wraps to two lines */
  }
}

/* Admin-bar clearance (2026-08-10). #header is position:fixed (Elementor's
   container Position control, top:0 — post-940.css), so WordPress's
   `html { margin-top: 32px !important }` does not move it and #wpadminbar
   (fixed, z-index 99999) lands on top of the hamburger. Push the bar down by
   the admin bar's own height instead.

   Heights/breakpoints mirror WP core's admin-bar.css: 32px, 46px at ≤782px,
   and at ≤600px core switches #wpadminbar to position:absolute so it scrolls
   away with the page — a fixed header has to go back to top:0 there or it
   floats below a permanent gap. Logged-in views only. */
body.admin-bar {
  --c27-adminbar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --c27-adminbar-h: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar {
    --c27-adminbar-h: 0px;
  }
}

/* Specificity: `body.admin-bar #header` (1,1,1) beats Elementor's
   `.elementor-940 .elementor-element.elementor-element-<id>` (0,3,0)
   regardless of stylesheet order. */
body.admin-bar #header {
  top: calc(var(--c27-adminbar-h) - var(--c27-topbar-shift, 0px));
}

/* …and undo the header's offsets (announcement-bar retract + admin-bar
   clearance) for the off-canvas menu, which is a full-viewport
   overlay nested INSIDE #header. `header.header--scrolled` carries
   `backdrop-filter: blur(8px)`, and backdrop-filter makes an element the
   containing block for its position:fixed descendants — so once scrolled,
   .e-off-canvas resolves top:0 against the header box rather than the
   viewport and inherits the offset above (measured: menu 32px low, 32px of
   it clipped off the bottom). Unscrolled the header has no filter, the
   overlay is viewport-relative, and this rule is correctly inert. */
#header.header--scrolled .e-off-canvas {
  top: var(--c27-topbar-shift, 0px);
}

body.admin-bar #header.header--scrolled .e-off-canvas {
  top: calc(var(--c27-topbar-shift, 0px) - var(--c27-adminbar-h));
}

/* Constrain the header row to the content column — matches .wrapper
   (--c27-band-max + the same responsive gutters) so the menu toggle and
   Register CTA line up with the page content instead of the viewport edges. Declared here rather than as Blade utilities so it also
   beats the parent's non-layered `header.header--scrolled > div` padding
   when the header is scrolled. The full-width bar/background stays on
   <header> itself.

   `margin-inline: auto` is declared HERE, not left to the row's own `mx-auto`
   utility: on the Elementor header the row is an `.e-con`, and Elementor's
   frontend.min.css (`margin: var(--margin-block-start) var(--margin-inline-end)
   …`, all defaulting to 0) loads AFTER the parent Tailwind build, so mx-auto
   silently lost and the whole row — burger included — sat pinned to the
   viewport's left edge above 1536px + gutters. Same class of bug as the
   `.el27-main .e-con.wrapper` rule further down. The ID beats Elementor's
   `.elementor-940 .elementor-element-<id>` (0,3,0) at any load order. */
#header-row {
  max-width: var(--c27-band-max);
  margin-inline: auto;
  padding-inline: 1.5rem; /* px-6 */
}
@media (min-width: 48rem) {
  #header-row {
    padding-inline: 2.5rem; /* md:px-10 */
  }
}
@media (min-width: 64rem) {
  #header-row {
    padding-inline: 4rem; /* lg:px-16 */
  }
}
@media (min-width: 80rem) {
  #header-row {
    padding-inline: 6.25rem; /* xl:px-25 */
  }
}

#header .btn-register {
  border-radius: 999px;
  box-shadow: 0 10px 22px -8px
    color-mix(in srgb, var(--color-primary, #e56b24) 60%, transparent);
}

/* Reveal the header CTA on the home page only after scrolling */
body.home #header .btn-register {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

body.home #header.header--scrolled .btn-register {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

header.header--scrolled {
  background: var(--c27-cream-90);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -12px rgba(18, 58, 61, 0.55);
}

/* 2027 hamburger */
#mobile_menu_btn {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(18, 58, 61, 0.16);
  border-radius: 14px;
  color: var(--c27-ink);
  width: 52px;
  height: 52px;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

#mobile_menu_btn:hover {
  background: #fff;
  border-color: rgba(18, 58, 61, 0.32);
  color: var(--c27-ink);
}

header.header--scrolled #mobile_menu_btn {
  background: rgba(255, 255, 255, 0.5);
  color: var(--c27-ink);
}

#mobile_menu_btn .c27-bar {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c27-ink);
}

#mobile_menu_btn .c27-bar--accent {
  width: 14px;
  background: var(--color-primary, var(--c27-orange));
  align-self: center;
  margin-left: -8px;
}

/*--------------------------------------------------------------
# Full-screen menu overlay
--------------------------------------------------------------*/
#mobile_menu_panel {
  background: var(--c27-grad-menu);
  backdrop-filter: none;
}

.c27-menu-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c27-mint);
  margin-bottom: 18px;
}

.c27-menu-heading--amber {
  color: #f2a62b;
}

.c27-menu-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  color: #eaf4f2;
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s ease;
}

.c27-menu-link:hover,
.c27-menu-link:focus-visible {
  color: #f2a62b;
}

@media (max-width: 640px) {
  .c27-menu-link {
    font-size: 1.4375rem;
  }
}

.c27-menu-meta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #bfdad6;
  line-height: 1.4;
}

.c27-menu-meta span {
  color: var(--c27-footer-muted);
  font-weight: 500;
}

.c27-menu-footlink {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #9fc0bc;
  text-decoration: none;
}

.c27-menu-footlink:hover {
  color: #eaf4f2;
}

/* Menu overlay register pill (amber→orange gradient, dark ink) */
.c27-menu-register {
  background: var(--c27-grad-cta);
  border: 0;
  color: #072e33;
  box-shadow: 0 16px 34px -14px rgba(234, 106, 34, 0.7);
}

.c27-menu-register:hover,
.c27-menu-register:focus-visible {
  filter: brightness(1.06);
  color: #072e33;
}

/*--------------------------------------------------------------
# App store buttons (menu + footer)
--------------------------------------------------------------*/
.c27-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 11px;
  padding: 8px 16px;
  text-decoration: none !important;
  color: #fff;
}

.c27-store-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.c27-footer {
  background: var(--c27-ink);
  color: var(--c27-footer-text);
}

.c27-footer a {
  text-decoration: none;
}

.c27-footer-group {
  font-weight: 700;
  color: var(--c27-cream);
}

.c27-footer nav.nav-footer .footer-nav .menu-item a,
.c27-footer-link {
  display: inline-flex;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--c27-footer-text);
  background: none;
}

.c27-footer nav.nav-footer .footer-nav .menu-item:not(.current-menu-item) a:hover,
.c27-footer-link:hover {
  color: var(--c27-amber);
  background: none;
}

.c27-footer nav.nav-footer .footer-nav .menu-item.current-menu-item a {
  background: none;
  color: var(--c27-cream);
}

.c27-footer-pill {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c27-footer-text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 16px;
}

.c27-footer-pill:hover {
  color: var(--c27-amber);
  border-color: rgba(239, 164, 41, 0.5);
}

/*--------------------------------------------------------------
# Home hero
--------------------------------------------------------------*/
#hero_home_2027 {
  position: relative;
  overflow: hidden;
  background: var(--c27-cream);
}

/* Header clearance: the design's 24px (20px from the tablet breakpoint down)
   below the fixed header — see --c27-header-h under "# Header". This
   supersedes the container's own top padding in the Elementor Style tab
   (7rem / 6rem / 6rem, which only ever cleared the bar-less header): change
   the gap here, the header's share is measured live. */
#hero_home_2027 {
  padding-top: calc(var(--c27-header-h) + 1.5rem);
}

@media (max-width: 1024px) {
  #hero_home_2027 {
    padding-top: calc(var(--c27-header-h) + 1.25rem);
  }
}

#hero_home_2027 .c27-hero-glow {
  position: absolute;
  left: -160px;
  bottom: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(21, 154, 156, 0.12), transparent 62%);
  pointer-events: none;
}

#hero_home_2027 .c27-hero-art {
  position: absolute;
  /* Keep the art's right edge on the copy column's boundary (24px bleed below
     xl, where the band cap never binds). See "The 2027 content band" below. */
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 74%;
  max-height: 460px;
  max-width: min(62%, calc(100% - 24px));
  object-fit: contain;
  object-position: right center;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* Why Attend item headings: design is 22px ink (editor markup may carry
   h2.text-gradient — normalize inside the row heading container). */
#section_explore_meet_learn .section-heading-container h1,
#section_explore_meet_learn .section-heading-container h2,
#section_explore_meet_learn .section-heading-container h3,
#section_explore_meet_learn .section-heading-container h4 {
  margin: 0;
  font-size: 1.375rem !important;
  line-height: 1.1;
  font-weight: 700;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c27-ink) !important;
}

#hero_home_2027 .c27-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--c27-cream) 0%,
    var(--c27-cream) 32%,
    rgba(251, 244, 231, 0.78) 50%,
    rgba(251, 244, 231, 0) 68%
  );
}

.c27-wordmark {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

.c27-wordmark .c27-wordmark-asca {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: clamp(3.25rem, 7vw, 5.375rem);
  letter-spacing: -5px;
  line-height: 0.82;
  color: var(--c27-logo-orange);
}

.c27-wordmark .c27-wordmark-year {
  font-family: Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(3.25rem, 7vw, 5.25rem);
  letter-spacing: -6px;
  line-height: 0.82;
  color: #21afb9;
}

.c27-hero-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  letter-spacing: -2px;
  text-transform: capitalize;
  color: var(--color-tertiary-alt, var(--c27-berry));
  margin-top: 10px;
}

.c27-hero-meta-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.c27-hero-meta-value {
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--c27-ink);
}

@media (min-width: 80rem) {
  #hero_home_2027 .c27-hero-art {
    right: max(var(--c27-gutter), calc((100% - var(--c27-content-max)) / 2));
  }
}

@media (max-width: 640px) {
  #hero_home_2027 .c27-hero-art {
    width: 150%;
    height: auto;
    max-height: none;
    max-width: none;
    right: -42%;
    opacity: 0.26;
  }
}

/* The parent theme force-adds disc markers to nearly every ul with a
   high-specificity unlayered rule — neutralize it for our lists. */
ul.list-none,
ul.list-none ul,
nav ul,
.c27-footer ul,
.c27-benefits ul,
.sponsors-container ul {
  list-style: none !important;
}

ul.list-none > li,
.c27-benefits ul > li {
  list-style: none !important;
}

ul.list-none > li::marker,
.c27-benefits ul > li::marker,
nav ul > li::marker {
  content: none !important;
}

/* With the alert banner on, the header is sticky (in flow) — drop the
   fixed-header clearance padding baked into the heroes. */
body.has-alert-banner #hero_home_2027,
body.has-alert-banner #hero-page-2027 {
  padding-top: 2.5rem;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
.c27-panel-dark {
  position: relative;
  overflow: hidden;
  background: var(--c27-grad-dark);
  color: var(--c27-cream);
}

.c27-panel-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 85% 0%,
    rgba(21, 154, 156, 0.42),
    transparent 60%
  );
  pointer-events: none;
}

.c27-panel-dark h2,
.c27-panel-dark h3 {
  color: var(--c27-cream);
}

/* Editor headings often carry .text-gradient or inline colors — force
   cream on both dark panel types (gradient + photo-backed). BLADE pages
   only: inside the Elementor build (.el27-main) this force-cream is OFF —
   it made every h2/h3 in the exhibitors photo panel cream (unreadable on
   the light booth band) and, being !important, ate any color set in the
   Elementor UI. Elementor pages get overridable defaults instead
   (.c27-panel-dark h2/h3 below + container color inheritance). */
.c27-panel-dark:where(:not(.el27-main *)) .text-gradient,
.c27-panel-photo:where(:not(.el27-main *)) .text-gradient,
.c27-panel-photo:where(:not(.el27-main *)) h1,
.c27-panel-photo:where(:not(.el27-main *)) h2,
.c27-panel-photo:where(:not(.el27-main *)) h3 {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c27-cream) !important;
}

.c27-panel-dark .c27-body,
.c27-panel-dark p {
  color: #dcecea;
}

/* Photo-backed dark section (home exhibitors, page headers w/ image) */
.c27-panel-photo {
  position: relative;
  overflow: hidden;
  color: var(--c27-cream);
}

.c27-panel-photo .c27-panel-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: blur(4px) saturate(1.12);
  transform: scale(1.08);
}

.c27-panel-photo .c27-panel-photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 58, 61, 0.88),
    rgba(12, 110, 117, 0.9)
  );
}

/* Big teal→amber CTA band (sponsors, booth) */
.c27-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(
    120deg,
    var(--c27-teal-deep),
    var(--c27-teal) 55%,
    var(--c27-amber)
  );
  color: var(--c27-cream);
}

.c27-cta-band h2,
.c27-cta-band h3 {
  color: var(--c27-cream);
}

/* Booth CTA band (home exhibitors) — compact per design */
.c27-booth-band {
  background: #d6eeea;
  border: 1px solid rgba(21, 154, 156, 0.22);
  border-radius: 22px;
  padding: 28px 34px;
}

.c27-booth-band .c27-booth-title,
.c27-booth-band .c27-booth-title * {
  margin: 0;
  font-family: var(--font-display) !important;
  font-weight: 800;
  font-size: 1.5rem !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c27-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-transform: none;
}

.c27-booth-band .c27-booth-text,
.c27-booth-band .c27-booth-text * {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #2f5b5c !important;
  max-width: 34rem;
}

/* Urgency banner */
.c27-urgency {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c27-grad-cta);
  color: var(--c27-cream);
  border-radius: 18px;
  padding: 18px 26px;
  box-shadow: 0 20px 44px -26px
    color-mix(in srgb, var(--color-primary, #e56b24) 70%, transparent);
}

/* Virtual-only band */
.c27-virtual-band {
  background: linear-gradient(165deg, #d6eeea, #bfe6dd);
  border: 1px solid rgba(21, 154, 156, 0.25);
  border-radius: 22px;
}

/* Exhibitor "Key benefits" — icon cards (home exhibitors panel) */
.c27-benefits-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--c27-cream);
}

.c27-benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .c27-benefit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.c27-benefit-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--c27-card-border);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 20px 44px -34px rgba(18, 58, 61, 0.5);
}

.c27-benefit-ic {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c27-benefit-ic svg {
  display: block;
}

.c27-benefit-ic--mint {
  background: var(--c27-wash-teal);
  color: var(--c27-teal-deep);
}

.c27-benefit-ic--amber {
  background: var(--c27-wash-amber);
  color: #d2551c;
}

.c27-benefit-ic--peach {
  background: var(--c27-wash-peach);
  color: #d2551c;
}

.c27-benefit-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--c27-ink);
}

.c27-benefit-text {
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c27-body);
}

/*--------------------------------------------------------------
# Price cards
--------------------------------------------------------------*/
.c27-price-card {
  background: #fff;
  border: 1px solid var(--c27-card-border);
  border-radius: 20px;
  padding: 22px 22px 24px;
  box-shadow: var(--c27-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.c27-price-card .c27-price-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c27-ink);
}

.c27-price-card .c27-price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.375rem;
  line-height: 1;
  color: var(--color-secondary, var(--c27-teal-deep));
}

.c27-price-card .c27-price-when {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c27-muted);
}

.c27-price-card--feature {
  background: linear-gradient(150deg, var(--c27-teal-deep), var(--c27-teal));
  border: 0;
  color: var(--c27-cream);
  justify-content: center;
  gap: 8px;
  box-shadow: 0 22px 48px -30px rgba(12, 110, 117, 0.7);
}

.c27-mini-price {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(21, 154, 156, 0.2);
  border-radius: 16px;
  padding: 15px 18px;
}

.c27-mini-price .c27-price-name {
  font-size: 0.875rem;
}

.c27-mini-price .c27-price-amount {
  font-size: 1.625rem;
  margin-top: 6px;
}

/* "Coming soon" standing in for a price, while the registration section is
   hand-switched to its coming-soon state (asca_2027_section_gates, style
   "keep the section"). It occupies the price slot, so it is sized to leave
   the card's height where the numeral had it — a card grid that reflows the
   moment prices land would read as a different design. The teal wash is the
   same one .c27-badge--teal uses, so the cards keep one palette whichever
   state they are in. Both price widgets expose these as Style controls, which
   out-specify this rule at (0,4,0). */
.c27-price-soon {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 12px 17px;
  border-radius: 999px;
  background: #e4efee;
  color: var(--color-secondary, var(--c27-teal-deep));
}

.c27-mini-price .c27-price-soon {
  margin-top: 6px;
  font-size: 0.9375rem;
  padding: 9px 14px;
}

/* The virtual-only tiles drop to two columns on phones — a 137px tile with
   18px padding leaves exactly 99px of content, and the default label wanted
   103px, so it broke to "Coming / Soon". Step the pill down instead of
   nowrapping it, so a longer label typed into the widget still wraps rather
   than overflowing the tile. Measured at 390: 76px of text + 16px padding
   = 92px inside the 99px, i.e. 7px of slack. */
@media (max-width: 640px) {
  .c27-mini-price .c27-price-soon {
    font-size: 0.6875rem;
    padding: 7px 8px;
    letter-spacing: 0;
  }
}

/*--------------------------------------------------------------
# Inner page header
--------------------------------------------------------------*/
#hero-page-2027 {
  position: relative;
  overflow: hidden;
  background: var(--c27-cream);
}

#hero-page-2027 .c27-page-title {
  color: var(--c27-ink);
  font-weight: 800;
}

/* Editorial inner hero (no page background image). The gradient bar (left) and
   the infinity art (right) share ONE vertical band whose height tracks the art
   — the tallest hero element — while the eyebrow / title / buttons are
   vertically centered within it.
   --c27-hero-pt = header clearance (the measured fixed-header height,
   --c27-header-h under "# Header", plus the design's gap — the old fixed
   pt-30/34/38 values were that gap over the 76/76/88px bar-less header),
   --c27-hero-pb = base gap, --c27-hero-art-h = the shared band height. */
.c27-hero-editorial {
  --c27-hero-pt: calc(var(--c27-header-h) + 2.75rem); /* header + 44px (was pt-30) */
  --c27-hero-pb: 2.5rem; /* base gap (pb-10) */
  --c27-hero-art-h: clamp(200px, 22vw, 300px);
  padding-top: var(--c27-hero-pt);
  padding-bottom: var(--c27-hero-pb);
}
@media (min-width: 48rem) {
  .c27-hero-editorial {
    --c27-hero-pt: calc(var(--c27-header-h) + 3.75rem); /* header + 60px (was md:pt-34) */
  }
}
@media (min-width: 64rem) {
  .c27-hero-editorial {
    --c27-hero-pt: calc(var(--c27-header-h) + 4rem); /* header + 64px (was lg:pt-38) */
    --c27-hero-pb: 3.25rem; /* lg:pb-13 */
  }
}

/* Content column: at least as tall as the art band, with the eyebrow/title/
   buttons vertically centered so they line up with the bar and art centers. */
.c27-hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--c27-hero-art-h);
}

/* Left vertical gradient bar (teal → sage → amber). Pinned to the copy column's
   left edge from xl up; flush at the viewport edge below that, where the band
   cap never binds and an inset bar would collide with the eyebrow/title. Spans
   the shared band: from the content column top to the base gap, i.e. exactly
   the art's height. */
.c27-hero-bar {
  position: absolute;
  left: 0;
  top: var(--c27-hero-pt);
  bottom: var(--c27-hero-pb);
  width: 10px;
  background: linear-gradient(180deg, #19b0a6, #7fcb7a 50%, #f2a62b);
  z-index: 4;
  pointer-events: none;
}

/* Infinity artwork on the right — same vertical band as the bar, centered
   within it (margin auto) so the bar height always matches the art. */
#hero-page-2027 .c27-page-art {
  position: absolute;
  /* Mirror of .c27-hero-bar: the copy column's right edge from xl up, a 24px
     bleed below it (same as the home hero art). */
  right: 24px;
  top: var(--c27-hero-pt);
  bottom: var(--c27-hero-pb);
  margin-block: auto;
  height: var(--c27-hero-art-h);
  width: auto;
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}

#hero-page-2027 .c27-page-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--c27-cream) 0%,
    var(--c27-cream) 46%,
    rgba(251, 244, 231, 0.72) 64%,
    rgba(251, 244, 231, 0) 86%
  );
}

@media (min-width: 80rem) {
  .c27-hero-bar {
    left: max(var(--c27-gutter), calc((100% - var(--c27-content-max)) / 2));
  }

  #hero-page-2027 .c27-page-art {
    right: max(var(--c27-gutter), calc((100% - var(--c27-content-max)) / 2));
  }
}

@media (max-width: 900px) {
  #hero-page-2027 .c27-page-art {
    opacity: 0.18;
  }
}

/* Amber-gradient CTA (rectangular, radius 12) + teal ghost twin */
.c27-btn-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fbf4e7;
  background: linear-gradient(100deg, #f2a62b, #ea6a22);
  padding: 13px 22px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 14px 28px -14px rgba(234, 106, 34, 0.6);
  transition: filter 0.16s ease, transform 0.16s ease;
}

.c27-btn-grad:hover,
.c27-btn-grad:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fbf4e7;
}

.c27-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c27-teal-deep);
  background: #fff;
  border: 1px solid rgba(21, 154, 156, 0.4);
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.c27-btn-ghost:hover,
.c27-btn-ghost:focus-visible {
  background: #dff0ee;
  border-color: rgba(21, 154, 156, 0.6);
  color: var(--c27-teal-deep);
}

/*--------------------------------------------------------------
# Form controls
--------------------------------------------------------------*/
.c27-input {
  background: #fff;
  border: 1px solid rgba(18, 58, 61, 0.16);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--c27-ink);
}

.c27-input:focus {
  outline: 2px solid var(--c27-teal);
  outline-offset: 1px;
  border-color: var(--c27-teal);
}

.c27-input::placeholder {
  color: var(--c27-muted);
}

/*--------------------------------------------------------------
# FAQ accordion (Exhibitor FAQ template)
--------------------------------------------------------------*/
.c27-faq {
  background: #fff;
  border: 1px solid var(--c27-card-border);
  border-radius: 18px;
  box-shadow: var(--c27-card-shadow);
  overflow: hidden;
}

.c27-faq summary,
.c27-faq .c27-faq-q {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--c27-ink);
  text-align: left;
  background: none;
  border: 0;
}

.c27-faq .c27-faq-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c27-wash-teal);
  color: var(--c27-teal-deep);
  transition: transform 0.25s ease;
}

.c27-faq [aria-expanded='true'] .c27-faq-icon {
  transform: rotate(45deg);
  background: var(--c27-wash-amber);
  color: #c2531c;
}

.c27-faq .c27-faq-a {
  padding: 0 26px 24px;
  color: var(--c27-body);
}

/*--------------------------------------------------------------
# Schedule pages polish (parent markup, 2027 skin)
--------------------------------------------------------------*/
body.page-template-templates-schedule main#main,
body.page-template-templates-schedule-at-a-glance main#main {
  background: var(--c27-cream);
}

.schedule-container h3.text-gradient {
  background-image: linear-gradient(
    to right,
    var(--color-secondary, #0c6e75) 0%,
    var(--color-secondary-alt, #159a9c) 100%
  );
}

/*--------------------------------------------------------------
# Misc parity with parent
--------------------------------------------------------------*/
#loadingOverlay {
  background: var(--c27-ink);
}

.tile,
.card {
  border-radius: 20px;
}

/* Sponsor/exhibitor logo tiles pick up the 2027 card language */
.sponsors-container a,
.sponsors-grid a {
  border-radius: 18px;
  border: 1px solid var(--c27-card-border);
  box-shadow: 0 18px 40px -34px rgba(18, 58, 61, 0.5);
}

/* Butterfly float animations */
@keyframes c27Float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}

@keyframes c27Float2 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-22px) rotate(-6deg);
  }
}

@keyframes c27Drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(18px, -12px);
  }
}

.c27-butterfly {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(18, 58, 61, 0.28));
  animation: c27Float 6s ease-in-out infinite;
}

.c27-butterfly--slow {
  animation: c27Float2 7.5s ease-in-out infinite;
}

.c27-butterfly--drift {
  animation: c27Drift 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .c27-butterfly,
  .c27-butterfly--slow,
  .c27-butterfly--drift {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Elementor rebuild bridge (el27)
--------------------------------------------------------------*/

/* Responsive rhythm vars consumed by Elementor container padding settings
   (unit "custom") — mirrors .wrapper px-6/10/16/25 and py-8/12/20 bands. */
:root {
  --el27-gutter: 1.5rem;
  --el27-band-py: 2rem;
}

@media (min-width: 768px) {
  :root {
    --el27-gutter: 2.5rem;
    --el27-band-py: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --el27-gutter: 4rem;
    --el27-band-py: 5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --el27-gutter: 6.25rem;
  }
}

/* Elementor widget-internal lists must not inherit the site-wide gray discs
   (parent app.css force-applies list-disc to nearly every ul). */
.elementor ul.elementor-icon-list-items,
.elementor .elementor-accordion ul,
.elementor ul.el27-plain {
  list-style: none !important;
  padding-left: 0 !important;
}

.elementor ul.elementor-icon-list-items > li::marker,
.elementor ul.el27-plain > li::marker {
  content: none !important;
}

/* Heading widgets: low-specificity display defaults for the title element.
   Wrapped in :where() so this stays a LOW-specificity default — anything
   set in the Elementor UI (per-widget color/typography) and the theme's
   design classes always win. (Child CSS loads after Elementor's post CSS,
   so at equal specificity this rule used to eat UI-set heading colors.)

   NOTE: `font-size: inherit` used to live here so Tailwind text-size
   utilities authored on the WRAPPER via CSS Classes would drive the title
   responsively. That was class-era scaffolding: every heading widget on the
   2027 pages now carries its own Typography → Size (verified — 111 of 111),
   so the declaration could only ever do harm. It made the Size control look
   permanently "set from CSS" in devtools, and clearing that control dropped
   the heading to the container's 16px instead of letting it fall back to the
   kit's heading typography. Size is a per-widget setting now; keep it that
   way rather than reintroducing a stylesheet default here. */
:where(.el27-main .elementor-widget-heading) .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
}

/* Text-editor widgets read as body copy */
.el27-main .elementor-widget-text-editor {
  font-family: var(--font-body);
}

/* Decorative HTML widgets are positioning-transparent so their absolutely
   positioned children (hero bar / art / wash) anchor to the parent container,
   not the zero-height widget (Elementor sets .elementor-widget relative). */
.el27-main .elementor-widget-html.el27-decor {
  position: static;
}

/* Alpine safety: the parent bundle ships no x-cloak rule, so pre-init markup
   (or markup whose component never initializes) would render raw. */
[x-cloak] {
  display: none !important;
}

/* Inside the Elementor editor preview, keep Alpine dialogs closed no matter
   what — editor-injected markup can't run open/close logic, and a dialog
   stuck over the canvas makes the page uneditable. The editor TOGGLES its
   own body classes at runtime (elementor-editor-active ↔ …-preview, and the
   kit/global-colors panel — opened from any color picker — strips
   elementor-editor-active entirely, which is how the speaker modal popped
   back up), so the net also keys off `c27-el-preview`: a class the child
   functions.php bakes into the body server-side whenever the page renders
   inside the editor preview iframe. Editor JS never touches that one. */
body.elementor-editor-active [x-dialog],
body.elementor-editor-preview [x-dialog],
body.c27-el-preview [x-dialog] {
  display: none !important;
}

/* Image widgets acting as the theme's fixed-height object-cover figures:
   height utilities ride on the widget wrapper (CSS Classes), this makes the
   inner markup fill it. Covers both classic (.elementor-widget-container)
   and optimized widget DOM. */
.el27-img-cover .elementor-widget-container {
  height: 100%;
}

.el27-img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Home hero wordmark as a heading widget: the flex lockup styles target the
   h1 itself, which is the inner .elementor-heading-title here. */
.el27-main .c27-wordmark .elementor-heading-title {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

/* ---- The 2027 content band ------------------------------------------------
   Every content row on the site — Blade partial, Elementor container or the
   header row — is `wrapper max-w-(--breakpoint-2xl)`: a max-width cap with the
   responsive gutters INSIDE it, so the copy itself is cap − 2×gutter wide.

   Maddy 2026-08-11: the page band, PADDING INCLUDED, is 1440px. That is the
   design canvas width, so `--c27-band-max` is the outer box and the copy column
   `--c27-content-max` falls out of it as 1440 − 2×gutter (1240px at xl).

   Maddy 2026-08-24: on screens with more room than that canvas the band goes
   fluid — `max(1440px, 80%)`. Below 1800px the 1440px term always wins, so
   everything up to and including a 1440px screen is byte-identical to the 08-11
   build ("for screens 1440px or smaller, keep the max-width how it was"); from
   1800px up the band tracks 80% of the viewport, so a wide monitor keeps 10% of
   clear space down each side instead of banding ever-larger empty margins
   around a fixed 1440px column. `max()` is why this needs no media query of its
   own, and why the xl-scoped decoration rules below still hold: their
   `max(gutter, …)` picks the gutter on every viewport the cap can't bind on,
   exactly as before.

   Two hero decorations are pinned to the copy column rather than to the band:
   `.c27-hero-bar` on the left, `.c27-page-art` / `.c27-hero-art` on the right.
   They resolve the SAME boundary expression the wrapper produces —
   `max(gutter, (100vw − content-max) / 2)` — so the bar and the infinity art
   land exactly on the edge every card, panel and heading below them starts at
   ("the content width should be aligned with the hero width"). Below xl the cap
   never binds (the viewport is narrower than 1440), so those two keep their
   older flush-left / 24px-bleed behaviour instead.

   The heroes' own lockups are one gutter narrower than the band (see the
   exclusions below) — they have to clear the gradient bar, which sits on the
   content edge. */
:root {
  /* Outer band, gutters included: the 1440px design canvas, or 80% of the
     viewport once that is the wider of the two (1800px up). The 80% resolves
     against the full-width parent every band sits in — <main class="el27-main">,
     <header id="header">, <footer> — i.e. against the viewport. */
  --c27-band-max: max(1440px, 80%);
  /* .wrapper's own responsive padding, mirrored so the copy column can be
     derived from it. Keep in sync with .wrapper in the parent app.css
     (px-6 md:px-10 lg:px-16 xl:px-25). */
  --c27-gutter: 1.5rem; /* px-6 */
  /* Copy column: the band minus both gutters — 1240px at xl, up to 1800px. */
  --c27-content-max: calc(var(--c27-band-max) - 2 * var(--c27-gutter));
}

@media (min-width: 48rem) {
  :root {
    --c27-gutter: 2.5rem; /* md:px-10 */
  }
}

@media (min-width: 64rem) {
  :root {
    --c27-gutter: 4rem; /* lg:px-16 */
  }
}

@media (min-width: 80rem) {
  :root {
    --c27-gutter: 6.25rem; /* xl:px-25 */
  }
}

.wrapper.max-w-\(--breakpoint-2xl\),
#header-row {
  max-width: var(--c27-band-max);
}

/* Elementor's .e-con CSS overrides both halves of the theme's `wrapper`
   sizing on containers: max-w-(--breakpoint-2xl) loses its cap and the
   zeroed container margins kill mx-auto — so above 1536px viewports every
   wrapper band stretched full-width and pinned left. Restore the cap and
   centering for all Elementor-built pages. */
.el27-main .e-con.wrapper {
  max-width: var(--c27-band-max) !important;
  margin-inline: auto !important;
}

/* The INNER page hero sits one gutter inside the band: its eyebrow/title clear
   `.c27-hero-bar`, which is pinned to the content edge — a flush lockup would
   run the copy straight under the bar. The HOME hero has no bar, so it rides
   the full band with everything else (Maddy 2026-08-11, "make sure the home
   page hero is widened to match"): the wordmark lines up with the burger above
   it and the photo grid below. Both the Blade partials and the Elementor
   rebuilds put this container directly inside the hero.

   The inset is a DOUBLED gutter rather than a narrower max-width: below 1440px
   the band cap doesn't bind, so a narrower cap collapses to a few px of
   clearance right where the bar sits (measured: 2px at 1280) while doubled
   padding holds the full gutter at every width. Scoped to xl because that is
   where the bar leaves the viewport edge — below it the bar is flush at 0 and
   the normal gutter already clears it. */
@media (min-width: 80rem) {
  #hero-page-2027 > .wrapper {
    padding-inline: calc(2 * var(--c27-gutter));
  }

  .el27-main #hero-page-2027 > .e-con.wrapper {
    padding-inline: calc(2 * var(--c27-gutter)) !important;
  }
}

/* Same class of bug for two more utilities: .e-con hard-resets radius and
   overflow through --border-radius / --overflow, and Elementor's
   frontend.min.css loads AFTER the parent Tailwind build — so `rounded-*` and
   `overflow-hidden` on a container silently did nothing. That is why the
   sponsors/exhibitors "Partner with ASCA" cards rendered square-cornered with
   their infinity watermark spilling out, while the white card under them (which
   gets its radius from .c27-card in this file) looked right. Map the utilities
   the seeds use onto Elementor's own vars; :where() keeps these at (0,1,0) so
   per-element Style-tab CSS at (0,3,0) always wins. */
.el27-main :where(.e-con.overflow-hidden) {
  --overflow: hidden;
}

.el27-main :where(.e-con.rounded-\[20px\]) {
  --border-radius: 20px;
}

.el27-main :where(.e-con.rounded-2xl) {
  --border-radius: 1rem;
}

/* ---- Native Elementor buttons mapped to the theme's .btn variants ----
   Button widgets carry el27-btn + a variant class in CSS Classes; these
   rules restyle the inner .elementor-button to match the theme's buttons
   (keep in sync with .btn in parent app.css + the .btn overrides above). */
.el27-main .el27-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.938rem;
  line-height: 1;
  padding: 13px 16px;
  background: none;
  transition: all 0.3s linear;
}

@media (min-width: 1440px) {
  .el27-main .el27-btn .elementor-button {
    font-size: 1rem;
    padding: 16px 24px;
  }
}

.el27-main .el27-btn .elementor-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-rose, #e56b24);
}

.el27-main .el27-btn--lg .elementor-button {
  padding: 18px 38px;
  font-size: 1.125rem;
}

.el27-main .el27-btn--solid-primary .elementor-button {
  background: var(--color-primary, #e56b24);
  border-color: var(--color-primary, #e56b24);
  color: #fff;
  box-shadow: 0 16px 34px -12px
    color-mix(in srgb, var(--color-primary, #e56b24) 60%, transparent);
}

.el27-main .el27-btn--solid-primary .elementor-button:hover {
  background: color-mix(in srgb, var(--color-primary, #e56b24) 88%, #000);
  border-color: color-mix(in srgb, var(--color-primary, #e56b24) 88%, #000);
  color: #fff;
}

.el27-main .el27-btn--solid-secondary .elementor-button {
  background: var(--color-secondary, #0c6e75);
  border-color: var(--color-secondary, #0c6e75);
  color: #fff;
  box-shadow: 0 16px 34px -14px
    color-mix(in srgb, var(--color-secondary, #0c6e75) 60%, transparent);
}

.el27-main .el27-btn--solid-secondary .elementor-button:hover {
  background: transparent;
  color: var(--color-secondary, #0c6e75);
}

.el27-main .el27-btn--outline-secondary .elementor-button {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-secondary, #0c6e75) 40%, transparent);
  color: var(--color-secondary, #0c6e75);
}

.el27-main .el27-btn--outline-secondary .elementor-button:hover {
  background: var(--color-secondary, #0c6e75);
  border-color: var(--color-secondary, #0c6e75);
  color: #fff;
}

.el27-main .el27-btn--cream .elementor-button {
  background: var(--c27-cream);
  border-color: var(--c27-cream);
  color: var(--c27-ink);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.35);
}

.el27-main .el27-btn--cream .elementor-button:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c27-teal-deep);
}

/* ---- ASCA Button (asca-button) — the Coming Soon / disabled state ----
   An asca-button widget with no Link renders inert with `c27-btn-disabled`
   on the anchor. The widget's own "Disabled (Coming Soon)" controls own the
   look (fade/desaturate/colors); this rule carries only what no control
   owns. The doubled class lifts it to (0,5,0) so `box-shadow: none` beats
   the per-widget Normal-tab post CSS (0,4,0) without !important. */
.el27-main .elementor-widget-asca-button .elementor-button.c27-btn-disabled.c27-btn-disabled {
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}

/* Heading widgets used as plain text links */
.el27-main .el27-plainlink a {
  text-decoration: none;
}

.el27-main .el27-plainlink .elementor-heading-title {
  margin: 0;
}

/* Image widgets used as the EML icon chips: the chip box class sits on the
   widget wrapper, this sizes the inner icon image (design: size-7.5). */
.el27-main .c27-icon-chip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Icon widgets used as the benefit-card icons: kill Elementor's default
   gray color/fill and drive the stroke from the tone class (the SVGs use
   stroke: currentColor with fill="none"). */
.el27-main .c27-benefit-ic .elementor-icon-wrapper,
.el27-main .c27-benefit-ic .elementor-icon {
  display: flex;
}

.el27-main .c27-benefit-ic .elementor-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
}

.el27-main .c27-benefit-ic--mint .elementor-icon {
  color: var(--c27-teal-deep);
}

.el27-main .c27-benefit-ic--amber .elementor-icon,
.el27-main .c27-benefit-ic--peach .elementor-icon {
  color: #d2551c;
}

/* Registration price grid (native Elementor home): a container with this
   class lays the pricing band out as the responsive card grid (matches the
   original ul: 1 / sm:2 / lg:3 / xl:4, gap-4.5). The asca-price-cards widget
   inside is layout-transparent so its cards sit in the SAME grid as native
   sibling elements (the teal group-rates card container). */
.el27-main .e-con.el27-price-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  /* honor the container's own Gap control (seeded 18px = the design's gap-4.5) */
  gap: var(--gap, 1.125rem);
}

@media (min-width: 640px) {
  .el27-main .e-con.el27-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .el27-main .e-con.el27-price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .el27-main .e-con.el27-price-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.el27-main .el27-price-grid > .elementor-widget-asca-price-cards,
.el27-main .el27-price-grid > .elementor-widget-asca-price-cards > .elementor-widget-container {
  display: contents;
}

/* Booth band sits on a light wash inside the dark photo panel: inside the
   Elementor build, default its text back to ink (the blade view carries
   explicit .c27-booth-title/.c27-booth-text colors instead) so hand-added
   heading/text widgets read dark on the light band by default. */
.el27-main .c27-booth-band {
  color: var(--c27-ink);
}

/* Sticky footer: short pages (empty schedules, error states) must still pin
   the footer to the bottom of the viewport. #app (layouts/app.blade.php)
   wraps header + main + footer — the header is position:fixed (out of flow),
   so main is the only growing item and pushes the footer down. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#app > main {
  flex: 1 0 auto;
}

/* Icon widget used as the urgency-banner clock: inherit the banner's cream
   ink (the SVG uses stroke: currentColor with fill="none") and kill
   Elementor's default icon color/fill/size. */
.el27-main .c27-urgency .elementor-icon-wrapper,
.el27-main .c27-urgency .elementor-icon {
  display: flex;
  color: inherit;
}

.el27-main .c27-urgency .elementor-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
}

/* Native button widgets mapped to the aside/hero pill buttons
   (c27-btn-grad / c27-btn-ghost design + the on-dark ghost used in the
   exhibitors aside). Standalone bridges — used WITHOUT the el27-btn base
   class, mirroring the .c27-btn-grad/.c27-btn-ghost rules above; keep in
   sync with those. Same caveat as el27-btn: not :where()-lowered, so
   per-widget style edits in the UI lose to these (documented trade-off). */
.el27-main .el27-btn--grad .elementor-button,
.el27-main .el27-btn--ghost .elementor-button,
.el27-main .el27-btn--ghost-dark .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  border-radius: 12px;
  text-decoration: none !important;
}

.el27-main .el27-btn--grad .elementor-button .elementor-button-content-wrapper,
.el27-main .el27-btn--ghost .elementor-button .elementor-button-content-wrapper,
.el27-main .el27-btn--ghost-dark .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.el27-main .el27-btn--grad .elementor-button-icon svg,
.el27-main .el27-btn--ghost .elementor-button-icon svg,
.el27-main .el27-btn--ghost-dark .elementor-button-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
}

.el27-main .el27-btn--grad .elementor-button {
  color: #fbf4e7;
  background: linear-gradient(100deg, #f2a62b, #ea6a22);
  padding: 13px 22px;
  box-shadow: 0 14px 28px -14px rgba(234, 106, 34, 0.6);
  transition: filter 0.16s ease, transform 0.16s ease;
}

.el27-main .el27-btn--grad .elementor-button:hover,
.el27-main .el27-btn--grad .elementor-button:focus {
  color: #fbf4e7;
  background: linear-gradient(100deg, #f2a62b, #ea6a22);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.el27-main .el27-btn--ghost .elementor-button {
  color: var(--c27-teal-deep);
  background: #fff;
  border: 1px solid rgba(21, 154, 156, 0.4);
  padding: 12px 22px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.el27-main .el27-btn--ghost .elementor-button:hover,
.el27-main .el27-btn--ghost .elementor-button:focus {
  color: var(--c27-teal-deep);
  background: #dff0ee;
  border-color: rgba(21, 154, 156, 0.6);
}

.el27-main .el27-btn--ghost-dark .elementor-button {
  color: #eaf4f2;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 12px 20px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.el27-main .el27-btn--ghost-dark .elementor-button:hover,
.el27-main .el27-btn--ghost-dark .elementor-button:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
}

/* Full-width button variant (aside/stacked CTAs). */
.el27-main .elementor-widget-button.el27-btn--block,
.el27-main .el27-btn--block .elementor-button-wrapper,
.el27-main .el27-btn--block .elementor-button {
  width: 100%;
}

/* The parent theme shrink-wraps every h1–h3 (`width: fit-content` in
   asca/resources/css/app.css), which silently defeats the heading widget's
   Alignment control: text-align on the wrapper can't move a shrink-wrapped
   box, so "center" looked identical to "left". Inside the Elementor build,
   let heading titles fill their wrapper again (Elementor's own default) so
   the UI control does what it says. Safe: no heading widget here carries a
   background/gradient that a full-width box would stretch, and in flex rows
   the wrapper is still content-sized. */
.el27-main .elementor-widget-heading .elementor-heading-title {
  width: 100%;
}

/* Stroke-drawn icon widgets (class el27-ic): the SVGs use
   stroke="currentColor" so Elementor's own color controls drive them —
   Primary Color on a default-view icon, Secondary Color on a stacked chip
   (Primary is then the chip background). Each path also carries fill="none",
   so Elementor's `fill: <color>` rule on the <svg> can't fill the glyph and
   no !important is needed here. */
.el27-main .el27-ic .elementor-icon svg {
  stroke: currentColor;
}

/*--------------------------------------------------------------
# Empty states ("no data yet")
  Branded panel shown wherever the ASCA API / CPTs come back empty
  — sponsors, exhibitors, hotels, evening events, speakers, the
  schedule and the exhibitor FAQ. Replaces the bare one-liners
  ("Sponsors will be announced soon.") with the 2027 language:
  cream-to-white card, tri-stop brand rule, and the infinity mark
  traced by a travelling gradient dash.

  Markup: resources/views/partials/c27-empty-state.blade.php
  Variants: .c27-empty--compact (slim row), .c27-empty--sm (the full
  panel scaled for a column-width slot, e.g. the home video),
  .c27-empty--dark (on teal/dark bands, e.g. Featured Speakers).
--------------------------------------------------------------*/
.c27-empty {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--c27-card-border);
  background:
    radial-gradient(
      115% 85% at 6% 0%,
      rgba(214, 238, 234, 0.6) 0%,
      rgba(214, 238, 234, 0) 58%
    ),
    radial-gradient(
      105% 85% at 100% 100%,
      rgba(253, 234, 209, 0.65) 0%,
      rgba(253, 234, 209, 0) 58%
    ),
    linear-gradient(168deg, #ffffff 0%, #fdfaf4 100%);
  box-shadow: var(--c27-card-shadow);
  padding: clamp(2.5rem, 1.5rem + 3.4vw, 4rem) clamp(1.5rem, 0.6rem + 3.4vw, 3.5rem);
  text-align: center;
}

/* Tri-stop brand rule — the same teal → green → amber run as the
   hero title bar and the schedule day markers. */
.c27-empty::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #19b0a6 0%, #7fcb7a 48%, #f2a62b 100%);
}

.c27-empty__art {
  position: relative;
  display: block;
  width: clamp(104px, 9vw, 132px);
  margin: 0 auto 1.6rem;
}

.c27-empty__art svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.c27-empty__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(127, 216, 210, 0.34) 0%,
    rgba(127, 216, 210, 0) 62%
  );
  pointer-events: none;
  animation: c27-empty-glow 5.5s ease-in-out infinite;
}

.c27-empty__track {
  fill: none;
  stroke: rgba(18, 58, 61, 0.11);
  stroke-width: 5;
  stroke-linecap: round;
}

/* pathLength="100" normalises the loop, so the dash pattern below is
   exact regardless of the path's real length. */
.c27-empty__trace {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 24 76;
  animation: c27-empty-trace 3.6s linear infinite;
}

@keyframes c27-empty-trace {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes c27-empty-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.c27-empty__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary-alt, var(--c27-teal));
}

/* <p>, not a heading: these panels stand in for content, so they must
   not enter the page's heading outline. width:100% also sidesteps the
   parent theme's `h1,h2,h3 { width: fit-content }`. */
.c27-empty__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  color: var(--c27-ink);
}

.c27-empty__msg {
  margin: 0.9rem auto 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c27-body);
}

.c27-empty__msg a {
  font-weight: 600;
  color: var(--color-links, var(--c27-orange));
}

.c27-empty__chips-label {
  margin: 1.9rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c27-muted);
}

.c27-empty__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

/* Dashed outline reads as "placeholder", not as a live filter chip. */
.c27-empty__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px dashed rgba(18, 58, 61, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: var(--c27-body);
}

.c27-empty__chip span {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.c27-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.c27-empty__note {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  color: var(--c27-muted);
}

/* ---------------------------------------------- compact (slim row) */
.c27-empty--compact {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  border-radius: 20px;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  text-align: left;
}

.c27-empty--compact::before {
  height: 4px;
}

.c27-empty--compact .c27-empty__art {
  flex: none;
  width: 74px;
  margin: 0;
}

.c27-empty--compact .c27-empty__body {
  min-width: 0;
}

.c27-empty--compact .c27-empty__eyebrow {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
}

.c27-empty--compact .c27-empty__title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.c27-empty--compact .c27-empty__msg {
  margin: 0.3rem 0 0;
  max-width: 64ch;
  font-size: 0.9375rem;
}

.c27-empty--compact .c27-empty__actions {
  margin: 0 0 0 auto;
  padding-left: 0.5rem;
}

@media (max-width: 640px) {
  .c27-empty--compact {
    flex-direction: column;
    text-align: center;
  }

  .c27-empty--compact .c27-empty__actions {
    margin: 0.25rem 0 0;
    padding: 0;
  }
}

/* -------------------------------------- small (column-width slots)
   `variant => 'small'` — the full panel's composition (mark on top,
   centred copy) at the scale a narrow slot wants. The video panel on
   the home exhibitors band stands in a ~590px box, where the shipped
   padding and type read as a blown-up banner rather than the quiet
   card the speakers band gets across the full content width. */
.c27-empty--sm {
  border-radius: 22px;
  padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem) clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}

.c27-empty--sm::before {
  height: 4px;
}

.c27-empty--sm .c27-empty__art {
  width: clamp(84px, 7vw, 104px);
  margin-bottom: 1.15rem;
}

.c27-empty--sm .c27-empty__art--play {
  width: clamp(62px, 5vw, 78px);
  margin-bottom: 1rem;
}

.c27-empty--sm .c27-empty__eyebrow {
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
}

.c27-empty--sm .c27-empty__title {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
}

.c27-empty--sm .c27-empty__msg {
  margin-top: 0.65rem;
  max-width: 42ch;
  font-size: 0.9375rem;
}

.c27-empty--sm .c27-empty__note {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
}

.c27-empty--sm .c27-empty__actions {
  margin-top: 1.25rem;
}

/* ------------------------------------------- dark (on teal panels) */
.c27-empty--dark {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(
      115% 85% at 6% 0%,
      rgba(21, 154, 156, 0.3) 0%,
      rgba(21, 154, 156, 0) 60%
    ),
    radial-gradient(
      105% 85% at 100% 100%,
      rgba(239, 164, 41, 0.18) 0%,
      rgba(239, 164, 41, 0) 60%
    ),
    linear-gradient(168deg, rgba(12, 73, 79, 0.55) 0%, rgba(18, 58, 61, 0.75) 100%);
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, 0.55);
}

.c27-empty--dark .c27-empty__track {
  stroke: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------- play mark (video panels)
   `mark => 'play'` swaps the traced infinity for a play button — the
   asca-video widget's panel, so a video that isn't up yet still reads
   as a video. Same glow and slot, a little smaller. */
.c27-empty__art--play {
  width: clamp(76px, 6.4vw, 96px);
  margin-bottom: 1.35rem;
}

.c27-empty__disc {
  fill: rgba(18, 58, 61, 0.14);
}

.c27-empty__play {
  fill: #123a3d;
}

.c27-empty--dark .c27-empty__disc {
  fill: rgba(255, 255, 255, 0.3);
}

.c27-empty--dark .c27-empty__play {
  fill: #123a3d;
}

.c27-empty--dark .c27-empty__eyebrow {
  color: var(--c27-mint);
}

.c27-empty--dark .c27-empty__title {
  color: var(--c27-cream);
}

.c27-empty--dark .c27-empty__msg {
  color: #cfe7e4;
}

.c27-empty--dark .c27-empty__chips-label,
.c27-empty--dark .c27-empty__note {
  color: var(--c27-footer-muted);
}

.c27-empty--dark .c27-empty__chip {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe7e4;
}

@media (prefers-reduced-motion: reduce) {
  .c27-empty__trace {
    stroke-dasharray: 100 0;
    stroke-dashoffset: 0;
    animation: none;
  }

  .c27-empty__glow {
    animation: none;
    opacity: 0.7;
  }
}

/* --------------------------------- split (copy left, photo right)
   `variant => 'split'` — the home sponsors band's stand-in
   (2026-08-25, Maddy: "Replace the entire home page sponsor coming
   soon panel with this"). Still the same panel object as every other
   one — same brand rule across the top, same infinity mark, same
   eyebrow / title / message elements, same Style-tab controls — only
   re-laid as a left copy column with a photo bled to the right edge
   behind a diagonal cut, and carrying a real CTA button instead of a
   "check back soon".

   The geometry is three custom properties, each an Elementor control
   on the widget that draws the panel:
     --c27-split-media  width of the photo box, off the RIGHT edge
     --c27-split-skew   how far in from that box's own left edge its
                        TOP corner sits — the lean of the cut
     --c27-split-copy   max width of the copy column, so the text can
                        never run under the photo

   Padding is a property rather than a literal because the stacked
   layout at the bottom bleeds the photo back out to the panel edge
   and has to make room for it. */
.c27-empty--split {
  --c27-split-media: 58%;
  --c27-split-skew: 27.5%;
  --c27-split-copy: 40%;
  --c27-split-pad-x: clamp(1.5rem, 0.55rem + 2.5vw, 2.35rem);
  --c27-split-pad-y: clamp(1.85rem, 0.85rem + 2.3vw, 2.65rem);
  --c27-split-band: clamp(170px, 28vw, 260px);
  --c27-split-font: 'avenir-next-lt-pro', 'Avenir Next', var(--font-display);
  min-height: 21rem;
  padding: var(--c27-split-pad-y) var(--c27-split-pad-x);
  border-radius: 20px;
  text-align: left;
}

/* The brand rule runs the full width of the panel, photo included. */
.c27-empty--split::before {
  z-index: 2;
}

.c27-empty--split .c27-empty__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--c27-split-media);
  clip-path: polygon(var(--c27-split-skew) 0, 100% 0, 100% 100%, 0 100%);
}

.c27-empty--split .c27-empty__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--c27-split-focus, center);
}

.c27-empty--split > .c27-empty__art,
.c27-empty--split > .c27-empty__body,
.c27-empty--split > .c27-empty__actions {
  position: relative;
  z-index: 1;
  max-width: var(--c27-split-copy);
}

/* No photo set: nothing to keep clear of, so the copy runs full width. */
.c27-empty--split.c27-empty--nomedia > .c27-empty__art,
.c27-empty--split.c27-empty--nomedia > .c27-empty__body,
.c27-empty--split.c27-empty--nomedia > .c27-empty__actions {
  max-width: none;
}

.c27-empty--split .c27-empty__art {
  width: clamp(62px, 5.5vw, 79px);
  margin: 0 0 1rem;
}

/* The halo reads as a smudge on a flat card at this size, and a
   24%-long travelling dash reads as a broken shape — so the mark is
   the solid gradient loop here, glow off. */
.c27-empty--split .c27-empty__glow,
.c27-empty--split .c27-empty__track {
  display: none;
}

.c27-empty--split .c27-empty__trace {
  stroke-width: 9;
  stroke-dasharray: 100 0;
  animation: none;
}

.c27-empty--split .c27-empty__eyebrow,
.c27-empty--split .c27-empty__title,
.c27-empty--split .c27-empty__msg {
  font-family: var(--c27-split-font);
}

.c27-empty--split .c27-empty__eyebrow {
  margin-bottom: 1.05rem;
  letter-spacing: 0.15em;
}

.c27-empty--split .c27-empty__title {
  font-size: clamp(1.6rem, 0.95rem + 2vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.c27-empty--split .c27-empty__msg {
  margin: 0.7rem 0 0;
  max-width: none;
  line-height: 1.6;
}

.c27-empty--split .c27-empty__actions {
  justify-content: flex-start;
  margin-top: 1.35rem;
}

/* The design's pill: flat amber, dark ink, a drawn arrow — not the
   gradient-and-cream .c27-btn-grad the centred panels use. */
.c27-empty--split .c27-btn-grad {
  gap: 1.05rem;
  padding: 0.87rem 1.15rem;
  border-radius: 999px;
  font-family: var(--c27-split-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 100%;
  text-align: left;
  color: var(--c27-ink);
  background: var(--color-tertiary, var(--c27-amber));
  box-shadow: none;
}

.c27-empty--split .c27-btn-grad:hover,
.c27-empty--split .c27-btn-grad:focus-visible {
  color: var(--c27-ink);
}

.c27-empty__cta-arrow {
  flex: none;
  width: 1.35em;
  height: 1.35em;
}

/* This panel sits on the CREAM band, so its dark tone has to be
   opaque — the shared dark background is a translucent wash meant to
   pick up a teal band underneath it. */
.c27-empty--split.c27-empty--dark {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      90% 130% at 0% 0%,
      rgba(21, 154, 156, 0.2) 0%,
      rgba(21, 154, 156, 0) 62%
    ),
    linear-gradient(152deg, #10353a 0%, #0b2528 100%);
  box-shadow: var(--c27-card-shadow-lg);
}

.c27-empty--split.c27-empty--dark .c27-empty__eyebrow {
  color: #4fd3c9;
}

.c27-empty--split.c27-empty--dark .c27-empty__msg {
  color: #f4fbfa;
}

/* The sponsorship banner (asca-sponsor-cta) carries a top margin to clear
   the sponsor logo grid above it. With the line-up switched off — or with
   no sponsors yet — the grid AND the "Meet Our Sponsors" block above it are
   both left out of the page, so the banner is the band's only child and
   that gap would just push it off-centre. `.el27-main .elementor-element…`
   is (0,4,0), one more than the per-element margin Elementor writes. */
.el27-main .elementor-element.elementor-widget-asca-sponsor-cta:first-child {
  margin-top: 0;
}

/* Narrower than the width the design was drawn at: the copy column
   can't hold its 40% and still fit the button, so the photo gives some
   width back and the cut stands up a little.

   `:not(.c27-empty--vert)` on both blocks: the vertical card below is
   stacked at every width by design and sizes itself off its own box,
   so a viewport breakpoint has nothing to say to it. */
@media (max-width: 1279px) {
  .c27-empty--split:not(.c27-empty--vert) {
    --c27-split-media: 50%;
    --c27-split-skew: 23%;
    --c27-split-copy: 50%;
  }
}

/* Stacked: the photo becomes a bled band across the top, cut on its
   bottom edge instead of its left one, and the panel's top padding
   makes room for it. Switches at Elementor's tablet breakpoint, below
   which the copy column is too narrow to hold the button. */
@media (max-width: 1024px) {
  .c27-empty--split:not(.c27-empty--vert) {
    padding-top: calc(var(--c27-split-band) + var(--c27-split-pad-y));
  }

  .c27-empty--split:not(.c27-empty--vert) .c27-empty__media {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--c27-split-band);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.5rem));
  }

  .c27-empty--split > .c27-empty__art,
  .c27-empty--split > .c27-empty__body,
  .c27-empty--split > .c27-empty__actions {
    max-width: none;
  }
}

/* ------------------------------------------- vertical (column card)

   The same sponsorship ad drawn tall and narrow, for the Sponsors page
   aside: photo as a bled band across the top under the brand rule, cut
   on its bottom edge, then the mark, the copy and the pill below it.
   The widget's Layout control picks it (`asca-sponsor-cta`), and it
   carries `--split` too so it keeps that panel's type family, amber
   pill and opaque dark tone — only the geometry changes.

   It sizes itself off ITS OWN WIDTH, not the viewport's: this card
   lives in a fixed 320px column, so the `vw` terms the wide banner
   scales on would grow the headline while the card stood still. Hence
   `container-type: inline-size` and `cqw`. Two things about that unit:
   it measures the container's CONTENT box, so 100cqw is the card minus
   its side padding — which is why the band below is over 100 — and it
   only resolves on DESCENDANTS, an element never being its own query
   container, so anything the panel sets on itself stays in rem.

   The ratios are the design's, measured off the comp against the full
   card width: photo band 88% of it, headline 10.9%, 9.6% of inset. */
.c27-empty--split.c27-empty--vert {
  container-type: inline-size;
  --c27-split-pad-x: 1.85rem;
  --c27-split-pad-y: 1.85rem;
  --c27-vert-band: 108cqw;
  --c27-vert-cut: 5.5cqw;
  --c27-vert-gap: 1.9rem;
  min-height: 0;
  padding: 0 var(--c27-split-pad-x) 2.5rem;
  border-radius: 22px;
}

/* Out of the absolute corner the wide banner puts it in and back into
   the flow, so it occupies the top of the card and everything else
   simply follows — no padding-top arithmetic to keep in step with the
   band height. It needs no top padding to cancel either, which leaves
   the Style tab's Padding control free to open a band of card colour
   above the photo if that is ever wanted; the side margins do still
   read `--c27-split-pad-x`, so a padding change there needs the same
   number, or the bleed stops short of the edge. */
.c27-empty--split.c27-empty--vert > .c27-empty__media {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: var(--c27-vert-band);
  margin: 0 calc(var(--c27-split-pad-x) * -1) var(--c27-vert-gap);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--c27-vert-cut)));
}

/* No photo: nothing bleeding to the top edge, so the copy needs the
   inset back or it starts under the brand rule. */
.c27-empty--split.c27-empty--vert.c27-empty--nomedia {
  padding-top: var(--c27-split-pad-y);
}

/* No brand rule on this one (2026-08-28, Maddy: "remove the colored bar on
   the vertical version of the sponsor ad") — the photo runs clean to the top
   edge, where the card's radius rounds it. `content: none` takes the
   pseudo-element out altogether rather than hiding a box that is still
   there; the Style tab's Top rule control is hidden on this layout to match,
   so nothing offers to colour a bar that cannot appear. The wide banner
   keeps its rule. */
.c27-empty--split.c27-empty--vert::before {
  content: none;
}

/* Nothing to keep clear of sideways: one column, full width. */
.c27-empty--split.c27-empty--vert > .c27-empty__art,
.c27-empty--split.c27-empty--vert > .c27-empty__body,
.c27-empty--split.c27-empty--vert > .c27-empty__actions {
  max-width: none;
}

.c27-empty--split.c27-empty--vert .c27-empty__art {
  width: clamp(40px, 17cqw, 66px);
  margin: 0 0 0.9rem;
}

.c27-empty--split.c27-empty--vert .c27-empty__eyebrow {
  margin-bottom: 0.75rem;
  font-size: clamp(0.6rem, 3.8cqw, 0.85rem);
}

.c27-empty--split.c27-empty--vert .c27-empty__title {
  font-size: clamp(1.5rem, 13.4cqw, 2.5rem);
  line-height: 1.1;
}

.c27-empty--split.c27-empty--vert .c27-empty__msg {
  margin-top: 1.15rem;
  font-size: clamp(0.95rem, 6.8cqw, 1.3rem);
  line-height: 1.45;
}

.c27-empty--split.c27-empty--vert .c27-empty__actions {
  margin-top: 1.45rem;
}

/* Title case at this size, not the banner's uppercase tracking: the
   pill has one column's width to fit a two-word label into. */
.c27-empty--split.c27-empty--vert .c27-btn-grad {
  gap: 0.8rem;
  padding: 0.8rem 1.15rem;
  font-size: clamp(0.85rem, 5.8cqw, 1.05rem);
  letter-spacing: 0.005em;
  text-transform: none;
}

/*--------------------------------------------------------------
# Elementor live-data widgets — token consumption
--------------------------------------------------------------
  Maddy, 2026-07-30: "elementor built pages shouldnt have any css styles!
  i want everything to be built in elementor."

  So the widget views under resources/views/partials/el/ emit NO <style>
  block and carry no inline style attributes. Structure lives here; every
  VALUE comes from a `--<prefix>-*` custom property that an Elementor token
  control writes onto the widget wrapper (see elementor/asca-widget-base.php).
  The var() fallbacks below are the shipped design, so this file still renders
  correctly if a widget is ever used outside Elementor.

  Never add a value here that has a token control — set the control's default
  instead, or the panel and the page will disagree.
--------------------------------------------------------------*/

/* --- Exhibitor directory (asca-exhibitor-directory) ------------------- */

.el27-exh-grid {
  display: grid;
  grid-template-columns: repeat(var(--exh-grid-cols, 2), minmax(0, 1fr));
  gap: var(--exh-grid-gap, 22px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.el27-exh-grid > li {
  display: flex;
}

.c27-exh-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--exh-card-bg, #fff);
  border: var(--exh-card-border-w, 1px) solid var(--exh-card-border, rgba(18, 58, 61, 0.09));
  border-radius: var(--exh-card-radius, 18px);
  box-shadow: var(--exh-card-shadow, 0 20px 46px -36px rgba(18, 58, 61, 0.5));
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.c27-exh-card:hover {
  transform: translateY(var(--exh-card-lift, -3px));
  box-shadow: var(--exh-card-shadow-hover, 0 26px 52px -32px rgba(18, 58, 61, 0.5));
  border-color: var(--exh-card-border-hover, rgba(21, 154, 156, 0.4));
}

/* Category slot → the three per-card colors. Adding a class beats writing an
   inline style attribute, which would out-specify the Style tab. */
.c27-exh-card--cat1 { --exh-cat-bar: var(--exh-cat1-bar, #0c6e75); --exh-cat-bg: var(--exh-cat1-bg, #dff0ee); --exh-cat-fg: var(--exh-cat1-fg, #0c6e75); }
.c27-exh-card--cat2 { --exh-cat-bar: var(--exh-cat2-bar, #3b7a48); --exh-cat-bg: var(--exh-cat2-bg, #deeedd); --exh-cat-fg: var(--exh-cat2-fg, #2e6a3b); }
.c27-exh-card--cat3 { --exh-cat-bar: var(--exh-cat3-bar, #6a3a8c); --exh-cat-bg: var(--exh-cat3-bg, #ece0f3); --exh-cat-fg: var(--exh-cat3-fg, #6a3a8c); }
.c27-exh-card--cat4 { --exh-cat-bar: var(--exh-cat4-bar, #c2531c); --exh-cat-bg: var(--exh-cat4-bg, #fbe3ce); --exh-cat-fg: var(--exh-cat4-fg, #9a3d12); }
.c27-exh-card--cat5 { --exh-cat-bar: var(--exh-cat5-bar, #b45a1b); --exh-cat-bg: var(--exh-cat5-bg, #fbe7d3); --exh-cat-fg: var(--exh-cat5-fg, #8a5a0e); }

.c27-exh-bar {
  flex-shrink: 0;
  height: var(--exh-card-bar-h, 5px);
  background: var(--exh-cat-bar, #0c6e75);
}

.c27-exh-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--exh-card-pad, 24px 24px 22px 24px);
}

/* Card head: the monogram tile, then the name with the pills under it. The
   pills sit in the text column (not under the tile) so they line up with the
   name, while the description and the CTA below run the full card width. */
.c27-exh-head {
  display: flex;
  align-items: center;
  gap: var(--exh-mark-gap, 14px);
}

/* min-width:0 lets a long company name wrap inside the flex row instead of
   pushing the tile out of the card. */
.c27-exh-head-text {
  flex: 1;
  min-width: 0;
}

/* The monogram tile. Its colours default to the card's category slot — the
   same pair the category pill uses — so the tile carries the colour coding.
   --exh-mark-bg/--exh-mark-fg override that when the Style tab sets them.
   Sets no font property: typography is a Style-tab control. */
.c27-exh-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--exh-mark-size, 46px);
  height: var(--exh-mark-size, 46px);
  border-radius: var(--exh-mark-radius, 12px);
  background: var(--exh-mark-bg, var(--exh-cat-bg, #dff0ee));
  color: var(--exh-mark-fg, var(--exh-cat-fg, #0c6e75));
}

.c27-exh-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--exh-pills-mt, 10px);
}

.c27-exh-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--exh-pill-pad, 5px 12px 5px 12px);
  border-radius: var(--exh-pill-radius, 999px);
}

.c27-exh-pill--booth {
  background: var(--exh-pill-booth-bg, #dff0ee);
  color: var(--exh-pill-booth-fg, #0c6e75);
}

.c27-exh-pill--cat {
  background: var(--exh-cat-bg, #dff0ee);
  color: var(--exh-cat-fg, #0c6e75);
}

/* Typography for these is owned entirely by the widget's Style tab — do not
   set font-* here or the control loses. Width/max-width clear the theme's
   `h1,h2,h3 { width: fit-content }`. */
.el27-exh-name {
  margin: 0;
  width: auto;
  max-width: none;
  color: var(--exh-name-fg, #123a3d);
}

.el27-exh-desc {
  margin-top: var(--exh-desc-mt, 16px);
  color: var(--exh-desc-fg, #4a6b6c);
}

/* The inline "Read more"/"Show less" toggle that follows the ellipsis when the
   widget's "Truncate description at" cuts a description. It expands the card
   in place — no inner scroller, so touch scrolling never has two surfaces to
   choose between and the revealed text is real content for a screen reader.
   `font: inherit` is a FALLBACK, not styling: `more_typography` on the Style
   tab out-specifies it (0,3,1 vs 0,1,0), but a <button> emptied of every
   typography control would otherwise drop to the UA's 13px Arial. Same reason
   .c27-exh-reset names a font-family. */
.el27-exh-more {
  display: inline;
  margin: 0 0 0 0.15em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--exh-more-fg, #0c6e75);
  text-align: inherit;
  cursor: pointer;
}

.el27-exh-more:hover,
.el27-exh-more:focus-visible {
  color: var(--exh-more-fg-hover, var(--exh-more-fg, #0c6e75));
  text-decoration: underline;
}

/* flex, so "Alignment" on the Style tab can park the button left, centre or
   right without it stretching to the card width the way a block-level anchor
   would. margin-top:auto keeps it pinned to the bottom of every card in a row. */
.el27-exh-cta {
  display: flex;
  justify-content: var(--exh-cta-justify, flex-end);
  margin-top: auto;
  padding-top: var(--exh-cta-mt, 20px);
}

/* "Visit website" CTA on an exhibitor card. Scoped to the card (3 classes) so
   the tokens out-specify the global .c27-btn-grad rule without leaking to the
   other gradient buttons on the page (aside CTA, empty state, page header).
   Sets no font property — typography is a Style-tab control, and its selector
   beats plain .c27-btn-grad on its own. */
.c27-exh-app .el27-exh-cta .c27-btn-grad {
  gap: var(--exh-cta-gap, 9px);
  color: var(--exh-cta-fg, #fbf4e7);
  background: var(--exh-cta-bg, linear-gradient(100deg, #f2a62b, #ea6a22));
  padding: var(--exh-cta-pad, 13px 22px);
  border-radius: var(--exh-cta-radius, 12px);
  box-shadow: var(--exh-cta-shadow, 0 14px 28px -14px rgba(234, 106, 34, 0.6));
}

/* The "opens elsewhere" arrow on the card CTA. em-sized so it tracks the
   button's Typography control; 1.15em rather than the 1.35em the panel's
   straight arrow uses, because a diagonal fills its box on both axes and
   would otherwise out-weigh the label. */
.c27-exh-cta-arrow {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.c27-exh-app .el27-exh-cta .c27-btn-grad:hover,
.c27-exh-app .el27-exh-cta .c27-btn-grad:focus-visible {
  color: var(--exh-cta-fg-hover, var(--exh-cta-fg, #fbf4e7));
  background: var(--exh-cta-bg-hover, var(--exh-cta-bg, linear-gradient(100deg, #f2a62b, #ea6a22)));
}

.el27-exh-results {
  margin: 20px 0;
  color: var(--exh-results-fg, #4a6b6c);
}

.el27-exh-results strong {
  color: var(--exh-results-strong, #123a3d);
}

/* stretch, not center: the search box, the category select and the Reset
   button then share one height no matter what their padding and typography
   controls are set to, instead of each sizing to its own line box. */
.c27-exh-controls {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--exh-controls-gap, 12px);
  width: 100%;
}

/* flex so the input (or its editor-preview span) fills the stretched field —
   keeps the search icon centred on the box it actually sits in. */
.c27-exh-field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 220px;
}

.c27-exh-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--exh-search-icon, #8aa5a4);
}

.c27-exh-app .c27-input {
  background: var(--exh-input-bg, #fff);
  border-color: var(--exh-input-border, rgba(18, 58, 61, 0.16));
  border-radius: var(--exh-input-radius, 12px);
  color: var(--exh-input-fg, #123a3d);
}

.c27-exh-app .c27-input::placeholder {
  color: var(--exh-input-placeholder, #8aa5a4);
}

.c27-exh-app .c27-input--search {
  padding-left: 44px;
  width: 100%;
}

.c27-exh-app .c27-input--select {
  min-width: 200px;
  font-weight: 600;
  cursor: pointer;
}

/* Static stand-ins for the search box and dropdown on the Elementor canvas
   (no live inputs in the editor DOM) — same box model as the real controls. */
.c27-exh-app span.c27-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--exh-input-placeholder, #8aa5a4);
}

.c27-exh-app span.c27-input--select {
  color: var(--exh-input-fg, #123a3d);
}

/* font-family/weight here are only the fallback for when the Style tab's
   typography group is cleared; padding and radius are tokens so the button can
   be sized to match the inputs beside it. */
.c27-exh-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--exh-reset-pad, 12px 24px);
  border-radius: var(--exh-reset-radius, 12px);
  transition: filter 0.15s ease;
  color: var(--exh-reset-fg, #0c6e75);
  background: var(--exh-reset-bg, #d6eeea);
  border: 1px solid var(--exh-reset-border, rgba(21, 154, 156, 0.3));
}

.c27-exh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--exh-page-gap, 10px);
  margin-top: var(--exh-page-mt, 40px);
}

.c27-exh-pagination ul {
  display: flex;
  align-items: center;
  gap: var(--exh-page-gap, 10px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c27-exh-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: var(--exh-page-size, 40px);
  height: var(--exh-page-size, 40px);
  padding: 0 12px;
  border-radius: var(--exh-page-radius, 11px);
  background: var(--exh-page-bg, #fff);
  color: var(--exh-page-fg, #123a3d);
  border: 1px solid var(--exh-page-border, rgba(18, 58, 61, 0.16));
  transition: all 0.15s ease;
}

.c27-exh-page.is-active {
  background: var(--exh-page-active-bg, #0c6e75);
  color: var(--exh-page-active-fg, #fbf4e7);
  border-color: var(--exh-page-active-bg, #0c6e75);
}

.c27-exh-page:disabled,
.c27-exh-page.is-disabled {
  color: var(--exh-page-disabled-fg, #b9c7c5);
  cursor: not-allowed;
}

.c27-exh-ellipsis {
  padding: 0 8px;
  color: var(--exh-page-disabled-fg, #b9c7c5);
}

/* Label on a widget's server-rendered editor preview (Elementor canvas only —
   the $editor view branches are the only thing that emits it). */
.c27-el-editor-note {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7e9998;
}

/* --- Sponsor logos (asca-sponsor-logos) ------------------------------- */

.el27-spl-grid {
  display: grid;
  grid-template-columns: repeat(var(--spl-cols, 5), minmax(0, 1fr));
  gap: var(--spl-gap, 18px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.el27-spl-grid > li {
  display: flex;
  height: 100%;
}

.el27-spl-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: transform 0.2s ease;
  background: var(--spl-tile-bg, #fff);
  border: 1px solid var(--spl-tile-border, rgba(18, 58, 61, 0.08));
  border-radius: var(--spl-tile-radius, 18px);
  padding: var(--spl-tile-pad, 22px);
  min-height: var(--spl-tile-minh, 116px);
  box-shadow: var(--spl-tile-shadow, 0 18px 40px -34px rgba(18, 58, 61, 0.5));
}

a.el27-spl-tile:hover {
  transform: translateY(var(--spl-tile-lift, -2px));
}

.el27-spl-logo {
  display: block;
  width: 100%;
  height: var(--spl-logo-h, 72px);
  object-fit: contain;
}

/* Typography is owned by the Style tab — colour only here. */
.el27-spl-name {
  text-align: center;
  color: var(--spl-name-fg, #123a3d);
}

/* --- Sponsor tiers (asca-sponsor-tiers) ------------------------------- */

.sponsors-container {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--spo-tier-gap, 44px);
}

/* Tier slot → the three per-tier colours. A class, not an inline style, so the
   Style tab always wins. */
.c27-spo-tier--title { --spo-tier-bar: var(--spo-title-bar, #123a3d); --spo-tier-bg: var(--spo-title-bg, #e4efee); --spo-tier-fg: var(--spo-title-fg, #123a3d); }
.c27-spo-tier--alliance { --spo-tier-bar: var(--spo-alliance-bar, #0c6e75); --spo-tier-bg: var(--spo-alliance-bg, #dff0ee); --spo-tier-fg: var(--spo-alliance-fg, #0c6e75); }
.c27-spo-tier--diamond { --spo-tier-bar: var(--spo-diamond-bar, #2c7ba0); --spo-tier-bg: var(--spo-diamond-bg, #deebf2); --spo-tier-fg: var(--spo-diamond-fg, #215e7c); }
.c27-spo-tier--platinum { --spo-tier-bar: var(--spo-platinum-bar, #6a7e8c); --spo-tier-bg: var(--spo-platinum-bg, #e8edf1); --spo-tier-fg: var(--spo-platinum-fg, #4e6373); }
.c27-spo-tier--gold { --spo-tier-bar: var(--spo-gold-bar, #e0a21c); --spo-tier-bg: var(--spo-gold-bg, #fbf0da); --spo-tier-fg: var(--spo-gold-fg, #8a5a0e); }
.c27-spo-tier--silver { --spo-tier-bar: var(--spo-silver-bar, #8593a0); --spo-tier-bg: var(--spo-silver-bg, #ebeef1); --spo-tier-fg: var(--spo-silver-fg, #5a6773); }
.c27-spo-tier--bronze { --spo-tier-bar: var(--spo-bronze-bar, #b4791a); --spo-tier-bg: var(--spo-bronze-bg, #fbe7d3); --spo-tier-fg: var(--spo-bronze-fg, #7a5a22); }
.c27-spo-tier--other { --spo-tier-bar: var(--spo-other-bar, #159a9c); --spo-tier-bg: var(--spo-other-bg, #dff0ee); --spo-tier-fg: var(--spo-other-fg, #0c6e75); }

.c27-spo-tierhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.c27-spo-tierbar {
  flex-shrink: 0;
  width: var(--spo-tierbar-w, 30px);
  height: var(--spo-tierbar-h, 8px);
  border-radius: 999px;
  background: var(--spo-tier-bar, #159a9c);
}

.el27-spo-h2 {
  margin: 0;
  width: auto;
  max-width: none;
  color: var(--spo-h2-fg, #123a3d);
}

.el27-spo-count {
  color: var(--spo-count-fg, #8aa5a4);
}

.el27-spo-grid {
  display: grid;
  grid-template-columns: repeat(var(--spo-cols, 3), minmax(0, 1fr));
  gap: var(--spo-gap, 22px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.el27-spo-grid > li {
  display: flex;
  height: 100%;
}

.c27-spo-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  background: var(--spo-card-bg, #fff);
  border: 1px solid var(--spo-card-border, rgba(18, 58, 61, 0.09));
  border-radius: var(--spo-card-radius, 18px);
  box-shadow: var(--spo-card-shadow, 0 18px 42px -34px rgba(18, 58, 61, 0.5));
}

a.c27-spo-card:hover,
a.c27-spo-card:focus-visible {
  transform: translateY(var(--spo-card-lift, -3px));
  box-shadow: var(--spo-card-shadow-hover, 0 26px 52px -32px rgba(18, 58, 61, 0.5));
  border-color: var(--spo-card-border-hover, rgba(21, 154, 156, 0.4));
}

.c27-spo-bar {
  display: block;
  flex-shrink: 0;
  height: var(--spo-card-bar-h, 5px);
  background: var(--spo-tier-bar, #159a9c);
}

.c27-spo-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--spo-card-pad, 22px 22px 20px 22px);
}

.c27-spo-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  height: var(--spo-logo-h, 120px);
  border-radius: var(--spo-logo-radius, 10px);
  background: var(--spo-logo-bg, #fbf7ee);
}

.c27-spo-logo img {
  max-height: 100%;
  max-width: 92%;
  object-fit: contain;
}

.c27-spo-fallback {
  padding: 0 16px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--spo-fallback-fg, #123a3d);
}

.c27-spo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.el27-spo-name {
  line-height: 1.15;
  color: var(--spo-name-fg, #123a3d);
}

.c27-spo-chip {
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--spo-chip-pad, 4px 10px 4px 10px);
  border-radius: var(--spo-chip-radius, 999px);
  background: var(--spo-tier-bg, #dff0ee);
  color: var(--spo-tier-fg, #0c6e75);
}

/* --- Hotels (asca-hotels) --------------------------------------------- */

.el27-htl-grid {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--htl-cols, 4), minmax(0, 1fr));
  gap: var(--htl-gap, 22px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.el27-htl-grid > li {
  display: flex;
}

/* Accent slot → bar colour. A class, not an inline style. */
.c27-htl-card--accent-open { --htl-accent: var(--htl-accent-open, #159a9c); }
.c27-htl-card--accent-sold { --htl-accent: var(--htl-accent-sold, #c7cfce); }
.c27-htl-card--accent-hq   { --htl-accent: var(--htl-accent-hq, #f2a62b); }

.c27-htl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--htl-card-radius, 20px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.c27-htl-card--open {
  background: var(--htl-card-bg, #fff);
  border: 1px solid var(--htl-card-border, rgba(18, 58, 61, 0.14));
  box-shadow: var(--htl-card-shadow, 0 12px 30px -16px rgba(18, 58, 61, 0.3));
}

.c27-htl-card--open:hover {
  transform: translateY(var(--htl-card-lift, -4px));
  box-shadow: var(--htl-card-shadow-hover, 0 30px 60px -30px rgba(18, 58, 61, 0.55));
}

.c27-htl-card--sold {
  background: var(--htl-sold-bg, #f7f6f2);
  border: 1px solid var(--htl-sold-border, rgba(18, 58, 61, 0.08));
  opacity: var(--htl-sold-opacity, 0.66);
}

.c27-htl-bar {
  flex-shrink: 0;
  height: var(--htl-bar-h, 6px);
  background: var(--htl-accent, #159a9c);
}

.el27-htl-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--htl-card-pad, 22px);
}

.c27-htl-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.c27-htl-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
}

.c27-htl-pill .c27-htl-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.c27-htl-pill--open { background: var(--htl-open-bg, #dfeedf); color: var(--htl-open-fg, #2e6a3b); }
.c27-htl-pill--open .c27-htl-dot { background: var(--htl-open-dot, #3b7a48); }
.c27-htl-pill--sold { background: var(--htl-soldpill-bg, #eceeed); color: var(--htl-soldpill-fg, #82908e); }
.c27-htl-pill--sold .c27-htl-dot { background: var(--htl-soldpill-dot, #a6b2b0); }
.c27-htl-pill--hq   { background: var(--htl-hq-bg, #fbe9c7); color: var(--htl-hq-fg, #8a5a0e); }

.c27-htl-name {
  margin: 0;
  width: auto;
  max-width: none;
  color: var(--htl-name-fg, #123a3d);
}

.c27-htl-addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}

.c27-htl-addr svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.c27-htl-address {
  font-style: normal;
  font-weight: 500;
  font-size: 0.90625rem;
  line-height: 1.375;
  color: var(--htl-address-fg, #4a6b6c);
}

.c27-htl-dist {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--htl-dist-bg, #dff0ee);
  color: var(--htl-dist-fg, #0c6e75);
}

.c27-htl-pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.c27-htl-price {
  color: var(--htl-price-fg, #123a3d);
}

.c27-htl-pricenote {
  font-weight: 600;
  font-size: 0.84375rem;
  color: var(--htl-pricenote-fg, #6b8483);
}

.c27-htl-pricenote--sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
}

.c27-htl-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(18, 58, 61, 0.09);
}

.c27-htl-detail {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--htl-detail-fg, #3c5b5d);
}

.c27-htl-detail svg {
  flex-shrink: 0;
}

.el27-htl-deadline {
  margin-top: 10px;
  color: var(--htl-deadline-fg, #b45a1b);
}

.c27-htl-copy {
  margin-top: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.c27-htl-actions {
  margin-top: auto;
  padding-top: 22px;
}

.c27-htl-book {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none !important;
  transition: filter 0.16s ease, transform 0.16s ease;
  color: var(--htl-book-fg, #fbf4e7);
  background: var(--htl-book-bg, linear-gradient(100deg, #f2a62b, #ea6a22));
  padding: var(--htl-book-pad, 14px) 0;
  border-radius: var(--htl-book-radius, 12px);
  box-shadow: var(--htl-book-shadow, 0 14px 28px -12px rgba(234, 106, 34, 0.65));
}

.c27-htl-book:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: var(--htl-book-fg, #fbf4e7);
}

.c27-htl-soldbtn {
  display: block;
  width: 100%;
  text-align: center;
  cursor: not-allowed;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 13px 0;
  border-radius: var(--htl-book-radius, 12px);
  color: var(--htl-soldbtn-fg, #8aa5a4);
  background: var(--htl-soldbtn-bg, #f1ece0);
  border: 1px solid var(--htl-soldbtn-border, rgba(18, 58, 61, 0.16));
}

.c27-htl-phone {
  margin-top: 10px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--htl-detail-fg, #3c5b5d);
}

.c27-htl-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--htl-legend-fg, #3c5b5d);
}

.c27-htl-legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.c27-htl-legend .dot--open { background: var(--htl-open-dot, #3b7a48); }
.c27-htl-legend .dot--sold { background: var(--htl-soldpill-dot, #a6b2b0); }

/* --- Hotel cards (asca-hotel-card: the whole grid, one widget) --------- */

/* The widget is a flex item in a plain Elementor container, so the widget
   chain has to pass the full width down to the .el27-htl-grid it draws (the
   same grid the CPT-driven version uses, --htl-cols/--htl-gap and all; its
   `> li { display: flex }` is what lines cards in a row up).

   The height half is for a page still on the one-widget-per-hotel build, where
   each widget is a GRID item and has to pass the row height down instead. It
   is inert once merged: a percentage height against an auto-height flex parent
   computes to auto. */
.el27-main .elementor-widget-asca-hotel-card,
.el27-main .elementor-widget-asca-hotel-card > .elementor-widget-container,
.el27-main .elementor-widget-asca-hotel-card .c27-htl-card {
  width: 100%;
  height: 100%;
}

/* Icon slots (address pin, detail lines). The picked icon — Elementor SVG,
   Font Awesome glyph or the built-in pin — inherits the token color, and
   stroke-flavour SVGs follow currentColor too (CSS beats the stroke="" attr,
   while a path's own fill="none" still beats the inherited fill). */
.c27-htl-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--htl-icon-size, 16px);
  height: var(--htl-icon-size, 16px);
  color: var(--htl-icon-fg, #0c6e75);
}

.c27-htl-ic svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.c27-htl-ic svg [stroke] { stroke: currentColor; }

.c27-htl-ic i {
  font-size: var(--htl-icon-size, 16px);
  line-height: 1;
}

.c27-htl-ic--addr {
  margin-top: 2px;
  color: var(--htl-addricon-fg, #159a9c);
}

/* --- Evening events (asca-evening-events) ----------------------------- */

.el27-eve-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--eve-gap, 26px);
}

/* Tint slot → date-panel colours. A class, not an inline style. */
.c27-eve-card--tint1 { --eve-tint-bg: var(--eve-tint1-bg, #eaf5f3); --eve-tint-accent: var(--eve-tint1-accent, #0c6e75); }
.c27-eve-card--tint2 { --eve-tint-bg: var(--eve-tint2-bg, #fbeee4); --eve-tint-accent: var(--eve-tint2-accent, #e56b24); }
.c27-eve-card--tint3 { --eve-tint-bg: var(--eve-tint3-bg, #e8f4f2); --eve-tint-accent: var(--eve-tint3-accent, #159a9c); }
.c27-eve-card--tint4 { --eve-tint-bg: var(--eve-tint4-bg, #fbf1db); --eve-tint-accent: var(--eve-tint4-accent, #e0a21c); }

.c27-eve-card {
  display: grid;
  grid-template-columns: var(--eve-date-w, 172px) 1fr;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  background: var(--eve-card-bg, #fff);
  border: 1px solid var(--eve-card-border, rgba(18, 58, 61, 0.09));
  border-radius: var(--eve-card-radius, 20px);
  box-shadow: var(--eve-card-shadow, 0 22px 50px -38px rgba(18, 58, 61, 0.5));
}

.c27-eve-card:hover {
  transform: translateY(var(--eve-card-lift, -3px));
  box-shadow: var(--eve-card-shadow-hover, 0 30px 60px -30px rgba(18, 58, 61, 0.5));
}

.c27-eve-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 28px 24px;
  border-right: 1px solid rgba(18, 58, 61, 0.07);
  background: var(--eve-tint-bg, #eaf5f3);
}

.c27-eve-weekday { color: var(--eve-tint-accent, #0c6e75); }
.c27-eve-day     { color: var(--eve-day-fg, #123a3d); }
.c27-eve-month   { color: var(--eve-month-fg, #123a3d); }

.c27-eve-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--eve-day-fg, #123a3d);
}

.c27-eve-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--eve-pill-radius, 999px);
  background: var(--eve-pill-bg, #dff0ee);
  color: var(--eve-pill-fg, #0c6e75);
}

.c27-eve-pill--ticket {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--eve-ticket-bg, #fbf0da);
  color: var(--eve-ticket-fg, #8a5a0e);
}

.c27-eve-pill--sponsor {
  background: var(--eve-sponsor-bg, #f4ebda);
  color: var(--eve-sponsor-fg, #123a3d);
}

.c27-eve-title {
  margin: 0;
  width: auto;
  max-width: none;
  color: var(--eve-title-fg, #123a3d);
}

.el27-eve-body {
  position: relative;
  margin-top: 14px;
  color: var(--eve-body-fg, #3c5b5d);
}

.c27-eve-sponsorrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.c27-eve-metalabel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eve-meta-fg, #8aa5a4);
}

.c27-eve-sponsor {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--eve-sponsor-fg, #123a3d);
  background: var(--eve-sponsor-bg, #f4ebda);
  border: 1px solid var(--eve-sponsor-border, rgba(18, 58, 61, 0.08));
}

@media (max-width: 767px) {
  .c27-eve-card {
    grid-template-columns: 1fr;
  }

  .c27-eve-date {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 58, 61, 0.07);
  }
}

/* --- Evening event cards (asca-evening-event: the whole list, one widget) --- */

/* The widget is a flex item in a plain Elementor container, so the widget
   chain has to pass the full width down to the .el27-eve-list column it draws
   (the same column the CPT-driven list uses, --eve-gap and all). */
.el27-main .elementor-widget-asca-evening-event,
.el27-main .elementor-widget-asca-evening-event > .elementor-widget-container {
  width: 100%;
}

/* Pill icon slots (time, ticketed, location, extras). The picked icon —
   Elementor SVG, Font Awesome glyph or the widget's built-in fallback —
   inherits its pill's own text colour, and stroke-flavour SVGs follow
   currentColor too (CSS beats the stroke="" attr, while a path's own
   fill="none" still beats the inherited fill). */
.c27-eve-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--eve-icon-size, 13px);
  height: var(--eve-icon-size, 13px);
  color: inherit;
}

.c27-eve-ic svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.c27-eve-ic svg [stroke] { stroke: currentColor; }

.c27-eve-ic i {
  font-size: var(--eve-icon-size, 13px);
  line-height: 1;
}

/* --- Schedule categories (shared by asca-schedule-glance + asca-full-schedule)
       The pill carries a c27-cat--{key} class; each widget writes its own
       `--sched-cat-*` tokens on its wrapper, so both can be styled separately
       from their own Style tab. ------------------------------------------- */

.c27-cat--general { color: var(--sched-cat-general-fg, #0C6E75); background: var(--sched-cat-general-bg, #D2ECEA); }
.c27-cat--breakout { color: var(--sched-cat-breakout-fg, #178E90); background: var(--sched-cat-breakout-bg, #E4F1EF); }
.c27-cat--express { color: var(--sched-cat-express-fg, #C2531C); background: var(--sched-cat-express-bg, #FBE3CE); }
.c27-cat--exhibit { color: var(--sched-cat-exhibit-fg, #3F7A84); background: var(--sched-cat-exhibit-bg, #E2EDEF); }
.c27-cat--network { color: var(--sched-cat-network-fg, #9B2D5A); background: var(--sched-cat-network-bg, #F6DDE7); }
.c27-cat--meal { color: var(--sched-cat-meal-fg, #B45A1B); background: var(--sched-cat-meal-bg, #FBE7D3); }
.c27-cat--wellness { color: var(--sched-cat-wellness-fg, #3B7A48); background: var(--sched-cat-wellness-bg, #DEEEDD); }
.c27-cat--registration { color: var(--sched-cat-registration-fg, #6B7E7C); background: var(--sched-cat-registration-bg, #E9EFEE); }
.c27-cat--special { color: var(--sched-cat-special-fg, #6A3A8C); background: var(--sched-cat-special-bg, #ECE0F3); }

/* --- Schedule at a glance (asca-schedule-glance) ---------------------- */

.c27-sag-day-section {
  margin-bottom: var(--sag-day-gap, 44px);
}

.c27-sag-dayhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.c27-sag-mark {
  flex-shrink: 0;
}

.el27-sag-day {
  margin: 0;
  width: auto;
  max-width: none;
  line-height: 1;
  color: var(--sag-day-fg, #123a3d);
}

.c27-sag-count {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sag-count-fg, #8aa5a4);
}

.c27-sag-datepill {
  white-space: nowrap;
  padding: 6px 15px;
  border-radius: 999px;
  color: var(--sag-datepill-fg, #fbf4e7);
  background: var(--sag-datepill-bg, #e56b24);
}

.c27-sag-table {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--sag-table-bg, #fff);
  border: 1px solid var(--sag-table-border, rgba(18, 58, 61, 0.08));
  border-radius: var(--sag-table-radius, 20px);
  box-shadow: var(--sag-table-shadow, 0 22px 48px -36px rgba(18, 58, 61, 0.5));
}

.c27-sag-row {
  display: grid;
  grid-template-columns: var(--sag-time-w, 200px) var(--sag-cat-w, 168px) 1fr;
  align-items: center;
  gap: 22px;
  padding: 18px 28px;
  transition: background 0.18s ease;
}

.c27-sag-row:nth-child(even) {
  background: var(--sag-stripe, rgba(21, 154, 156, 0.06));
}

.c27-sag-time {
  white-space: nowrap;
  color: var(--sag-time-fg, #0c6e75);
}

.c27-sag-time small {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--sag-tz-fg, #8aa5a4);
}

.c27-sag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: var(--sag-pill-radius, 999px);
}

.c27-sag-name,
.c27-sag-name a {
  color: var(--sag-name-fg, #123a3d);
}

.c27-sag-name a {
  text-decoration: none;
}

.c27-sag-name a:hover {
  text-decoration: underline;
  color: var(--sag-name-hover, #0c6e75);
}

@media (max-width: 900px) {
  .c27-sag-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 20px;
  }
}

/* --- Full schedule (asca-full-schedule) ------------------------------- */

/* ---- 2027 Full Schedule (page-scoped) ---- */
    .c27-fs-tabbar {
  background: var(--fs-c27-fs-tabbar-background, #f4ebda);
  border-top: 1px solid rgba(18, 58, 61, 0.07);
  border-bottom: 1px solid rgba(18, 58, 61, 0.07);
}

.c27-fs-tab {
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--fs-c27-fs-tab-bradius, 14px);
  transition: all 0.16s ease;
  background: var(--fs-c27-fs-tab-background, #fff);
  color: var(--fs-c27-fs-tab-color, var(--c27-ink, #123a3d));
  border: 1px solid rgba(18, 58, 61, 0.16);
}

.c27-fs-tab:hover {
  border-color: var(--fs-c27-fs-tab-hover-bcolor, rgba(21, 154, 156, 0.5));
}

.c27-fs-tab.is-active {
  background: var(--fs-c27-fs-tab-is-active-background, var(--color-secondary, #0c6e75));
  color: var(--fs-c27-fs-tab-is-active-color, var(--c27-cream, #fbf4e7));
  border-color: var(--fs-c27-fs-tab-is-active-bcolor, var(--color-secondary, #0c6e75));
}

.c27-fs-tab .c27-fs-tab-day {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.c27-fs-tab .c27-fs-tab-label {
  font-size: 16px;
  white-space: nowrap;
}

.c27-fs-rail-item {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--fs-c27-fs-rail-item-bradius, 11px);
  transition: all 0.15s ease;
  line-height: 1.25;
  background: var(--fs-c27-fs-rail-item-background, transparent);
  color: var(--fs-c27-fs-rail-item-color, #4a6b6c);
  border: 1px solid transparent;
  width: 100%;
}

.c27-fs-rail-item:hover {
  background: var(--fs-c27-fs-rail-item-hover-background, rgba(21, 154, 156, 0.1));
}

.c27-fs-rail-item.is-active {
  background: var(--fs-c27-fs-rail-item-is-active-background, #dff0ee);
  color: var(--fs-c27-fs-rail-item-is-active-color, var(--c27-teal-deep, #0c6e75));
  border-color: var(--fs-c27-fs-rail-item-is-active-bcolor, rgba(21, 154, 156, 0.4));
}

.c27-fs-groupbar {
  width: 22px;
  height: 6px;
  border-radius: var(--fs-c27-fs-groupbar-bradius, 999px);
  background: var(--fs-c27-fs-groupbar-background, linear-gradient(90deg, #19b0a6, #f2a62b));
  flex-shrink: 0;
}

.c27-fs-grouptime {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--fs-c27-fs-grouptime-color, var(--c27-teal-deep, #0c6e75));
  text-transform: none;
}

.c27-fs-grouptime .c27-fs-tz {
  color: var(--fs-c27-fs-tz-color, var(--c27-muted, #8aa5a4));
  font-weight: 600;
  font-size: 14px;
}

.c27-fs-card {
  background: var(--fs-c27-fs-card-background, #fff);
  border: 1px solid rgba(18, 58, 61, 0.08);
  border-radius: var(--fs-c27-fs-card-bradius, 18px);
  overflow: hidden;
  box-shadow: var(--fs-c27-fs-card-box-shadow, 0 20px 46px -38px rgba(18, 58, 61, 0.5));
}

.c27-fs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 17px 24px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: var(--fs-c27-fs-row-background, #fff);
  border: 0;
  border-top: 1px solid rgba(18, 58, 61, 0.07);
  transition: background 0.16s ease;
}

.c27-fs-row:first-child {
  border-top: none;
}

.c27-fs-row:hover,
    .c27-fs-row:focus-visible {
  background: var(--fs-c27-fs-row-hover-background, rgba(21, 154, 156, 0.05));
}

.c27-fs-row .c27-fs-name {
  font-weight: 600;
  font-size: 16.5px;
  color: var(--fs-c27-fs-name-color, var(--c27-ink, #123a3d));
  line-height: 1.3;
}

.c27-fs-row .c27-fs-room {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--fs-c27-fs-room-color, var(--c27-muted, #8aa5a4));
}

.c27-fs-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--fs-c27-fs-pill-bradius, 999px);
  white-space: nowrap;
}

.c27-fs-pill--ip {
  color: var(--fs-c27-fs-pill--ip-color, var(--color-in-person-tag, #0c6e75));
  background: var(--fs-c27-fs-pill--ip-background, #dff0ee);
}

.c27-fs-pill--v {
  color: var(--fs-c27-fs-pill--v-color, #215e7c);
  background: var(--fs-c27-fs-pill--v-background, #deebf2);
}

.c27-fs-modal-card {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--fs-c27-fs-modal-card-background, var(--c27-cream, #fbf4e7));
  border-radius: var(--fs-c27-fs-modal-card-bradius, 22px);
  overflow: hidden;
  box-shadow: var(--fs-c27-fs-modal-card-box-shadow, 0 50px 100px -30px rgba(9, 45, 49, 0.6));
}

.c27-fs-modal-bar {
  height: 8px;
  background: var(--fs-c27-fs-modal-bar-background, linear-gradient(90deg, #19b0a6, #7fcb7a 50%, #f2a62b));
  flex-shrink: 0;
}

.c27-fs-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  border: 1px solid rgba(18, 58, 61, 0.14);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--fs-c27-fs-modal-close-bradius, 12px);
  background: var(--fs-c27-fs-modal-close-background, #fbf7ee);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.c27-fs-modal-close:hover {
  background: var(--fs-c27-fs-modal-close-hover-background, #f1e8d6);
}

.c27-fs-modal-panel {
  border: 1px solid rgba(18, 58, 61, 0.08);
  border-radius: var(--fs-c27-fs-modal-panel-bradius, 16px);
  padding: 22px 24px;
}

.c27-fs-modal-tile {
  background: var(--fs-c27-fs-modal-tile-background, #fff);
  border: 1px solid rgba(18, 58, 61, 0.1);
  border-radius: var(--fs-c27-fs-modal-tile-bradius, 14px);
  padding: 16px 18px;
}

.c27-fs-modal-tile dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-c27-fs-modal-tile-color, var(--c27-muted, #8aa5a4));
}

.c27-fs-modal-tile dd {
  margin: 5px 0 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--fs-c27-fs-modal-tile-color, var(--c27-ink, #123a3d));
}

.c27-fs-objnum {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--fs-c27-fs-objnum-bradius, 50%);
  background: var(--fs-c27-fs-objnum-background, #dff0ee);
  color: var(--fs-c27-fs-objnum-color, var(--c27-teal-deep, #0c6e75));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c27-fs-rail {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none !important;
}

.c27-fs-rail-item {
  width: auto;
}

/* Full-schedule helpers introduced when the widget's <style> block was removed. */
.el27-fs-day {
  margin: 0;
  width: auto;
  max-width: none;
  color: var(--fs-day-fg, #123a3d);
}

.c27-fs-daycount {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fs-muted, #8aa5a4);
}

.c27-fs-rail-item--arrow {
  width: auto;
}

.c27-fs-rail-item--arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.c27-fs-overlay {
  background: var(--fs-overlay-bg, rgba(18, 58, 61, 0.5));
  backdrop-filter: blur(3px);
}

/* Session detail inside the Elementor editor preview: the front end puts the
   card in a fixed overlay, the canvas keeps it in the flow (a fixed dialog would
   cover the editor), so the modal controls stay previewable. Editor-only markup
   — only the $editor branch of full-schedule-app.blade.php emits it. */
.c27-fs-editor-modal {
  padding: 30px 20px;
}

.c27-fs-editor-modal .c27-fs-modal-card {
  max-height: none;
}

.el27-fs-modal-title {
  margin: 10px 44px 0 0;
  width: auto;
  max-width: none;
  line-height: 1.15;
  color: var(--fs-modal-title-fg, #123a3d);
}

.el27-fs-modal-title:focus {
  outline: none;
}

.c27-fs-modal-eyebrow {
  font-size: 0.8125rem;
}

.c27-fs-speakers-panel {
  background: var(--fs-speakers-bg, linear-gradient(160deg, #f4eefb, #fbf4e7));
}

.c27-fs-obj-panel {
  background: var(--fs-obj-bg, #fbf7ee);
}

.c27-fs-muted { color: var(--fs-muted, #8aa5a4); }
.c27-fs-ink   { color: var(--fs-ink, #123a3d); }
.c27-fs-body  { color: var(--fs-body, #3c5b5d); }
.c27-fs-dim   { color: var(--fs-dim, #4a6b6c); }
.c27-fs-dim2  { color: var(--fs-dim2, #6a7e7d); }

/* --- Embedded video (asca-video) -------------------------------------- */

.c27-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vid-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--vid-radius, 24px);
  background: var(--vid-bg, rgba(18, 58, 61, 0.55));
  box-shadow: var(--vid-shadow, 0 30px 64px -34px rgba(18, 58, 61, 0.55));
}

/* Every shape the frame can hold — the ASCA library's wrapper div, an
   oEmbed provider's own wrapper, or a bare iframe — fills it. */
.c27-video__frame > *,
.c27-video__frame iframe,
.c27-video__frame video,
.c27-video__frame embed,
.c27-video__frame object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The widget's Coming Soon panel stands exactly where the player will:
   same box, same ratio (the --vid-ratio token the Style tab writes on the
   wrapper), so the section holds its height when the video lands. Content
   centers in the taller card; a long message can still stretch past the
   ratio. No panel Style control owns these properties. */
.elementor-widget-asca-video .c27-empty {
  aspect-ratio: var(--vid-ratio, 16 / 9);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Screen-reader description under the player (the parent theme's Tailwind
   `sr-only` isn't guaranteed to reach a widget view). */
.c27-video__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Speaker cards (asca-speakers: the whole grid, one widget) --------- */

/* Maddy, 2026-08-31: "speaker boxes have css applied to them - it needs to be
   stripped and done via native elementor". The cards used to carry Tailwind
   utilities and inline colours from the pre-token markup, which no Style-tab
   control could beat. Structure only below; every VALUE is a `--spk-*` token
   the widget's Style tab writes (Grid / Card / Photo / Text), and each
   fallback is the shipped design. Typography is Elementor's alone — the
   eyebrow / name / role carry no font-* here on purpose. */

.c27-spk-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--spk-cols, 3), minmax(0, 1fr));
  gap: var(--spk-gap, 26px);
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c27-spk-item {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

.c27-spk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--spk-card-bg, #fff);
  border-radius: var(--spk-card-radius, 22px);
  box-shadow: var(--spk-card-shadow, 0 24px 50px -34px rgba(18, 58, 61, 0.5));
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* The live card is a <button> (opens the bio modal); the editor preview draws
   a plain <div>, so the hover/focus affordances stay on the real control. */
button.c27-spk-card {
  cursor: pointer;
}

button.c27-spk-card:hover {
  transform: translateY(var(--spk-card-lift, -4px));
}

button.c27-spk-card:focus-visible {
  outline: 4px solid rgba(255, 255, 255, 0.6);
  outline-offset: 0;
}

.c27-spk-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--spk-photo-ratio, 4 / 3.4);
  height: var(--spk-photo-h, auto);
  background: var(--spk-photo-bg, #e4efee);
}

.c27-spk-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--spk-photo-pos, top);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

button.c27-spk-card:hover .c27-spk-photo {
  transform: scale(var(--spk-photo-zoom, 1.03));
}

/* No-photo slot: the branded Coming Soon — glossy dark teal (top sheen +
   center glow over a deep gradient), the traced infinity (same classes and
   keyframes as the c27-empty panel art) and a spaced uppercase label.
   Tokens from the widget's Style › Photo section; fallbacks ship the design. */
.c27-spk-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spk-soon-gap, 20px);
  background-color: #123a3d;
}

/* The gloss lives on a pseudo-element ON PURPOSE: Elementor's lazy-bg rule
   (`.e-con.e-parent:not(.e-lazyloaded) *​ { background-image: none !important }`)
   nukes every DESCENDANT's gradient until the section scrolls into view, but
   `*` never matches pseudo-elements — so this paints immediately. */
.c27-spk-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(
    --spk-soon-bg,
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(85% 70% at 50% 40%, rgba(35, 132, 130, 0.55) 0%, rgba(35, 132, 130, 0) 72%),
    linear-gradient(165deg, #175a5d 0%, #123a3d 55%, #0d3033 100%)
  );
}

.c27-spk-soon__label {
  position: relative; /* above the ::before gloss */
}

.c27-spk-soon__art {
  position: relative;
  display: block;
  width: var(--spk-soon-mark, 34%);
  min-width: 76px;
  max-width: 132px;
}

.c27-spk-soon__art svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The panel's track ships dark-on-cream; this box is dark teal. */
.c27-spk-soon .c27-empty__track {
  stroke: var(--spk-soon-track, rgba(255, 255, 255, 0.16));
}

.c27-spk-soon__label {
  font-size: var(--spk-soon-fs, 0.8125rem);
  font-weight: 800;
  letter-spacing: var(--spk-soon-ls, 0.18em);
  text-transform: uppercase;
  color: var(--spk-soon-fg, #6fd3c4);
}

.c27-spk-body {
  display: block;
  padding: var(--spk-body-pad, 24px 24px 28px);
}

/* (0,2,0) so the band's `.c27-panel-dark p / h2 / h3` rules can never win. */
.c27-spk-card .c27-spk-eyebrow {
  display: block;
  margin: 0 0 var(--spk-eyebrow-mb, 8px);
  color: var(--spk-eyebrow-fg, #159a9c);
}

.c27-spk-card .c27-spk-name {
  display: block;
  color: var(--spk-name-fg, #123a3d);
}

.c27-spk-card .c27-spk-role {
  display: block;
  margin: var(--spk-role-mt, 6px) 0 0;
  color: var(--spk-role-fg, #3c5b5d);
}

/* Outside Elementor nothing writes the per-device tokens; keep the design's
   phone defaults (one column, square photo) so the view still reads right. */
@media (max-width: 767px) {
  .c27-spk-grid {
    grid-template-columns: repeat(var(--spk-cols, 1), minmax(0, 1fr));
  }

  .c27-spk-media {
    aspect-ratio: var(--spk-photo-ratio, 1 / 1);
  }
}

/*--------------------------------------------------------------
# Theme Builder chrome bridges (Elementor header/footer templates)
   The header & footer are Theme Builder templates built from native
   widgets; `el27-main` on each template's root container switches on the
   shared el27-* button bridges above. The classes here cover the chrome
   pieces whose design can't ride the native controls: each is typed in
   the widget's CSS Classes field, mirroring the Blade selectors it
   replaces (#mobile_menu_btn, the overlay close, .c27-store-btn,
   .c27-menu-register). Keep them in sync with those rules above.
--------------------------------------------------------------*/

/* Hamburger (mirror of #mobile_menu_btn — the bars live in the button's
   SVG icon, so header.header--scrolled needs no extra rule). */
.el27-main .c27-el-burger .elementor-button {
  width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(18, 58, 61, 0.16);
  border-radius: 14px;
  transition: background 0.15s linear, border-color 0.15s linear;
}

.el27-main .c27-el-burger .elementor-button:hover,
.el27-main .c27-el-burger .elementor-button:focus {
  background: #fff;
  border-color: rgba(18, 58, 61, 0.32);
}

.el27-main .c27-el-burger .elementor-button-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
}

/* Overlay close button (mirror of #mobile-menu-close). */
.el27-main .c27-el-close .elementor-button {
  width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  transition: background 0.15s linear;
}

.el27-main .c27-el-close .elementor-button:hover,
.el27-main .c27-el-close .elementor-button:focus {
  background: rgba(255, 255, 255, 0.14);
}

.el27-main .c27-el-close .elementor-button-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
}

/* App-store buttons (mirror of .c27-store-btn; the two-line label is
   spans inside the button text). */
.el27-main .c27-el-store .elementor-button {
  display: inline-flex;
  align-items: center;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 11px;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none !important;
  text-align: left;
  transition: border-color 0.15s linear;
}

.el27-main .c27-el-store .elementor-button:hover,
.el27-main .c27-el-store .elementor-button:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.el27-main .c27-el-store .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.el27-main .c27-el-store .elementor-button-icon svg {
  width: 24px;
  height: 24px;
}

.el27-main .c27-el-store .elementor-button-text {
  line-height: 1;
}

/* Menu-overlay register pill (mirror of .c27-menu-register: CTA gradient,
   dark ink, pill). Rides the el27-btn base for size/typography. */
.el27-main .c27-el-register-pill .elementor-button {
  background: var(--c27-grad-cta);
  border-color: transparent;
  color: #072e33;
  box-shadow: 0 16px 34px -14px rgba(234, 106, 34, 0.7);
}

.el27-main .c27-el-register-pill .elementor-button:hover,
.el27-main .c27-el-register-pill .elementor-button:focus {
  background: var(--c27-grad-cta);
  border-color: transparent;
  color: #072e33;
  filter: brightness(1.06);
}

/* Footer policy pills (mirror of .c27-footer-pill). */
.el27-main .c27-el-pill .elementor-button {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c27-footer-text);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 16px;
  transition: color 0.15s linear, border-color 0.15s linear;
}

.el27-main .c27-el-pill .elementor-button:hover,
.el27-main .c27-el-pill .elementor-button:focus {
  color: var(--c27-amber);
  border-color: rgba(239, 164, 41, 0.5);
}

/* Off-Canvas menu surface (mirror of #mobile_menu_panel — the tri-stop
   menu gradient token, which Elementor's 2-stop background control can't
   express). */
.el27-main .c27-el-menu .e-off-canvas__content {
  background: var(--c27-grad-menu);
}

/* Off-canvas close: never let the scroll lock outlive the menu (2026-08-10).

   Elementor Pro locks the page while the menu is open (body
   .e-off-canvas__no-scroll, lifted on close) and again for the length of the
   close animation (.e-off-canvas__no-scroll-animation) — both
   `overflow: hidden`. The second is removed only by the widget's `animationend`
   handler on .e-off-canvas__main, so an exit animation that never runs strands
   it and the page cannot be scrolled again until reload.

   That is exactly what an INVALID exit animation does, and the menu shipped
   with one: Elementor's exit animations are the ENTRANCE keyframes played
   backwards (`.animated.reverse { animation-direction: reverse }`, so the Exit
   dropdown's values are fadeIn / zoomIn / slideInLeft… labelled "Fade Out"…),
   and the seed had asked for a literal `fadeOut`, which has no keyframes
   anywhere. Fixed in the widget's settings — this rule is the guard, so a
   mistyped or unshipped animation can only cost the close animation, never the
   page's scrolling. Scrolling during the close is harmless; the lock that
   matters while the menu is open is the other class. */
body.e-off-canvas__no-scroll-animation:not(.e-off-canvas__no-scroll) {
  overflow: visible;
}

/* Menu-overlay footer links (mirror of the .c27-menu-footlink row: two plain
   links parted by a round dot). Elementor's icon-list divider draws a vertical
   rule instead, so it is switched off on the widget and the dot is drawn here. */
.el27-main .c27-el-footlinks .elementor-inline-item + .elementor-inline-item::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 4px;
  height: 4px;
  margin-inline-end: 14px;
  border-radius: 50%;
  background: var(--c27-footer-muted);
}