/* Indigo Sound Systems — public theme. Layered on Bootstrap 5.3 (light default + dark toggle). */
:root{
  --brand:#6a3ff0; --brand-2:#4527a0;
  --bs-body-font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
/* Brand accents */
.text-brand{color:var(--brand)!important}
.navbar-brand{font-weight:800;letter-spacing:-.02em;color:var(--brand)!important}
.btn-brand{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--brand-2);--bs-btn-hover-border-color:var(--brand-2);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--brand-2);--bs-btn-active-border-color:var(--brand-2)}
/* Brand outline button — secondary "view all"-style actions; legible + on-brand in light AND dark. */
.btn-outline-brand{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--brand-2);--bs-btn-active-border-color:var(--brand-2);--bs-btn-active-color:#fff;
  --bs-btn-focus-shadow-rgb:106,63,240}
[data-bs-theme=dark] .btn-outline-brand{--bs-btn-color:#c9bbff;--bs-btn-border-color:#6a3ff0;
  --bs-btn-hover-bg:#6a3ff0;--bs-btn-hover-border-color:#6a3ff0;--bs-btn-hover-color:#fff}
/* Theme toggle — quiet circular icon button; faint brand-tinted hover circle + brand icon (not the
   generic grey fill), icon nudges on hover. Consistent light + dark. */
.theme-toggle{--bs-btn-color:var(--bs-secondary-color);
  --bs-btn-hover-color:var(--brand);--bs-btn-hover-bg:rgba(106,63,240,.10);
  --bs-btn-active-color:var(--brand);--bs-btn-active-bg:rgba(106,63,240,.16);
  --bs-btn-focus-shadow-rgb:106,63,240;
  width:2.3rem;height:2.3rem;padding:0;border:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1}
.theme-toggle:hover>i{transform:scale(1.12)}
.theme-toggle>i{transition:transform .15s ease}
[data-bs-theme=dark] .theme-toggle{--bs-btn-hover-color:#c9bbff;--bs-btn-hover-bg:rgba(185,166,255,.14);
  --bs-btn-active-color:#c9bbff;--bs-btn-active-bg:rgba(185,166,255,.20)}
a{color:var(--brand)}
a:hover{color:var(--brand-2)}

/* Themed scrollbar — the page's side scrollbar (and inner scroll areas) follow light/dark; brand on hover. */
html{scrollbar-width:thin;scrollbar-color:#bcb9d0 #edecf3}
html[data-bs-theme=dark]{scrollbar-color:#2c2c34 #0c0c0f}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#edecf3}
::-webkit-scrollbar-thumb{background:#bcb9d0;border-radius:10px;border:3px solid #edecf3}
::-webkit-scrollbar-thumb:hover{background:var(--brand)}
html[data-bs-theme=dark]::-webkit-scrollbar-track,html[data-bs-theme=dark] ::-webkit-scrollbar-track{background:#0c0c0f}
html[data-bs-theme=dark]::-webkit-scrollbar-thumb,html[data-bs-theme=dark] ::-webkit-scrollbar-thumb{background:#2c2c34;border-color:#0c0c0f}

/* Hero — brand gradient in light; deep, minimalist near-black in dark (matches the static site). */
.hero{background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);color:#fff;padding:6rem 0}
.hero h1{letter-spacing:-.02em}
.hero .lead{font-size:1.3rem;opacity:.96}
.hero a:not(.btn){color:#fff}
.hero .btn-light{--bs-btn-color:#1a1a2e;--bs-btn-hover-color:#1a1a2e;font-weight:600}
.hero .rte p{color:rgba(255,255,255,.95)}
.tagline{letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-size:1.05rem}
/* Dark = pure black minimalist, echoing the old static indigosystems.lt (white on black). */
[data-bs-theme=dark]{--bs-body-bg:#000;--bs-body-color:#f2f2f2;--bs-tertiary-bg:#0d0d10;--bs-secondary-bg:#111114;--bs-border-color:#1d1d22;--bs-emphasis-color:#fff}
[data-bs-theme=dark] .navbar{background-color:#000!important}
[data-bs-theme=dark] .hero{background:#000;border-bottom:1px solid #16121f}
[data-bs-theme=dark] .hero .btn-light{--bs-btn-bg:#fff;--bs-btn-color:#000;--bs-btn-hover-bg:#e9e9e9}
[data-bs-theme=dark] .card{--bs-card-bg:#0d0d10;--bs-card-border-color:#1d1d22}
[data-bs-theme=dark] .navbar-brand,[data-bs-theme=dark] .text-brand{color:#b9a6ff!important}

/* Rich-text content */
.rte{line-height:1.7}
.rte h2{font-weight:700;margin:1.5rem 0 .75rem}
.rte ul{padding-left:1.1rem}
.rte li{margin-bottom:.4rem}

/* Active nav link (Scrollspy highlights the section in view) */
.navbar .nav-link.active{color:var(--brand)!important;font-weight:700}
[data-bs-theme=dark] .navbar .nav-link.active{color:#b9a6ff!important}

/* Phone nav — the collapsed hamburger menu: a clean panel with tappable rows and a divider
   separating the language/theme controls from the page links. */
.navbar-toggler{border:0}
.navbar-toggler:focus{box-shadow:none}
@media (max-width:991.98px){
  /* Divider + spacing go on the FIRST CHILD, not on #nav itself: padding/border/margin on the
     collapsing element don't animate to 0, so they'd make the close jump instead of glide. */
  #page-nav{border-top:1px solid var(--bs-border-color);margin-top:.5rem;padding-top:.5rem}
  #nav .navbar-nav .nav-link{padding:.65rem .25rem;font-size:1.05rem}
  .nav-controls{margin-top:.25rem;padding-top:.75rem;border-top:1px solid var(--bs-border-color)}
  .nav-controls .nav-link{padding:.4rem .5rem}
}

/* Gallery + slider images */
.gallery-photo{aspect-ratio:1;object-fit:cover;width:100%;border-radius:.5rem;transition:transform .25s ease}
a:hover>.gallery-photo{transform:scale(1.04)}
/* Fade photos in as they lazy-load. Guarded by .js so no-JS browsers keep them visible. */
.js .gallery-photo{opacity:0;transition:opacity .5s ease,transform .25s ease}
.js .gallery-photo.is-loaded{opacity:1}
/* "+N more" scrim over a gallery's last preview thumbnail (links to the full gallery page) */
.gallery-more-link{display:block;border-radius:.5rem;overflow:hidden}
.gallery-more-overlay{position:absolute;inset:0;background:rgba(13,11,22,.55);border-radius:.5rem;transition:background .2s ease}
.gallery-more-link:hover .gallery-more-overlay{background:rgba(13,11,22,.72)}

/* One-page sections: give each a full-panel min-height so short ones (e.g. Contacts) still read as a
   section AND scroll high enough to light up in the scrollspy nav (a short trailing section otherwise
   never reaches the activation band). */
.home-section{min-height:66vh;display:flex;flex-direction:column;justify-content:center}

/* "Feature band" — a gallery photo fixed behind the section so it reads like a window onto the image as
   you scroll (parallax). Brand-tinted dark scrim keeps the white text legible over any photo. */
.section-feature{position:relative;background-size:cover;background-position:center;background-attachment:fixed;color:#fff}
.section-feature::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,rgba(13,11,22,.74) 0%,rgba(69,39,160,.78) 100%)}
.section-feature > .container{position:relative;z-index:1}
.section-feature h2,.section-feature .rte h2{color:#fff}
.section-feature .rte{color:rgba(255,255,255,.95)}
.section-feature a:not(.btn){color:#fff;text-decoration:underline}
/* Details styled for the light layout (dark text/brand icons) need lightening over the scrim. */
.section-feature .text-body,.section-feature .text-body-secondary{color:rgba(255,255,255,.88)!important}
.section-feature .text-brand{color:#fff!important}
/* Fixed attachment is janky on mobile — fall back to a normal scrolling background there. */
@media(max-width:768px){.section-feature{background-attachment:scroll}}
/* Full-bleed hero slider — event photos rotate behind the brand text (dark scrim for legibility) */
/* Full-screen on open: fill the viewport below the sticky navbar (--nav-h measured in JS; 62px fallback).
   svh keeps it stable on mobile when the address bar is showing; vh line is the fallback for old browsers. */
.hero-slider{position:relative;min-height:calc(100vh - var(--nav-h,62px));min-height:calc(100svh - var(--nav-h,62px));display:flex;overflow:hidden}
.hero-carousel-bg{position:absolute;inset:0;z-index:0}
.hero-carousel-bg .carousel-inner,.hero-carousel-bg .carousel-item{height:100%}
.hero-slide{width:100%;height:100%;min-height:calc(100vh - var(--nav-h,62px));min-height:calc(100svh - var(--nav-h,62px));background-size:cover;background-position:center}
.hero-overlay{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,rgba(13,11,22,.45) 0%,rgba(38,23,80,.56) 52%,rgba(69,39,160,.74) 100%)}
.hero-overlay .container{padding:5rem 1rem}
.hero-overlay h1{letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-overlay .rte p{color:rgba(255,255,255,.95)}
.hero-overlay .btn-brand,.hero .btn-brand{font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.38)}
/* Ghost hero CTA — transparent with a light outline; fills white on hover. Pops on the purple fade. */
.btn-hero{--bs-btn-color:#fff;--bs-btn-bg:transparent;--bs-btn-border-color:rgba(255,255,255,.7);
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:#4527a0;--bs-btn-hover-border-color:#fff;
  --bs-btn-active-bg:#fff;--bs-btn-active-color:#4527a0;--bs-btn-active-border-color:#fff;
  --bs-btn-focus-shadow-rgb:255,255,255;border-width:2px;font-weight:600;backdrop-filter:blur(2px)}

/* Contact modal — branded, not stock Bootstrap: brand accent strip, rounded, refined header + inputs. */
.contact-modal .modal-content{border:0;border-radius:1.25rem;overflow:hidden;box-shadow:0 30px 80px rgba(13,11,22,.45)}
.contact-modal .modal-content::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.contact-modal .modal-header{border-bottom:0;padding:1.5rem 1.5rem .35rem;align-items:flex-start}
.contact-modal .modal-title{font-weight:800;letter-spacing:-.01em;font-size:1.4rem;line-height:1.15}
.contact-modal .modal-subtitle{color:var(--bs-secondary-color);font-size:.9rem;margin-top:.2rem;max-width:44ch}
.contact-modal .modal-body{padding:1rem 1.5rem .5rem}
.contact-modal .modal-footer{border-top:0;padding:.5rem 1.5rem 1.5rem;justify-content:stretch}
.contact-modal .modal-footer .btn{width:100%}
.contact-modal .form-label{font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--bs-secondary-color);margin-bottom:.35rem}
.contact-modal .form-control{border-radius:.7rem;padding:.6rem .85rem}
.contact-modal .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 .22rem rgba(106,63,240,.18)}
.contact-success-icon{font-size:3.4rem;line-height:1;color:#22c55e}
.hero-indicators{z-index:3;margin-bottom:3.4rem}
/* Scroll-down cue: subtle bouncing chevron at the foot of the hero — clicking eases to the first section. */
.hero-scroll{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;cursor:pointer;backdrop-filter:blur(2px);transition:background .2s;animation:heroBounce 2.2s ease-in-out infinite}
.hero-scroll:hover{background:rgba(255,255,255,.3);color:#fff}
@keyframes heroBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:none}}
@media(max-width:576px){.hero-overlay .container{padding:3.5rem 1rem}}
/* one-page: offset the sticky navbar when jumping to a section anchor */
section[id]{scroll-margin-top:72px}