/* ============================================================
   VELAZCO HOSPITAL — DYNAMIC ALIGNMENT FIXES
   Load AFTER style.css and mobile-fixes.css
   ============================================================ */

/* ---- 1. NAVBAR HEIGHT SYNC ---- */
/* Navbar is 80px on desktop, 60px on mobile.
   Every "first section" must clear it properly. */
:root {
  --navbar-h: 80px;
  --navbar-h-mobile: 60px;
}

/* ---- 2. HERO SECTION — fix padding-top undercut ---- */
.page-content {
  padding-top: var(--navbar-h); /* was 50px — navbar is 80px */
}

/* ---- 3. HERO FEATURES — remove hardcoded translateX offset ---- */
.hero-features {
  position: static;         /* was relative/absolute with magic offset */
  transform: none;          /* remove translateX(-65%) */
  left: unset;
  bottom: unset;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 30px;
  margin-top: 24px;
  width: 100%;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #52a341;
  font-size: 1rem;
  white-space: nowrap;
}

/* ---- 4. FOOTER CONTAINER — centering & width ---- */
.footer-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;           /* was missing auto centering */
  box-sizing: border-box;
}

/* ---- 5. HOME NEWS SECTION — flex child needs full width ---- */
.home-news-section {
  padding: 30px 20px;       /* was just 30px, no horizontal padding */
}

.home-news-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---- 6. CONTACT SECTION — fix broken margin typo ---- */
.contact-section {
  margin: 0 auto;           /* was "50px 50 px auto" — invalid */
  padding: 20px 5%;
  padding-top: calc(var(--navbar-h) + 20px); /* clear navbar */
}

/* ---- 7. SINGLE HERO / PAGE BANNERS — ensure they don't sit under navbar ---- */
.single-hero,
.news-hero-section,
.hmo-header,
.careers-hero,
.room-charges-hero,
.about-hero {
  margin-top: 0;
  padding-top: calc(var(--navbar-h) + 10px);
  box-sizing: border-box;
}

/* ---- 8. ABOUT HERO BG — make bg image fill properly ---- */
.about-hero-bg {
  background-position: center center; /* was "-2px -10px" */
  background-size: cover;
  width: 100%;
  height: 100%;             /* was "auto" — broke fill */
}

/* ---- 9. ABOUT CONTAINER-ABOUT — prevent h2 ::after overlap ---- */
.about-container-about h2 {
  position: relative;
  padding-bottom: 20px;     /* room for the ::after underline */
  margin-bottom: 40px;      /* was 25px, underline overlapped text below */
}

/* ---- 10. LOCATION TITLE — sticky positioning fix ---- */
.location-title {
  position: sticky;
  top: var(--navbar-h);     /* was hardcoded 80px — now uses variable */
  z-index: 10;
}

/* ---- 11. HMO CONTAINER — negative margin pull-up only on desktop ---- */
.hmo-container,
.room-charges-container {
  margin-top: 0;            /* remove negative margin that breaks on mobile */
  padding-top: 40px;
}

/* ---- 12. TABBED SERVICES — proper top margin on all screen sizes ---- */
.tabbed-services {
  margin-top: calc(var(--navbar-h) + 60px);
  margin-bottom: 80px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ---- 13. DOCTORS CONTAINER — top margin clears navbar ---- */
.container-doctor {
  margin-top: calc(var(--navbar-h) + 5px);
  box-sizing: border-box;
}

/* ---- 14. INQUIRY FORM CONTAINER — remove broken margin value ---- */
.inquiry-form-container {
  margin: 0 auto 0;         /* was "50 auto" — invalid unitless value */
  max-width: 1200px;
  box-sizing: border-box;
}

/* ---- 15. STEPS GRID — prevent overflow on narrow screens ---- */
.steps-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* was 380px min — too wide */
}

/* ============================================================
   MOBILE OVERRIDES (max 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

  /* Sync mobile navbar height variable */
  :root {
    --navbar-h: var(--navbar-h-mobile);
  }

  .page-content {
    padding-top: var(--navbar-h-mobile);
  }

  

  .location-title {
    top: var(--navbar-h-mobile);
    font-size: 28px;
    padding: 10px 20px;
  }

  .tabbed-services {
    margin-top: calc(var(--navbar-h-mobile) + 30px);
  }

  .container-doctor {
    margin-top: calc(var(--navbar-h-mobile) + 5px);
  }

  /* Hero features stack vertically on small screens */
  .hero-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 1rem;
  }

  /* Footer columns — remove excess gap that causes overflow */
  .footer-container {
    gap: 30px;
    padding: 20px 16px 40px;
  }

  /* HMO / room charges — no negative pull-up on mobile */
  .hmo-container,
  .room-charges-container {
    padding-top: 20px;
  }

  /* Inquiry section padding */
  .inquiry-section {
    padding: 1.5rem 14px;
  }

  /* Contact section */
  .contact-section {
    padding-top: 20px;
  }
}

/* ============================================================
   SMALL PHONES (max 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
  .hero-feature-item {
    font-size: 0.9rem;
  }

  .home-divider {
    width: 120px;
  }

  .footer-container {
    gap: 24px;
  }
}

/* ---- SINGLE HERO FIX ---- */
/* single-hero is NOT the first section, 
   it sits below page-content so no navbar clearance needed */

.single-hero {
    margin: 0 !important;
    padding-top: 55 px !important;
    padding-bottom: 45px !important;
    min-height: unset !important;
}

.single-hero .hero-left {
    padding-block: 20px !important; /* was 50px */
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .single-hero {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .single-hero .hero-left {
        padding-block: 15px !important;
    }
}

/* ---- ABOUT PAGE GAP FIX ---- */
.vision-mission-section {
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}

.uc-wrapper {
    margin-top: 0 !important;
}

/* Remove gap between all about sections */
.about-section-abouts {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove gap after uc-wrapper */
section.uc-wrapper {
    margin: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* ============================================================
   VELAZCO HOSPITAL — DYNAMIC ALIGNMENT FIXES
   Load AFTER style.css and mobile-fixes.css
   ============================================================ */

/* ---- 1. NAVBAR HEIGHT SYNC ---- */
/* Navbar is 80px on desktop, 60px on mobile.
   Every "first section" must clear it properly. */
:root {
  --navbar-h: 80px;
  --navbar-h-mobile: 60px;
}

/* ---- 2. HERO SECTION — fix padding-top undercut ---- */
.page-content {
  padding-top: var(--navbar-h); /* was 50px — navbar is 80px */
}

/* ---- 3. HERO FEATURES — remove hardcoded translateX offset ---- */
.hero-features {
  position: static;         /* was relative/absolute with magic offset */
  transform: none;          /* remove translateX(-65%) */
  left: unset;
  bottom: unset;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 30px;
  margin-top: 24px;
  width: 100%;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #52a341;
  font-size: 1rem;
  white-space: nowrap;
}

/* ---- 4. FOOTER CONTAINER — centering & width ---- */
.footer-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;           /* was missing auto centering */
  box-sizing: border-box;
}

/* ---- 5. HOME NEWS SECTION — flex child needs full width ---- */
.home-news-section {
  padding: 30px 20px;       /* was just 30px, no horizontal padding */
}

.home-news-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---- 6. CONTACT SECTION — fix broken margin typo ---- */
.contact-section {
  margin: 0 auto;           /* was "50px 50 px auto" — invalid */
  padding: 20px 5%;
  padding-top: calc(var(--navbar-h) + 20px); /* clear navbar */
}

/* ---- 7. SINGLE HERO / PAGE BANNERS — ensure they don't sit under navbar ---- */
.single-hero,
.news-hero-section,
.hmo-header,
.careers-hero,
.room-charges-hero,
.about-hero {
  margin-top: 0;
  padding-top: calc(var(--navbar-h) + 10px);
  box-sizing: border-box;
}

/* ---- 8. ABOUT HERO BG — make bg image fill properly ---- */
.about-hero-bg {
  background-position: center center; /* was "-2px -10px" */
  background-size: cover;
  width: 100%;
  height: 100%;             /* was "auto" — broke fill */
}

/* ---- 9. ABOUT CONTAINER-ABOUT — prevent h2 ::after overlap ---- */
.about-container-about h2 {
  position: relative;
  padding-bottom: 20px;     /* room for the ::after underline */
  margin-bottom: 40px;      /* was 25px, underline overlapped text below */
}

/* ---- 10. LOCATION TITLE — sticky positioning fix ---- */
.location-title {
  position: sticky;
  top: var(--navbar-h);     /* was hardcoded 80px — now uses variable */
  z-index: 10;
}

/* ---- 11. HMO CONTAINER — negative margin pull-up only on desktop ---- */
.hmo-container,
.room-charges-container {
  margin-top: 0;            /* remove negative margin that breaks on mobile */
  padding-top: 40px;
}

/* ---- 12. TABBED SERVICES — proper top margin on all screen sizes ---- */
.tabbed-services {
  margin-top: calc(var(--navbar-h) + 60px);
  margin-bottom: 80px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ---- 13. DOCTORS CONTAINER — top margin clears navbar ---- */
.container-doctor {
  margin-top: calc(var(--navbar-h) + 20px);
  box-sizing: border-box;
}

/* ---- 14. INQUIRY FORM CONTAINER — remove broken margin value ---- */
.inquiry-form-container {
  margin: 0 auto 0;         /* was "50 auto" — invalid unitless value */
  max-width: 1200px;
  box-sizing: border-box;
}

/* ---- 15. STEPS GRID — prevent overflow on narrow screens ---- */
.steps-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* was 380px min — too wide */
}

/* ============================================================
   MOBILE OVERRIDES (max 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

  /* Sync mobile navbar height variable */
  :root {
    --navbar-h: var(--navbar-h-mobile);
  }

  .page-content {
    padding-top: var(--navbar-h-mobile);
  }

  

  .location-title {
    top: var(--navbar-h-mobile);
    font-size: 28px;
    padding: 10px 20px;
  }

  .tabbed-services {
    margin-top: calc(var(--navbar-h-mobile) + 30px);
  }

  .container-doctor {
    margin-top: calc(var(--navbar-h-mobile) + 10px);
  }

  /* Hero features stack vertically on small screens */
  .hero-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 1rem;
  }

  /* Footer columns — remove excess gap that causes overflow */
  .footer-container {
    gap: 30px;
    padding: 20px 16px 40px;
  }

  /* HMO / room charges — no negative pull-up on mobile */
  .hmo-container,
  .room-charges-container {
    padding-top: 20px;
  }

  /* Inquiry section padding */
  .inquiry-section {
    padding: 1.5rem 14px;
  }

  /* Contact section */
  .contact-section {
    padding-top: 20px;
  }
}

/* ============================================================
   SMALL PHONES (max 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
  .hero-feature-item {
    font-size: 0.9rem;
  }

  .home-divider {
    width: 120px;
  }

  .footer-container {
    gap: 24px;
  }
}

/* ---- SINGLE HERO FIX ---- */
/* single-hero is NOT the first section, 
   it sits below page-content so no navbar clearance needed */

.single-hero {
    margin: 0 !important;
    padding-top: 55 px !important;
    padding-bottom: 45px !important;
    min-height: unset !important;
}

.single-hero .hero-left {
    padding-block: 20px !important; /* was 50px */
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .single-hero {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .single-hero .hero-left {
        padding-block: 15px !important;
    }
}

/* ---- ABOUT PAGE GAP FIX ---- */
.vision-mission-section {
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}

.uc-wrapper {
    margin-top: 0 !important;
}

/* Remove gap between all about sections */
.about-section-abouts {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove gap after uc-wrapper */
section.uc-wrapper {
    margin: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}