/*-----------------------------------------------------------------------------------

    Manassa — brand layer

    Loaded after style.css. Everything the rebuild adds lives here:

    01. Design tokens
    02. Mobile-first typography & spacing (fluid clamp scale)
    03. Brand wordmark
    04. Language switcher
    05. RTL mirroring (Bootstrap utilities + the handful of physical values
        that logical properties cannot reach: transforms, gradients, shorthands)
    06. Arabic typography
    07. New components — page banner, stats, gallery, schedule, testimonials,
        journal, contact, auth, 404, legal
    08. Utilities & polish

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. Design tokens
/*----------------------------------------*/
:root {
  --ez-petrol: #10424f;
  --ez-petrol-deep: #0b3340;
  --ez-petrol-soft: #e4eef1;
  --ez-coral: #f2704f;
  --ez-coral-deep: #b84325;
  --ez-coral-soft: #fdede8;
  --ez-warm: #e8a33d;
  --ez-ink: #0e2129;
  --ez-deep: #17313b;
  --ez-body: #44585f;
  --ez-muted: #63767d;
  --ez-line: #dfe8eb;
  --ez-surface: #f2f7f8;
  --ez-white: #fff;

  --ez-radius: 18px;
  --ez-radius-sm: 12px;
  --ez-shadow: 0 18px 50px -28px rgba(23, 49, 59, .45);
  --ez-shadow-lg: 0 30px 70px -34px rgba(23, 49, 59, .55);

  /* fluid rhythm — mobile value first, desktop as the cap */
  --ez-gutter: clamp(16px, 5vw, 24px);
  --ez-section: clamp(56px, 9vw, 120px);
  --ez-section-sm: clamp(40px, 7vw, 90px);
}

/*----------------------------------------*/
/*  02. Mobile-first typography & spacing
/*
/*  style.css is authored desktop-first with max-width overrides. Rather than
/*  fight that cascade, this block restates the type/space scale in fluid
/*  clamp() units so the small-screen value is the starting point everywhere
/*  and every step up to desktop is continuous instead of stepped.
/*----------------------------------------*/
html { -webkit-text-size-adjust: 100%; }

body {
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.75;
  overflow-x: clip;
}

h1 { font-size: clamp(32px, 6.2vw, 54px); line-height: 1.15; }
h2 { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.2; }
h3 { font-size: clamp(20px, 3vw, 26px); line-height: 1.3; }
h4 { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.4; }
h5 { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.5; }
h6 { font-size: clamp(14px, 1.5vw, 15px); line-height: 1.5; }

.section-title .title,
.section-title .title.white {
  font-size: clamp(27px, 5.2vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.about-area-4 .about-title .section-title .title {
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.14;
}

.section-title .sub-title {
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.section-title .sub-title::after { height: 10px; opacity: .16; }

.section-paragraph p,
.section-title-wrap p {
  font-size: clamp(15px, 1.7vw, 17px);
}

.section-padding-02 { padding: var(--ez-section) 0; }
.section-padding-04 { padding: var(--ez-section) 0; }
.section-padding-06 { padding-top: var(--ez-section); padding-bottom: calc(var(--ez-section) + 20px); }
.section-padding-09 { padding: var(--ez-section-sm) 0; }

.section-title-wrap { margin-bottom: clamp(32px, 5vw, 56px); }

/* The container should breathe on phones before it snaps to Bootstrap's steps */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-inline: var(--ez-gutter); }
}

/*----------------------------------------*/
/*  03. Brand wordmark
/*
/*  The logo is live text, not an image: it stays crisp at any density and
/*  keeps the same display cut as the rest of the headings.
/*----------------------------------------*/
.ez-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}

.ez-brand__mark { flex: 0 0 auto; width: 38px; height: 38px; display: block; }

.ez-brand__text { display: flex; flex-direction: column; gap: 3px; }

.ez-brand__word {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.035em;
  color: var(--ez-ink);
  white-space: nowrap;
}

.ez-brand__word i { font-style: normal; color: var(--ez-coral); }

.ez-brand__tag {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ez-muted);
  white-space: nowrap;
}

.ez-brand--light .ez-brand__word { color: #fff; }
.ez-brand--light .ez-brand__tag { color: rgba(255, 255, 255, .62); }

/* The header is transparent over photography and #08222b once it sticks, so
   the wordmark stays light in both states. Only the opaque --solid variant,
   used on pages with no banner, sits on white. */
.manassa-header-4:not(.manassa-header--solid) .ez-brand__word { color: #fff; }
.manassa-header-4:not(.manassa-header--solid) .ez-brand__tag { color: rgba(255, 255, 255, .62); }

@media (min-width: 992px) {
  .ez-brand__mark { width: 44px; height: 44px; }
  .ez-brand__word { font-size: 27px; }
  .ez-brand__tag { font-size: 9px; }
}

/*----------------------------------------*/
/*  04. Language switcher
/*----------------------------------------*/
.lang-switcher { position: relative; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: .25s;
}

.lang-toggle svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* The two-letter code stands in for the full name where space is tight */
.lang-short { display: none; }
.lang-toggle .lang-caret { width: 9px; height: 9px; transition: transform .25s; }
.lang-switcher.open .lang-caret { transform: rotate(180deg); }
.lang-toggle:hover { background: var(--ez-coral); border-color: var(--ez-coral); color: var(--ez-ink); }

.manassa-header-4.sticky .lang-toggle,
.lang-switcher--dark .lang-toggle {
  border-color: var(--ez-line);
  background: #fff;
  color: var(--ez-ink);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--ez-radius-sm);
  background: #fff;
  box-shadow: var(--ez-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .25s;
  z-index: 60;
}

.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ez-ink);
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: .2s;
}

.lang-menu button:hover { background: var(--ez-petrol-soft); }
.lang-menu button[aria-current="true"] { background: var(--ez-ink); color: #fff; }
.lang-menu .lang-code { font-size: 11px; opacity: .55; letter-spacing: .1em; }

.lang-switcher-mobile { margin-top: 26px; }
.lang-switcher-mobile .lang-toggle {
  width: 100%;
  justify-content: space-between;
  border-color: var(--ez-line);
  background: var(--ez-surface);
  color: var(--ez-ink);
  padding: 12px 16px;
}
.lang-switcher-mobile .lang-menu { inset-inline: 0; }

/*----------------------------------------*/
/*  05. RTL mirroring
/*
/*  style.css was converted to logical properties, so it flips on its own.
/*  What is left is (a) Bootstrap 5.1's LTR-only utility build and (b) values
/*  that have no logical form — transforms, gradient angles, shorthand insets.
/*----------------------------------------*/

/* -- 5.1 Bootstrap spacing / alignment utilities ------------------------- */
[dir="rtl"] .ms-0 { margin-inline-start: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-right: 0 !important; margin-inline-start: .25rem !important; }
[dir="rtl"] .ms-2 { margin-right: 0 !important; margin-inline-start: .5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 0 !important; margin-inline-start: 1rem !important; }
[dir="rtl"] .ms-4 { margin-right: 0 !important; margin-inline-start: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-right: 0 !important; margin-inline-start: 3rem !important; }
[dir="rtl"] .ms-auto { margin-right: 0 !important; margin-inline-start: auto !important; }
[dir="rtl"] .me-0 { margin-left: 0 !important; margin-inline-end: 0 !important; }
[dir="rtl"] .me-1 { margin-left: 0 !important; margin-inline-end: .25rem !important; }
[dir="rtl"] .me-2 { margin-left: 0 !important; margin-inline-end: .5rem !important; }
[dir="rtl"] .me-3 { margin-left: 0 !important; margin-inline-end: 1rem !important; }
[dir="rtl"] .me-4 { margin-left: 0 !important; margin-inline-end: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-left: 0 !important; margin-inline-end: 3rem !important; }
[dir="rtl"] .me-auto { margin-left: 0 !important; margin-inline-end: auto !important; }
[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-inline-start: 0 !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-inline-start: .25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-inline-start: .5rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-inline-start: 1rem !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-inline-start: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-inline-start: 3rem !important; }
[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-inline-end: 0 !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-inline-end: .25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-inline-end: .5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-inline-end: 1rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-inline-end: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-inline-end: 3rem !important; }

[dir="rtl"] .text-start { text-align: start !important; }
[dir="rtl"] .text-end { text-align: end !important; }
[dir="rtl"] .float-start { float: inline-start !important; }
[dir="rtl"] .float-end { float: inline-end !important; }
[dir="rtl"] .border-start { border-left: 0 !important; border-inline-start: 1px solid var(--ez-line) !important; }
[dir="rtl"] .border-end { border-right: 0 !important; border-inline-end: 1px solid var(--ez-line) !important; }

@media (min-width: 576px) {
  [dir="rtl"] .text-sm-start { text-align: start !important; }
  [dir="rtl"] .text-sm-end { text-align: end !important; }
}
@media (min-width: 768px) {
  [dir="rtl"] .text-md-start { text-align: start !important; }
  [dir="rtl"] .text-md-end { text-align: end !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start { text-align: start !important; }
  [dir="rtl"] .text-lg-end { text-align: end !important; }
}

/* -- 5.2 Offcanvas: BS positions and animates it with physical values ----- */
[dir="rtl"] .offcanvas-start {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid rgba(0, 0, 0, .2);
  transform: translateX(100%);
}
[dir="rtl"] .offcanvas-start.show { transform: none; }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; }

/* -- 5.3 Gradients: "to right" has to become "to left" ------------------- */
[dir="rtl"] .manassa-hero-section-04::after,
[dir="rtl"] .speaker-section-4::after,
[dir="rtl"] .pricing-area-4::after,
[dir="rtl"] .footer-section-4 .footer-newsletter,
[dir="rtl"] .ez-cta::before {
  transform: scaleX(-1);
}

/* The newsletter panel is a real element, so flip its children back */
[dir="rtl"] .footer-section-4 .footer-newsletter > * { transform: scaleX(-1); }

/* -- 5.4 Decorative art: mirror it so composition follows the text ------- */
[dir="rtl"] .manassa-hero-section-04 .shape-5,
[dir="rtl"] .section-shape-bottom,
[dir="rtl"] .event-agenda-area .shape-1,
[dir="rtl"] .event-agenda-area .shape-2,
[dir="rtl"] .footer-shape-1,
[dir="rtl"] .footer-shape-2,
[dir="rtl"] .about-thumbnail .thumbnail-shape,
[dir="rtl"] .price-card-shape,
[dir="rtl"] .event-body-shape,
[dir="rtl"] .ez-deco {
  transform: scaleX(-1);
}

/* -- 5.5 Chevrons and arrows point the other way ------------------------- */
[dir="rtl"] .ez-arrow,
[dir="rtl"] .ez-breadcrumb__sep,
[dir="rtl"] .swiper-button-next svg,
[dir="rtl"] .swiper-button-prev svg { transform: scaleX(-1); }

/* -- 5.6 Menus and accordions ------------------------------------------- */
[dir="rtl"] .header-menu .main-menu li .sub-menu { text-align: start; }
[dir="rtl"] .accordion-button::after { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .offcanvas-menu .main-menu li .menu-icon { inset-inline-end: 0; inset-inline-start: auto; }

/* -- 5.7 Progress ring stays in the trailing corner ---------------------- */
[dir="rtl"] .progress-wrap { right: auto; left: 30px; }

/*----------------------------------------*/
/*  06. Arabic typography
/*----------------------------------------*/
[lang="ar"], [lang="ar"] body,
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .section-title .title,
[dir="rtl"] .section-title .sub-title,
[dir="rtl"] .ez-brand__word,
[dir="rtl"] .btn,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button {
  font-family: "Mada", sans-serif;
}

/* Arabic needs a touch more leading and no upper-casing */
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] .section-title .sub-title,
[dir="rtl"] .ez-eyebrow,
[dir="rtl"] .ez-brand__tag { text-transform: none; letter-spacing: 0; }
[dir="rtl"] .section-title .title { letter-spacing: 0; }

/* Latin numerals read better than Eastern Arabic for prices and dates here */
[dir="rtl"] .ez-num, [dir="rtl"] .count, [dir="rtl"] .price-ammount { direction: ltr; unicode-bidi: isolate; }

/*----------------------------------------*/
/*  07. New components
/*----------------------------------------*/

/* -- 7.1 Buttons: one shared pill, mobile-first -------------------------- */
.btn, .ez-btn {
  border-radius: 999px;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 600;
}

.ez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--ez-petrol);
  color: #fff;
  cursor: pointer;
  transition: .28s;
}

.ez-btn:hover { background: var(--ez-ink); color: #fff; }
.ez-btn--coral { background: var(--ez-coral); color: var(--ez-ink); }
.ez-btn--coral:hover { background: var(--ez-ink); color: #fff; }
.ez-btn--ghost { background: transparent; border-color: currentColor; color: var(--ez-ink); }
.ez-btn--ghost:hover { background: var(--ez-ink); border-color: var(--ez-ink); color: #fff; }
.ez-btn--light { background: #fff; color: var(--ez-ink); }
.ez-btn--light:hover { background: var(--ez-coral); color: var(--ez-ink); }
.ez-btn--block { width: 100%; }
.ez-btn .ez-arrow { width: 15px; height: 15px; }

@media (min-width: 768px) { .ez-btn { padding: 15px 32px; font-size: 15px; } }

/* -- 7.2 Page banner + breadcrumb ---------------------------------------- */
.ez-banner {
  position: relative;
  padding: 150px 0 clamp(56px, 9vw, 110px);
  background: var(--ez-deep) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.ez-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 33, 41, .92), rgba(23, 49, 59, .78));
}

.ez-banner > .container { position: relative; z-index: 2; }
.ez-banner__title { color: #fff; margin-bottom: 12px; }

.ez-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
}

.ez-breadcrumb a { color: var(--ez-coral); text-decoration: none; }
.ez-breadcrumb a:hover { color: #fff; }
.ez-breadcrumb__sep { display: inline-block; opacity: .5; }

/* -- 7.3 Stats band ------------------------------------------------------ */
.ez-stats { background: var(--ez-ink); padding: var(--ez-section-sm) 0; position: relative; overflow: hidden; }
.ez-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.ez-stat { text-align: center; }
.ez-stat__num {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1;
  color: #fff;
  display: block;
}
.ez-stat__num span { color: var(--ez-coral); }
.ez-stat__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .66);
}
@media (min-width: 768px) { .ez-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* -- 7.4 Gallery --------------------------------------------------------- */
.ez-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ez-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ez-radius);
  background: var(--ez-ink);
}
.ez-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ez-gallery__item:hover img { transform: scale(1.07); opacity: .82; }
.ez-gallery__item::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ez-coral) url("../images/icons/plus.svg") center/16px no-repeat;
  opacity: 0;
  transform: translateY(10px);
  transition: .3s;
}
.ez-gallery__item:hover::after { opacity: 1; transform: none; }
.ez-gallery__item--tall img { aspect-ratio: 3 / 4; }
@media (min-width: 576px) { .ez-gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 992px) { .ez-gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* -- 7.5 Schedule -------------------------------------------------------- */
.ez-daytabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 46px);
  padding: 0;
  list-style: none;
}
.ez-daytabs button {
  border: 1px solid var(--ez-line);
  background: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ez-ink);
  cursor: pointer;
  transition: .25s;
}
.ez-daytabs button small { display: block; font-weight: 500; font-size: 11px; opacity: .6; }
.ez-daytabs button:hover { border-color: var(--ez-petrol); color: var(--ez-petrol); }
.ez-daytabs button[aria-selected="true"] {
  background: var(--ez-petrol);
  border-color: var(--ez-petrol);
  color: #fff;
}
.ez-daytabs button[aria-selected="true"] small { opacity: .8; }

.ez-slot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius);
  background: #fff;
  margin-bottom: 14px;
  transition: .3s;
}
.ez-slot:hover { border-color: transparent; box-shadow: var(--ez-shadow); transform: translateY(-3px); }
.ez-slot__time {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ez-petrol);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ez-slot__time img { width: 17px; height: 17px; }
.ez-slot__title { margin-bottom: 6px; }
.ez-slot__title a { color: var(--ez-ink); text-decoration: none; }
.ez-slot__title a:hover { color: var(--ez-petrol); }
.ez-slot__meta { font-size: 13px; color: var(--ez-muted); }
.ez-slot__host { display: flex; align-items: center; gap: 12px; }
.ez-slot__host img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ez-slot__host b { display: block; font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 14px; color: var(--ez-ink); }
.ez-slot__host span { font-size: 12px; color: var(--ez-muted); }
.ez-slot__tag {
  align-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ez-coral-soft);
  color: var(--ez-coral-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[dir="rtl"] .ez-slot__tag { text-transform: none; letter-spacing: 0; }
@media (min-width: 768px) {
  .ez-slot {
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 26px;
    padding: 24px 30px;
  }
  .ez-slot__tag { justify-self: end; }
}

/* -- 7.6 Testimonials ---------------------------------------------------- */
.ez-quote {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--ez-radius);
  background: #fff;
  box-shadow: var(--ez-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ez-quote__stars { color: var(--ez-coral); font-size: 14px; letter-spacing: 2px; }
.ez-quote__text { color: var(--ez-body); font-size: clamp(15px, 1.7vw, 17px); margin: 0; flex: 1; }
.ez-quote__by { display: flex; align-items: center; gap: 13px; }
.ez-quote__by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ez-quote__by b { display: block; font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 15px; color: var(--ez-ink); }
.ez-quote__by span { font-size: 12px; color: var(--ez-muted); }

/* -- 7.7 Journal / blog -------------------------------------------------- */
.ez-post {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--ez-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ez-line);
  transition: .3s;
}
.ez-post:hover { border-color: transparent; box-shadow: var(--ez-shadow-lg); transform: translateY(-4px); }
.ez-post__thumb { display: block; overflow: hidden; }
.ez-post__thumb img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ez-post:hover .ez-post__thumb img { transform: scale(1.06); }
.ez-post__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ez-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--ez-muted);
}
.ez-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ez-post__title { margin: 0; }
.ez-post__title a { color: var(--ez-ink); text-decoration: none; }
.ez-post__title a:hover { color: var(--ez-petrol); }
.ez-post__excerpt { margin: 0; font-size: 15px; color: var(--ez-body); flex: 1; }
.ez-post__more {
  align-self: start;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ez-petrol);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ez-post__more:hover { gap: 12px; color: var(--ez-ink); }

.ez-article { font-size: clamp(15px, 1.8vw, 17px); color: var(--ez-body); }
.ez-article h2, .ez-article h3 { margin: 34px 0 14px; color: var(--ez-ink); }
.ez-article p { margin-bottom: 18px; }
.ez-article img { width: 100%; border-radius: var(--ez-radius); margin: 24px 0; }
.ez-article blockquote {
  margin: 28px 0;
  padding: 24px 28px;
  border-inline-start: 4px solid var(--ez-coral);
  border-radius: var(--ez-radius-sm);
  background: var(--ez-surface);
  font-size: clamp(16px, 2vw, 19px);
  font-family: "Baloo Bhaijaan 2", sans-serif;
  color: var(--ez-ink);
}
.ez-article ul { margin: 0 0 20px; padding-inline-start: 22px; }
.ez-article li { margin-bottom: 8px; }

/* -- 7.8 Sidebar --------------------------------------------------------- */
.ez-widget {
  padding: 26px;
  border-radius: var(--ez-radius);
  background: var(--ez-surface);
  margin-bottom: 24px;
}
.ez-widget__title { margin-bottom: 18px; }
.ez-widget ul { margin: 0; padding: 0; list-style: none; }
.ez-widget li + li { margin-top: 12px; }
.ez-widget a { color: var(--ez-body); text-decoration: none; font-size: 15px; }
.ez-widget a:hover { color: var(--ez-petrol); }
.ez-widget__search { display: flex; gap: 8px; }
.ez-widget__search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ez-line);
  border-radius: 999px;
  padding: 12px 18px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.ez-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-tagcloud a {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ez-line);
  font-size: 12px;
}

/* -- 7.9 Contact --------------------------------------------------------- */
.ez-infocard {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--ez-radius);
  background: #fff;
  border: 1px solid var(--ez-line);
  text-align: center;
  transition: .3s;
}
.ez-infocard:hover { border-color: transparent; box-shadow: var(--ez-shadow); transform: translateY(-4px); }
.ez-infocard img { width: 44px; height: 44px; margin-bottom: 16px; }
.ez-infocard h4 { margin-bottom: 8px; }
.ez-infocard p, .ez-infocard a { margin: 0; font-size: 15px; color: var(--ez-body); text-decoration: none; }
.ez-infocard a:hover { color: var(--ez-petrol); }

.ez-form { display: grid; gap: 16px; }
.ez-form label {
  display: block;
  margin-bottom: 7px;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ez-ink);
}
.ez-form input,
.ez-form select,
.ez-form textarea {
  width: 100%;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius-sm);
  padding: 14px 16px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ez-ink);
  transition: .25s;
}
.ez-form textarea { min-height: 150px; resize: vertical; }
.ez-form input:focus,
.ez-form select:focus,
.ez-form textarea:focus {
  outline: none;
  border-color: var(--ez-petrol);
  box-shadow: 0 0 0 4px rgba(16, 66, 79, .12);
}
.ez-form__row { display: grid; gap: 16px; }
@media (min-width: 768px) { .ez-form__row { grid-template-columns: 1fr 1fr; } }
.ez-form__note { font-size: 13px; color: var(--ez-muted); margin: 0; }

.ez-map { border: 0; width: 100%; height: clamp(260px, 40vw, 440px); border-radius: var(--ez-radius); display: block; }

/* -- 7.10 Auth ----------------------------------------------------------- */
.ez-auth {
  max-width: 470px;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 44px);
  border-radius: var(--ez-radius);
  background: #fff;
  box-shadow: var(--ez-shadow-lg);
}
.ez-auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--ez-surface);
  margin-bottom: 26px;
}
.ez-auth__switch button {
  border: 0;
  border-radius: 999px;
  padding: 11px;
  background: none;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ez-body);
  cursor: pointer;
  transition: .25s;
}
.ez-auth__switch button[aria-selected="true"] { background: var(--ez-petrol); color: #fff; }
.ez-auth__aside { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ez-auth__aside a { color: var(--ez-petrol); text-decoration: none; }
.ez-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ez-body); }
.ez-check input { width: auto; }

/* -- 7.11 404 ------------------------------------------------------------ */
.ez-404 { text-align: center; padding: clamp(70px, 12vw, 150px) 0; }
.ez-404__code {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-weight: 800;
  font-size: clamp(84px, 22vw, 200px);
  line-height: .9;
  letter-spacing: -0.05em;
  background: linear-gradient(120deg, var(--ez-petrol), var(--ez-warm) 55%, var(--ez-coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- 7.12 CTA band ------------------------------------------------------- */
.ez-cta {
  position: relative;
  overflow: hidden;
  padding: var(--ez-section-sm) 0;
  background: var(--ez-deep) center/cover no-repeat;
  color: #fff;
  text-align: center;
}
.ez-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(16, 66, 79, .88), rgba(14, 33, 41, .82));
}
.ez-cta > .container { position: relative; z-index: 2; }
.ez-cta h2 { color: #fff; margin-bottom: 14px; }
.ez-cta p { color: rgba(255, 255, 255, .78); max-width: 620px; margin: 0 auto 26px; }
.ez-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -- 7.13 Speaker profile ------------------------------------------------ */
.ez-profile { display: grid; gap: 28px; align-items: start; }
.ez-profile__photo { border-radius: var(--ez-radius); overflow: hidden; }
.ez-profile__photo img { width: 100%; display: block; }
.ez-profile__role { color: var(--ez-petrol); font-family: "Baloo Bhaijaan 2", sans-serif; font-weight: 600; margin-bottom: 12px; }
.ez-social { display: flex; gap: 10px; padding: 0; margin: 22px 0 0; list-style: none; }
.ez-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ez-surface);
  color: var(--ez-ink);
  text-decoration: none;
  transition: .25s;
}
.ez-social a:hover { background: var(--ez-petrol); color: #fff; }
.ez-meta-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ez-meta-list li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ez-body); }
.ez-meta-list img { width: 22px; height: 22px; }
@media (min-width: 992px) { .ez-profile { grid-template-columns: 5fr 7fr; gap: 50px; } }

/* -- 7.14 Feature list --------------------------------------------------- */
.ez-features { display: grid; gap: 20px; }
.ez-feature {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--ez-radius);
  background: #fff;
  border: 1px solid var(--ez-line);
  transition: .3s;
}
.ez-feature:hover { border-color: transparent; box-shadow: var(--ez-shadow); }
.ez-feature img { width: 40px; height: 40px; flex: 0 0 auto; }
.ez-feature h4 { margin-bottom: 6px; }
.ez-feature p { margin: 0; font-size: 15px; color: var(--ez-body); }
@media (min-width: 768px) { .ez-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ez-features { grid-template-columns: repeat(3, 1fr); } }

/* -- 7.15 Overrides for base components ---------------------------------
/*
/*  A few rules in style.css were tuned around the exact pixel size of the
/*  images the original template shipped. The photography is all new, so
/*  those spots are re-laid out here as fluid, mobile-first blocks.
/*----------------------------------------*/

/* About: two stacked photos, no absolute offsets */
.about-area-4 .about-thumbnail { position: relative; padding: 0; }

.about-area-4 .about-thumbnail .about-thumb-1 {
  position: relative;
  inset-inline-start: auto;
  top: auto;
  width: 100%;
  border-radius: var(--ez-radius);
  display: block;
}

.about-area-4 .about-thumbnail .about-thumb-2 {
  position: relative;
  width: 46%;
  margin-top: -14%;
  margin-inline-start: auto;
  margin-inline-end: 6%;
  display: block;
  border-radius: var(--ez-radius);
  border: 8px solid #fff;
  box-shadow: var(--ez-shadow);
  z-index: 2;
}

.about-area-4 .about-thumbnail .thumbnail-shape {
  position: absolute;
  top: auto;
  bottom: -6%;
  inset-inline-start: -6%;
  width: 42%;
  max-width: 260px;
  z-index: 0;
}

.about-area-4 .about-title,
.about-area-4 .about-content { padding-inline: 0; margin-top: 34px; }
.about-area-4 .about-title::before { display: none; }
.about-area-4 .about-content .about-event { margin-inline-end: 0; align-items: center; }
.about-area-4 .about-content .about-event .thumb { margin-inline-end: 18px; width: 40px; height: 40px; }

@media (min-width: 992px) {
  .about-area-4 .about-title,
  .about-area-4 .about-content { padding-inline-start: 56px; }
  .about-area-4 .about-title { margin-top: 0; }
  .about-area-4 .about-title .section-title { padding-inline-end: 30px; }
  .about-area-4 .about-title::before {
    display: block;
    inset-inline-start: 0;
    top: 8px;
    height: 190px;
  }
}

/* Header: the wordmark is wider than the logo image it replaces, so the
   nav needs its own column rather than sitting flush against it */
.manassa-header-2 .header-wrap { gap: 14px; }
/* Never let the wordmark be squeezed to nothing by a long nav */
.manassa-header-2 .header-logo { flex: 0 0 auto; }
.manassa-header-2 .header-menu { flex: 1 1 auto; }
.manassa-header-2 .header-meta { flex: 0 0 auto; gap: 12px; }

/* Under 480px the tagline is what tips the header over — German runs longest */
@media (max-width: 479.98px) {
  .ez-brand__tag { display: none; }
  .ez-brand { gap: 8px; }
  .ez-brand__mark { width: 34px; height: 34px; }
  .ez-brand__word { font-size: 21px; }
  .manassa-header-2 .header-wrap { gap: 8px; }
  .manassa-header-2 .header-meta { gap: 8px; }
}

/* The active nav item is petrol in the base sheet, which disappears against
   the photographic header. Teal reads on both states. */
.manassa-header-4:not(.sticky):not(.manassa-header--solid) .header-menu .main-menu li.active-menu > a,
.manassa-header-4:not(.sticky):not(.manassa-header--solid) .header-menu .main-menu li:hover > a,
.manassa-header-4:not(.sticky):not(.manassa-header--solid) .header-menu .main-menu li.active-menu > .menu-icon::after,
.manassa-header-4:not(.sticky):not(.manassa-header--solid) .header-menu .main-menu li:hover > .menu-icon::after { color: var(--ez-coral); }

/* style.css title-cases labels, nav items and buttons. The copy here is
   written in sentence case, and German capitalisation rules make "Über Uns"
   plainly wrong, so the transform comes off everywhere except the eyebrows. */
label, .ez-check, .ez-form label, .price-plan,
.btn, .submit_btn, .price-btn,
.header-menu .main-menu li a,
.offcanvas-menu .main-menu li a,
.footer-nav-item, .widget-title, .event-title, .speaker-name,
.accordion-button, .counter-title, .form-title { text-transform: none; }

/* Long German compounds must break rather than push the grid */
.speaker-name, .speaker-designation, .ez-slot__title,
.event-title, .ez-post__title, .price-plan { overflow-wrap: anywhere; }

/* Nav labels must never wrap — German runs ~20% longer than English and a
   two-line item is what pushes the menu back over the logo.

   The caret is a sibling <span> that main.js injects after the link. As a
   flex item the <li> shrank to the link's min-content width, which pushed
   the caret onto a second line as soon as the nav got tight. Laying each
   <li> out as its own nowrap flex row keeps label and caret together. */
.manassa-header-2 .header-menu .main-menu > li {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 14px;
}
.manassa-header-2 .header-menu .main-menu > li > a { white-space: nowrap; }
.manassa-header-2 .header-menu .main-menu > li > .menu-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* The horizontal nav is only shown from 1400px (see .d-xxl-block in the
   markup), and the container is capped at 1320px, so there is no extra room
   at wider viewports — one compact tier covers every desktop size. German is
   the constraint: with the tagline hidden and the switcher down to its globe,
   seven items and the CTA fit on one line in all three languages.
   The tagline still shows in the footer and on tablet/phone headers. */
@media (min-width: 1400px) {
  .manassa-header-2 .header-menu .main-menu > li { padding-inline: 10px; }
  .manassa-header-2 .header-menu .main-menu > li > a { font-size: 14px; }
  .manassa-header-2 .header-meta .lang-current { display: none; }
  .manassa-header-2 .header-meta .lang-short { display: inline; }
  .manassa-header-2 .header-meta .lang-toggle { padding-inline: 11px; }
  .ez-brand__tag { display: none; }
}

/* Pages with no photographic banner need an opaque header */
.manassa-header-2.manassa-header--solid { background: #fff; border-bottom: 1px solid var(--ez-line); }
.manassa-header-2.manassa-header--solid .header-wrap { background: #fff; }
.manassa-header-2.manassa-header--solid .ez-brand__word { color: var(--ez-ink); }
.manassa-header-2.manassa-header--solid .ez-brand__tag { color: var(--ez-muted); }
.manassa-header-2.manassa-header--solid .header-menu .main-menu li a,
.manassa-header-2.manassa-header--solid .header-menu .main-menu li .menu-icon::after,
.manassa-header-2.manassa-header--solid .header-search .search-btn,
.manassa-header-2.manassa-header--solid .header-toggle button span,
.manassa-header-2.manassa-header--solid .cart-btn { color: var(--ez-ink); }
.manassa-header-2.manassa-header--solid .header-toggle button span { background: var(--ez-ink); }
.manassa-header-2.manassa-header--solid .header-menu .main-menu li.active-menu > a,
.manassa-header-2.manassa-header--solid .header-menu .main-menu li:hover > a { color: var(--ez-petrol); }
.manassa-header-2.manassa-header--solid .lang-toggle {
  border-color: var(--ez-line);
  background: #fff;
  color: var(--ez-ink);
}

/* Decorative blobs, waves and glows are positioned outside their section on
   purpose; clip them at the section edge so they never create a scrollbar */
.manassa-hero-section-04,
.event-agenda-area,
.speaker-section-4,
.pricing-area-4,
.faq-area,
.about-area-4,
.footer-section-4,
.ez-stats,
.ez-cta,
.ez-banner { overflow: hidden; }

/* Programme card. style.css only styles the body inside .event-agenda-area,
   which left the shape unanchored everywhere else — restate it on the card
   itself so it works on any background. */
.single-event { height: 100%; }
.single-event .event-header { display: block; overflow: hidden; }
.single-event .event-header img { width: 100%; aspect-ratio: 18 / 13; object-fit: cover; }

.single-event .event-body {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 36px);
  background-color: #fff;
}

.single-event .event-body .event-body-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.single-event .event-body .ez-eyebrow { display: block; margin-bottom: 6px; }
.single-event .event-body .event-title { margin-bottom: 10px; transition: color .3s linear; }
.single-event .event-body .event-title:hover { color: var(--ez-coral-deep); }
.single-event .event-body .event-desc { margin-bottom: 0; }

/* Hero: the year outline needs to breathe on small screens */
.manassa-hero-section-04 .manassa-hero-title { padding: 150px 0 90px; }
@media (min-width: 992px) { .manassa-hero-section-04 .manassa-hero-title { padding: 210px 0 130px; } }

/* Countdown band carries no background at all now — no photo, no scrim, no
   tint. It reads off the page itself. */
/* Was `background: none` - it existed to strip a duplicate background while
   the section carried an inline photograph. The section is a solid band now,
   so the rule would have blanked it: two class selectors outrank one. */
.event-countdown-2.event-countdown-3.ez-countdown-band {
  background-image: none;
}
.event-countdown-3 .counter-wrapper .counter-content-left .btn-orange { color: var(--ez-ink); }

/* Countdown: the separator colons crowd on narrow screens */
@media (max-width: 575.98px) {
  .manassa-countdown-inner-3 { flex-wrap: wrap; gap: 10px 0; }
  .manassa-countdown-inner-3 .single-countdown { flex: 0 0 50%; }
}

/* Speaker circles: keep them round at every width */
.single-speaker .speaker-thumbnail img { aspect-ratio: 1; object-fit: cover; }

/*----------------------------------------*/
/*  08. Utilities & polish
/*----------------------------------------*/
.ez-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ez-petrol);
}
.ez-eyebrow--coral { color: var(--ez-coral-deep); }
.ez-eyebrow--light { color: var(--ez-coral); }

.ez-lead { font-size: clamp(16px, 2vw, 19px); color: var(--ez-body); }
.ez-surface { background: var(--ez-surface); }
.ez-ink-bg { background: var(--ez-ink); color: #fff; }
.ez-deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }

.ez-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ez-ink);
  color: #fff;
}
.ez-skip:focus { inset-inline-start: 12px; top: 12px; }

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

/* Focus ring — the base template removed outlines entirely */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ez-coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/*----------------------------------------*/
/*  Countdown band
/*----------------------------------------*/
/*  The hero descends into this section on an ink-coloured wave, so the band
    has to BE that ink - otherwise the wave has a visible edge under it. Kept
    photograph-free on purpose: the hero above is already an image, and two
    photos back to back with a squiggle between them was the problem this
    replaces. */
/*  FLAT, not a gradient. The hero's wave is a single flat fill, so the section
    it lands on has to be that exact colour edge to edge. A gradient here put
    the wave's #0E2129 against a band running to #16323C, which showed up as a
    hard horizontal line across the join - measured, not guessed: sampling the
    seam gave a step of up to 19 RGB points at the right-hand edge.

    Depth comes from a glow placed well below the boundary instead, so the top
    edge stays a single colour. */
.ez-countdown-band {
  background-color: var(--ez-ink);
  background-image: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* the glow below is larger than the band on purpose */
}
.ez-countdown-band::before {
  content: "";
  position: absolute;
  inset-inline-end: -6%;
  inset-block-start: 45%;
  inline-size: 46%;
  block-size: 120%;
  background: radial-gradient(closest-side, rgba(16, 66, 79, .55), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/*  The theme tints each digit a different hue by :nth-child. On a light
    photograph that read as playful; on this band two of the four were nearly
    invisible, and four colours in one number reads as decoration rather than
    as a time. One accent, one weight. The selector chain matches the theme's
    own so it wins without !important. */
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown .count,
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown:nth-child(2) .count,
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown:nth-child(3) .count,
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown:nth-child(4) .count {
  color: var(--ez-coral);
}
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown::after,
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown:nth-child(2)::after,
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown:nth-child(3)::after {
  color: rgba(255, 255, 255, .38);
}
.ez-countdown-band .counter-wrapper .manassa-countdown-inner-3 .single-countdown .value {
  color: rgba(255, 255, 255, .62);
}
.ez-countdown-band .counter-title { color: #fff; }