/*
 * site-header.css — HEADER-MOBILE-SIZE (QUEUE item 1, 2026-10-13)
 *
 * The problem (measured live on anywhereplan.com, header template Elementor post 6,
 * post-6.css?ver=1791915603): below Elementor's 767 px mobile breakpoint the site header
 * swaps to a separate mobile section whose wider columns let the AP wordmark (attachment
 * 3534, max-width:100%) and the member avatar render LARGER than on desktop, and the bar
 * wraps the primary + marketing navigation onto a second row — so the header roughly
 * DOUBLES (1248 px: 73 / logo 161 / avatar 52  →  560 px: 137 / logo 204 / avatar 64).
 * Ben, 2026-10-13: "the header is no taller on a narrow screen than on a wide one, and the
 * logo and avatar never render larger than their desktop size."
 *
 * The fix is a defensive clamp, NOT a redesign of the header (Ben, 2026-10-13: ship it as a
 * small site-wide CSS normalization owned by the Calendar). It is ONE rule keyed to the
 * breakpoint and to generic selectors (the header location + widget TYPES + the logged-in
 * body class) — never to Elementor element ids — so a later header edit needs no matching
 * change here (Ben's condition b). It is enqueued on every AnywherePlan front-end surface,
 * not only on calendar pages (Ben's condition a).
 *
 *   (1) For EVERY visitor: clamp the two header images to their desktop sizes. min(161px,42vw)
 *       keeps the wordmark at its full desktop width on normal phones and lets it scale down
 *       on very narrow phones so the row never overflows; the avatar is capped at 52 px.
 *   (2) For SIGNED-IN visitors (Ben's own case — the marketing nav is redundant with the
 *       app's Calendar button + account menu, and stays reachable in the footer): collapse
 *       the phone header to a single compact row by hiding the inline marketing nav
 *       (an Elementor icon-list widget) and tightening the mobile section's wrap padding, so
 *       the header is no taller than the 73 px desktop bar. Logged-out marketing visitors keep
 *       their full header (only the image clamp applies to them), so nothing is removed from
 *       the public site.
 *
 * Verified on the deployed build by walkthroughs/calendar/10-header-mobile-size.js (Test-Ben,
 * logged in): 1248/768/560 all within the desktop sizes; reports/calendar/2026-10-13-header-mobile-size-css.md.
 */
@media (max-width: 767px) {
  /* (1) brand never larger than its desktop size — for everyone */
  header.elementor-location-header img,
  .elementor-location-header img {
    max-width: min(161px, 42vw) !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
  }

  /* (2) signed-in phone header: one compact row, no taller than the desktop bar */
  body.logged-in header.elementor-location-header .elementor-widget-icon-list,
  body.logged-in .elementor-location-header .elementor-widget-icon-list {
    display: none !important;
  }
  body.logged-in header.elementor-location-header .elementor-widget-wrap,
  body.logged-in header.elementor-location-header .elementor-element-populated {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}