/* =========================
   JL Reno Works & Repair
   style.css (Final)
   ORANGE + CREAM THEME
   Includes:
   - Hero media (image/video) with retained height
   - Watermark overlay
   - Soft anti-download
   - Before/After slider (image or video)
   - Projects gallery modal (click to enlarge)
   - Mobile content padding utilities
   ========================= */

/* Theme */
:root{
  --brand:#f97316;          /* orange */
  --brand-dark:#ea580c;     /* deeper orange */
  --brand-soft:#fff7ed;     /* warm cream/orange-50 */
  --cream:#fff1d6;          /* cream (slightly richer) */
  --cream-2:#fffbf2;        /* very light cream */
  --ink:#111827;            /* text */
  --muted:#6b7280;
  --card:#ffffff;
  --border:rgba(17,24,39,.10);
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:18px;
}

/* Base */
html, body { height: 100%; }
body{ color:var(--ink); background:var(--cream-2); }
a{ text-decoration:none; color: inherit; }
a:hover{ color: var(--brand-dark); }

.text-brand{ color:var(--brand-dark) !important; }
.badge-border{ border-color:rgba(234,88,12,.18) !important; }
.small-muted{ color:var(--muted); }

/* Soft anti-download (not foolproof) */
img,
video{
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Navbar */
.navbar{
  background:rgba(255,251,242,.92) !important;
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(234,88,12,.14) !important;
}
.navbar .nav-link{ color: var(--ink); }
.navbar .nav-link:hover{ color: var(--brand-dark); }
.navbar .nav-link.active{ color: var(--brand-dark); }

/* Breadcrumb */
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--brand-dark); }
.breadcrumb-item.active{ color: var(--muted); }

/* Make Bootstrap outline-danger behave like orange */
.btn-outline-danger{
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: rgba(234,88,12,.55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 234,88,12;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
}

/* Buttons */
.btn-brand{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
}
.btn-brand:hover{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  color:#fff;
}
.btn-soft{
  background:var(--cream-2);
  border:1px solid rgba(234,88,12,.18);
  color: var(--ink);
}
.btn-soft:hover{ background:var(--cream); }

/* Sections */
.section-pad{ padding:64px 0; }
.section--muted{
  background:linear-gradient(180deg, rgba(255,241,214,.70), rgba(255,251,242,1));
  border-top:1px solid rgba(234,88,12,.10);
  border-bottom:1px solid rgba(234,88,12,.10);
}

/* ✅ Content padding helpers (use these on any container/section wrapper) */
.content-pad{ padding-left:18px; padding-right:18px; }
.content-pad-lg{ padding-left:28px; padding-right:28px; }

/* Mobile: increase side padding so content doesn't stick to edges */
@media (max-width: 576px){
  .content-pad{ padding-left:16px; padding-right:16px; }
  .content-pad-lg{ padding-left:18px; padding-right:18px; }
  .section-pad{ padding:44px 0; }
}

/* Brand mark */
.brand__mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#fb923c);
  color:#fff;font-weight:800;letter-spacing:.5px;
  box-shadow:0 10px 20px rgba(249,115,22,.28);
  flex:0 0 auto;
}
.brand__name{ line-height:1.1; }

/* Headings helper */
.card-head{ font-weight:800; }

/* Hero */
.hero{
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(900px 260px at 90% 10%, rgba(255,241,214,.95), transparent 60%),
    linear-gradient(180deg, var(--cream-2), #fff);
  border-bottom:1px solid rgba(234,88,12,.14);
}
.hero-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(234,88,12,.16);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ===== HERO MEDIA (IMAGE/VIDEO) ===== */
.media-wrap{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(234,88,12,.14);
}

/* ✅ Important:
   If you want hero video height to change, change THIS:
   .hero-media { height: XXXpx; }
   Not .hero-media-el height:100%
*/
.hero-media{
  height:260px; /* <-- edit this to control hero height */
}
.hero-media .hero-media-el{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
@media (max-width: 991px){
  .hero-media{ height:260px; }
}
.hero-media video.hero-media-el{ background:#000; }

/* Watermark overlay (general) */
.logo-watermark{
  position:absolute;
  bottom:14px;
  right:14px;
  width:72px;
  opacity:.22;
  pointer-events:none;
  z-index:6;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.30));
}
@media (max-width: 991px){
  .logo-watermark{ width:60px; opacity:.20; }
}

/* Optional dark gradient to increase watermark visibility */
.media-wrap::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  pointer-events:none;
  z-index:2;
}

/* Cards */
.card-soft{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(234,88,12,.14);
  border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(17,24,39,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-soft:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(17,24,39,.10);
  border-color:rgba(234,88,12,.22);
}
.service-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(249,115,22,.14), rgba(255,241,214,.90));
  color:var(--brand-dark);
  font-weight:800;
  border:1px solid rgba(234,88,12,.20);
}
.badge-soft{
  background:rgba(255,241,214,.85);
  border:1px solid rgba(234,88,12,.16);
  color:var(--ink);
}

/* Gallery images (if used) */
.gallery-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
@media (max-width: 991px){
  .gallery-img{ height:220px; }
}

/* Projects */
.project-media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(234,88,12,.14);
  background:#fff;
}
.project-media img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
  cursor:zoom-in; /* ✅ shows user it's clickable */
}
.badge-after{
  position:absolute; top:12px; left:12px;
  background:rgba(234,88,12,.92);
  color:#fff;
  font-weight:700;
  font-size:.75rem;
  padding:6px 10px;
  border-radius:999px;
}

/* Steps */
.step-no{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,241,214,.90);
  border:1px solid rgba(234,88,12,.22);
  color:var(--brand-dark);
  font-weight:800;
  flex:0 0 auto;
}

/* Accordion */
.accordion-button{ font-weight:700; }
.accordion-button:not(.collapsed){
  background:rgba(255,241,214,.55);
  color:var(--ink);
}
.accordion-item{
  border:1px solid rgba(234,88,12,.14);
  border-radius:14px;
  overflow:hidden;
}
.accordion-item + .accordion-item{ margin-top:10px; }

/* Sticky WhatsApp */
.sticky-cta{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1050;
  border-radius:999px;
  box-shadow:0 14px 30px rgba(17,24,39,.18);
}

/* Footer */
.footer{
  border-top:1px solid rgba(234,88,12,.14);
  background:linear-gradient(180deg, #fff, var(--cream-2));
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--brand-dark); }

/* Utility */
.rounded-3{ border-radius: 16px !important; }
.card-equal{ height:100%; }

/* =========================
   Before / After Slider (Image OR Video)
   ========================= */
.ba{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 2;
  background:#fff;
  overflow:hidden;
  border-radius:16px;
  user-select:none;
  -webkit-user-select:none;
  touch-action: pan-y;
}

/* Base layer containers */
.ba__after,
.ba__before{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* Before clipped width changes */
.ba__before{
  width:50%;
  border-right:1px solid rgba(234,88,12,.25);
}

/* Unified media class for BOTH img and video */
.ba__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.ba__media::-webkit-media-controls{ display:none !important; }

/* BEFORE/AFTER label chips */
.ba::before,
.ba::after{
  position:absolute;
  top:12px;
  z-index:5;
  font-weight:800;
  font-size:.75rem;
  letter-spacing:.04em;
  padding:6px 10px;
  border-radius:999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ba::before{
  content:attr(data-before);
  left:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(234,88,12,.18);
}
.ba::after{
  content:attr(data-after);
  right:12px;
  background:rgba(234,88,12,.92);
  color:#fff;
  border:1px solid rgba(234,88,12,.2);
}

/* Range input (invisible but clickable) */
.ba__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:6;
}

/* Handle */
.ba__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:rgba(234,88,12,.9);
  z-index:4;
  transform:translateX(-1px);
}
.ba__handle::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(234,88,12,.35);
  box-shadow:0 10px 20px rgba(17,24,39,.12);
}
.ba__handle::after{
  content:"⇆";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  font-weight:900;
  color:rgba(234,88,12,.95);
  letter-spacing:.02em;
}

/* Watermark inside slider */
.ba .logo-watermark{
  position:absolute;
  right:12px;
  bottom:12px;
  width:72px;
  opacity:.22;
  z-index:7;
  pointer-events:none;
  user-select:none;
}
@media (max-width: 991px){
  .ba{ aspect-ratio: 4 / 3; }
  .ba .logo-watermark{ width:60px; opacity:.20; }
}

/* =========================
   Projects Modal (Click to Enlarge)
   ========================= */
.modal-content.bg-transparent{ background:transparent !important; }
#galleryModalImg{
  max-height:92vh;
  object-fit:contain;
  background:#000;
}
.btn-close-white{
  filter:invert(1);
}