/* ==========================================================================
   RHAC - Clinic Look (Overrides)
   - Keep brand green header/footer
   - Modern “clinical” UI for sections, hero, cards, CTAs
   ========================================================================== */

:root{
  /* keep your brand green for header/footer from base file */
  /* new accent set (cool clinic blues + neutrals) */
  --clinic-accent-1:#1e96ff;
  --clinic-accent-2:#0072ff;
  --clinic-accent-3:#0063d2;
  --clinic-surface:#f7fafc;
  --clinic-card:#ffffff;
  --clinic-stroke:#e6edf3;
  --clinic-shadow:0 10px 30px rgba(17,24,39,.08);
  --clinic-shadow-lg:0 22px 60px rgba(17,24,39,.10);

  /* geometry */
  --r-2xl:24px;
  --r-xl:18px;
  --r-lg:14px;
}

/* --------------------------------------------------------------------------
   Global polish (spacing + section chrome)
   -------------------------------------------------------------------------- */
body.rhac-theme{
  background: var(--clinic-surface);
}

.container{
  max-width: 1320px;  /* a bit wider for the premium feel */
}

.medical-theme-home .homepage-section{
  padding: clamp(28px, 5vw, 56px) 0;
}

.section-title{
  letter-spacing:.2px;
}

/* a slim underline using clinic accent (keeps your typography) */
.medical-theme-home .section-title::after{
  width:64px; height:3px;
  background: linear-gradient(90deg,var(--clinic-accent-1),var(--clinic-accent-2));
  border-radius:3px;
}

/* --------------------------------------------------------------------------
   HERO (full-bleed) – keep existing structure; refine the look
   -------------------------------------------------------------------------- */
.hero-fullbleed .hero-slider{ height: clamp(480px, 60vw, 720px) }

.hero-slide-overlay{
  /* slightly cooler cast */
  background:
    radial-gradient(120% 120% at 20% 50%, rgba(0,20,60,.30) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 42%);
}

/* white chevron arrows you asked for earlier */
.hero-nav{ width:74px; height:74px; background:transparent; border:0; padding:0 }
.hero-nav::before{
  content:""; display:block; width:28px; height:28px;
  border-top:4px solid #fff; border-right:4px solid #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.hero-prev{ left:10px } .hero-prev::before{ transform:rotate(-135deg) }
.hero-next{ right:10px } .hero-next::before{ transform:rotate(45deg) }
@media (max-width:640px){
  .hero-nav{ width:60px; height:60px }
  .hero-nav::before{ width:22px; height:22px; border-width:3px }
  .hero-prev{ left:6px } .hero-next{ right:6px }
}

/* pagination bullets: crisp white */
.hero-pagination .swiper-pagination-bullet{ background:#fff; opacity:.55 }
.hero-pagination .swiper-pagination-bullet-active{ opacity:1; transform:scale(1.2) }

/* --------------------------------------------------------------------------
   Floating CTA strip – glass with blue “Contact” tile (like your reference)
   -------------------------------------------------------------------------- */
.hero-cta-strip{
  border-radius: var(--r-2xl);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}
.cta-tile{
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  padding: 22px 28px 20px 28px;
  border-right: 1px solid rgba(255,255,255,.28);
}
.cta-tile:last-child{ border-right:0 }
.cta-tile:hover{ background: rgba(255,255,255,.22) }

.cta-tile.cta-contact{
  color:#fff;
  background: linear-gradient(135deg, var(--clinic-accent-1) 0%, var(--clinic-accent-2) 60%, var(--clinic-accent-3) 100%);
}
.cta-go{ background: rgba(255,255,255,.22) }
.cta-contact .cta-go{ background: rgba(255,255,255,.16); color:#fff }

/* --------------------------------------------------------------------------
   Cards (services/news/clinic) – big radius, subtle border, premium shadow
   -------------------------------------------------------------------------- */
.services-section .service-item,
.news-card,
.clinic-card-compact{
  border-radius: var(--r-xl);
  border: 1px solid var(--clinic-stroke);
  box-shadow: var(--clinic-shadow);
}

/* hover lift */
@media (hover:hover){
  .services-section .service-item:hover,
  .news-card:hover,
  .clinic-card-compact:hover{
    transform: translateY(-3px);
    box-shadow: var(--clinic-shadow-lg);
  }
}

/* Services slider – tighter framing + icon style */
.homepage-services-slider .swiper-slide{ width: 320px }
.services-section .service-icon{
  color: var(--clinic-accent-2);
}
.homepage-services-slider .swiper-slide-active .service-item{
  border: 1px solid transparent;
  box-shadow: var(--clinic-shadow-lg);
  outline: 2px solid rgba(30,150,255,.12);
}

/* News cards – more visual weight on image */
.news-card img{ height: 200px; object-fit: cover }
.news-card h4{ font-weight:800 }

/* Clinic compact card – crisp list feel */
.clinic-card-compact{
  border: 1px solid var(--clinic-stroke);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn, .hero-cta{
  border-radius: var(--r-lg);
  box-shadow: var(--clinic-shadow);
}
.btn-primary{
  background: linear-gradient(90deg,var(--clinic-accent-1),var(--clinic-accent-2));
  border:0; color:#fff;
}
.btn-ghost{
  background:#fff; border:1px solid var(--clinic-stroke); color:#0b2d1f;
}
.btn-primary:hover{ filter: brightness(1.05) }
.btn-ghost:hover{ background:#f9fbff }

/* --------------------------------------------------------------------------
   Search overlay & Call modal – small finesse
   -------------------------------------------------------------------------- */
.rhac-search-panel{ border-radius: var(--r-xl); box-shadow: var(--clinic-shadow-lg) }
.call-modal{ border-radius: var(--r-xl); box-shadow: var(--clinic-shadow-lg) }
.call-option{ border-radius: var(--r-lg) }

/* --------------------------------------------------------------------------
   Keep header/footer exactly as your brand (no overrides here)
   -------------------------------------------------------------------------- */
/* intentionally empty – header/footer colors come from custom-styles.css */
/* === SHRINK HERO HEIGHT === */
.hero-slider-section.hero-fullbleed .hero-slider{
  /* desktop: shorter than before */
  height: clamp(320px, 40vw, 540px);
}

/* tablet */
@media (max-width: 1024px){
  .hero-slider-section.hero-fullbleed .hero-slider{
    height: clamp(280px, 46vw, 420px);
  }
}

/* mobile — keep it compact */
@media (max-width: 640px){
  .hero-slider-section.hero-fullbleed .hero-slider{
    height: 240px;
  }
  /* if the CTA strip overlaps too much on small screens, drop it below the hero */
  .hero-slider-section.hero-fullbleed .hero-cta-strip{
    position: static;
    transform: none;
    width: 100%;
    margin: 10px auto 0;
    box-shadow: var(--shadow-lg);
  }
}

/* keep arrows/pagination in a nice spot on the new height */
.hero-slider-section.hero-fullbleed .hero-prev{ left: 10px }
.hero-slider-section.hero-fullbleed .hero-next{ right: 10px }
.hero-slider-section.hero-fullbleed .hero-pagination{
  bottom: 10px;
}
/* ===============================
   Locations page – 2-column grid
   =============================== */

/* The grid that wraps all cards */
.location-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: clamp(12px, 2vw, 22px);
}

/* Individual card: image left, details right */
.location-card{
  display: grid;
  grid-template-columns: 340px 1fr;               /* image | details */
  align-items: stretch;
  background: #fff;
  border: 1px solid #e7efe9;
  border-radius: 16px;
  box-shadow:
    rgba(50,50,93,.08) 0 8px 20px -6px,
    rgba(0,0,0,.06) 0 6px 14px -6px;
  overflow: hidden;                                /* keep corners clean */
}

/* Image column */
.location-image-wrapper{
  height: 260px;
  overflow: hidden;
}
.location-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Details column */
.location-details-wrapper{
  padding: clamp(14px, 2.2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.location-details-wrapper h3{
  margin: 0 0 6px;
  font-weight: 800;
  color: #1c2f24;
}

/* Meta rows */
.location-info .detail-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 6px;
  color: #475a52;
  line-height: 1.5;
}
.location-info .detail-item i{
  color: var(--rhac-primary-color, #009245);
  margin-top: 2px;
  min-width: 18px;
  text-align: center;
}

/* Maps button sticks to bottom-left of the details column */
.location-details-wrapper .clinic-map-link{
  margin-top: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .location-card{ grid-template-columns: 300px 1fr; }
}
@media (max-width: 900px){
  /* 1 column grid on smaller screens */
  .location-grid{ grid-template-columns: 1fr; }

  /* Card becomes vertical: image on top */
  .location-card{ grid-template-columns: 1fr; }
  .location-image-wrapper{
    height: 220px;
  }
}
@media (max-width: 560px){
  .location-image-wrapper{ height: 200px; }
}
/* ===== Locations page header: Battambang + brand green, smaller ===== */
.location-page-header{
  text-align: center;
  max-width: 980px;
  margin: 0 auto clamp(16px, 3vw, 26px);
  padding: clamp(6px, 1vw, 12px) 0;
}

.location-page-header h1{
  margin: 0 0 6px;
  /* Khmer-friendly font */
  font-family: 'Battambang', system-ui, -apple-system, sans-serif;
  font-weight: 800;                              /* bold like screenshot */
  font-size: clamp(26px, 3.6vw, 40px);          /* ↓ slightly smaller */
  line-height: 1.15;
  color: var(--rhac-primary-color);             /* brand green */
  letter-spacing: .2px;
}

.location-page-header p{
  margin: 0 auto;
  max-width: 900px;
  font-family: 'Battambang', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-style: italic;                            /* like your example */
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1.55;
  /* a slightly deeper green for contrast; adjust if you prefer */
  color: #0b7f49;                                /* or keep var(--rhac-primary-color) */
}
/* Color only the Locations title */
.location-page-header h1{
  color: var(--rhac-primary-color) !important; /* or replace with a hex color */
}

/* (Optional) make sure the subtitle keeps a neutral color */
.location-page-header p{
  color: #333; /* adjust to taste or remove this if you prefer your current color */
}
/* More top space for the locations page header */
.location-page-header{
  margin-top: clamp(40px, 6vw, 80px); /* ~40–80px depending on screen */
}
/* Khmer Siemreap for the card titles */
.location-details-wrapper h3{
  font-family: 'Siemreap', 'Battambang', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.25;
}
/* Telegram brand accent for the icon */
.detail-item .tg-icon{
  color: #229ED9;         /* Telegram blue */
  font-size: 1.05rem;
}

/* optional: ensure spacing matches your existing rows */
.detail-item{
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.detail-item a{
  color: #0b2d1f;
  text-decoration: none;
  font-weight: 700;
}
.detail-item a:hover{
  text-decoration: underline;
}
/* --- Locations: card layout + title size --- */

/* Give details more room; image a bit narrower */
.location-card{
  /* previously ~340–360px for the image; this keeps it responsive but smaller */
  display: grid;
  grid-template-columns: clamp(260px, 28vw, 330px) 1fr; /* image | details */
  align-items: start;
}

/* Shrink the clinic name (h3) */
.location-details-wrapper h3{
  font-family: 'Siemreap','Battambang','Open Sans',sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);   /* ↓ smaller than before */
  line-height: 1.25;
  margin: 0 0 .4rem;
}

/* Make address/phone wrap nicely within the wider details area */
.location-details-wrapper .location-info{
  max-width: 100%;
}

/* On small screens, keep it single-column as before */
@media (max-width: 720px){
  .location-card{
    grid-template-columns: 1fr; /* stack image above details */
  }
}
/* Tighter top spacing for the Locations page header */
.location-page-background .location-page-header{
  margin-top: clamp(8px, 1.2vw, 14px);  /* ↓ decreased from earlier value */
  margin-bottom: clamp(18px, 2.4vw, 28px); /* keep a little space below */
}

/* Put in theme-clinic.css */
body.rhac-theme { font-family: 'Battambang','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
body.rhac-theme.lang-km { font-family: 'Battambang','Siemreap','Open Sans',sans-serif; }