/* Dark Theme Override for sarunasvaitkus.com - matches _darkTheme.html UI/UX */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root {
  --dt-theme-bg: rgba(16 18 27 / 40%);
  --dt-border: rgba(113 119 144 / 25%);
  --dt-theme-color: #f9fafb;
  --dt-inactive: rgb(113 119 144 / 78%);
  --dt-body-font: "Poppins", sans-serif;
  --dt-hover-bg: rgba(12 15 25 / 30%);
  --dt-content-bg: rgba(22 25 37 / 50%);
  --dt-dropdown-bg: #21242d;
  --dt-dropdown-hover: rgb(42 46 60);
  --dt-accent: #F20000;
  --dt-scrollbar: rgb(1 2 3 / 40%);
}

/* Light mode variables */
body.dark-theme-index.light-mode {
  --dt-theme-bg: rgba(255 255 255 / 70%);
  --dt-content-bg: rgba(255 255 255 / 50%);
  --dt-border: rgba(0 0 0 / 12%);
  --dt-theme-color: #1a1a2e;
  --dt-inactive: #4a5568;
  --dt-dropdown-bg: rgba(255 255 255 / 95%);
  --dt-dropdown-hover: rgba(0 0 0 / 8%);
}

/* Ensure html fills viewport and matches body bg so no white shows */
html {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100%;
  background-color: #050712; /* fallback if SVG fails */
}

body.dark-theme-index {
  font-family: var(--dt-body-font) !important;
  background-color: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 1rem 0 !important;
  min-height: 100vh !important;
  color: var(--dt-theme-color) !important;
  -webkit-font-smoothing: antialiased;
  border-left: none !important;
  border-right: none !important;
}

body.dark-theme-index .border-top,
body.dark-theme-index .border-bottom,
body.dark-theme-index .border-left,
body.dark-theme-index .border-right {
  display: none !important;
}

/* SVG background positioning */
#bg-waves-dark,
#bg-waves-light {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#bg-waves-dark {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#bg-waves-light {
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.dark-theme-index.light-mode #bg-waves-dark {
  opacity: 0;
}

body.dark-theme-index.light-mode #bg-waves-light {
  opacity: 1;
}

/* App wrapper - glass container, centered */
.dt-app {
  background-color: var(--dt-theme-bg);
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  min-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Header */
.dt-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 58px;
  width: 100%;
  border-bottom: 1px solid var(--dt-border);
  padding: 0 30px;
  gap: 1rem;
}

.dt-header .dt-logo {
  text-decoration: none;
  color: var(--dt-theme-color);
  font-weight: 600;
  font-size: 1.1rem;
}

.dt-header .dt-logo span:first-child {
  color: var(--dt-accent);
}

.dt-header-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.dt-header-nav a {
  padding: 20px 20px;
  text-decoration: none;
  color: var(--dt-inactive);
  border-bottom: 2px solid transparent;
  transition: 0.3s;
  font-size: 14px;
}

.dt-header-nav a:hover,
.dt-header-nav a.is-active {
  color: var(--dt-theme-color);
  border-bottom-color: var(--dt-accent);
}

.dt-header-profile {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dt-header-profile a {
  color: var(--dt-inactive);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.dt-header-profile a:hover {
  color: var(--dt-theme-color);
}

/* Wrapper: sidebar + main */
.dt-wrapper {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  min-height: 0;
}

/* Left sidebar */
.dt-left-side {
  flex-basis: 220px;
  border-right: 1px solid var(--dt-border);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.dt-side-title {
  color: var(--dt-inactive);
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dt-side-menu a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--dt-theme-color);
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  transition: 0.3s;
  margin-bottom: 2px;
}

.dt-side-menu a:hover,
.dt-side-menu a.is-active {
  background-color: var(--dt-hover-bg);
  color: var(--dt-theme-color);
}

@media (max-width: 992px) {
  .dt-left-side {
    display: none;
  }
}

/* Main content area - no page scroll, panels switch in place */
.dt-main {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Content wrapper - transparent like _darkTheme.html, holds panels */
body.dark-theme-index .content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--dt-theme-color);
  padding: 0;
  height: 100%;
  background-color: transparent !important;
  position: relative;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

/* Panel entrance animation when section loads */
@keyframes dt-panel-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered fade-in for direct children of panel (optional polish) */
@keyframes dt-panel-child-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content wrapper background transition - smooth shift when panel changes */
body.dark-theme-index .content-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(242, 0, 0, 0.08) 0%, transparent 55%);
}

body.dark-theme-index .content-wrapper.dt-panel-how::before,
body.dark-theme-index .content-wrapper.dt-panel-what::before {
  opacity: 1;
}

body.dark-theme-index .content-wrapper.dt-panel-portfolio::before {
  background: radial-gradient(ellipse 60% 40% at 80% 20%, rgba(242, 0, 0, 0.06) 0%, transparent 50%);
  opacity: 1;
}

body.dark-theme-index .content-wrapper.dt-panel-contact::before {
  background: radial-gradient(ellipse 70% 50% at 20% 100%, rgba(242, 0, 0, 0.07) 0%, transparent 55%);
  opacity: 1;
}

/* Content panels - only one visible at a time (high specificity so ID rules don't override) */
body.dark-theme-index .content-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

body.dark-theme-index .content-panel:not(.active) {
  display: none !important;
}

body.dark-theme-index #section-intro.content-panel:not(.active),
body.dark-theme-index #How.content-panel:not(.active),
body.dark-theme-index #What.content-panel:not(.active),
body.dark-theme-index #Clients.content-panel:not(.active),
body.dark-theme-index #Portfolio.content-panel:not(.active),
body.dark-theme-index #Contact.content-panel:not(.active) {
  display: none !important;
}

body.dark-theme-index .content-panel.active {
  display: flex !important;
  flex-direction: column;
  animation: dt-panel-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger children of active panel (skip intro to avoid affecting hero) */
body.dark-theme-index .content-panel.active:not(#section-intro) > * {
  animation: dt-panel-child-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(1) { animation-delay: 0.05s; }
body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(2) { animation-delay: 0.1s; }
body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(3) { animation-delay: 0.15s; }
body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(4) { animation-delay: 0.2s; }
body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(5) { animation-delay: 0.25s; }
body.dark-theme-index .content-panel.active:not(#section-intro) > *:nth-child(n+6) { animation-delay: 0.3s; }

/* Body content - stacks panels */
body.dark-theme-index #body-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

body.dark-theme-index #page-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

/* Panel scrollbar */
body.dark-theme-index .content-panel.active {
  -webkit-overflow-scrolling: touch;
}

/* Home panel (intro) fills available space when active */
body.dark-theme-index #section-intro.content-panel.active {
  min-height: 100%;
  justify-content: center;
}

/* Intro section - hero with glass overlay */
body.dark-theme-index #section-intro {
  position: relative;
  min-height: 35vh;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(58, 109, 240, 0.25) 0%, rgba(16, 18, 27, 0.7) 100%);
  border-radius: 14px;
}

body.dark-theme-index #section-intro .intro-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.dark-theme-index #section-intro .intro-image-wrap.full-height {
  position: absolute;
  height: 100%;
}

body.dark-theme-index #section-intro .intro-parallax-image {
  opacity: 0.4;
}

body.dark-theme-index #section-intro .cover {
  background: rgba(16, 18, 27, 0.5) !important;
}

body.dark-theme-index #section-intro .intro-caption {
  position: relative;
  z-index: 1;
}

body.dark-theme-index .intro-caption-title {
  color: var(--dt-theme-color) !important;
  font-family: var(--dt-body-font) !important;
}

body.dark-theme-index .intro-caption .bg-main {
  background: var(--dt-accent) !important;
  padding: 2px 8px;
  border-radius: 4px;
}

body.dark-theme-index .intro-caption .btn-success {
  background: var(--dt-accent) !important;
  border-color: var(--dt-accent) !important;
  border-radius: 20px;
  padding: 8px 24px;
}

/* Page content - dark transparent, never white */
body.dark-theme-index #page-content {
  padding: 2rem;
  background: transparent !important;
}

body.dark-theme-index #page-content .content-panel.split-box,
body.dark-theme-index #page-content .content-panel {
  background: var(--dt-content-bg) !important;
  border: 1px solid var(--dt-border);
  border-radius: 14px;
  padding: 2rem !important;
  margin-bottom: 0;
}

/* Override Bootstrap/theme background classes - dark transparent */
body.dark-theme-index .bg-dark,
body.dark-theme-index .bg-white,
body.dark-theme-index .bg-light,
body.dark-theme-index .bg-gray-3,
body.dark-theme-index .bg-gray,
body.dark-theme-index .bg-F8F9FA {
  background-color: var(--dt-content-bg) !important;
}

body.dark-theme-index #body-content {
  background: transparent !important;
}

body.dark-theme-index #page-content .container,
body.dark-theme-index #page-content .container-fluid {
  max-width: 100%;
}

body.dark-theme-index #page-content .cover {
  display: none !important;
}

body.dark-theme-index #page-content .bg-image {
  background-image: none !important;
}

body.dark-theme-index #How,
body.dark-theme-index #What,
body.dark-theme-index #Clients,
body.dark-theme-index #Portfolio,
body.dark-theme-index #Contact {
  background: var(--dt-content-bg) !important;
  color: var(--dt-theme-color) !important;
}

/* Testimonials section - match contact style with rounded, semi-transparent card */
body.dark-theme-index #Testimonials {
  background-image: none !important; /* override inline blueBG.svg */
  background-color: transparent !important; /* let inner card handle bg */
}

body.dark-theme-index #Testimonials > .container {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--dt-border);
}

body.dark-theme-index #Testimonials > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(22, 25, 37, 0.8); /* ~80% opaque over dark bg */
  pointer-events: none;
  z-index: 0;
}

body.dark-theme-index #Testimonials > .container > * {
  position: relative;
  z-index: 1;
}

/* #How section: layout and responsive (Bootstrap best practice) */
body.dark-theme-index #How {
  display: flex !important;
  flex-direction: column;
}

body.dark-theme-index #How .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.dark-theme-index #How .row {
  flex: 1 0 auto;
}

/* Split-box col-inner: responsive padding (override theme 30px 80px) */
body.dark-theme-index #How .split-box-col-inner,
body.dark-theme-index .split-box .col-inner {
  padding: 1rem 1.5rem !important;
}

@media (min-width: 576px) {
  body.dark-theme-index #How .split-box-col-inner,
  body.dark-theme-index .split-box .col-inner {
    padding: 1.25rem 2rem !important;
  }
}

@media (min-width: 992px) {
  body.dark-theme-index #How .split-box-col-inner,
  body.dark-theme-index .split-box .col-inner {
    padding: 1.5rem 2.5rem !important;
  }
}

@media (min-width: 1200px) {
  body.dark-theme-index #How .split-box-col-inner,
  body.dark-theme-index .split-box .col-inner {
    padding: 2rem 3rem !important;
  }
}

/* Info boxes: equal alignment, no fixed height (override theme height: 92%) */
body.dark-theme-index #How .info-box,
body.dark-theme-index .info-box-wrap .info-box {
  height: auto !important;
  min-height: 0;
  margin-bottom: 0 !important;
}

body.dark-theme-index #How .info-box-wrap .row {
  align-items: stretch;
}

body.dark-theme-index #How .info-box-wrap .col-12 {
  display: flex;
}

body.dark-theme-index #How .info-box-wrap .info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.dark-theme-index #How .info-box-info {
  flex: 1;
}

/* Spacing between info box columns (Bootstrap 4 compatible) */
body.dark-theme-index #How .info-box-wrap .row > [class*="col-"] {
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  body.dark-theme-index #How .info-box-wrap .row > [class*="col-"]:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}

body.dark-theme-index .container,
body.dark-theme-index .container-fluid {
  background: transparent !important;
}

body.dark-theme-index .col-inner {
  background: transparent !important;
}

body.dark-theme-index .heading h1 .bg-main,
body.dark-theme-index .heading h1 .bg-dark,
body.dark-theme-index .heading h1 .bg-white {
  background: transparent !important;
  color: var(--dt-theme-color) !important;
}

body.dark-theme-index .heading h1 .bg-main {
  color: var(--dt-accent) !important;
}

body.dark-theme-index .lead {
  color: var(--dt-inactive) !important;
}

/* Info boxes */
body.dark-theme-index .info-box {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--dt-border);
}

body.dark-theme-index .info-box-heading h3 {
  color: var(--dt-theme-color) !important;
}

body.dark-theme-index .info-box-info p,
body.dark-theme-index .info-box-info a {
  color: var(--dt-inactive) !important;
}

body.dark-theme-index .info-box-info a.text-red {
  color: var(--dt-accent) !important;
}

/* Accordion */
body.dark-theme-index .tt-accordion-item-header button {
  background: var(--dt-dropdown-bg) !important;
  color: var(--dt-theme-color) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 8px !important;
}

body.dark-theme-index .tt-accordion-item-body {
  background: rgba(255,255,255,0.02) !important;
  color: var(--dt-inactive) !important;
  border-radius: 0 0 8px 8px;
}

body.dark-theme-index .tt-accordion-item-body a {
  color: var(--dt-accent) !important;
}

/* Clients carousel */
body.dark-theme-index .clients {
  background: transparent !important;
}

body.dark-theme-index .client-logo {
  filter: brightness(1.2);
  opacity: 0.9;
}

body.dark-theme-index .client-logo:hover {
  opacity: 1;
}

/* Portfolio grid */
body.dark-theme-index .portfolio-section {
  background: transparent !important;
}

body.dark-theme-index .portfolio-grid-item {
  background: var(--dt-content-bg) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

body.dark-theme-index .portfolio-grid-item:hover {
  border-color: var(--dt-accent) !important;
}

body.dark-theme-index .pgi-caption-title a,
body.dark-theme-index .pgi-category {
  color: var(--dt-theme-color) !important;
}

/* Footer */
body.dark-theme-index #footer {
  background: transparent !important;
  border-top: 1px solid var(--dt-border);
  padding: 1.5rem 2rem;
}

body.dark-theme-index #footer .copyright {
  color: var(--dt-inactive) !important;
}

/* Bottom nav - restyled */
body.dark-theme-index #navbottom {
  background: var(--dt-theme-bg) !important;
  border-top: 1px solid var(--dt-border);
  backdrop-filter: blur(20px);
}

body.dark-theme-index #navbottom h5,
body.dark-theme-index #navbottom a {
  color: var(--dt-inactive) !important;
}

body.dark-theme-index #navbottom .text-red {
  color: var(--dt-accent) !important;
}

/* Scroll to top */
body.dark-theme-index .scrolltotop {
  background: var(--dt-dropdown-bg) !important;
  color: var(--dt-theme-color) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  bottom: 20px !important;
  right: 20px !important;
}

/* Dark/Light toggle */
.dt-dark-light {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--dt-dropdown-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 50%;
  z-index: 1000;
  cursor: pointer;
  border: 1px solid var(--dt-border);
}

.dt-dark-light svg {
  width: 24px;
  height: 24px;
  fill: #ffce45;
  stroke: #ffce45;
}

body.dark-theme-index.light-mode .dt-dark-light svg {
  fill: transparent;
  stroke: #333;
}

/* Light mode - consistent light transparent theme */
body.dark-theme-index.light-mode {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%) !important;
}

body.dark-theme-index.light-mode .dt-app {
  background-color: var(--dt-theme-bg) !important;
}

body.dark-theme-index.light-mode #page-content,
body.dark-theme-index.light-mode #body-content,
body.dark-theme-index.light-mode .content-wrapper {
  background: transparent !important;
}

body.dark-theme-index.light-mode .bg-dark,
body.dark-theme-index.light-mode .bg-white,
body.dark-theme-index.light-mode .bg-gray-3,
body.dark-theme-index.light-mode .content-panel {
  background: var(--dt-content-bg) !important;
}

body.dark-theme-index.light-mode .dt-theme-color,
body.dark-theme-index.light-mode .heading h1,
body.dark-theme-index.light-mode h1,
body.dark-theme-index.light-mode h2,
body.dark-theme-index.light-mode .heading h1 .bg-main {
  color: var(--dt-theme-color) !important;
}

body.dark-theme-index.light-mode .dt-inactive,
body.dark-theme-index.light-mode .lead {
  color: var(--dt-inactive) !important;
}

body.dark-theme-index.light-mode .info-box,
body.dark-theme-index.light-mode .tt-accordion-item-body {
  background: rgba(255,255,255,0.6) !important;
}

body.dark-theme-index.light-mode .tt-accordion-item-header button {
  background: rgba(255,255,255,0.8) !important;
  color: var(--dt-theme-color) !important;
}

/* Light mode - Testimonials card (rounded, semi-transparent) */
body.dark-theme-index.light-mode #Testimonials > .container::before {
  background: rgba(255, 255, 255, 0.8);
}

body.dark-theme-index.light-mode #footer {
  border-top-color: var(--dt-border);
}

body.dark-theme-index.light-mode #navbottom {
  background: var(--dt-theme-bg) !important;
}

body.dark-theme-index.light-mode .text-white {
  color: var(--dt-theme-color) !important;
}

/* Magnific popup overlay */
body.dark-theme-index .mfp-bg {
  background: rgba(16, 18, 27, 0.9) !important;
}

body.dark-theme-index .pgi-popup,
body.dark-theme-index .inline-popup {
  background: var(--dt-dropdown-bg) !important;
  color: var(--dt-theme-color) !important;
  border-radius: 14px;
}

/* Scrollbar */
body.dark-theme-index ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.dark-theme-index ::-webkit-scrollbar-thumb {
  background: var(--dt-scrollbar);
  border-radius: 10px;
}

body.dark-theme-index ::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 768px) {
  body.dark-theme-index {
    padding: 0.5rem !important;
  }
  body.dark-theme-index .dt-header {
    padding: 0 16px;
  }
  body.dark-theme-index .dt-header-nav a {
    padding: 16px 12px;
    font-size: 13px;
  }
}