/**
 * @file
 * Global styles for TritonLED Radix theme.
 *
 * PRINCIP:
 * - Bootstrap 5.3 via Radix — använd utilities i första hand (.mt-3, .p-4, osv)
 * - Layout Builder-sektioner styr layout via GUI (Bootstrap Layout Builder)
 * - Views styr grid/gutters via Views Bootstrap-inställningar
 * - Custom CSS endast för saker som inte kan lösas via GUI eller Bootstrap utilities
 * - Inga !important-overrides på kolumner eller gutters — Bootstrap sköter det
 *
 * LAYOUT-ARKITEKTUR:
 * .container-fluid (padding 0) → full bredd ytterhölje
 *   .container (per sektion i LB) → styr innehållsbredd
 *     .row → Bootstrap grid-rad
 *       .col-* → normala Bootstrap-gutters, styrs från LB GUI
 */


/* ============================================================
   1. GLOBAL
   ============================================================ */

body {
  background-color: var(--bs-gray-100);
}


/* ============================================================
   2. NAVBAR & HEADER
   ============================================================ */

/* Sticky navbar — z-index under Drupal admin toolbar/contextual (600+) */
.navbar.sticky-top {
  z-index: 400;
}

/* Cart-dropdown — måste ligga över sticky navbar (400) */
.cart-block--contents {
  z-index: 999 !important;
}

/* Navbar-höjd */
.navbar .container {
  min-height: 64px;
}

/* Branding */
.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--bs-dark) !important;
}

/* Menylenkar — flat, modern */
.navbar-nav .nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bs-body-color) !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  position: relative;
}

/* Hover underline-animation */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background-color: var(--bs-primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-nav .nav-link:hover {
  color: var(--bs-dark) !important;
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.navbar-nav .dropdown-item {
  font-size: 0.875rem;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.navbar-nav .dropdown-item:hover {
  background-color: var(--bs-gray-100);
}

/* Topbar */
.topbar {
  font-size: 0.85rem;
}

.topbar .block__title {
  display: none;
}

/* Cart-knapp — override btn-sm till standard btn-storlek */
.topbar .cart-block--link__expand {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}

/* Topbar account menu — länkar på samma rad */
.block--tritonled-radix-account-menu .navbar-nav {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

/* Offcanvas mobilmeny */
.offcanvas-start {
  width: 280px;
}

.offcanvas .navbar-nav {
  flex-direction: column;
}

.offcanvas .nav-link::after {
  display: none;
}

/* Logotyp-bild */
.navbar-brand img,
.site-logo img {
  width: auto !important;
  height: 20px;
}


/* ============================================================
   3. LAYOUT
   Ytterhöljet (container-fluid) har ingen padding — full bredd.
   Sektioner i Layout Builder använder .container för innehållsbredd.
   Kolumner och gutters styrs från Layout Builder GUI.
   ============================================================ */

.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ============================================================
   4. HERO CAROUSEL
   Video-ratio: 1:1 mobil, 4:1 desktop.
   ============================================================ */

.carousel-item .media--view-mode-hero video {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 768px) {
  .carousel-item .media--view-mode-hero video {
    aspect-ratio: 4 / 1;
  }
}


/* ============================================================
   5. SPLIDE PRODUKTGALLERI
   ============================================================ */

/* Thumbnail-navigering */
.splide--nav {
  background: transparent;
  margin-top: 0.5rem;
}

.splide--nav .splide__slide {
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.splide--nav .splide__slide.is-active {
  border-color: var(--bs-primary, #0d6efd);
  opacity: 1;
}

.splide--nav .splide__slide:hover {
  opacity: 1;
}

.splide--nav .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video-thumbnail i nav */
.splide--nav .splide__slide .media--video-file {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  height: 100%;
}

/* Video i huvudsliden */
.splide--main .media--video-file {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.splide--main .media--video-file video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}


/* ============================================================
   6. FOOTER
   ============================================================ */

footer.page__footer {
  background-color: #3a3a3a;
  color: var(--bs-white);
  width: 100%;
  padding: 3rem 0;
}

footer.page__footer a {
  color: rgba(255, 255, 255, 0.75);
}

footer.page__footer a:hover {
  color: var(--bs-white);
}

/* Attribute radio buttons — styled as pill buttons (products only) */
.path-product .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.path-product .form-radios .form-check {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.path-product .form-radios .form-check-input {
  display: none;
}

.path-product .form-radios .form-check-label {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: all 0.15s ease-in-out;
  user-select: none;
}

.path-product .form-radios .form-check-label:hover {
  border-color: var(--bs-dark);
  background-color: var(--bs-gray-100);
}

.path-product .form-radios .form-check-input:checked + .form-check-label {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: var(--bs-white);
}

/* Featured Products — card-titel länk */
.view-featured-products .card-title a {
  color: #333;
  text-decoration: none;
}

.view-featured-products .card-title a:hover {
  color: #000;
  text-decoration: underline;
}


/* Datasheet PDF link icon */
.datasheet-link a::before {
  font-family: "bootstrap-icons";
  content: "\F63E";
  margin-right: 0.375rem;
  color: #dc3545;
}