/**
 * MeetEm – Mobile / responsive refinements
 * ----------------------------------------------------------------------------
 * Custom, update-safe overrides for the wpdating-datingclub child theme.
 *
 * WHY THIS FILE EXISTS
 *   The child theme's main style.css is COMPILED from style.scss, and the bulk
 *   of the live site colour styling lives in Customizer → Additional CSS (which
 *   recolours the header to dark purple #392642). Editing either of those is
 *   either fragile (recompiled) or hard to track (in the DB). This file is the
 *   single, documented home for hand-written mobile fixes. It is enqueued LAST
 *   from functions.php so it reliably wins the cascade, and it only touches the
 *   specific selectors it needs to. Nothing here affects desktop or the WP
 *   Dating plugin markup / video-upload code.
 *
 *   Date: 2026-06-22
 * ----------------------------------------------------------------------------
 */

/* ============================================================================
 * FIX 1 — Mobile menu (hamburger) was invisible.
 *
 * The off-canvas drawer, its menu items and the click-to-open JS all work, but
 * the hamburger BARS were #343434 (dark grey) painted on the dark-purple
 * header (#392642) — i.e. dark-on-dark, so users couldn't see anything to tap.
 * The hamburger only appears at <=991px (set in the parent responsive.css).
 *
 * White bars in both the closed (hamburger) and open (X) states — the header
 * bar stays dark behind the open drawer (see FIX 4), so white reads in both.
 * ==========================================================================*/
@media screen and (max-width: 991px) {

  .site-header .ham-icon span,
  .site-header .ham-icon::before,
  .site-header .ham-icon::after {
    background-color: #ffffff;
  }
}

/* ============================================================================
 * FIX 2 — Logo too large on phones, crushing the Login/Register button.
 *
 * The logo image rendered at 208px wide on a 390px screen, leaving the
 * right-content only ~75px. The "Login/Register" pill (white-space:nowrap)
 * was squeezed to a 40px box and its text overflowed off the right edge.
 *
 * Constrain the logo on smaller screens so the header row has room for both
 * the logo and the login button, and stop the login button from being shrunk.
 * ==========================================================================*/
@media screen and (max-width: 991px) {
  .site-header .logo-wrap {
    max-width: 160px;
  }

  .site-header .logo-wrap img {
    width: 100%;
    height: auto;
  }

  /* Never let the login button collapse to fit a wide logo. */
  .site-header .right-content .login-wrap {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .site-header .right-content .login-wrap .header-login-btn {
    white-space: nowrap;
  }
}

@media screen and (max-width: 480px) {
  .site-header .logo-wrap {
    max-width: 132px;
  }
}


/* ============================================================================
 * FIX 4 — Open mobile menu (sidebar drawer) polish.
 *
 * Reported on the OPEN drawer: the white logo sat on a white background and was
 * unreadable; the close (X) icon looked weak/uneven; and the spacing between
 * the icon, the logo and the menu items felt cramped.
 *
 * Note: the drawer is a CHILD of <header>, so the white logo + hamburger that
 * float above it can't simply be "left on the dark header" — the drawer paints
 * over the header background. Instead we paint a dark band across the TOP of the
 * drawer itself so the logo + close icon keep a dark backdrop, and use the
 * client's light-purple (#E6CCFF) for the menu area below it.
 *
 * Approach:
 *   1. Drawer background = a frosted, semi-transparent WHITE panel
 *      (#fffffff2 + backdrop blur). A short dark band is kept across the very
 *      top (~72px) ONLY behind the logo + close icon, so the white logo and the
 *      white X stay readable (a fully white top would bring back the
 *      half-white-logo problem).
 *   2. Comfortable, even spacing; menu links dark so they read on the panel.
 *   3. Keep the close (X) white (FIX 1). The child theme already builds a clean
 *      centred cross; we only needed the colour, so no X geometry is overridden
 *      here (an earlier absolute-positioned attempt rendered as a "<").
 * ==========================================================================*/
@media screen and (max-width: 991px) {

  /* 1. Dark band behind the logo/icon (top) + frosted white menu panel. The
   *    backdrop-filter blurs the page showing through the ~5% transparency. */
  .site-header .right-content .main-navigation {
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    /* #fffffff2 fallback */
    background: -webkit-gradient(linear, left top, left bottom,
        color-stop(72px, #392642), color-stop(72px, rgba(255, 255, 255, 0.97)));
    background: linear-gradient(to bottom, #392642 72px, rgba(255, 255, 255, 0.97) 72px);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-box-shadow: 0 0 18px rgba(57, 38, 66, 0.18);
    box-shadow: 0 0 18px rgba(57, 38, 66, 0.18);
  }

  .site-header .right-content .main-navigation .menu-main-menu-container>ul>li:last-child {
    margin-bottom: 0;
  }


  /* A little more space between the icon and the logo in the header bar. */
  .site-header .left-content .ham-icon {
    margin-right: 14px;
  }
}

/* ============================================================================
 * FIX 5 — Footer copyright not vertically centred on mobile/tablet.
 *
 * The visible footer is just the copyright line + footer menu (the 4-column
 * widget area is hidden). Two things threw off the spacing:
 *   - the footer had padding-top:32px but NO padding-bottom, and
 *   - the Customizer "Additional CSS" zeroes the copyright block's padding-top.
 * Net result: a big top gap and a small bottom gap — not centred.
 *
 * Fix: neutralise the footer's lopsided padding and give the copyright block
 * EQUAL top/bottom padding so its content is vertically centred, on phone and
 * tablet alike (<=991px).
 *
 * Specificity note: the Customizer "Additional CSS" sets padding-top:0 on the
 * copyright block and loads AFTER this file, so we include `.wpee-container`
 * to out-specify it (0,3,1 > 0,2,1) rather than resort to !important.
 * ==========================================================================*/
@media screen and (max-width: 991px) {

  /* Remove the footer's top-only padding so it can't skew the centring. */
  footer.site-footer {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Equal padding => copyright + menu sit vertically centred in the footer. */
  footer.site-footer .wpee-container .copyright-wrap {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ============================================================================
 * FIX 6 — Lock page scrolling while the mobile menu is open.
 *
 * The drawer is toggled by adding `.is-open` to `.main-navigation` (parent
 * theme JS). Using :has() we can react to that single source of truth with no
 * extra JS: when the menu is open, freeze the document scroll so only the menu
 * is interactive. Reverts automatically when the menu closes.
 * ==========================================================================*/
@media screen and (max-width: 991px) {

  html:has(.site-header .right-content .main-navigation.is-open),
  html:has(.site-header .right-content .main-navigation.is-open) body {
    overflow: hidden;
  }
}

/* ============================================================================
 * FIX 7 — Register form: month dropdown truncated ("January" -> "Januar").
 *
 * On small phones (<=481px) the Birth Date row lays its 3 selects out at 1/3
 * width each, while each select carries padding: 6px 12px PLUS a
 * padding-right:30px chevron gap. The longest month names then don't fit and
 * the native <select> clips the label. Shrink the font + side padding (and pull
 * the chevron in) on just these birth-date selects so full month names fit.
 *
 * Fix has two parts: (a) trim the font + side padding and pull the chevron in,
 * and (b) since the year ("2008") and day ("1") are short, give the month select
 * a wider share of the row so the longest month ("September") fits.
 *
 * Higher specificity + !important is required to beat the plugin/theme rule
 * `select.dspdp-form-control { padding-right: 30px !important }`.
 * ==========================================================================*/
@media screen and (max-width: 481px) {
  .wpee-register-form-wrap #wpee-registration-form .form-inline.dob-wrap select {
    font-size: 14px;
    padding-left: 8px;
    padding-right: 22px !important;
    background-position: right 8px top 50%;
  }

  .wpee-register-form-wrap #wpee-registration-form .form-inline.dob-wrap select[name="dsp_year"],
  .wpee-register-form-wrap #wpee-registration-form .form-inline.dob-wrap select[name="dsp_day"] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 26%;
    flex: 0 0 26%;
  }

  .wpee-register-form-wrap #wpee-registration-form .form-inline.dob-wrap select[name="dsp_mon"] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 42%;
    flex: 0 0 42%;
  }
}

/* ============================================================================
 * FIX 8 — Members filter leaves the mobile menu unclickable / hidden.
 *
 * Repro: on Members, open the filter, then close it via the prepended "x"
 * (`.close-filter`) or the title-bar submit — after that the hamburger menu
 * opens but doesn't appear.
 *
 * Cause: opening the filter adds `offcanvase-filter-wrap-active` to <body>,
 * which triggers a theme rule `.offcanvase-filter-wrap-active .site-body {
 * z-index: 90 }` (so the filter can sit above the header). The theme JS only
 * removes that body class on SOME close paths, so it gets STUCK — leaving
 * `.site-body` at z-index 90, above the header (81) and the open menu drawer
 * (83). The menu opens behind the page content and is invisible.
 *
 * Fix (CSS-only, no JS): if the body still has the class but NO filter is
 * actually open, reset `.site-body`'s z-index — i.e. honour the lift only while
 * a filter is genuinely active. A defensive rule also lifts the header above the
 * filter layer whenever the menu is open, so the menu always wins.
 * ==========================================================================*/
body.offcanvase-filter-wrap-active:not(:has(.offcanvase-filter-wrap.is-active)) .site-body {
  z-index: auto;
}

@media screen and (max-width: 991px) {
  .site-header:has(.right-content .main-navigation.is-open) {
    z-index: 99;
  }
}