/* =============================================================================
   SEP site header
   -----------------------------------------------------------------------------
   Replaces the Slider Revolution "home_header" module. Logo left, strapline
   right, flower watermark behind. No JavaScript. The strapline is real text,
   so it scales, reflows and passes WCAG 2.2 AA 1.4.5 (Images of Text).

   Markup: x-child/framework/legacy/cranium/headers/views/global/_brand.php
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Undo the collapse of the logobar.
   Appearance > Customize > Additional CSS (the `wp-custom-css` block) contains
   `.x-logobar { max-height: 0px; }`, added so the empty logo band would not show
   while the Rev Slider drew the header above it. That rule is now obsolete but
   still live, and it clipped this masthead to 1px. Overridden here by
   specificity (0,2,0 beats 0,1,0) rather than !important, so it works whatever
   the source order. Delete both Customizer rules eventually and this block too.

   The logobar also acts as the crop window for the watermark.
   -------------------------------------------------------------------------- */
.masthead .x-logobar {
  max-height: none;
  position: relative;
  overflow: hidden;
}

.masthead .x-logobar-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.sep-masthead {
  position: relative;
  min-height: 199px;          /* matches the height of the old slider band */
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

/* -----------------------------------------------------------------------------
   Decorative flower watermark.
   Purely decorative, so it is a background rather than an <img> and carries no
   accessible name. The logobar crops it; only the bottom slice shows.
   `bottom` is set to clear the strapline: raise it and the flower drops onto
   the text, which would fail 1.4.3 contrast. Eyeball this on staging.
   -------------------------------------------------------------------------- */
.sep-masthead::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 44px;      /* raise/lower to taste; keep it clear of the strapline */
  /* Fixed px, not a percentage: keeps the visible slice constant as the
     container narrows. Same 551px as the old slider layer. */
  width: 551px;
  height: 551px;
  background: url("../img/sep-flower.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

/* Logo -------------------------------------------------------------------- */

.x-brand.sep-brand {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.x-brand.sep-brand img {
  display: block;
  width: clamp(240px, 46vw, 378px);
  height: auto;
  max-width: 100%;
}

/* Strapline --------------------------------------------------------------- */
/* Sentence case in the markup, uppercased in CSS, so screen readers do not
   spell it out letter by letter. Open Sans 700 is already loaded by the site. */

.sep-strapline {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.65rem;         /* ~23px at the site's 14px root */
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1c1c1b;             /* matches the wordmark */
}

/* Stacked and centred on small screens ------------------------------------ */

/* X's own breakpoint is 978.98px; stack below it so the desktop row is
   never cramped and the watermark never crowds the strapline. */
@media (max-width: 978.98px) {

  .sep-masthead {
    min-height: 0;
    padding: 14px 0 16px;
    justify-content: center;
    text-align: center;
  }

  .sep-masthead::before {
    display: none;
  }

  .x-brand.sep-brand {
    margin: 0 auto;
  }

  .x-brand.sep-brand img {
    width: clamp(220px, 72vw, 378px);
    margin: 0 auto;
  }

  .sep-strapline {
    flex-basis: 100%;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
  }

}

/* -----------------------------------------------------------------------------
   Third-level nav flyouts (added 29 Sep 2026, SCC feedback item 1).
   First used by Your bins > Your recycling bin > How to recycle right.
   Desktop: UberMenu sizes a nested flyout to its text, so a two-word-plus label
   wraps. Give it a minimum width.
   Mobile (UberMenu collapses at 1124px): UberMenu positions the nested submenu
   absolutely, so it covers the next two siblings. Put it back in the flow and
   indent it so it reads as a child.
   -------------------------------------------------------------------------- */
@media (min-width: 1125px) {
  .ubermenu-main .ubermenu-item-level-1 > .ubermenu-submenu.ubermenu-submenu-drop {
    min-width: 220px;
  }
}

@media (max-width: 1124px) {
  .ubermenu-main .ubermenu-item-level-1 > .ubermenu-submenu.ubermenu-submenu-drop {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    box-shadow: none;
    border: 0;
    padding-left: 1.25em;
  }
}