/* ============================================
   Responsive Design - Media Queries
   ============================================ */

/* ============================================
   MOBILE HAMBURGER MENU (< 1024px)
   ============================================ */
@media (max-width: 1023px) {
  /* Mobile menu panel - slides from top to match live site RMP plugin */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;
    height: 100vh;
    background-color: var(--color-bg-nav);
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 99998;
    overflow-y: auto;
  }

  /* Mobile logo title area at top of menu
     Natural ratio 350:248. Fill header height (115px total),
     minimal padding so logo is as tall as possible.
     100px height → width = 100 × 350/248 = 141px.
     Padding 8+7=15px → total 115px, same first-item position. */
  .mobile-menu-logo {
    display: block;
    padding: 8px 0 7px;
    width: 141px;
    height: 100px;
    align-self: center;
  }

  .nav-menu a {
    padding: 0 54px 0 14px;
    border-bottom: 1px solid rgb(33, 33, 33);
    font-family: var(--font-family-content);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-white);
    background-color: rgb(67, 73, 76);
    line-height: 44px;
    text-align: start;
    display: block;
    white-space: nowrap;
    border-top: none;
    margin-inline-end: 0;
  }

  /* Show hamburger button */
  .hamburger-label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 5px;
    right: 1%;
    width: 26px;
    height: 26px;
    background-color: var(--color-hamburger-bg);
    border-radius: 5px;
    cursor: pointer;
    z-index: 999999;
    transition: background-color var(--transition-speed);
  }

  .hamburger-label:hover {
    background-color: #000;
  }

  /* Hamburger icon lines */
  .hamburger-icon {
    display: block;
    width: 15px;
    height: 2px;
    background-color: var(--color-text-white);
    position: relative;
  }

  .hamburger-icon::before,
  .hamburger-icon::after {
    content: '';
    display: block;
    width: 15px;
    height: 2px;
    background-color: var(--color-text-white);
    position: absolute;
    left: 0;
  }

  .hamburger-icon::before {
    top: -5px;
  }

  .hamburger-icon::after {
    top: 5px;
  }

  /* Menu open state - slides down from top */
  .menu-toggle-input:checked ~ .nav-menu {
    transform: translateY(0);
  }

  .menu-toggle-input:checked ~ .menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99997;
  }

  /* Close menu on overlay click */
  .menu-overlay {
    display: none;
  }

  /* Hide desktop logo, show in menu panel instead */
  .site-logo {
    display: none;
  }

  /* Lang switch in mobile menu */
  .nav-menu .lang-switch {
    padding: 0 54px 0 14px;
    border-bottom: 1px solid rgb(33, 33, 33);
    line-height: 44px;
    display: block;
  }

  /* Mobile: header is an invisible container for fixed hamburger/menu.
     CRITICAL: transform: none prevents the header from creating a
     containing block that breaks position:fixed on children. */
  .site-header,
  .site-header.is-visible,
  .site-header.is-sticky {
    position: relative;
    transform: none;
    height: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
    padding: 0;
  }

  /* Don't apply desktop sticky nav shrink on mobile */
  .site-header.is-sticky .nav-menu a {
    padding: 0 54px 0 14px;
    line-height: 44px;
  }

  /* Hide the header rainbow strip on mobile — intro section has its own */
  .site-header::after {
    display: none;
  }

  .nav-container {
    padding: 0;
    min-height: 0;
  }

  /* RTL hamburger stays on right */
  [dir="rtl"] .hamburger-label {
    right: 1%;
    left: auto;
  }

  /* RTL: menu opens from right side (same side as hamburger button) */
  [dir="rtl"] .nav-menu {
    left: auto;
    right: 0;
    transform: translateY(-100%);
    flex-direction: column;
  }

  [dir="rtl"] .menu-toggle-input:checked ~ .nav-menu {
    transform: translateY(0);
  }

  /* EN (LTR): menu opens on the right side (burger button is on the right) */
  html[lang="en"] .nav-menu {
    left: auto;
    right: 0;
  }

  /* === MOBILE BOTTOM BAR (< 1024px) === */
  /* Live site: fixed bar at bottom, height 37px, gradient bg, z-index 999999.
     Contains 3 links: Facebook, Email, Phone with icons. */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 37px;
    background: linear-gradient(rgb(255, 255, 255) 35%, rgb(215, 215, 215) 80%);
    z-index: 999999;
    align-items: center;
    justify-content: space-around;
  }

  .bottom-bar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #333;
    text-decoration: none;
    border: none;
  }

  .bottom-bar-btn svg {
    width: 22px;
    height: 22px;
  }

  /* === GENERAL MOBILE LAYOUT (< 1024px) === */

  .hero {
    min-height: 60vh;
  }

  /* On mobile/tablet: hide video, show animated GIF */
  .hero-video {
    display: none;
  }

  .hero-gif {
    display: block;
  }

  /* Disable parallax on mobile for performance */
  .quote-section {
    background-attachment: scroll;
  }

  /* IMPORTANT: Live site does NOT reduce font sizes on mobile.
     Keep desktop sizes — text wraps naturally on smaller screens. */

  .three-col {
    flex-wrap: wrap;
  }

  .three-col .col {
    flex: 1 1 45%;
    min-width: 250px;
  }
}

/* ============================================
   LARGE MOBILE / SMALL TABLET (641px - 800px)
   ============================================ */
@media (max-width: 800px) {
  .vip-section .two-col,
  .two-col-section .two-col,
  .newborn-section .two-col {
    flex-direction: column;
  }

  .about-section .about-content {
    width: 100%;
    text-align: start;
  }

  .newborn-section .col-text {
    flex: 1;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 80px 15px;
  }

  /* Newborn/bilirubin: text first, then image on mobile (matching live site) */
  .newborn-section .col-image {
    flex: initial;
    width: 100%;
  }

  /* Reset sleep section for mobile */
  .sleep-section .col-text {
    width: 100%;
    margin-inline-start: 0;
    padding: 0;
  }

  .sleep-section .col-text .sleep-text-inner {
    padding: 20px 15px;
  }

  .sleep-section .two-col .col-image {
    position: static;
    width: 100%;
  }

  .sleep-section .two-col .col-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* EN VIP section: At ≤800px, live site uses 20px service text with blocks floating left.
     (At ≤500px, these are further overridden to 16px / 150px blocks.) */
  html[lang="en"] .vip-service {
    font-size: 20px;
    line-height: 24px;
    padding-top: 22px;
    padding-bottom: 20px;
    margin: 0 0 30px;
  }

  html[lang="en"] .vip-illustration {
    float: left;
    max-width: 230px;
    margin: -20px -40px 0 0;
  }

  /* Reset nurse section for mobile */
  .nurse-section .nurse-col-text {
    width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 20px 15px;
  }

  .nurse-section--he .nurse-col-text {
    margin-top: 0;
    margin-bottom: 0;
  }

  .nurse-section .nurse-col-image {
    position: static;
    width: 100%;
  }

  .nurse-section .nurse-col-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
    left: auto;
  }

  .nurse-section .nurse-bottom-row {
    padding: 40px 15px 60px;
  }

  .nurse-section .nurse-col-text {
    padding: 40px 15px;
  }

  .nurse-section .nurse-col-text h3 {
    margin: 36px 0;
  }

  .nurse-section--he .nurse-bottom-row,
  .nurse-section--en .nurse-bottom-row {
    margin-bottom: 0;
  }

  .about-section .about-photo {
    margin: 0 auto 20px;
  }

  .two-col-section .col-image {
    order: -1;
  }

  /* VIP section: At 500-800px, the live site uses desktop-size image (298px)
     and desktop font (36px), but with reduced padding-bottom (~36px vs 50px desktop).
     This keeps service text heights aligned with cube centers. */
  .vip-service {
    padding-bottom: 36px;
  }

  .three-col {
    flex-direction: column;
    gap: 10px;
  }

  .three-col .col {
    flex: 1 1 100%;
    width: 100%;
    margin-inline-start: 0;
  }

  /* Show mobile images, hide desktop */
  .desktop-only-img {
    display: none;
  }

  .mobile-only-img {
    display: block;
  }

  /* Intro section: match live site's vertical centering within taller row */
  .intro-section {
    padding: 120px 15px;
  }

  .intro-two-col {
    flex-direction: column;
  }

  .intro-col-text {
    flex: 1;
    margin-inline-start: 0;
  }

  .intro-col-image {
    display: none;
  }

  .intro-section p {
    font-size: 38px;
    line-height: 60px;
    max-width: 100%;
  }

  /* EN intro: live site uses 21px/29px, much smaller than HE (almoni-tzar at 38px).
     Also reduce padding from 120px to match live site's compact layout. */
  html[lang="en"] .intro-section {
    padding: 20px 15px;
  }

  html[lang="en"] .intro-section p {
    font-size: 21px;
    line-height: 29px;
    font-weight: 400;
    margin-top: 10px;
  }

  /* Quote sections: match live site mobile padding */
  .quote-section {
    padding: 19px 15px;
  }

  .quote-section blockquote {
    font-size: 24px;
    line-height: 30px;
  }

  /* EN quotes on mobile: 20px/22.6px, padding ~16px */
  html[lang="en"] .quote-section {
    padding: 16px 15px;
  }

  html[lang="en"] .quote-section blockquote {
    font-size: 20px;
    line-height: 22.6px;
  }

  html[lang="en"] .quote-section cite {
    font-size: 20px;
    line-height: 22.6px;
  }

  /* Constrain images on mobile */
  .newborn-section .col-image img {
    max-width: 100%;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  }

  .contact-col-image {
    position: static;
    width: 100%;
    margin-inline-start: 0;
    text-align: center;
  }

  .contact-col-image .cta-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
  }

  .contact-col-text {
    width: 100%;
    max-width: 100%;
    margin-inline-start: 0;
    min-height: auto;
    text-align: center;
  }

  /* About section on mobile: use flex to reorder children so girl image
     appears below text (image is before section-inner in HTML).
     Live site shows whogirl at full width below text. */
  .about-section {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .about-section .about-decorative {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    order: 1; /* Push image after section-inner (text) */
  }

  /* About: reduced bottom padding since girl image now fills the space */
  .about-section .about-content {
    width: 100%;
    padding: 0 20px 20px;
  }

  /* EN About: needs equal left/right padding on mobile (live site has ~20px each side) */
  html[lang="en"] .about-section .about-content {
    padding: 0 20px 20px;
  }

  /* EN About: remove desktop h2 left padding on mobile (live site has 0 padding) */
  html[lang="en"] .about-section h2 {
    padding: 0;
  }

  /* EN About: wrapper width should match photo (150px) so float footprint matches live (165px total) */
  html[lang="en"] .about-section .about-photo-wrapper {
    width: 150px;
  }

  /* EN About: override desktop decorative image styles for mobile.
     Desktop EN sets width:auto/height:100%/max-width:none for absolute positioning.
     Mobile needs contained sizing like the live Avada site.
     Live image caps at natural 526px; on narrow screens scales to fit viewport. */
  html[lang="en"] .about-section .about-decorative {
    width: 100%;
    max-width: 526px;
    height: auto;
    align-self: flex-end;
  }

  .about-section .section-inner {
    padding: 120px 0 0;
  }

  .about-section .about-photo-wrapper {
    float: right;
    margin: 0 0 10px 15px;
  }

  /* Reset sleep image column on mobile */
  .sleep-section .two-col .col-image {
    position: static;
  }

  .testimonials-col-text {
    width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 20px 15px;
  }

  .testimonials-col-image {
    position: static;
    width: 100%;
  }

  .testimonials-col-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .testimonials-section {
    padding-bottom: 20px;
  }

  .contact-links {
    flex-direction: column;
    align-items: center;
  }

  .contact-link {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ============================================
   NARROW MOBILE VIP (≤ 500px)
   Live site switches to small blocks image (210px) below ~500px.
   Above 500px, the desktop VIP styles (298px image, 36px font) apply.
   ============================================ */
@media (max-width: 500px) {
  /* Smaller blocks image for narrow screens.
     Live: 210px wide, margin: -20px 0 0 -40px at 375px.
     The -40px left margin reduces float footprint, giving text ~165px
     of horizontal space, reducing wrapping so service text heights
     match cube heights for vertical alignment. */
  .vip-illustration {
    float: right;
    margin: -20px 0 0 -40px;
    max-width: 210px;
  }

  /* VIP service items: match live site narrow-mobile typography.
     Live at 375px: font-size 26px, line-height 24px, margin 0 0 30px, padding-bottom 20px */
  .vip-service {
    font-size: 26px;
    line-height: 24px;
    margin: 0 0 30px;
    padding-bottom: 20px;
  }

  /* EN VIP: live EN uses 16px for service headings on mobile, 150px image floats left.
     padding: 22px 0 20px, margin: 0 0 30px */
  html[lang="en"] .vip-service {
    font-size: 16px;
    line-height: 24px;
    padding-top: 22px;
    padding-bottom: 20px;
    margin: 0 0 30px;
  }

  html[lang="en"] .vip-illustration {
    float: left;
    max-width: 150px;
    margin: -20px -40px 0 0;
  }
}

/* ============================================
   SMALL MOBILE (≤ 640px)
   ============================================ */
@media (max-width: 640px) {
  .hero {
    min-height: 40vh;
  }

  .nurse-section {
    min-height: auto;
  }

  /* EN nurse section is hidden below ~700px on the live Avada site.
     Live data: hidden at 640px, visible at 700px. */
  html[lang="en"] .nurse-section {
    display: none;
  }

  /* Don't reduce image further on small mobile — keep 210px like live site */

  .contact-col-image .cta-image {
    max-width: 200px;
  }

  .footer-logo {
    max-width: 180px;
  }

  .video-container {
    max-width: 100%;
  }
}

/* ============================================
   DESKTOP ENHANCEMENTS (≥ 1024px)
   ============================================ */
@media (min-width: 1024px) {
  .mobile-menu-logo {
    display: none;
  }

  /* Ensure hamburger is hidden on desktop */
  .hamburger-label {
    display: none !important;
  }

  .menu-overlay {
    display: none !important;
  }
}