/*
 * BarnaTrasteros — custom.css
 * Fixes on top of the real Bootstrap 4 theme (bootstrap.css)
 */

/* ── Selection & scrollbar ────────────────────────────────────────────── */
::selection { background: #FDC107; color: #fff; }
* { scrollbar-color: #FDC107 transparent; }
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #FDC107; border-radius: 0; border: 3px solid transparent; }

/* ── HEADER BRAND: logo grande arriba ────────────────────────────────── */
#header-brand {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
#header-brand img.logo {
  max-height: 80px !important; /* más grande que el sticky */
  height: auto;
}

/* ── HEADER MENU: navbar sticky ──────────────────────────────────────── */
#header-menu {
  box-shadow: 0 4px 4px -2px rgba(0,0,0,.3);
}
#header-menu .navbar-toggler {
  border: none;
  padding: 0;
  font-size: 1.5rem;
}
#header-menu .logo {
  max-height: 40px;
  min-width: 40px;
  padding: 0;
}
/* Hide the sticky logo on desktop (only shows on mobile scroll) */
@media (min-width: 768px) {
  #header-menu .hide-logo { display: none !important; }
}

/* ── NAV LINKS: yellow underline on hover and active ─────────────────── */
/* The SCSS uses a.nav-item with ::before pseudo-element */
#menu-main a.nav-link {
  position: relative;
  padding-bottom: 0.6rem;
}
#menu-main a.nav-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #FDC107;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#menu-main a.nav-link:hover::before,
#menu-main a.nav-link.active::before,
#menu-main .nav-item.active a.nav-link::before {
  transform: scaleX(1);
}
/* Also apply on the <li> active class from JS */
#menu-main .nav-item a.nav-link:hover,
#menu-main .nav-item a.nav-link.active { color: #fff; }

/* ── HERO JUMBOTRON (home page full-width banner) ────────────────────── */
.jumbotron-hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  background-image: url('img/trastero-en-barcelona.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
  border-radius: 0;
  padding: 4rem 2rem;
}
.jumbotron-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(69, 80, 90, 0.55); /* bg-secondary overlay */
}
.jumbotron-hero .jumbotron-hero-content {
  position: relative;
  z-index: 1;
}
.jumbotron-hero h1 {
  font-size: 2.5rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.5rem;
}
.jumbotron-hero p {
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0;
}
@media (max-width: 576px) {
  .jumbotron-hero h1 { font-size: 1.6rem; }
  .jumbotron-hero { min-height: 180px; padding: 2rem 1rem; }
}

/* ── HOME INTRO: top margin ──────────────────────────────────────────── */
#page-content > .container > section:first-child,
#page-content > section:first-child {
  margin-top: 2rem;
}
.intro-top-margin { margin-top: 2.5rem !important; }

/* ── SERVICE ICONS: fix .card-img-100 + p-5 making icons invisible ───── */
/* The issue: p-5 = 3rem padding on a 100px container = icon squashed to nothing */
/* Solution: smaller padding so icon is visible */
.card-img-100 {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem !important; /* override p-5 (3rem) → 1rem so icons show */
}
.card-img-100 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── CONTACTAR JUMBOTRON (CTA block at bottom of inner pages) ─────────── */
.jumbotron2 {
  padding: 2rem 1rem;
  background-color: #e9ecef;
  background-image: url('img/header-contactar-tarstero.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media (min-width: 576px) {
  .jumbotron2 { padding: 4rem 2rem; }
}
.jumbotron2 h3,
.jumbotron2 h4,
.jumbotron2 p { text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ── FEATURE CARDS: equal height (particulares/profesionales) ──────────── */
.gradient-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.125);
  transition: box-shadow .2s ease;
}
.gradient-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.gradient-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Equal-height columns for the 2-card feature row */
.row-equal-height { display: flex; flex-wrap: wrap; }
.row-equal-height .col-md-6 { display: flex; }
.row-equal-height .col-md-6 > .card { width: 100%; }

/* ── Utility classes from theme ───────────────────────────────────────── */
.color-1 { color: #45505a !important; }
.color-4 { color: #6c757d !important; }
.color-5 { color: #6c757d !important; }
.font-1  { font-size: 1rem; }
.fw-300  { font-weight: 300 !important; }
.h-60px  { height: 60px !important; }
.h-100px { height: 80px !important; }
.h-20px  { height: 25px !important; }
.mt-7    { margin-top: 6rem !important; }
.my-7    { margin-top: 6rem !important; margin-bottom: 6rem !important; }

/* ── w-header (yellow divider line) ──────────────────────────────────── */
hr.w-header {
  border: 0;
  border-top: 2px solid #FDC107;
  width: 60px;
  margin-left: auto;
  margin-right: auto;
}
hr.short {
  border: 0;
  border-top: 2px solid #FDC107;
  width: 60px;
}
hr.short.left { margin-left: 0; }

/* ── Footer ────────────────────────────────────────────────────────────── */
#page-footer a:hover    { color: #fff !important; text-decoration: none; }
#page-footer-sub        { font-size: .85rem; }

/* ── WebP backgrounds (class added by JS when browser supports WebP) ─── */
.webp .jumbotron-hero {
  background-image: url('img/trastero-en-barcelona.webp');
}
.webp .jumbotron2 {
  background-image: url('img/header-contactar-tarstero.webp');
}