/* 
// Author: Alberto Gonzalez
// Started:  03/06/2025
// Updated:  09/26/2025
// Filename: BCservices.css
*/

/* Allow burger to look right even if this CSS loads before BCstylesheet.css */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.logo { display:flex; align-items:center; gap:10px; }
.primary-nav .nav-list { display:none; list-style:none; gap:18px; padding:0; margin:0; }
.burger { display:inline-flex; flex-direction:column; gap:4px; width:42px; height:42px; border:1px solid #3a3a3a; border-radius:10px; background:#1f1f1f; }
.burger-bar { height:2px; width:22px; background:#fff; margin:0 auto; display:block; }
@media (min-width:900px){ .primary-nav .nav-list{display:flex;} .burger{display:none;} }
.site-menu{ position:fixed; inset:0; display:none; z-index:10000; }
.site-menu.is-open{ display:block; }
.site-menu__bg{ position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
.site-menu__panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:#121212; border-left:1px solid #39FF14; padding:18px 16px; }
.site-menu__close{ align-self:flex-end; width:42px; height:42px; border:none; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:26px; font-weight:700; line-height:42px; }
.site-menu__links{ list-style:none; padding:8px 0 0; margin:0; display:grid; gap:10px; }
.site-menu__links a{ display:block; padding:12px 10px; border-radius:10px; text-decoration:none; color:#f2f2f2; background:#1b1b1b; border:1px solid #2c2c2c; }
.site-menu__links a[aria-current="page"]{ border-color:#39FF14; box-shadow:0 0 0 2px rgba(57,255,20,.18); }
body.no-scroll{ overflow:hidden; }

/* Center intro text */
#content { text-align: center; }

/* Hint text */
.select-hint { margin: 10px 0 8px; }

/* Tab cards */
.svc-tabs { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 20px auto; max-width: 780px; }
.svc-card {
  appearance: none; border: 1px solid #3a3a3a; background: #1f1f1f; color: #f2f2f2;
  border-radius: 14px; padding: 16px 18px; text-align: left; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.svc-card h2 { margin: 0 0 6px; color: #39FF14; font-size: 1.15rem; }
.svc-card p { margin: 0; color: #cfcfcf; }
.svc-card:hover { transform: translateY(-1px); }
.svc-card:focus-visible { outline: 2px solid #39FF14; outline-offset: 3px; }
.svc-card.is-active { border-color: #39FF14; box-shadow: 0 0 0 2px rgba(57,255,20,0.18), 0 0 22px rgba(57,255,20,0.22), 0 2px 14px rgba(0,0,0,0.45); }
@media (min-width: 900px) { .svc-tabs { grid-template-columns: repeat(3, 1fr); max-width: none; } }

/* Description + gallery */
#serviceOutput { margin-top: 0.75rem; }
.muted { color: #777; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 1rem; }
.gallery figure { margin: 0; }
.gallery img, .gallery video { width: 100%; height: auto; display: block; border-radius: 6px; cursor: zoom-in; }

/* Lightbox (with X) */
.lb { position: fixed; inset: 0; display: none; z-index: 9999; }
.lb.is-open { display: block; }
.lb__bg { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(2px); }
.lb__box { position: absolute; inset: 5% 3%; display: grid; place-items: center; }
.lb__img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 0 0 2px rgba(57,255,20,0.15), 0 20px 60px rgba(0,0,0,0.6); }
.lb__cap { margin-top: 8px; color: #cfcfcf; text-align: center; font-size: 0.95rem; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #39FF14; background: rgba(17,17,17,0.6); color: #39FF14; font-weight: 700; border-radius: 10px; cursor: pointer; padding: 8px 12px; }
.lb__prev { left: 12px; } .lb__next { right: 12px; }
.lb__close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: none; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; font-weight: 700; line-height: 42px; cursor: pointer; }
.lb__close:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 640px) { .lb__img { max-height: 72vh; } .lb__nav { padding: 6px 10px; } .lb__close { top: 10px; right: 10px; width: 38px; height: 38px; line-height: 38px; } }