/*
Theme Name: RKZ Hospital Theme
Theme URI: https://rkzsurabaya.com/
Author: TEMAN AKUN
Author URI: mailto:temanakun335@gmail.com
Description: Custom theme RKZ Surabaya dengan hero full-bleed, komponen Bootstrap, dan template halaman rumah sakit.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rkz
Tags: hospital, bootstrap, responsive, custom-template
*/

/* Optional but recommended */
@charset "UTF-8";

/* ====== ROOT VARS (opsional, sesuaikan jika perlu) ====== */
:root{
  --primary:#0f6a48;
  --primary-dark:#0d4e39;
  --accent:#0ea5e9;
  --ink:#0f172a;
}

/* ====== HERO FULL-BLEED — KUAT DI MOBILE & iOS SAFARI ====== */
/* Wrapper hero, tidak ada lengkungan di tepi */
.hero-bleed{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0 !important;     /* pastikan tidak melengkung */
  background-color: #0b1726;       /* fallback warna saat gambar belum muncul */
}

/* Container tinggi hero (dikunci di container, bukan di img) */
.hero-holder{
  position: relative;
  min-height: 72vh;                /* desktop/tablet default */
}

/* Gambar utama menutup penuh layar */
.hero-bleed .hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;     /* atur fokus subjek gambar */
  border-radius: 0 !important;
}

/* Overlay gelap agar teks kontras */
.hero-bleed .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  pointer-events: none;
}

/* Konten di atas gambar */
.hero-bleed .overlay-content{
  position: relative;              /* jangan absolute agar tinggi mengikuti .hero-holder */
  z-index: 2;
  display: block;
}

/* Warna teks & badge di atas hero */
.hero-bleed .hero-text,
.hero-bleed .hero-text *{
  color: #fff;
}
.hero-bleed .badge{
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 6px 20px rgba(14,165,233,.25);
}

/* ====== LAYOUT UMUM ====== */
/* Jika navbar fixed-top, beri offset aman */
@media (max-width: 576px){
  body{ padding-top: 76px; }
}

/* ====== RESPONSIVE TWEAKS ====== */
/* Mobile: bikin hero lebih tinggi dan gunakan unit viewport modern */
@media (max-width: 576px){
  .hero-holder{ min-height: 90vh; }
  /* Prefer unit stabil agar aman dari toolbar iOS/Android */
  @supports (height: 100svh){
    .hero-holder{ min-height: 90svh; }
  }
  @supports (height: 100dvh){
    .hero-holder{ min-height: 90dvh; }
  }

  /* Spasi vertikal konten agar tidak mepet notch/bottom bar */
  .hero-bleed .overlay-content .container{
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: 28px;
  }

  /* Tipografi hero di HP */
  .hero-bleed .hero-text .display-5{
    font-size: 1.9rem;
    line-height: 1.2;
    margin-bottom: .75rem;
  }
  .hero-bleed .hero-text .lead{
    font-size: 1rem;
  }
}

/* Tablet: sedikit lebih tinggi dari desktop default */
@media (min-width: 577px) and (max-width: 991.98px){
  .hero-holder{ min-height: 78vh; }
}

/* Desktop besar: biarkan proporsional, tapi jangan terlalu pendek */
@media (min-width: 992px){
  .hero-holder{ min-height: clamp(560px, 72vh, 820px); }
}

/* ====== OPSIONAL FALLBACK: jika <img> tidak tampil, tetap ada background */
/* Gunakan inline style di wrapper (HTML) seperti:
   <div class="hero-bleed" style="background-image:url('.../hero.jpg');background-size:cover;background-position:center 40%">
   Ini akan menjadi cadangan bila gambar gagal render/lazy. */