/* Custom styles for Wilayah 2 Competition */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --primary:#0d6efd;
  --muted:#6c757d;
  --navbar-height: 60px;
}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
  background: #f8fafc;
}
/* Prevent horizontal scroll when using full-bleed elements */
html, body { overflow-x: hidden; }
.site-header{
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}
.navbar-brand{
  font-weight:700;
  letter-spacing: .4px;
}
.hero{
  background-image: linear-gradient(0deg, rgba(3,37,65,0.55), rgba(3,37,65,0.22)), url('<?= base_url($settings['hero_image'] ?? 'public/assets/img/hero-bg.jpg') ?>');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0 0 40px 0;
  /* hero height: fill viewport under the fixed navbar so content centers correctly */
  height: calc(100vh - var(--navbar-height));
  min-height: calc(80vh - var(--navbar-height));
  position: relative;
  color: #fff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  padding-top: 0;
}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(3,37,65,0.45), rgba(3,37,65,0.15));z-index:2 !important;}
.hero h1{
  font-size: 4rem;
  font-weight:800;
  margin-bottom: .5rem;
  line-height:1.02;
  text-align:center !important;
  width:100% !important;
  color:#fff !important;
  position:relative;
  z-index:100 !important;
}
.hero p,
.hero .lead{
  color: rgba(255,255,255,0.95) !important;
  font-size:1.05rem;
  text-align:center !important;
  width:100% !important;
  position:relative;
  z-index:100 !important;
}
.hero .d-flex{
  position:relative;
  z-index:100 !important;
}
.hero .btn{
  position:relative;
  z-index:100 !important;
}
.card-modern{
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(18,38,63,0.06);
}
.section-title{font-weight:700;margin-bottom:1rem}
.footer{
  padding: 2rem 0; background:#fff; border-top:1px solid #e9ecef; margin-top:3rem;
}
.btn-primary{
  background:var(--primary); border-color:var(--primary);
}
.muted{color:var(--muted)}

/* Logo */
.navbar-brand img{height:36px;margin-right:10px}

/* Brand pill (left small badge) */
.brand-pill{background:var(--primary);color:#fff;padding:.28rem .6rem;border-radius:10px;font-weight:700;margin-right:10px;display:inline-block;font-size:.9rem}
.brand-title{font-weight:700}

/* Buttons tweaks for hero */
.btn-primary{background:var(--primary); border-color:var(--primary);border-radius:8px}
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,0.6)}
.btn-outline-light:hover{background:rgba(255,255,255,0.06)}

/* Make the right card sticky like in the design */
.sidebar-card{position:sticky;top:120px}

/* Hero content wrapper - custom class for full control */
.hero-content{
  max-width:760px !important;
  padding:0 20px !important;
  position:relative;
  z-index:100 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 auto !important;
  width: 100% !important;
}

/* Hero buttons wrapper */
.hero-buttons{
  display:flex !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:0.5rem !important;
  margin-top:1rem !important;
  position:relative;
  z-index:100 !important;
}

.tulisan_hero {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1000 !important;
  padding: 0 20px !important;
  display: block !important;
}

.tulisan_hero h1 {
  font-size: 4rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.tulisan_hero p {
  font-size: 1.25rem !important;
  color: rgba(255,255,255,1) !important;
  margin-bottom: 2rem !important;
  display: block !important;
}

@media (max-width: 768px) {
  .tulisan_hero h1 {
    font-size: 2.5rem;
  }
}
}

/* Legacy support for container/container-fluid in hero */
.hero .container,
.hero .container-fluid{
  max-width:760px !important;
  padding:0 20px !important;
  position:relative;
  z-index:100 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width: 100% !important;
}

.hero .container-fluid > *,
.hero .container > * {
  position:relative;
  z-index:100 !important;
}

/* Actual image element to cover hero area (fallback / easier control) */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1 !important;pointer-events:none}

@media (max-width: 991px){
  .hero{height: 70vh; min-height: 60vh}
  .hero .container{padding-top:18px}
  .hero h1{font-size:2.4rem}
}

@media (max-width: 767px){
  .hero .container{padding-top:20px}
  .hero h1{font-size:2.2rem}
}

/* Make hero full-bleed across the viewport while keeping content centered */
.hero{
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
}

/* ensure overlay covers full-bleed hero */
.hero .overlay{position:absolute;inset:0}

/* Footer */
.site-footer{background:#0f1724;color:#e6eef8;padding:40px 0}
.site-footer a{color:#cfe8ff}
.site-footer .social a{display:inline-block;margin-right:12px;font-size:1.1rem}
.site-footer .footer-contact p{margin:0}

@media (max-width: 991px){
  table.dt-name-toggle tbody td:nth-child(2){
    cursor: pointer;
  }
}

/* Fixed navbar handling */
main.container { padding-top: 0; }

/* ensure navbar overlays hero */
.navbar.fixed-top{z-index:1050}

/* Championship section */
.championship{
  padding: 56px 0;
}
.championship .card-modern{padding:28px}

/* Hero image styling and animation */
/* hide smaller decorative hero image on large layout (we use background photo instead) */
.hero-image{display:none}
.champ-image{max-width:160px;transform:translateY(0);transition:transform .6s ease}
.champ-image:hover{transform:translateY(-4px)}

/* wave at bottom of hero */
.hero-wave{position:relative;margin-top:-4px}
.hero .container{position:relative;z-index:2}