/* =========================================================
   V12 WordPress Mobile Menu Match Main CTL
   This CSS is loaded last and intentionally overrides earlier
   mobile menu rules from blog-layout.css / V7 / V9.

   Goal:
   - Mobile header size matches main CTL PHP site
   - Logo + Book Now + Hamburger fit inside 412px viewport
   - Dropdown opens as a clean vertical list
   - Menu does not overflow or overlap outside the rounded panel
   ========================================================= */

@media (max-width: 760px) {
  body.ctl-blog-theme .site-header,
  body.ctl-blog-theme .ctl-blog-header.site-header,
  body.ctl-blog-theme header.site-header#siteHeader {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;

    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-height: 64px !important;
    height: auto !important;

    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    padding: 10px 12px !important;
    border-radius: 28px !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }

  body.ctl-blog-theme.admin-bar .site-header,
  body.ctl-blog-theme.admin-bar .ctl-blog-header.site-header,
  body.ctl-blog-theme.admin-bar header.site-header#siteHeader {
    top: 58px !important;
  }

  body.ctl-blog-theme .site-header *,
  body.ctl-blog-theme .ctl-blog-header.site-header * {
    box-sizing: border-box !important;
  }

  /* Logo block: same scale as CTL main mobile */
  body.ctl-blog-theme .site-header .brand,
  body.ctl-blog-theme .site-header .brand-with-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 1 128px !important;
    width: 128px !important;
    min-width: 0 !important;
    max-width: 128px !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  body.ctl-blog-theme .site-header .brand-logo,
  body.ctl-blog-theme .site-header .custom-logo {
    display: block !important;
    width: 118px !important;
    max-width: 118px !important;
    height: auto !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.ctl-blog-theme .site-header .custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    width: 118px !important;
    max-width: 118px !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  /* Right side: Book Now + hamburger */
  body.ctl-blog-theme .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.ctl-blog-theme .site-header .header-actions .btn-primary,
  body.ctl-blog-theme .site-header .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 15px !important;

    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  body.ctl-blog-theme .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(8, 120, 164, .14) !important;
    border-radius: 999px !important;
    background: rgba(232, 248, 251, .96) !important;
    box-shadow:
      0 12px 30px rgba(13, 86, 117, .12),
      inset 0 1px 0 rgba(255, 255, 255, .92) !important;

    cursor: pointer !important;
    z-index: 10002 !important;
  }

  body.ctl-blog-theme .mobile-menu-toggle span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #075b82 !important;
    transition:
      transform .24s ease,
      opacity .24s ease,
      width .24s ease !important;
  }

  body.ctl-blog-theme .site-header.menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.ctl-blog-theme .site-header.menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
    width: 0 !important;
  }

  body.ctl-blog-theme .site-header.menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Mobile dropdown panel */
  body.ctl-blog-theme .site-header .nav,
  body.ctl-blog-theme .ctl-blog-header.site-header .nav,
  body.ctl-blog-theme header.site-header#siteHeader .nav {
    box-sizing: border-box !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 10001 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    max-height: min(68vh, 520px) !important;

    padding: 12px !important;
    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,250,253,.96)) !important;
    box-shadow:
      0 28px 80px rgba(13, 86, 117, .20),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transition:
      opacity .24s ease,
      visibility .24s ease,
      transform .24s ease !important;
    white-space: normal !important;
  }

  body.ctl-blog-theme .site-header.menu-open .nav,
  body.ctl-blog-theme .ctl-blog-header.site-header.menu-open .nav,
  body.ctl-blog-theme header.site-header#siteHeader.menu-open .nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Supports both direct <a> fallback and WordPress <li><a> menu output */
  body.ctl-blog-theme .site-header .nav ul,
  body.ctl-blog-theme .site-header .nav .menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  body.ctl-blog-theme .site-header .nav li,
  body.ctl-blog-theme .site-header .nav .menu-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  body.ctl-blog-theme .site-header .nav a,
  body.ctl-blog-theme .site-header .nav li a,
  body.ctl-blog-theme .site-header .nav .menu-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 48px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 16px !important;
    margin: 0 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(8, 120, 164, .06) !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #16323f !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;

    transform: none !important;
  }

  body.ctl-blog-theme .site-header .nav li:last-child > a,
  body.ctl-blog-theme .site-header .nav > a:last-child {
    border-bottom: 0 !important;
  }

  body.ctl-blog-theme .site-header .nav a::after {
    display: none !important;
  }

  body.ctl-blog-theme .site-header .nav a:hover,
  body.ctl-blog-theme .site-header .nav a.is-current-health-hub,
  body.ctl-blog-theme .site-header .nav .current-menu-item > a {
    color: #075b82 !important;
    background: rgba(232, 248, 251, .96) !important;
  }

  body.ctl-blog-theme.mobile-menu-active {
    overflow-x: hidden !important;
  }

  body.ctl-blog-theme.mobile-menu-active::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(9, 43, 57, .18) !important;
    backdrop-filter: blur(2px) !important;
    pointer-events: none !important;
  }

  body.ctl-blog-theme .blog-main,
  body.ctl-blog-theme .blog-hero-section,
  body.ctl-blog-theme .blog-archive-hero,
  body.ctl-blog-theme .single-blog-article {
    padding-top: 118px !important;
  }
}

@media (max-width: 390px) {
  body.ctl-blog-theme .site-header .brand,
  body.ctl-blog-theme .site-header .brand-with-logo {
    flex-basis: 106px !important;
    width: 106px !important;
    max-width: 106px !important;
  }

  body.ctl-blog-theme .site-header .brand-logo,
  body.ctl-blog-theme .site-header .custom-logo,
  body.ctl-blog-theme .site-header .custom-logo-link {
    width: 96px !important;
    max-width: 96px !important;
  }

  body.ctl-blog-theme .site-header .header-actions .btn-primary,
  body.ctl-blog-theme .site-header .btn-primary {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  body.ctl-blog-theme .mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}