/* ===========================================
   DREAM-THEATER — Dark Theme Override
   Loaded AFTER styles.css to override Bootstrap Agency light theme
   =========================================== */

:root {
  --dt-bg: #0a0a0d;
  --dt-bg-2: #111116;
  --dt-bg-3: #181820;
  --dt-fg: #f3f3f5;
  --dt-fg-dim: #a9a9b2;
  --dt-fg-mute: #6a6a74;
  --dt-line: rgba(255, 255, 255, 0.08);
  --dt-line-2: rgba(255, 255, 255, 0.14);

  /* DREAM-THEATER brand palette */
  --brand-blue:          #00aaff;
  --brand-blue-hover:    #0098e6;
  --brand-blue-active:   #0088cc;
  --brand-pink:          #ff3162;
  --brand-pink-hover:    #e62558;
  --brand-pink-active:   #cc1c4a;
  --brand-yellow:        #ffce00;

  --dt-accent: var(--brand-yellow);
}

/* ---------- Base ---------- */
html, body {
  background: var(--dt-bg) !important;
  color: var(--dt-fg) !important;
}

body {
  --bs-body-color: var(--dt-fg);
  --bs-body-color-rgb: 243, 243, 245;
  --bs-body-bg: var(--dt-bg);
  --bs-body-bg-rgb: 10, 10, 13;
  --bs-border-color: var(--dt-line);
  --bs-secondary-color: var(--dt-fg-dim);
  --bs-secondary-bg: var(--dt-bg-2);
  --bs-tertiary-bg: var(--dt-bg-3);
}

p, li, td, th, dd, dt, blockquote {
  color: var(--dt-fg) !important;
}

.text-muted,
.text-secondary {
  color: var(--dt-fg-dim) !important;
}

/* ---------- Page Sections ---------- */
.page-section {
  background-color: var(--dt-bg) !important;
  color: var(--dt-fg) !important;
}

.page-section.bg-light,
.bg-light {
  background-color: var(--dt-bg-2) !important;
  color: var(--dt-fg) !important;
}

.bg-white {
  background-color: var(--dt-bg-2) !important;
}

.bg-secondary {
  background-color: var(--dt-bg-3) !important;
}

section {
  background-color: transparent !important;
}

/* Force text color inside sections */
.page-section h1, .page-section h2, .page-section h3,
.page-section h4, .page-section h5, .page-section h6,
.page-section p, .page-section span:not(.badge):not(.visually-hidden),
.page-section li, .page-section a:not(.btn) {
  color: var(--dt-fg);
}

.page-section .text-muted,
.page-section .section-subheading {
  color: var(--dt-fg-dim) !important;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6,
.section-heading {
  color: var(--dt-fg) !important;
}

.section-heading.text-uppercase {
  color: var(--dt-fg) !important;
}

/* ---------- Navbar ----------
   The site now uses the bespoke `.dtnav` navigation (DT_3 style).
   All styling is defined inline in index.html. Legacy Bootstrap
   Agency #mainNav overrides were removed to avoid conflicts. */

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--brand-pink) !important;
  border-color: var(--brand-pink) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-pink-hover) !important;
  border-color: var(--brand-pink-hover) !important;
  color: #ffffff !important;
}

.btn-primary:active {
  background-color: var(--brand-pink-active) !important;
  border-color: var(--brand-pink-active) !important;
  color: #ffffff !important;
}

.btn-xl, .btn-lg {
  color: #ffffff !important;
}

.btn-outline-light,
.btn-light {
  background-color: transparent !important;
  border-color: var(--dt-line-2) !important;
  color: var(--dt-fg) !important;
}

.btn-outline-light:hover,
.btn-light:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--dt-fg) !important;
  color: var(--dt-fg) !important;
}

/* ---------- Cards / Portfolio items ---------- */
.portfolio-item,
.card {
  background-color: var(--dt-bg-2) !important;
  border: 1px solid var(--dt-line) !important;
  color: var(--dt-fg) !important;
}

.portfolio-item .portfolio-caption,
.card-body {
  background-color: var(--dt-bg-2) !important;
  color: var(--dt-fg) !important;
}

.portfolio-caption-heading,
.portfolio-caption-subheading {
  color: var(--dt-fg) !important;
}

.portfolio-caption-subheading {
  color: var(--dt-fg-dim) !important;
  opacity: .85;
}

/* ---------- Team / Creator cards ---------- */
/* Let the section-level radial gradient show through; keep inner layers transparent */
#CREATOR {
  background-color: #07070b !important;
  background-image: none !important;
}
#CREATOR > .container-fluid,
#CREATOR .swiper,
#CREATOR .swiper-wrapper,
#CREATOR .swiper-slide,
#CREATOR .swiper-slide > .container {
  background-color: transparent !important;
  background-image: none !important;
}
#CREATOR::after {
  background: transparent !important;
}

.team-member .team-name,
#CREATOR h3,
#CREATOR h4 {
  color: var(--dt-fg) !important;
}

#CREATOR p,
.team-member p {
  color: var(--dt-fg-dim) !important;
}

#CREATOR img,
.team-member img {
  border: 3px solid var(--dt-line-2) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ---------- Services ---------- */
#services .service-heading,
#services h4,
#services .fa-stack {
  color: var(--dt-fg);
}

/* Liquid glass service icons — slightly deeper glass on dark sections */
#services .service-icon-glass.fa-stack::before {
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.04) 52%,
    rgba(255, 255, 255, 0.18) 100%
  );
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 14px 48px rgba(0, 0, 0, 0.32),
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 2px 8px rgba(255, 255, 255, 0.45),
    inset 0 -4px 14px rgba(255, 255, 255, 0.06);
}

#services .service-icon-glass .fa-stack-2x.fa-circle,
#services .service-icon-glass svg.fa-stack-2x {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  opacity: 0 !important;
  pointer-events: none;
}

#services .service-icon-glass .fa-stack-1x,
#services .service-icon-glass .fa-inverse {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* ---------- Contact ---------- */
#contact {
  background-color: var(--dt-bg-2) !important;
}

#contact .form-control,
input.form-control,
textarea.form-control,
select.form-select {
  background-color: var(--dt-bg-3) !important;
  border: 1px solid var(--dt-line) !important;
  color: var(--dt-fg) !important;
}

#contact .form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  background-color: var(--dt-bg-3) !important;
  border-color: var(--brand-pink) !important;
  color: var(--dt-fg) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 49, 98, 0.22) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--dt-fg-mute) !important;
}

.form-floating > label {
  color: var(--dt-fg-mute) !important;
}

/* ---------- Footer ---------- */
footer,
.footer,
.copyright {
  background-color: var(--dt-bg) !important;
  color: var(--dt-fg-dim) !important;
  border-top: 1px solid var(--dt-line);
}

footer a,
.footer a {
  color: var(--dt-fg) !important;
}

footer a:hover,
.footer a:hover {
  color: var(--dt-accent) !important;
}

/* ---------- Divider / Stars ---------- */
.divider-custom .divider-custom-line {
  background-color: var(--dt-line-2) !important;
}

.divider-custom .divider-custom-icon {
  color: var(--dt-accent) !important;
}

/* ---------- Misc Bootstrap overrides ---------- */
hr {
  border-color: var(--dt-line) !important;
  opacity: 1;
}

.list-group-item {
  background-color: var(--dt-bg-2) !important;
  color: var(--dt-fg) !important;
  border-color: var(--dt-line) !important;
}

.modal-content {
  background-color: var(--dt-bg-2) !important;
  color: var(--dt-fg) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--dt-line) !important;
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Swiper slides ---------- */
.swiper-slide {
  background-color: var(--dt-bg-2) !important;
}

.swiper-pagination-bullet {
  background: var(--dt-fg-dim) !important;
}

.swiper-pagination-bullet-active {
  background: var(--dt-accent) !important;
}

/* ---------- Links ---------- */
a:not(.btn):not(.navbar-brand):not(.nav-link) {
  color: var(--dt-fg);
}

a:not(.btn):not(.navbar-brand):not(.nav-link):hover {
  color: var(--dt-accent);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dt-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--dt-line-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dt-fg-mute);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--dt-accent);
  color: #0a0a0d;
}