/*
 * EC Header 2A — styling hooks for the Theme Builder header template.
 *
 * Classes assigned in Elementor:
 *   - section/container:        ec-header-2a
 *   - wordmark Heading widget:  ec-header-2a__wordmark (only for the text variant)
 *   - Button widget:            ec-header-2a__subscribe
 *
 * The !important flags are deliberate: Elementor's global kit, the template's
 * own element CSS, and The7 all inject competing rules, and this header must
 * always render on-brand regardless of those settings.
 *
 * Layout expectation: three columns — logo, nav menu, subscribe button (last).
 * At the nav widget's collapse breakpoint (≤1024px) the button column is
 * hidden and the hamburger takes its place at the right edge.
 */

.ec-header-2a {
  position: relative; /* anchor for the dropdown panel and progress bar */
  background: #ffffff;
  border-bottom: 1px solid #e2e6eb;
}

/* Width and side padding are CSS variables so a header template (or page)
   can realign the bar if needed, via the section's Custom CSS:
     selector { --ec-header-max-width: 1250px; --ec-header-padding-x: 30px; }
   The defaults follow the Elementor kit content box (1250px, centered) that
   the legacy pages (About Us, Conference, Reports…) lay their content in,
   with a 4% minimum side margin below that width — the same geometry the
   legacy "The7 Header Default" used. .ec-briefing-hero__inner matches the
   same box, so logo and button line up with page content out of the box.
   min-height needs !important against the template's own element CSS; the
   vertical padding guarantees air around the logo. */
.ec-header-2a > .elementor-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: var(--ec-header-max-width, min(1250px, 92%)) !important;
  min-height: 125px !important;
  padding: 16px var(--ec-header-padding-x, 0px);
}

/* Columns hug their content on a single row at every width. The logo column
   pushes nav and button to the right; the small margin is the entire gap
   between the last menu item and the subscribe button. */
.ec-header-2a > .elementor-container > .elementor-column {
  width: auto !important;
}

.ec-header-2a > .elementor-container > .elementor-column:first-child {
  margin-right: auto;
}

.ec-header-2a > .elementor-container > .elementor-column:last-child {
  margin-left: 12px;
}

/* --- Logo / wordmark ----------------------------------------------------
   !important because both Elementor (.elementor-widget-image img) and The7
   apply their own height/max-width constraints to content images. */

.ec-header-2a .elementor-widget-theme-site-logo img,
.ec-header-2a .elementor-widget-image img {
  width: auto !important;
  height: 84px !important;
  max-width: none !important;
  max-height: none !important;
}

.ec-header-2a__wordmark .elementor-heading-title,
.ec-header-2a__wordmark {
  color: #446d9c !important;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* --- Navigation (horizontal, above the collapse breakpoint) --------------
   Sized to match the previous The7 header menu (Montserrat 20px/400).
   Every layout-affecting property is pinned identically on ALL states and
   only the color may transition — any hover rule elsewhere that touches
   weight, spacing, padding, shadow, or transform would make the hovered item
   change width and shove its neighbours sideways. */

/* Scoped to --main (the horizontal bar): these pins must NOT reach the
   dropdown panel, whose items need their own spacing. */
.ec-header-2a .elementor-nav-menu--main a.elementor-item,
.ec-header-2a .elementor-nav-menu--main a.elementor-item:hover,
.ec-header-2a .elementor-nav-menu--main a.elementor-item:focus,
.ec-header-2a .elementor-nav-menu--main a.elementor-item.elementor-item-active,
.ec-header-2a .elementor-nav-menu--main a.elementor-item.highlighted {
  padding: 0 16px !important;
  color: #2c3742 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: color 0.15s ease !important;
}

.ec-header-2a .elementor-nav-menu--main a.elementor-item:hover,
.ec-header-2a .elementor-nav-menu--main a.elementor-item:focus,
.ec-header-2a .elementor-nav-menu--main a.elementor-item.elementor-item-active,
.ec-header-2a .elementor-nav-menu--main a.elementor-item.highlighted {
  color: #446d9c !important;
}

/* The nav widget's pointer effect (e--pointer-underline + animation) jumps
   when leaving an item; the design uses color-only hover, so disable it. */
.ec-header-2a .elementor-nav-menu .elementor-item:before,
.ec-header-2a .elementor-nav-menu .elementor-item:after {
  display: none !important;
}

/* --- Hamburger toggle (shown by the widget at its collapse breakpoint) --- */

.ec-header-2a .elementor-widget-nav-menu .elementor-widget-container {
  display: flex;
  justify-content: flex-end;
}

.ec-header-2a .elementor-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  margin: 0 !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: #2c3742 !important;
}

.ec-header-2a .elementor-menu-toggle:hover,
.ec-header-2a .elementor-menu-toggle.elementor-active {
  border-color: #446d9c !important;
  color: #446d9c !important;
}

.ec-header-2a .elementor-menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.ec-header-2a .elementor-menu-toggle i {
  font-size: 24px;
}

/* --- Dropdown panel (mobile/tablet menu) ---------------------------------
   Stretched to the full header width as a flat white panel below the bar.
   Elementor gives every column and widget position:relative, which would make
   the absolutely positioned dropdown anchor to the 46px hamburger column —
   force those static so the panel anchors to the header section instead. */

.ec-header-2a > .elementor-container,
.ec-header-2a .elementor-column,
.ec-header-2a .elementor-widget-wrap,
.ec-header-2a .elementor-widget-nav-menu {
  position: static !important;
}

.ec-header-2a .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 40;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible;
  background: #ffffff;
  border-top: 1px solid #e2e6eb;
  box-shadow: 0 18px 32px rgba(31, 52, 84, 0.14);
}

.ec-header-2a .elementor-nav-menu--dropdown .elementor-nav-menu {
  padding: 8px 0;
}

.ec-header-2a .elementor-nav-menu--dropdown a.elementor-item,
.ec-header-2a .elementor-nav-menu--dropdown a.elementor-sub-item {
  padding: 17px 48px !important;
  color: #2c3742 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

.ec-header-2a .elementor-nav-menu--dropdown li + li {
  border-top: 1px solid #eef1f5;
}

.ec-header-2a .elementor-nav-menu--dropdown a.elementor-item:hover,
.ec-header-2a .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.ec-header-2a .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
  color: #446d9c !important;
  background: #f3f6fa !important;
  box-shadow: inset 3px 0 0 #446d9c;
}

/* Subscribe entry injected by header.js as the panel's last item. */
.ec-header-2a .elementor-nav-menu--dropdown .ec-header-2a__menu-subscribe a.elementor-item {
  color: #ffffff !important;
  background: #446d9c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.ec-header-2a .elementor-nav-menu--dropdown .ec-header-2a__menu-subscribe a.elementor-item:hover {
  background: #2a466f !important;
  box-shadow: none;
}

/* --- Subscribe button ----------------------------------------------------- */

.ec-header-2a__subscribe .elementor-button {
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background-color: #446d9c !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background-color 0.15s ease;
}

.ec-header-2a__subscribe .elementor-button:hover,
.ec-header-2a__subscribe .elementor-button:focus {
  background-color: #2a466f !important;
  color: #ffffff !important;
}

/* Button flush with the container's right edge (= heading block edge). */
.ec-header-2a__subscribe,
.ec-header-2a__subscribe .elementor-button-wrapper {
  text-align: right;
}

.ec-header-2a__subscribe .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Collapse breakpoint (matches the nav widget's tablet dropdown) ------ */

@media (max-width: 1024px) {
  .ec-header-2a > .elementor-container {
    min-height: 104px !important;
    padding: 12px var(--ec-header-padding-x-tablet, 0px);
  }

  /* The subscribe button gives way to the hamburger, which takes its spot
     at the right edge. */
  .ec-header-2a > .elementor-container > .elementor-column:last-child {
    display: none;
  }

  .ec-header-2a .elementor-widget-theme-site-logo img,
  .ec-header-2a .elementor-widget-image img {
    height: 66px !important;
  }

  .ec-header-2a .elementor-nav-menu--dropdown a.elementor-item,
  .ec-header-2a .elementor-nav-menu--dropdown a.elementor-sub-item {
    padding: 17px 36px !important;
  }
}

@media (max-width: 767px) {
  .ec-header-2a > .elementor-container {
    min-height: 86px !important;
    padding: 10px var(--ec-header-padding-x-mobile, 0px);
  }

  .ec-header-2a .elementor-widget-theme-site-logo img,
  .ec-header-2a .elementor-widget-image img {
    height: 54px !important;
  }

  .ec-header-2a .elementor-menu-toggle {
    width: 42px;
    height: 42px;
  }

  .ec-header-2a .elementor-nav-menu--dropdown a.elementor-item,
  .ec-header-2a .elementor-nav-menu--dropdown a.elementor-sub-item {
    padding: 16px 22px !important;
  }
}

/* --- Transparent variant --------------------------------------------------
 * Opt-in: add the extra class "ec-header-2a--transparent" to the header
 * section. The header then overlaps the page top with a transparent
 * background and light foreground; header.js adds .ec-header-2a--solid on
 * scroll and the bar fades to its normal solid white state. (Deliberately
 * not driven by Elementor's .elementor-sticky--effects: with an effects
 * offset of 0 that class is present from scroll position 0, so the
 * transparent state would never show.) Only use this on pages whose top
 * content is dark (the v2 briefing hero) — over white content the light
 * text would vanish.
 */

.ec-header-2a--transparent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* The front page (the transparent header's home) is the one page whose hero
   spans The7's full content wrapper (90%, capped at 1594px) rather than the
   1250px kit box, so this variant keeps that wider edge. Height and logo are
   inherited from the solid variant. A template's own variables still win. */
.ec-header-2a--transparent > .elementor-container {
  max-width: var(--ec-header-max-width, min(90%, 1594px)) !important;
}

/* Solid state announces itself with the legacy soft shadow instead of the
   border line. */
.ec-header-2a--transparent.ec-header-2a--solid {
  border-bottom-color: transparent;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Elementor's sticky inserts a spacer clone that would reserve the bar's
   height and push the hero below it — the transparent bar must overlap. */
.elementor-sticky__spacer.ec-header-2a--transparent {
  display: none !important;
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) {
  background: transparent;
  border-bottom-color: transparent;
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-nav-menu--main a.elementor-item {
  color: #ffffff !important;
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-nav-menu--main a.elementor-item:hover,
.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-nav-menu--main a.elementor-item:focus,
.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-nav-menu--main a.elementor-item.elementor-item-active {
  color: #8aa7c7 !important;
}

/* The logo file is a blue SVG served as <img>; invert it to white while the
   bar is transparent. */
.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-widget-theme-site-logo img,
.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-widget-image img {
  filter: brightness(0) invert(1);
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-header-2a__wordmark,
.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-header-2a__wordmark .elementor-heading-title {
  color: #ffffff !important;
}

/* Subscribe inverts to white-on-navy so it pops on the dark hero. */
.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-header-2a__subscribe .elementor-button {
  background-color: #ffffff !important;
  color: #1f3454 !important;
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-header-2a__subscribe .elementor-button:hover,
.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-header-2a__subscribe .elementor-button:focus {
  background-color: #dbe5ef !important;
}

.ec-header-2a--transparent:not(.ec-header-2a--solid) .elementor-menu-toggle {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  color: #ffffff !important;
}

/* Progress track only appears once the bar is solid. */
.ec-header-2a--transparent:not(.ec-header-2a--solid) .ec-reading-progress {
  opacity: 0;
}

/* Because the transparent bar overlaps the page, the v2 hero needs its own
   height as extra headroom (72/56/42 own padding + bar height). */
body:has(.ec-header-2a--transparent) .ec-briefing-hero__inner {
  padding-top: 197px !important;
}

@media (max-width: 1024px) {
  body:has(.ec-header-2a--transparent) .ec-briefing-hero__inner {
    padding-top: 160px !important;
  }
}

@media (max-width: 767px) {
  body:has(.ec-header-2a--transparent) .ec-briefing-hero__inner {
    padding-top: 128px !important;
  }
}

/* Inside the Elementor editor there is no sticky JS: fall back to the solid
   state so the template stays editable. */
body.elementor-editor-active .ec-header-2a--transparent {
  position: relative;
  background: #ffffff;
}

/* --- Reading progress track ---------------------------------------------
 * Appended by reading-progress.js into the header (or fixed to the viewport
 * top when no .ec-header-2a exists on the page).
 */

.ec-reading-progress {
  position: absolute;
  right: 0;
  bottom: -1px; /* covers the header's border-bottom */
  left: 0;
  z-index: 5;
  height: 4px;
  background: #e2e6eb;
}

.ec-reading-progress--fixed {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 9999;
}

.ec-reading-progress__fill {
  width: 0;
  height: 100%;
  background: #446d9c;
}