/* ==========================================================================
   Zenith Group — design polish layer
   Built on the site's own Elementor palette. Additive only: no markup edits,
   no template rewrites. Everything here is safe to delete to revert.
   Palette: ink #0D1718 · accent #5BB8D5 · deep #0B0A3F · mist #F2F6F7
   ========================================================================== */

:root{
  --zen-ink:#0D1718;
  --zen-accent:#5BB8D5;
  --zen-accent-dark:#3E9CBA;
  --zen-deep:#0B0A3F;
  --zen-mist:#F2F6F7;
  --zen-line:rgba(13,23,24,.10);
  --zen-shadow:0 1px 2px rgba(13,23,24,.05),0 8px 24px -6px rgba(13,23,24,.12);
  --zen-shadow-lg:0 2px 4px rgba(13,23,24,.06),0 18px 44px -10px rgba(13,23,24,.20);
  --zen-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Typography rhythm -------------------------------------- */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,h6{ letter-spacing:-.015em; text-wrap:balance; }
p{ text-wrap:pretty; }
/* long headings were running to 56px/67px even on small screens */
@media (max-width:1024px){ h2{ font-size:clamp(30px,4.6vw,44px)!important; line-height:1.18!important; } }
@media (max-width:767px){  h2{ font-size:clamp(26px,6.4vw,34px)!important; line-height:1.2!important; } }

/* ---------- 2. Buttons: consistent, tactile --------------------------- */
.elementor-button{
  transition:transform .25s var(--zen-ease), box-shadow .25s var(--zen-ease),
             background-color .25s var(--zen-ease), color .25s var(--zen-ease)!important;
  will-change:transform;
  letter-spacing:.01em;
}
.elementor-button:hover{ transform:translateY(-2px); box-shadow:var(--zen-shadow); }
.elementor-button:active{ transform:translateY(0); }
/* keyboard users must see focus — Elementor ships none */
.elementor-button:focus-visible,
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--zen-accent); outline-offset:3px; border-radius:6px;
}

/* ---------- 3. Cards: lift + equal internal rhythm -------------------- */
.e-loop-item{ transition:transform .32s var(--zen-ease), box-shadow .32s var(--zen-ease); }
.e-loop-item:hover{ transform:translateY(-4px); }
.e-loop-item:hover .elementor-widget-image img{ transform:scale(1.04); }
.e-loop-item .elementor-widget-image img{ transition:transform .5s var(--zen-ease); }
.e-loop-item img, .e-loop-item .elementor-widget-image{ overflow:hidden; }

/* ---------- 4. Images: never distort, always rounded ----------------- */
.elementor-widget-image img{ border-radius:12px; }
img{ max-width:100%; height:auto; }

/* ---------- 5. Forms: readable, modern, accessible ------------------- */
.elementor-field-group .elementor-field{
  border:1px solid var(--zen-line)!important;
  border-radius:12px!important;
  padding:13px 16px!important;
  background:#fff!important;
  transition:border-color .2s var(--zen-ease), box-shadow .2s var(--zen-ease)!important;
}
.elementor-field-group .elementor-field:focus{
  border-color:var(--zen-accent)!important;
  box-shadow:0 0 0 4px rgba(91,184,213,.18)!important;
  outline:none!important;
}
.elementor-field-group textarea.elementor-field{ min-height:130px; resize:vertical; }
.elementor-field-group .elementor-field-label{ font-weight:600; margin-bottom:7px; }
.elementor-field-type-select select{ cursor:pointer; }
/* required marker in the brand accent, not default red */
.elementor-mark-required .elementor-field-label:after{ color:var(--zen-accent); }

/* ---------- 6. Link affordance in body copy -------------------------- */
.elementor-widget-text-editor a:not(.elementor-button){
  color:var(--zen-accent-dark);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .2s var(--zen-ease);
}
.elementor-widget-text-editor a:not(.elementor-button):hover{ color:var(--zen-ink); }

/* ---------- 7. Tame the giant section gaps --------------------------- */
/* audit found 100px top AND bottom on stacked sections -> 200px of dead space */
@media (max-width:1024px){
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con{ --padding-block-start:56px; --padding-block-end:56px; }
}
@media (max-width:767px){
  .e-con{ --padding-block-start:40px; --padding-block-end:40px; }
}

/* ---------- 8. Tables & policy pages readability --------------------- */
.elementor-widget-text-editor table{ width:100%; border-collapse:collapse; font-size:15px; }
.elementor-widget-text-editor th,.elementor-widget-text-editor td{
  border:1px solid var(--zen-line); padding:10px 12px; text-align:left;
}
.elementor-widget-text-editor th{ background:var(--zen-mist); font-weight:600; }

/* ---------- 9. Selection + scrollbar detail -------------------------- */
::selection{ background:var(--zen-accent); color:#fff; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- 10. Skip-link (a11y) ------------------------------------- */
.skip-link.screen-reader-text:focus{
  position:fixed!important; top:12px; left:12px; z-index:99999;
  background:var(--zen-ink); color:#fff; padding:12px 20px; border-radius:10px;
  width:auto; height:auto; clip:auto; clip-path:none; font-weight:600;
}

/* ---------- 11. Footer polish ---------------------------------------- */
footer a, .elementor-location-footer a{ transition:opacity .2s var(--zen-ease), color .2s var(--zen-ease); }
footer a:hover, .elementor-location-footer a:hover{ color:var(--zen-accent); }

/* ---------- 12. Print ------------------------------------------------- */
@media print{
  header, footer, .elementor-location-header, .elementor-location-footer,
  .premium-countdown, .elementor-widget-button{ display:none!important; }
  body{ color:#000; }
}


/* ---------- 13. Card CTA alignment (verified against live DOM) -------
   Problem measured on the homepage carousel: every card shares one height
   (777px) but the CTAs sat at four different offsets from the card bottom
   (145 / 121 / 97 / 25px), because event titles wrap to 3-4 lines and the
   descriptions differ in length.

   Two earlier attempts failed for structural reasons worth recording:
     1. `margin-top:auto` on the card root — the root is display:block.
     2. `:last-child` / `:last-of-type` on the CTA — every child is a DIV and
        the final DIV is an absolutely-positioned date pill, so a
        `:not(.elementor-absolute):last-of-type` selector matched nothing.

   The column has ~195px of spare space; push the in-flow button widget
   into it so all CTAs land on one line.                                   */
.e-loop-item .e-con-inner > .e-con:last-child{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

/* the in-flow CTA (absolute date pills are untouched) */
.e-loop-item .e-con-inner > .e-con:last-child
  > .elementor-widget-button:not(.elementor-absolute){
  margin-top:auto;
}

/* keep the heading from absorbing the free space */
.e-loop-item .e-con-inner > .e-con:last-child
  > .elementor-widget-elementskit-heading,
.e-loop-item .e-con-inner > .e-con:last-child
  > .elementor-widget-icon-list{ flex:0 0 auto; }

/* clamp titles so a 4-line name cannot reflow the card */
.e-loop-item .elementor-heading-title,
.e-loop-item .ekit-heading--title{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* ---------- 14. Hero refinements (from live visual review) -----------
   Hero background is set on .elementor-element-43d4141. Three issues found
   on the rendered page: the container still had background-repeat:repeat
   (tiles on ultra-wide screens), the stats card blended into the photo, and
   supporting copy sat over the busier left-hand crowd detail.                */
.elementor-element-43d4141{
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* extra left-to-right scrim purely for text contrast; sits under the content */
.elementor-element-43d4141::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(11,10,63,.72) 0%,
    rgba(11,10,63,.45) 38%,
    rgba(11,10,63,.10) 70%,
    rgba(11,10,63,0) 100%);
  pointer-events:none;
  z-index:0;
}
.elementor-element-43d4141 > *{ position:relative; z-index:1; }

/* stats card: lift it off the photo so it reads as a card, not a haze */
.elementor-element-43d4141 .e-con-inner > .e-con:last-child{
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.55);
}