/* ============================================================================
   GYNOFEM — SHARED NAVBAR + FOOTER RESPONSIVE RULES
   ----------------------------------------------------------------------------
   Sections 1-7 of every css/responsive/<page>.css file, which are identical on
   all 17 pages, copied into one file for the pages that do not have their own
   responsive file: the blog (blog.html, blog-*.html) and pages made with
   "New page". Keep it in step with those files if the navbar ever changes.

     1. Horizontal-overflow guard      5. Products mega-dropdown containment
     2. Hamburger touch target          6. Very small phones
     3. Nav drawer, 0-1024px            7. Footer - fluid columns
     4. Tap-to-open drop-downs + "Let's Talk" in the drawer
   ============================================================================ */

/* 1. Universal horizontal-overflow guard (safety net, not a fix) */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* 2. Hamburger — guarantee a comfortable ~44x44 touch target */
@media (max-width: 1024px) {
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 2001;
  }
}

/* ============================================================================
   3. NAV DRAWER — UNIFIED 0px – 1024px (!important throughout so this one
   rule is the single source of truth across phone AND tablet, instead of
   relying on this file's tablet range picking up exactly where the page's
   own <=768px rule leaves off)
   ============================================================================ */
@media (max-width: 1024px) {
  .navbar,
  .navbar.scrolled {
    flex-direction: row !important;
    height: auto !important;
  }
  .nav-toggle {
    display: flex !important;
  }
  .nav-actions .nav-cta {
    display: none !important;
  }
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: min(360px, 80%) !important;
    max-width: 320px;
    height: 100vh !important;
    max-height: 100vh;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 96px 40px 40px !important;
    background: #ffffff !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    transition: right 0.4s ease;
    z-index: 2000;
    list-style: none;
  }
  .nav-links.open {
    right: 0 !important;
  }
  .nav-links a {
    font-size: 1.1rem !important;
  }

  .dropdown-menu,
  .dropdown-menu-2 {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
  }
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown-2:hover .dropdown-menu-2 {
    display: flex !important;
  }
  .product-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 8px 4px;
    width: 100%;
  }
  .product-item img {
    width: 60px !important;
    height: 55px !important;
  }
}

/* ============================================================================
   4. TOUCH DROPDOWNS + "LET'S TALK" IN THE DRAWER (<=1024px)
   Works together with script.js/nav-enhance.js, which toggles a
   `.menu-open` class on tap (instead of relying on :hover) and moves the
   `.nav-cta` button into `#navLinks` on these widths.
   ============================================================================ */
@media (max-width: 1024px) {
  .nav-dropdown > a > span,
  .nav-dropdown-2 > a > span {
    display: inline-flex;
    align-items: center;
    padding: 18px;
    margin: -18px;
  }
  .nav-dropdown.menu-open .dropdown-menu {
    display: block !important;
  }
  .nav-dropdown-2.menu-open .dropdown-menu-2 {
    display: flex !important;
  }
  .nav-links .nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
  }
}

/* ============================================================================
   5. PRODUCTS MEGA-DROPDOWN — DESKTOP CONTAINMENT (1025px – 1399px)
   The panel is five 237px product tiles wide, and the page's own styles
   place it with a fixed-pixel transform tuned for 1400px+ screens. This
   rule used to right-align it to the "Products" menu item instead, but the
   panel is far wider than the space to that item's left, so it ran off the
   left edge of the screen: at 1025px none of the five products was fully
   visible and at 1100-1399px only one or two were, leaving the rest
   unclickable. The menu item is now taken out of the positioning chain
   (`position: static`), so the panel is placed against the nav instead —
   the nav list on pages whose list carries a transform, the nav bar
   otherwise — inset 20px each side, with its tiles wrapping onto centred
   rows so every product stays on screen. Hover still carries from the menu
   item into the panel because the panel is part of the same list item.
   1400px and up is untouched.
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1399px) {
  .nav-dropdown-2 {
    position: static;
  }
  .dropdown-menu-2,
  .nav-dropdown-2:hover .dropdown-menu-2 {
    top: 100%;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
}

/* 6. Very small phones — the navbar's own left/right padding is what eats
   into the 320-360px row; the logo is scaled down (height only, never
   distorted) rather than clipped. */
@media (max-width: 480px) {
  .navbar,
  .navbar.scrolled {
    padding-left: 16px;
    padding-right: 16px;
  }
  .gynofem-logo {
    height: 38px;
    width: auto;
  }
}
@media (max-width: 360px) {
  .navbar,
  .navbar.scrolled {
    padding-left: 12px;
    padding-right: 12px;
  }
  .gynofem-logo {
    height: 34px;
  }
}

/* ============================================================================
   7. FOOTER — fluid column count
   ============================================================================ */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}
@media (max-width: 640px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .footer-about,
  .footer-text {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}