/* ---- Clip horizontal overflow at the true outer edge ----
   #wrapper used to carry this (vendor default: overflow:hidden), but that also
   makes #wrapper a scroll container, which breaks position:sticky for any
   descendant (e.g. .sched-col-headers on the Schedule page) since the sticky
   element then sticks to #wrapper's box instead of the real page scroll. Clip
   on html/body instead - same guard against oversized children (the hero's
   background video, off-canvas drawers, etc.) without creating that nested
   scroll container. */
html,body{overflow-x:hidden;}

/* ---- Disable WOW.js scroll-reveal on mobile/tablet ----
   WOW.js (unmaintained since ~2015) only reveals a `.wow` element's final
   state once a `scroll` event happens to fire while it's in view; touch
   flick-scrolling routinely outruns it, leaving whole sections stuck at
   their un-animated `visibility:hidden` + `transform:translateX(±100px)`
   starting state ("screens empty until more scroll"). Those stuck negative
   translateX offsets were also a source of horizontal overflow. Force the
   final state immediately instead of depending on scroll timing; the
   fade-in is purely decorative. */
@media (max-width:991px){
    .wow{visibility:visible !important;opacity:1 !important;transform:none !important;animation:none !important;}
}

/* ---- Base readable font size ----
   style.css (vendor theme) sets body{font-size:13px}, which also shrinks every
   em-based size built on top of it (e.g. bootstrap's `small{font-size:.875em}`
   renders ~11px). Restore a normal reading size site-wide; headings and `.lead`
   are sized in rem so they are unaffected. */
body{font-size:16px;}

/* ---- Visible keyboard focus ----
   style.css strips outline on every link/image (`a:hover,a:active,a:focus,img{outline:0}`)
   and on #mainmenu links specifically, leaving keyboard users no way to see focus.
   Restore it only for keyboard focus (:focus-visible) so the mouse/click look is unchanged. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#mainmenu a:focus-visible{outline:2px solid #fff;outline-offset:-4px;}

/* Getting Here: venue name is a secondary heading under the page's own <h1>
   (there would otherwise be two <h1>s on the page); keep the same look that
   the shared h1 rule gave it. */
.venue-name-heading{display:block;font-size:32px;margin:0;}

/* About section: video embed replacing the old main image, same rounded/shadow
   treatment `.de-images img` gave the photo (that rule only targets <img>). */
#section-about .about-video{border-radius:5px;overflow:hidden;box-shadow:2px 20px 30px 0 rgba(20,20,20,.2);}
/* YouTube still shows a title/channel-link bar on load regardless of embed params;
   our overlay button already blocks hover (so it can't re-appear on hover), but the
   initial on-load flash needs a crop: render the iframe 10% taller and shift it up
   by that same amount, so only the top strip is pushed above the clipped container
   and the video itself still fills the box edge-to-edge with no bottom crop. */
#section-about .about-video iframe{border:0;pointer-events:none;top:-10%;height:110%;}
#section-about .about-video-trigger{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:pointer;}
#section-about .about-video-trigger::after{content:"\f065";font-family:FontAwesome;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;line-height:64px;border-radius:50%;background:var(--primary-color-1);color:#fff;font-size:22px;text-align:center;opacity:0;transition:opacity .25s;}
#section-about .about-video-trigger:hover::after,
#section-about .about-video-trigger:focus-visible::after{opacity:1;}

/* ---- Sticky footer: push footer to the bottom on short pages ----
   header is position:fixed (out of flow), so #wrapper really only has two
   flowing children: #content and the footer. */
#wrapper{min-height:100vh;display:flex;flex-direction:column;}
#content{flex:1 0 auto;}

/* ---- Radial red-glow section background ---- */
#section-ticket,
#section-features,
#section-sponsors{background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(231,76,60,.45) 0%, rgba(80,20,15,.35) 35%, #050000 70%, #000 100%);}

/* ---- Detail page header banner: same red glow, centered on the top edge ----
   taller than the shared gradient so the glow still reaches the title/breadcrumb
   row, which sits well below the top edge once the fixed header is accounted for. */
#subheader{background:radial-gradient(ellipse 80% 140% at 50% 0%, rgba(231,76,60,.45) 0%, rgba(80,20,15,.35) 45%, #050000 80%, #000 100%);}

/* ---- About section image collage ----
   .di-small / .di-small-2 are position:absolute and overflow below the
   collage's own box, so a clearfix on the row does nothing for them;
   give the collage itself enough bottom margin to clear that overflow. .di-small
   also bleeds 35% to the left by design, which collides with the paragraph text
   now that it's dense; keep it within its own column instead. */
#section-about .de-images{margin-bottom:120px;}
#section-about .di-small{top:-10%;left:-2%;right:auto;bottom:auto;width:40%;height:40%;z-index:2;}

/* ---- Our Team page ----
   the generic `section{padding:90px 0}` default is redundant on top of the
   subheader's own spacing for this simple photo grid, adding unnecessary scroll. */
#section-team{padding:40px 0;}
.team-member-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;}

/* ---- Main nav selected-page indicator: small bar under the active link ----
   color.css turns `#mainmenu a.active` red; keep it white here instead. */
#mainmenu li a{position:relative;}
#mainmenu li a.active{color:#fff;}
#mainmenu li a.active::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:30%;bottom:16px;height:2px;background:#fff;}
#mainmenu li li a.active::before{bottom:8px;}

/* ---- Header logo (text, not an image, so it inherits the Exo heading font) ---- */
.logo-text{font-family:'Exo',sans-serif;font-weight:800;font-size:28px;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.logo-text:hover{color:#fff;}

/* ---- Hero title ---- */
.hero-title{margin:0;line-height:.9;}
.hero-title-line1,
.hero-title-line2{display:block;text-align:center;text-transform:uppercase;color:#fff;}
.hero-title-line1{font-size:clamp(60px,14vw,200px);}
.hero-title-line2{font-size:clamp(26px,6vw,100px);margin-top:.15em;}
.hero-accent{color:var(--primary-color-1);}
@media (min-width:768px){
    .hero-title-line1{text-align:left;}
    .hero-title-line2{text-align:right;}
}

/* ---- Speaker card + detail modal ---- */
.speaker-card{cursor:pointer;}
.speaker-card .team-desc{transition:.3s;}
.speaker-card:hover .team-desc,
.speaker-card:focus .team-desc{opacity:.8;}

/* shared centered-dialog pattern, used by #speaker-drawer, #session-dialog and #video-dialog */
#speaker-overlay,
#session-overlay,
#video-overlay{display:none;position:fixed;width:100%;height:100%;background:rgba(0,0,0,.6);top:0;left:0;z-index:2000;}
#speaker-drawer,
#session-dialog,
#video-dialog{position:fixed;z-index:2001;top:50%;left:50%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translate(-50%,-48%);transition:.35s cubic-bezier(.25,.46,.45,.94);}
#speaker-drawer,
#session-dialog{background:#111111;width:50vw;max-width:700px;max-height:85vh;overflow-y:auto;}
#video-dialog{background:#111111;width:95vw;max-width:1600px;padding:24px;border:2px solid var(--primary-color-1);}
#speaker-drawer.open,
#session-dialog.open,
#video-dialog.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
#speaker-drawer .de-extra-content,
#session-dialog .de-extra-content{padding:50px;}
#speaker-drawer .drawer-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;margin-bottom:20px;}
#speaker-drawer .drawer-tagline,
#session-dialog .drawer-tagline{color:var(--primary-color-1);margin-bottom:20px;}
#speaker-drawer .drawer-bio p,
#session-dialog .drawer-bio p{margin-bottom:1em;}
/* buttons (not spans) so they're focusable/labeled; sized to a 44x44 hit area
   while keeping the same 20x20 visual X centered inside it */
#speaker-drawer-close,
#session-dialog-close,
#video-dialog-close{position:absolute;cursor:pointer;right:13px;top:8px;width:44px;height:44px;background:none;border:none;padding:0;z-index:1;}
#speaker-drawer-close > span,
#session-dialog-close > span,
#video-dialog-close > span{display:block;width:20px;height:2px;background:#fff;position:absolute;top:50%;left:50%;}
#speaker-drawer-close span:nth-child(1),
#session-dialog-close span:nth-child(1),
#video-dialog-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
#speaker-drawer-close span:nth-child(2),
#session-dialog-close span:nth-child(2),
#video-dialog-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
/* the video dialog has equal padding on every side, so there's no top strip to
   place the close button in; instead float it outside the dialog, straddling
   its border, so it never overlaps the video. */
#video-dialog-close{top:-18px;right:-18px;background:#111111;border:2px solid var(--primary-color-1);border-radius:50%;}
@media (max-width:767px){
    #speaker-drawer,
    #session-dialog,
    #video-dialog{width:90vw;}
}

/* ---- Speakers page (card list) ---- */
.speaker-profile-card{display:flex;gap:24px;align-items:flex-start;}
.speaker-profile-photo{flex:0 0 auto;}
.speaker-profile-photo img{width:90px;height:90px;border-radius:50%;object-fit:cover;}
.speaker-profile-body{flex:1 1 auto;min-width:0;}
.speaker-profile-links{margin-bottom:12px;}
.speaker-profile-links a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:solid 1px rgba(255,255,255,.3);color:#fff;margin-right:8px;}
.speaker-profile-links a:hover{background:var(--primary-color-1);border-color:var(--primary-color-1);}
.speaker-profile-sessions{margin-top:10px;}
.speaker-profile-sessions .session-link{display:block;font-weight:600;color:#eee;}
.speaker-profile-sessions .session-link:hover{color:var(--primary-color-1);}
@media (max-width:575px){
    .speaker-profile-card{flex-direction:column;align-items:center;text-align:center;}
}

/* ---- Schedule grid ---- */
.sched-col-headers{position:sticky;top:80px;z-index:10;background:#000;display:grid;gap:16px;margin-bottom:16px;}
.sched-col-head{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--room-color, var(--primary-color-1));border-bottom:solid 2px rgba(255,255,255,.15);padding:12px 0 8px;}
.sched-daygrid{display:grid;gap:16px;align-items:stretch;}
.sched-col-body{display:flex;flex-direction:column;gap:10px;height:100%;}
.sched-phase-time{font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin:20px 0 5px;}
.sched-bar{padding:14px 22px;text-align:center;background:rgba(255,255,255,.05);border-left:solid 3px #95a5a6;border-radius:3px;font-size:14px;color:#ddd;}
.sched-card{background:rgba(255,255,255,.04);border-left:solid 3px var(--room-color, var(--primary-color-1));border-radius:2px;padding:12px 14px;flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;}
.sched-card h4{font-size:14px;line-height:1.4em;margin:0 0 4px;color:#eee;}
.sched-card span{font-size:12px;opacity:.7;display:block;}
.sched-chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.sched-chips .sched-chip{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.08);color:#ccc;}
.sched-card.sched-plenum{text-align:center;padding:18px 22px;border-left-color:var(--primary-color-1);justify-content:center;}
.sched-card.sched-plenum h4{font-size:16px;margin:4px 0;}
.sched-card.sched-plenum span{display:inline;opacity:.7;}
.sched-col-body-label{display:none;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--room-color, var(--primary-color-1));}

/* the schedule-day tag is normally one of several tabs; on a page where it's the only
   content (e.g. the standalone Workshops page) it must render unconditionally visible */
#section-workshops .tab_single_content{display:block !important;}
@media (max-width:991px){
    .sched-daygrid{grid-template-columns:1fr !important;}
    .sched-daygrid > *{grid-column:1 / -1 !important;grid-row:auto !important;}
    .sched-col-headers{display:none;}
    .sched-col-body-label{display:block;}
    .sched-col-body{height:auto !important;}
    .sched-card{flex:none !important;}
}

/* Roq pages render inside #wrapper; keep it from becoming a false sticky-positioning
   containing block (see .sched-col-headers) while still clipping horizontal overflow
   from off-canvas panels via html{overflow-x:hidden}. */
#wrapper{overflow:visible;}