/* ============================================================
   Mobile header + hero corrections
   ------------------------------------------------------------
   Three separate problems, all mobile-only:

   1. On overlay-header pages the nav links are forced white
      (.header--overlay ... color:#fff !important) so they read over the hero.
      That rule also hits the mobile dropdown, whose items are set to
      #FFFFFF99 in the widget — white text on translucent white.
   2. The dropdown items inherit the desktop uppercase treatment at a large
      size with generous padding, so the panel is oversized.
   3. The Thought Sparks hero is a 1920x799 (2.4:1) banner set to
      background-size:cover against a tall viewport, cropping ~half the image
      width away on a phone.
   ============================================================ */

/* ---------- 1 + 2: the mobile dropdown ---------- */

@media screen and (max-width: 1024px) {

  /* Solid panel so text has something to sit on, and it can't blend into
     whatever is behind the transparent header. */
  .elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
    border-top: 3px solid #CC252B;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Beat the overlay header's white-link rule inside the dropdown only.
     The desktop menu keeps its white-over-hero treatment. */
  .header--overlay .elementor-nav-menu--dropdown a.elementor-item,
  .header--overlay.is-scrolled .elementor-nav-menu--dropdown a.elementor-item,
  .header--standard .elementor-nav-menu--dropdown a.elementor-item {
    color: #222222 !important;
    fill: #222222 !important;
    background-color: transparent !important;
  }

  /* Calmer sizing: the desktop 14px uppercase reads much larger once the
     dropdown stretches full width. */
  .elementor-nav-menu--dropdown a.elementor-item {
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: .04em;
    padding: 14px 22px !important;
    border-bottom: 1px solid #EFEFEF;
  }

  .elementor-nav-menu--dropdown li:last-child a.elementor-item {
    border-bottom: 0;
  }

  /* Sub-items read as children rather than peers. */
  .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    font-size: 14px !important;
    padding: 11px 22px 11px 38px !important;
    color: #555555 !important;
    text-transform: none !important;
    letter-spacing: 0;
  }

  .elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    background-color: #F5F5F5 !important;
    color: #CC252B !important;
  }

  /* Close icon in brand yellow while the panel is open. */
  .elementor-menu-toggle.elementor-active,
  .elementor-menu-toggle.elementor-active i,
  .elementor-menu-toggle.elementor-active svg,
  .header--overlay .elementor-menu-toggle.elementor-active,
  .header--overlay .elementor-menu-toggle.elementor-active i,
  .header--overlay .elementor-menu-toggle.elementor-active svg,
  .header--standard .elementor-menu-toggle.elementor-active,
  .header--standard .elementor-menu-toggle.elementor-active i,
  .header--standard .elementor-menu-toggle.elementor-active svg {
    color: #FFC400 !important;
    fill: #FFC400 !important;
  }

  /* Give the tap target a real size (Apple/Google both ask for ~44px). */
  .elementor-menu-toggle {
    padding: 10px !important;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- 3: Thought Sparks hero ---------- */

@media screen and (max-width: 767px) {

  /* Show the whole banner instead of cropping it to a tall box. Height is
     derived from the image's own 1920:799 ratio, plus room at the top for the
     overlaying header, and the image is anchored to the bottom so the header
     never sits on top of the artwork. */
  .elementor-element-6f4bf0cd {
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: #F5F5F5;
    min-height: 0 !important;
    height: calc((100vw * 799 / 1920) + var(--rmg-mobile-header, 76px));
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   Mobile header layout
   ------------------------------------------------------------
   The header's three flex children (logo / nav / CTA) stack into three
   rows on mobile, and the logo runs full-bleed, so the header eats ~40%
   of the viewport before any content shows.

   Standard mobile pattern instead: one row about 60px tall — logo left at a
   capped height, primary CTA compact, burger right with a 44px tap target.
   ============================================================ */

@media screen and (max-width: 1024px) {

  /* One row, not three. Grid rather than flex so the logo sits optically
     centred regardless of how wide the CTA and burger happen to be —
     with flex, the centre drifts whenever either side changes width. */
  .header-sticky.e-con {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;
    gap: 8px;
    padding: 8px 12px !important;
  }

  .header-sticky > .e-con.e-child {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    align-content: center !important;
    justify-content: center !important;
  }

  /* Elementor's button wrapper carries its own margins and a text line-height;
     both add space under the button, which reads as the CTA sitting low. */
  .header-sticky .elementor-widget-button,
  .header-sticky .elementor-widget-button .elementor-widget-container,
  .header-sticky .elementor-button-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-sticky .elementor-widget-button .elementor-button {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Everything stays on row 1. Without this, any child that fails to get an
     explicit column auto-places onto a second row — which is what pushed the
     CTA below the logo. */
  .header-sticky > .e-con.e-child {
    grid-row: 1;
  }

  /* Placement is by what a child CONTAINS, not by element id: the site runs
     two header templates (13877 on the homepage, 15558 elsewhere) whose ids
     differ, so id-based rules silently miss one of them. */
  .header-sticky > .e-con.e-child.header-logo {
    grid-column: 2;
    justify-self: center;
    max-width: 190px;
  }

  .header-sticky > .e-con.e-child:has(.elementor-widget-button) {
    grid-column: 1;
    justify-self: start;
  }

  .header-sticky > .e-con.e-child:has(.elementor-widget-nav-menu) {
    grid-column: 3;
    justify-self: end;
  }

  .header-sticky .header-logo img {
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  .header-sticky .elementor-widget-button .elementor-button {
    padding: 9px 14px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  .header-sticky .elementor-nav-menu__align-center .elementor-menu-toggle,
  .header-sticky .elementor-menu-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Elementor's own stretch feature sizes the dropdown to the viewport; just
     make sure nothing here lets it exceed that. */
  .header-sticky .elementor-nav-menu--dropdown {
    max-width: 100vw;
  }
}

/* Very narrow phones: the CTA label alone, no room for flourishes. */
@media screen and (max-width: 400px) {
  .header-sticky .elementor-widget-button .elementor-button {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .header-sticky .elementor-widget-button .elementor-button-icon {
    display: none !important;
  }

  .header-sticky .header-logo {
    max-width: 150px;
  }
}

/* The Thought Sparks page uses header--standard, which sits in normal flow —
   so the hero needs no allowance for an overlaying header. */
@media screen and (max-width: 767px) {
  .elementor-element-6f4bf0cd {
    height: calc(100vw * 799 / 1920) !important;
  }
}