/* ==========================================================================
   05 · HEADER — logo, main menu, mobile header, title area, hero, socials
   ========================================================================== */

/* --- Sticky bar ----------------------------------------------------------
   The parent theme paints the sticky bar solid white — on the old warm
   artwork that passed, against the deep ground it reads as a fragment of a
   different website. Note the colour sits on .edgtf-vertical-align-containers,
   one level below .edgtf-sticky-holder; painting only the holder leaves the
   child on top and nothing changes.

   The three logo variants are stacked and switched by opacity, so the light
   one is already in place — it only needs to be brought forward, otherwise
   the dark logo disappears on the dark bar.
   ------------------------------------------------------------------------ */

.edgtf-sticky-header .edgtf-sticky-holder,
.edgtf-sticky-header .edgtf-vertical-align-containers {
  background-color: var(--sm-veil-header) !important;
}

.edgtf-sticky-header .edgtf-logo-wrapper img.edgtf-normal-logo,
.edgtf-sticky-header .edgtf-logo-wrapper img.edgtf-dark-logo {
  opacity: 0 !important;
}

.edgtf-sticky-header .edgtf-logo-wrapper img.edgtf-light-logo {
  opacity: 1 !important;
}

/* --- Main menu ----------------------------------------------------------- */

.edgtf-main-menu > ul > li > a {
  color: var(--sm-heading) !important;
  font-size: 17px !important;
}

.edgtf-main-menu > ul > li:hover > a,
.edgtf-main-menu > ul > li > a:hover {
  color: var(--sm-link) !important;
}

.edgtf-main-menu > ul > li > a span.edgtf-item-inner {
  display: inline-block;
  padding: 0 16px !important;
}

@media only screen and (min-width: 1281px) and (max-width: 1400px) {
  .edgtf-main-menu > ul > li > a span.edgtf-item-inner {
    padding: 0 10px !important;
  }
}

/* --- Submenus ------------------------------------------------------------
   Not one panel with a hover inside it, but a stack of separate blocks.
   The list itself is transparent; each entry carries its own ground and is
   separated by a 2px gap through which the page shows. Hovering recolours
   the whole block, across the full width the panel used to have.

   The gap above is a transparent border, not a margin. As a margin the
   strip would be mouse-free and the menu would collapse on the way down;
   as a transparent border the surface stays there but reads as empty.

   Entries needed more inner padding once the block became visible — at the
   theme's 8px the text sits cramped against its own edge.
   ------------------------------------------------------------------------ */

.edgtf-menu-area .edgtf-menu-second .edgtf-menu-inner ul,
.edgtf-sticky-header .edgtf-menu-second .edgtf-menu-inner ul {
  background-color: transparent !important;
  padding: 0 !important;
  border-top: 2px solid transparent !important;
  background-clip: padding-box !important;
}

.edgtf-drop-down .edgtf-menu-second .edgtf-menu-inner ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.edgtf-drop-down .edgtf-menu-second .edgtf-menu-inner ul li a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 2px 0 !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  color: var(--sm-heading) !important;
  background-color: var(--sm-veil-header) !important;
  transition: background-color .15s ease-out !important;
}

.edgtf-drop-down .edgtf-menu-second .edgtf-menu-inner ul li a:hover {
  background-color: var(--sm-fill) !important;
  color: var(--sm-white) !important;
}

/* Hairlines sit on the li, set in the mobile navigation block above.
   The theme draws its own 1px rgb(234,234,234) on the link — nearly white
   and much harder than the gradient. It has to be switched off explicitly;
   removing our own rule was not enough. */

.edgtf-mobile-header .edgtf-mobile-nav a,
.edgtf-mobile-header .edgtf-mobile-nav h4 {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

/* --- Mobile navigation ----------------------------------------------------
   Below 1280 this replaces the main menu, and it had received none of the
   rebrush: pure black ground, 13px at weight 300 in the link colour, and a
   31px tap target — well under the 44 to 48px that a finger needs.

   It now matches the desktop menu: light at rest, blue on touch, display
   face in caps.

   Two deliberate exceptions to the system:

   The ground is OPAQUE. Everywhere else the surfaces are translucent, but a
   menu that covers the screen has to switch off what is behind it — at 96%
   the bright slider still read through and competed with the navigation.

   And the z-index: the slider painted over the open menu. It was not
   catching pointer events, so elementFromPoint reported the menu on top
   while the slider was still drawn above it.
   ------------------------------------------------------------------------ */

.edgtf-mobile-header {
  z-index: 9999 !important;
}

.edgtf-mobile-header-inner,
.edgtf-mobile-header .edgtf-mobile-nav {
  background-color: rgb(9, 26, 39) !important;
}

.edgtf-mobile-header .edgtf-mobile-nav {
  position: relative !important;
  z-index: 9999 !important;
}

.edgtf-mobile-header .edgtf-mobile-nav ul li a,
.edgtf-mobile-header .edgtf-mobile-nav ul li h4 {
  font-family: var(--sm-font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sm-heading) !important;
  padding: 15px 0 !important;
  letter-spacing: 1px !important;
  transition: color .15s ease-out !important;
}

.edgtf-mobile-header .edgtf-mobile-nav ul li a:hover {
  color: var(--sm-link) !important;
}

/* A hairline across the full width read as a hard rule against the display
   face. This one fades out towards both ends — it separates without
   drawing a line. */

.edgtf-mobile-header .edgtf-mobile-nav ul li {
  position: relative !important;
}

.edgtf-mobile-header .edgtf-mobile-nav ul li::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(241, 238, 230, .16) 12%, rgba(241, 238, 230, .16) 88%, transparent) !important;
}

.edgtf-mobile-header .edgtf-mobile-nav ul li:last-child::after {
  display: none !important;
}

.edgtf-mobile-menu-opener a {
  color: var(--sm-heading) !important;
  font-size: 26px !important;
}

/* The submenu arrow hangs at top:0 with a fixed 35px height inside a 48px
   row, so it sat 6px high. Bound to the middle instead. */

.edgtf-mobile-nav .mobile_arrow {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- Header mode switch -------------------------------------------------- */

@media only screen and (max-width: 1280px) {
  .edgtf-mobile-header { display: block !important; }
  .edgtf-page-header   { display: none !important; }
  .edgtf-title .edgtf-title-holder {
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
  }
}

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

.edgtf-logo-wrapper a img.edgtf-normal-logo,
.edgtf-logo-wrapper a img.edgtf-dark-logo,
.edgtf-logo-wrapper a img.edgtf-light-logo {
  width: 300px;
  max-width: 300px;
  height: auto;
}

.edgtf-position-left-inner {
  height: 100%;
}

.edgtf-position-center-inner {
  max-width: 70%;
}

.edgtf-mobile-logo-wrapper {
  height: 100%;
}

.edgtf-mobile-header .edgtf-mobile-logo-wrapper img {
  height: auto !important;
  width: 100% !important;
}

.edgtf-mobile-header .edgtf-mobile-logo-wrapper a {
  height: auto !important;
  padding-top: 7px;
}

@media only screen and (max-width: 1200px) {
  .edgtf-main-menu > ul > li > a span.edgtf-item-inner {
    padding: 0 10px !important;
  }
  .edgtf-vertical-align-containers .edgtf-position-left {
    max-width: 25%;
    width: auto;
  }
  .edgtf-position-left-inner {
    height: 100%;
    width: 99%;
  }
  .edgtf-logo-wrapper a {
    height: 100%;
  }
  .edgtf-logo-wrapper a img.edgtf-normal-logo,
  .edgtf-logo-wrapper a img.edgtf-dark-logo {
    width: 250px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .edgtf-logo-wrapper a {
    padding-top: 2%;
  }
}

/* --- Hero ---------------------------------------------------------------- */

/* The slider ground was pure black — the only pure black left on the page,
   and it read as a hole next to the blue panels. It shows only while
   loading and where the aspect ratio does not fill, but that is exactly
   where it stood out. */

.hero-slider {
  background-color: var(--sm-bg-body);
}

#rs-module#hero,
#hero_wrapper,
.rs-fullwidth-wrap {
  max-height: 800px !important;
}

/* --- Title area ---------------------------------------------------------- */

.edgtf-title {
  height: auto !important;
  min-height: var(--sm-band-h);
}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
  .schandmaul .edgtf-title .edgtf-title-holder .edgtf-container-inner {
    padding: 24px 0 !important;
  }
}

@media only screen and (max-width: 1024px) {
  /* The theme forces height:100% on the holder here, which resolves against
     an auto-height parent and collapses the strip to its content. This rule
     existed before with a hardcoded 160px; it is still needed, just bound
     to the token now. */
  .schandmaul .edgtf-title .edgtf-title-holder {
    height: var(--sm-band-h) !important;
    display: flex !important;
  }
  .edgtf-title .edgtf-title-holder {
    position: relative !important;
  }
  .edgtf-title {
    display: flex !important;
    align-items: center !important;
  }
  .edgtf-position-center-inner {
    width: 40%;
  }
}

@media only screen and (max-width: 768px) {
  .edgtf-title-holder {
    max-width: 100% !important;
    margin: 0 auto;
  }
  .edgtf-title {
    display: flex !important;
    align-items: center !important;
  }
  .edgtf-title .edgtf-title-holder h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 36px !important;
    letter-spacing: 2px;
  }
  .edgtf-title .edgtf-title-holder h3 {
    font-size: 18px !important;
    line-height: 22px;
  }
  .edgtf-position-center-inner {
    width: 50%;
  }
}

/* Below 680 the strip gets shorter. The value goes on the token, not on the
   element — the social row is sized from --sm-band-h too, and a hardcoded
   height here would leave the icons off centre. That is exactly what the
   two overrides that used to sit here did. */

@media only screen and (max-width: 680px) {
  :root {
    --sm-band-h: 100px;
  }
  .edgtf-title {
    min-height: var(--sm-band-h);
  }
  /* The social row leaves the strip here. At 100px height and a 36px
     wordmark both are centred on the same space and overlap. They are the
     same five links that sit in the footer, larger — on a phone the strip
     carries the title alone. */
  .title-wrapper ul.wp-container.wp-block-social-links.has-icon-color.is-style-logos-only,
  .title-wrapper ul.wp-block-social-links {
    display: none !important;
  }
  /* The 12px that used to make room for those icons is removed at its
     source, further down in this block. */
  ul.wp-container.wp-block-social-links.has-icon-color.is-style-logos-only {
    margin: 0;
  }
  .edgtf-title .edgtf-title-holder .edgtf-title-subtitle-holder {
    display: block !important;
  }
}

@media only screen and (max-width: 480px) {
  .edgtf-position-center-inner {
    width: 60%;
  }
  .edgtf-title .edgtf-title-holder h1 {
    font-size: 30px !important;
  }
}

/* --- Title wrapper: socials + back button -------------------------------- */

/* --- Title wrapper: socials + back button --------------------------------
   functions.php wraps the whole title area in .title-wrapper — it opens on
   rebellion_edge_before_page_title and closes on ..._after_page_title. The
   wrapper is therefore already congruent with the strip.

   The old construction pulled the inner container back up with a negative
   margin that had to equal the strip height plus an offset, and broke on
   every height change. Absolute positioning inside the wrapper removes the
   arithmetic: the container fills its parent, whatever height that is, and
   the social row centres against it.
   ------------------------------------------------------------------------ */

.title-wrapper {
  position: relative;
}

.title-wrapper > .edgtf-container-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sm-band-h);
  margin: 0 auto;
  z-index: 200;
}

/* The social row is absolutely placed and used to hang on a fixed
   bottom offset that only worked at the strip's old height. Centring it
   properly also needs the margin reset: ul.wp-block-social-links brings its
   own block margin from WordPress, which pushed it 15px below centre. */

.title-wrapper ul.wp-block-social-links {
  margin: 0 !important;
  padding: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* --- Title strip: type and icons -----------------------------------------
   The strip is the one light surface on the page, so everything in it runs
   the opposite way round: dark type on light ground.

   The icons are links. At rest they carry the dark warm tone of the band;
   on hover they switch to the interaction blue. Note the hover does not
   work through brightness here — on a light ground a lighter hover loses
   weight instead of gaining it. Hue change is the only move that stays
   legible regardless of what the artwork does behind the band.
   ------------------------------------------------------------------------ */

.edgtf-title-holder h1,
.edgtf-title-holder h1 span,
.edgtf-title-holder h3 {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--sm-on-sand) !important;
  color: var(--sm-on-sand) !important;
}

.title-wrapper li.wp-social-link {
  color: var(--sm-on-sand-icon) !important;
}

.title-wrapper .wp-social-link a svg {
  fill: var(--sm-on-sand-icon) !important;
  transition: fill .15s ease-out;
}

.title-wrapper .wp-social-link a:hover svg {
  fill: var(--sm-fill) !important;
}

/* Below 1024 the icons sit over a narrower strip where the artwork behind
   the 30% sand runs dark in places. Two shadows: the tight one gives the
   edge, the wide one the falloff — a single shadow is either hard or
   diffuse, not both. */

@media only screen and (max-width: 1024px) {
  .title-wrapper .wp-social-link a svg {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)) drop-shadow(0 0 10px rgba(255, 255, 255, .3)) !important;
  }
}

.title-wrapper .wp-social-link a {
  width: 52px !important;
  height: 52px !important;
  font-size: 52px !important;
}

.title-wrapper .wp-social-link svg {
  width: 40px !important;
  height: 40px !important;
}

.title-wrapper ul.wp-container.wp-block-social-links.has-icon-color.is-style-logos-only {
  display: inline-flex;
  position: absolute;
  right: 0;
}

.title-wrapper ul.wp-container.button.wp-block-social-links.has-icon-color.is-style-logos-only {
  display: inline-flex;
  position: absolute;
  right: 0;
  bottom: -56px;
}

.title-wrapper li.wp-social-link.wp-block-social-link {
  padding-left: 5px;
  color: var(--sm-heading) !important;
}

.title-wrapper .back {
  text-align: right;
}

.title-wrapper .back .edgtf-btn {
  background-color: var(--sm-veil-75);
}

@media only screen and (max-width: 1023px) {
  .title-wrapper ul.wp-container.button.wp-block-social-links.has-icon-color.is-style-logos-only {
    left: 0;
    bottom: 0;
    top: inherit;
  }
  .title-wrapper .back {
    display: none;
  }
}

@media only screen and (max-width: 680px) {
  .title-wrapper ul.wp-container.wp-block-social-links.has-icon-color.is-style-logos-only {
    display: inline-flex;
    position: absolute;
    width: 100%;
    justify-content: center;
    bottom: 0;
  }
  .edgtf-title .edgtf-title-holder .edgtf-title-subtitle-holder {
    text-align: center;
  }
}