/* =========================================================
   TOKTOK DARK SITE THEME — applies to ALL pages
   ========================================================= */

:root {
  --tok-bg: #111111;
  --tok-surface: #202020;
  --tok-text: #ffffff;
  --tok-muted: #8a8a8e;
  --tok-blue: #ffffff;
  --tok-border: rgba(255,255,255,.16);
  --tok-radius: 2rem;
  --tok-gutter: 4vw;
}

html, body {
  background: var(--tok-bg) !important;
  color: var(--tok-text) !important;
}

body,
body * {
  border-color: var(--tok-border);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--tok-text) !important;
  background: var(--tok-bg) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
p, li, label, small, span {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
  font-weight: 500;
}

p, li {
  color: rgba(255,255,255,.82);
}

.text-dark,
.text-black,
.text-body,
.text-muted {
  color: rgba(255,255,255,.82) !important;
}

.text-white {
  color: #fff !important;
}

a {
  color: #fff;
}

a:hover {
  color: rgba(255,255,255,.7);
}

/* Main page surfaces */
.site-section,
.section,
.section-1,
.section-2,
.section-3,
.section-4,
.portfolio-section,
.about-section,
.project-section,
.container-fluid {
  background: transparent !important;
}

.bg-white,
.bg-light {
  background: var(--tok-bg) !important;
}

.bg-dark {
  background: var(--tok-surface) !important;
}

/* Navigation */
.site-nav {
  background: var(--tok-bg) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.site-nav .site-navigation .site-menu > li > a {
  color: rgba(255,255,255,.72) !important;
}

.site-nav .site-navigation .site-menu > li > a:hover,
.site-nav .site-navigation .site-menu > li.active > a {
  color: #fff !important;
}

.site-nav .site-navigation .site-menu > li.cta-button a {
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
}

.site-nav .site-navigation .site-menu > li.cta-button a:hover {
  background: #fff !important;
  color: #111 !important;
}

.site-mobile-menu {
  background: #111 !important;
}

.site-mobile-menu .site-nav-wrap a {
  color: #fff !important;
}

/* Portfolio / project cards */
.isotope-card,
.isotope-card > a {
  background: var(--tok-surface) !important;
  border-radius: var(--tok-radius);
  overflow: hidden;
}

.isotope-card .contents,
.isotope-card .contents h3,
.isotope-card .contents p,
.isotope-card .contents .cat {
  color: #fff !important;
}

.isotope-card .contents p {
  color: rgba(255,255,255,.72) !important;
}

/* Filters */
.filters ul li {
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.22) !important;
}

.filters ul li:hover,
.filters ul li.active {
  color: #fff !important;
  background: var(--tok-blue) !important;
  border-color: var(--tok-blue) !important;
}

/* Forms */
.form-control,
input,
textarea,
select {
  color: #fff !important;
  background: #202020 !important;
  border-color: rgba(255,255,255,.20) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.42) !important;
}

/* Buttons */
.btn.btn-primary {
  color: #fff !important;
  background: var(--tok-blue) !important;
  border-color: var(--tok-blue) !important;
}

.btn.btn-outline-primary,
.btn.btn-outline-dark,
.btn.btn-outline-secondary {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  background: transparent !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-dark:hover,
.btn.btn-outline-secondary:hover {
  color: #111 !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Footer */
.site-footer,
.footer {
  background: var(--tok-surface) !important;
  color: rgba(255,255,255,.72) !important;
}

.site-footer h3,
.site-footer h4,
.site-footer a,
.footer h3,
.footer h4,
.footer a {
  color: #fff !important;
}

/* Images */
.img-fluid {
  border-radius: var(--tok-radius);
}

/* Horizontal rules / separators */
hr {
  border-color: rgba(255,255,255,.14) !important;
  opacity: 1;
}

/* Bootstrap utility overrides */
.bg-primary {
  background-color: var(--tok-blue) !important;
}

.text-primary {
  color: #fff !important;
}

/* Keep content readable on small screens */
@media (max-width: 991.98px) {
  :root { --tok-gutter: 24px; }
}


/* =========================================================
   FINAL TOKTOK REFINEMENTS
   - wider side margins / smaller overall scale
   - white highlight colour (no blue accent)
   - consistent header logo on every page
   - dark carousel arrows instead of white boxes
   ========================================================= */

:root {
  --tok-gutter: clamp(34px, 6vw, 96px);
  --tok-blue: #ffffff;
}

/* More restrained overall scale */
body {
  font-size: clamp(.96rem, 1.05vw, 1.08rem) !important;
}

h1 {
  font-size: clamp(2.25rem, 3.45vw, 3.8rem) !important;
}

h2 {
  font-size: clamp(1.8rem, 2.65vw, 2.8rem) !important;
}

h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.75rem) !important;
}

/* Wider editorial margins */
.container {
  max-width: 1600px !important;
  padding-left: var(--tok-gutter) !important;
  padding-right: var(--tok-gutter) !important;
}

.site-nav .container {
  padding-left: var(--tok-gutter) !important;
  padding-right: var(--tok-gutter) !important;
}

.row {
  --bs-gutter-x: clamp(1.25rem, 2.2vw, 2.5rem);
}

/* Header logo — force consistent white logo sizing on all pages */
.site-nav .logo,
.site-nav a.logo {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  height: 34px;
  margin: 0 !important;
}

.site-nav .logo img,
.site-nav a.logo img {
  display: block !important;
  width: auto !important;
  height: 30px !important;
  max-width: 125px !important;
  object-fit: contain;
}

/* Some older pages have the logo nested in .text-primary */
.site-nav .logo .text-primary {
  color: #fff !important;
}

/* Eliminate the old blue highlight everywhere */
.text-primary,
a.text-primary,
.site-nav .site-navigation .site-menu > li.active > a,
.filters ul li.active,
.filters ul li:hover,
.bg-primary {
  color: #fff !important;
}

.bg-primary,
.filters ul li.active,
.filters ul li:hover {
  background-color: #fff !important;
  border-color: #fff !important;
}

.filters ul li.active,
.filters ul li:hover {
  color: #111 !important;
}

a:hover {
  color: rgba(255,255,255,.7) !important;
}

/* Carousel arrows: transparent/dark, with white arrow icon */
.main-slider .owl-nav .owl-prev,
.main-slider .owl-nav .owl-next,
.custom-slider .owl-nav .owl-prev,
.custom-slider .owl-nav .owl-next {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  width: 52px;
  height: 52px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: .9;
}

.main-slider .owl-nav .owl-prev span,
.main-slider .owl-nav .owl-next span,
.custom-slider .owl-nav .owl-prev span,
.custom-slider .owl-nav .owl-next span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.78) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  padding: 0 !important;
  width: 42px;
  height: 42px;
  font-size: 0;
}

.main-slider .owl-nav .owl-prev span:before,
.main-slider .owl-nav .owl-next span:before,
.custom-slider .owl-nav .owl-prev span:before,
.custom-slider .owl-nav .owl-next span:before {
  content: "←";
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;
  color: #fff;
}

.main-slider .owl-nav .owl-next span:before,
.custom-slider .owl-nav .owl-next span:before {
  content: "→";
}

.main-slider .owl-nav .owl-prev:hover span,
.main-slider .owl-nav .owl-next:hover span,
.custom-slider .owl-nav .owl-prev:hover span,
.custom-slider .owl-nav .owl-next:hover span {
  background: #fff !important;
  color: #111 !important;
  border-color: #fff !important;
}

.main-slider .owl-nav .owl-prev:hover span:before,
.main-slider .owl-nav .owl-next:hover span:before,
.custom-slider .owl-nav .owl-prev:hover span:before,
.custom-slider .owl-nav .owl-next:hover span:before {
  color: #111 !important;
}

/* Project/detail pages: keep image navigation clear of the content */
.main-slider .owl-nav .owl-prev,
.custom-slider .owl-nav .owl-prev {
  left: clamp(-58px, -3.5vw, -30px);
}

.main-slider .owl-nav .owl-next,
.custom-slider .owl-nav .owl-next {
  right: clamp(-58px, -3.5vw, -30px);
}

/* Dark page sections that previously inherited light backgrounds */
.hero-slant,
.site-cover,
.cover,
.page-cover {
  background-color: var(--tok-bg) !important;
}

/* Mobile margins */
@media (max-width: 991.98px) {
  :root {
    --tok-gutter: 26px;
  }

  .site-nav .logo img,
  .site-nav a.logo img {
    height: 26px !important;
    max-width: 108px !important;
  }

  .main-slider .owl-nav .owl-prev,
  .main-slider .owl-nav .owl-next,
  .custom-slider .owl-nav .owl-prev,
  .custom-slider .owl-nav .owl-next {
    width: 44px;
    height: 44px;
  }

  .main-slider .owl-nav .owl-prev span,
  .main-slider .owl-nav .owl-next span,
  .custom-slider .owl-nav .owl-prev span,
  .custom-slider .owl-nav .owl-next span {
    width: 36px;
    height: 36px;
  }
}