/* ============================================================================
   GYNOFEM — PAGE RESPONSIVE STYLES
   ----------------------------------------------------------------------------
   Self-contained responsive rules for this page. Loaded LAST (after the
   page's own <style> block and whatsapp.css) so it can close a small number
   of concrete responsiveness gaps for phone / tablet / laptop / desktop
   without touching the approved design at each breakpoint's own width.

     1. Universal horizontal-overflow guard + media never breaks its box
     2. Hamburger touch target
     3. Nav drawer, unified across the whole <=1024px range (phone AND
        tablet/small-laptop) — the page's own inline styles only build the
        drawer up to 768px, so 769-1024px is left showing the plain
        horizontal nav (7 links + CTA), which does not fit and wraps/
        collides. Rewritten here as a single !important rule spanning
        0-1024px so it reliably wins over the page's own <=768px rule
        instead of depending on the two ranges meeting at an exact seam.
     4. Tap-to-open "Company" / "Products" dropdowns on touch screens
        (pairs with script.js/nav-enhance.js) + "Let's Talk" once it is
        moved into the drawer by that same script.
     5. Products mega-dropdown containment on desktop widths narrower than
        the navbar's 1400px cap (1025px-1399px), where its fixed-pixel
        transform can push it partly off-screen.
     6. Very small phones (<=480px / <=360px) — tighter navbar padding + a
        scaled-down (not distorted) logo so the header never wraps.
     7. Footer — the 4-column footer grid has no breakpoints at all in the
        page's own styles, so it gets crushed into unreadably narrow
        columns on every tablet and phone. Made fluid here.
   ============================================================================ */

/* 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;
  }
}

/* ============================================================================
   8. "COMPANY" / "PRODUCTS" ACTIVE STATE — ONLY WHILE OPEN (<=1024px)
   This previously painted both items in the hover colour permanently on
   touch, on the reasoning that a phone can never show a hover state. That
   was the wrong trade: the two items looked permanently selected even with
   their menus shut. The same treatment is now tied to `.menu-open`, so the
   item picks up the active colour and underline when its dropdown is open
   and drops straight back to the normal nav appearance when it closes.

   The colour is still pulled from whichever custom property this page's own
   hover rule uses — `--pink-dark` on the pages that style the nav inline,
   `--color-text-primary` on the ones served by css/style.css — so it
   matches that page exactly instead of being hard-coded.

   The second block below is the belt-and-braces part: on a touch device a
   tap can leave a stale `:hover` behind on the item, which would otherwise
   keep the page's own `.nav-links a:hover` colour and underline stuck on
   after the menu closes. It is neutralised only where the device genuinely
   cannot hover (`hover: none`), so real mouse/trackpad hover — including a
   touchscreen laptop under 1024px — is left completely alone.
   ============================================================================ */
@media (max-width: 1024px) {
  .nav-dropdown.menu-open > a,
  .nav-dropdown-2.menu-open > a {
    color: var(--pink-dark, var(--color-text-primary, inherit));
  }
  .nav-dropdown.menu-open > a::after,
  .nav-dropdown-2.menu-open > a::after {
    width: 100%;
  }
}

@media (max-width: 1024px) and (hover: none) {
  .nav-links li > a:hover {
    color: var(--text, inherit);
  }
  .nav-links li > a:hover::after {
    width: 0;
  }
  .nav-dropdown.menu-open > a:hover,
  .nav-dropdown-2.menu-open > a:hover {
    color: var(--pink-dark, var(--color-text-primary, inherit));
  }
  .nav-dropdown.menu-open > a:hover::after,
  .nav-dropdown-2.menu-open > a:hover::after {
    width: 100%;
  }
}

/* ============================================================================
   9. TAP-TO-OPEN DROPDOWNS + OPEN/CLOSE ANIMATION (<=1024px)
   Sections 3/4 open and close these two submenus by flipping `display`,
   which cannot be transitioned, so the panels appeared and vanished
   instantly. They are now always rendered at these widths and gated on
   animatable properties instead: closed is a zero-height clipped box that is
   faded out and nudged up 6px, open eases down to full height.

   Two things this has to work around:
   1. Section 3 forces `opacity: 1`, `visibility: visible` and
      `transform: none` on these panels with `!important`. An `!important`
      declaration beats a normal one no matter how specific the normal one
      is, so every closed-state property here has to be `!important` too or
      the panel simply never fades.
   2. The closed state is selected with `:not(.menu-open)` rather than
      being overridden by the open rules. That means the open state does not
      have to restate the panel's padding or margin, so each page's own
      values come back exactly as authored — nothing is hard-coded — and a
      `:hover` left behind by a tap cannot re-open a closed panel, because
      the closed rule keeps matching regardless of hover.
   Vertical padding collapses to 0 while closed as well: `box-sizing` is
   `border-box` here, so with the panel's own 26px padding left in place a
   `max-height: 0` box would still stand 52px tall instead of vanishing.

   `.menu-open` is toggled by script.js/nav-enhance.js, which is itself
   gated to <=1024px. The chevron rotates 180deg while its own menu is open.
   Colours, spacing, typography and the panels' own styling are unchanged,
   and desktop (>1024px) keeps its existing hover animation untouched.
   ============================================================================ */
@media (max-width: 1024px) {
  /* Rendered at all times so there is something to animate. */
  .nav-dropdown > .dropdown-menu {
    display: block !important;
  }
  .nav-dropdown-2 > .dropdown-menu-2 {
    display: flex !important;
  }
  .nav-dropdown > .dropdown-menu,
  .nav-dropdown-2 > .dropdown-menu-2 {
    overflow: hidden !important;
    transition: max-height 0.28s ease, padding-top 0.28s ease,
      padding-bottom 0.28s ease, margin-top 0.28s ease, opacity 0.2s ease,
      transform 0.28s ease, visibility 0.28s;
  }

  /* Closed. */
  .nav-dropdown:not(.menu-open) > .dropdown-menu,
  .nav-dropdown-2:not(.menu-open) > .dropdown-menu-2 {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-6px) !important;
    pointer-events: none !important;
  }

  /* Open — padding and margin intentionally left to the page's own rules. */
  .nav-dropdown.menu-open > .dropdown-menu,
  .nav-dropdown-2.menu-open > .dropdown-menu-2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  .nav-dropdown.menu-open > .dropdown-menu {
    max-height: 220px !important;
  }
  .nav-dropdown-2.menu-open > .dropdown-menu-2 {
    max-height: 1400px !important;
  }

  /* Chevron flips while its menu is open. */
  .nav-dropdown > a .dropdown,
  .nav-dropdown-2 > a .dropdown {
    transition: transform 0.28s ease;
  }
  .nav-dropdown.menu-open > a .dropdown,
  .nav-dropdown-2.menu-open > a .dropdown {
    transform: rotate(180deg);
  }
}

/* Respect a reduced-motion preference: same states, no movement. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .nav-dropdown > .dropdown-menu,
  .nav-dropdown-2 > .dropdown-menu-2,
  .nav-dropdown > a .dropdown,
  .nav-dropdown-2 > a .dropdown {
    transition: none;
  }
}

/* ============================================================================
   10. DROPDOWN CHEVRON ONLY ON THE ITEMS THAT HAVE A DROPDOWN
   "Responsibility", "Investor" and "Careers" each ship the same
   `<span><img class="dropdown"></span>` chevron as "Company" and
   "Products" in the markup, but they have no submenu behind them — so the
   arrow promises an expandable menu that does not exist. Only the two real
   dropdown parents (`.nav-dropdown`, `.nav-dropdown-2`) keep theirs; the
   chevron is hidden on every other nav item. Hiding the whole span (rather
   than just the image) also drops the flex `gap` that sat before it, so
   those labels keep their natural spacing with no gap left behind. Applied
   at every width, since a chevron on an item with no menu is wrong on
   desktop too; no behaviour, colour or type is affected either way.
   ============================================================================ */
.nav-links li:not(.nav-dropdown):not(.nav-dropdown-2) > a > span {
  display: none;
}

/* ============================================================================
   11. PRODUCTS DROPDOWN IMAGERY — DESKTOP-LIKE SIZE ON TOUCH (<=1024px)
   Section 3 shrinks these tiles to `60x55` (and the Vitamin/Calcium pair to
   `34x55`) and turns each `.product-item` into a text row, which at phone
   size leaves the product shots too small to read. Desktop shows them as a
   tile with the image above its label, so the same arrangement is restored
   here: the item goes back to a column and the image spans the panel width
   up to a sensible cap.

   `height: auto` is the important part — the image keeps its own intrinsic
   proportions, so nothing is cropped, stretched or distorted, unlike the
   fixed `60x55` it was being forced into. Desktop keeps its authored
   `237.5x130` / `91x150` sizes untouched, since all of this sits inside
   the <=1024px query.
   ============================================================================ */
@media (max-width: 1024px) {
  .dropdown-menu-2 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .dropdown-menu-2 .product-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }
  .dropdown-menu-2 .product-item img {
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .dropdown-menu-2 .vitamin-calcium-item .vitamin-calcium-images {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 240px;
  }
  .dropdown-menu-2 .vitamin-calcium-item .vitamin-calcium-images img {
    width: 100% !important;
    max-width: 116px !important;
    height: auto !important;
  }
}

/* ============================================================================
   12. PHONE-ONLY SCROLL LOCK BEHIND THE OPEN DRAWER (<=768px)
   With the drawer open the page behind it used to keep scrolling, so a swipe
   moved the content instead of the menu. 768px is the ceiling here on
   purpose: it is the width at which each page's own styles switch to the
   drawer, and section 3's comment treats 769-1024px as tablet/small-laptop,
   which this deliberately leaves alone.

   `.nav-scroll-locked` is put on <html> by script.js/nav-enhance.js while
   the drawer is open on a phone. Both <html> and <body> are locked because
   the scrolling element differs across these pages — three of them carry an
   inline `overflow-y: hidden` on <body>, leaving <html> as the scroller,
   while the rest scroll normally. `overflow: hidden` holds the current
   scroll position rather than resetting it, so nothing jumps on open or
   close; the script pauses Lenis alongside this, because Lenis scrolls by
   assigning scrollTop and that still moves an overflow-hidden element.

   The drawer keeps its own `overflow-y: auto` from section 3 and gains
   `overscroll-behavior: contain`, so scrolling past either end of the menu
   does not chain onward to the page, plus momentum scrolling on iOS. The
   drawer is `position: fixed`, so locking the page cannot affect it.
   ============================================================================ */
@media (max-width: 768px) {
  html.nav-scroll-locked,
  html.nav-scroll-locked body {
    overflow: hidden !important;
  }
  .nav-links {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   13. BREADCRUMB — CURRENT PAGE NAME LARGER THAN THE TRAIL (product pages)
   In "Home > Products > <product>", the product name is now wrapped in
   `.breadcrumb-current` so it can be sized on its own; before, it was a bare
   text node sharing one text node with the last ">", so enlarging it would
   have enlarged the separators too. This one class covers every product
   page — nothing here is specific to any single product.

   The size is in `em`, so it scales off the breadcrumb <h1> it sits in and
   tracks whatever size "Home" and "Products" already have at each width.
   That matters because the trail is not one fixed size: it is 16px on
   desktop (the h1's inline `font-size: medium`), but this page's own hero
   fix forces `.hero-content h1` to 3rem / 2.3rem / 1.7rem `!important` at
   <=1024 / 768 / 480px, and that rule hits the breadcrumb as well. The
   multiplier drops below 1024px because the trail is already about 3x
   larger there, and 1.5x on top of that would overwhelm a tablet or phone.

   "Home" and "Products" are untouched. Font family, weight and colour are
   inherited from the <h1>, so they stay exactly as they were.

   The name is `inline-block` rather than plain inline. As a plain inline
   span it was being split mid-name at tablet widths ("Pregnancy" ending
   one line, "Care" starting the next). An inline-block moves the whole
   name onto the next line when it does not fit beside the trail, and only
   wraps inside itself when it is wider than the full line — so it still
   cannot overflow a narrow phone.
   ============================================================================ */
.breadcrumb-current {
  display: inline-block;
  font-size: 1.5em;
}
@media (max-width: 1024px) {
  .breadcrumb-current {
    font-size: 1.2em;
  }
}

/* ============================================================================
   14. PHONE/TABLET DRAWER — DROP THE DESKTOP 10px NUDGE (<=1024px)
   The nav list carries an inline style="transform: translateX(10px)" that
   nudges the horizontal desktop nav 10px to the right. At <=1024px that same
   element is the fixed slide-in drawer, so the nudge pushed the open drawer
   10px past the right edge of the screen (it measured 85-385px on a 375px
   phone), cutting off its right side. The drawer slides in and out with
   `right`, not `transform`, so removing the transform here leaves the slide
   animation untouched; `!important` is needed only to beat the inline style.
   Desktop (>1024px) keeps its 10px nudge.
   ============================================================================ */
@media (max-width: 1024px) {
  .nav-links {
    transform: none !important;
  }
}

/* ============================================================================
   15. FOOTER LINKS — 20px ON EVERY DEVICE + HOVER / FOCUS EFFECT
   The "Products" and "info" link lists are 20px at every screen size (they
   were 15px, and 14px on index.html). Only the links inside `.footer-column`
   are affected — the phone, hours, email and address text, the "Get in Touch"
   button and back-to-top stay as they were. `.footer` is in the selectors
   purely for specificity, so these win over the page's own footer rules
   regardless of stylesheet order.

   Line-height is 1.5, which keeps each link on the same 30px row spacing the
   original 15px links had with their inherited line-height of 2. At 20px
   even the longest label, "Vitamin/Calcium", is only about 170px wide, so it
   fits its column on the narrowest phones and in the original desktop grid,
   and no footer layout changes are needed at any width.

   Hover is limited to devices that can really hover, so a tap on a phone
   cannot leave a stuck state: the link brightens to full white while an
   underline fades in and slides up toward the text. Keyboard focus shows the
   same state, and reduced-motion users get it without the transition.
   ============================================================================ */
.footer .footer-column a,
.footer .footer-column a p {
  font-size: 20px;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.footer .footer-column a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease,
    text-underline-offset 0.3s ease;
}
@media (hover: hover) {
  .footer .footer-column a:hover,
  .footer .footer-column a:hover p {
    color: #ffffff;
  }
  .footer .footer-column a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.85);
    text-underline-offset: 5px;
  }
}
.footer .footer-column a:focus-visible,
.footer .footer-column a:focus-visible p {
  color: #ffffff;
}
.footer .footer-column a:focus-visible {
  text-decoration-color: rgba(255, 255, 255, 0.85);
  text-underline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .footer .footer-column a,
  .footer .footer-column a p {
    transition: none;
  }
}