/*
 * THEME.CSS — Nub-inspired Warm Dark Palette
 * Color map: nubjs.com warm dark → office-biz-web
 */

/* ── Light Theme (default, matches original) ── */
:root {
  --bg: #fff;
  --bg-card: #fff;
  --bg-muted: #f4f4f4;
  --bg-deeper: #e8e8e8;
  --bg-code: #f8f8f8;
  --bg-overlay: rgba(0,0,0,0.02);

  --fg: #3b3e43;
  --fg-muted: #acacac;
  --fg-heading: #3b3e43;

  --border: #d7d7d7;
  --border-light: #eaeaea;

  --accent: #bca480;
  --accent-fg: #fff;
  --accent-hover: #a88e6a;

  --header-bg: #fff;
  --header-fg: #3b3e43;
  --header-border: #d7d7d7;

  --footer-bg: #2b2e31;
  --footer-fg: #acacac;
  --footer-bottom-bg: #222;

  --nav-link: #3b3e43;
  --nav-active: #bca480;

  --shadow: rgba(0,0,0,0.08);
}

/* ── Dark Theme (nubjs.com warm dark) ── */
[data-theme="dark"] {
  --bg: #100f0d;
  --bg-card: #16140f;
  --bg-muted: #0b0a08;
  --bg-deeper: #080706;
  --bg-code: #0b0a08;
  --bg-overlay: rgba(0,0,0,0.15);

  --fg: #ece6d8;
  --fg-muted: #aba297;
  --fg-heading: #ece6d8;

  --border: #2a2620;
  --border-light: #221e18;

  --accent: #ff5d3b;
  --accent-fg: #160c08;
  --accent-hover: #e04a2a;

  --header-bg: #100f0d;
  --header-fg: #ece6d8;
  --header-border: #2a2620;

  --footer-bg: #0b0a08;
  --footer-fg: #aba297;
  --footer-bottom-bg: #080706;

  --nav-link: #aba297;
  --nav-active: #ff5d3b;

  --shadow: rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════
   CORE STRUCTURE
   ═══════════════════════════════════════════ */

html {
  transition: background-color 0.3s ease;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#page-wrapper {
  background-color: var(--bg) !important;
}

/* Headings — in light mode let original CSS handle colors */
/* ═══════════════════════════════════════════
   HEADER & NAVIGATION
   ═══════════════════════════════════════════ */

header#header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border);
}

header#header,
header#header a {
  color: var(--header-fg);
}

nav .menu > li > a {
  color: var(--nav-link);
}
nav .menu > li.active > a,
nav .menu > li:hover > a {
  color: var(--nav-active);
}

#mobile-menu-button {
  color: var(--fg) !important;
}

.scrollspy-menu {
  background-color: var(--header-bg) !important;
}

/* ═══════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════ */

/* Light mode: all sections white, matching original design */
section {
  background-color: var(--bg);
}

/* Cards float ABOVE their section background */
.services-boxes,
.services-boxes.style-1,
.services-boxes.style-2,
.services-boxes.style-3 {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.services-boxes-content h3 a,
.services-boxes.style-3 .services-boxes-content h3 {
  color: var(--fg-heading);
}
.services-boxes-content p {
  color: var(--fg);
}

/* Hero / full section — keep background image, just handle text */
/* Light mode: let original custom.css handle hero text colors */

/* ═══════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════ */

.vertical-tabs .nav-tabs > li > a {
  background-color: var(--bg-card);
  color: var(--fg-muted);
  border-color: var(--border);
}
.vertical-tabs .nav-tabs > li.active > a,
.vertical-tabs .nav-tabs > li > a:hover {
  background-color: var(--bg-muted);
  color: var(--accent);
  border-color: var(--border);
}
.tab-content {
  background-color: var(--bg-card);
  border-color: var(--border) !important;
}
.tab-pane p {
  color: var(--fg);
}

/* ═══════════════════════════════════════════
   LINKS & TEXT
   ═══════════════════════════════════════════ */

a {
  color: var(--accent);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--accent-hover);
}

.text-primary {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

#footer {
  background-color: var(--footer-bg);
  color: var(--footer-fg);
}
#footer .widget-title {
  color: var(--fg-heading);
}
#footer a {
  color: var(--fg-muted);
}
#footer a:hover {
  color: var(--accent);
}
#footer-bottom {
  background-color: var(--footer-bottom-bg);
  color: var(--fg-muted);
}
#footer-bottom .text-primary {
  color: var(--accent) !important;
}

/* Widget contact */
.widget-contact ul li {
  color: var(--fg-muted);
}
.widget-contact ul li span {
  color: var(--fg-heading);
}

/* ═══════════════════════════════════════════
   BUTTONS & INTERACTIVE
   ═══════════════════════════════════════════ */
/* Go top button — transparent, accent-colored icon */
#go-top {
  color: var(--accent);
  background: transparent;
}

/* Search */
#search-container,
#search-form input {
  background-color: var(--bg-muted);
  color: var(--fg);
  border-color: var(--border);
}

/* Inputs */
input, textarea, select {
  background-color: var(--bg-card);
  color: var(--fg);
  border-color: var(--border);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Code / pre blocks */
pre, code {
  background-color: var(--bg-code);
  color: var(--fg);
}

/* ═══════════════════════════════════════════
   DARK-SPECIFIC OVERRIDES
   (for hardcoded colors in custom.css / pages-style.css)
   ═══════════════════════════════════════════ */

[data-theme="dark"] {

  /* ── Section depth: alternating sections darker than body ── */
  section#services,
  section:nth-of-type(even) {
    background-color: #0b0a08;
  }

  /* Hero text: white on dark background image */
  .full-section-content,
  .full-section h1,
  .full-section h2,
  .full-section h3,
  .full-section h4,
  .full-section h5,
  .full-section h6,
  .full-section p {
    color: #ece6d8;
  }

  /* Headings — all cream in dark mode */
  h1, h2, h3, h4, h5, h6 {
    color: #ece6d8;
  }
  .headline h2, .headline h5, .headline p,
  .headline.style-3 h2, .headline.style-3 h5, .headline.style-3 p {
    color: #ece6d8;
  }
  .headline.style-3 h5 {
    color: #ff5d3b;
  }

  /* ── Brutal white-background elimination ── */

  /* Any element with background-color: #fff or #ffffff */
  .alert.alert-warning,
  .bx-wrapper .bx-pager.bx-default-pager a,
  .tp-bullets.simplebullets.round .bullet {
    background-color: #16140f !important;
  }

  /* Elements with white backgrounds + outlines */
  .bx-wrapper .bx-pager.bx-default-pager a.active {
    background-color: #ff5d3b !important;
  }

  /* Section backgrounds: override inline style white */
  #section-6,
  #section-12,
  section[style*="f4f4f4"],
  section[style*="f1f1f1"],
  section[style*="background:#fff"],
  section[style*="background-color:#fff"],
  section[style*="background: #fff"],
  section[style*="background-color: #fff"],
  div[style*="background:#f4f4f4"],
  div[style*="background: #f4f4f4"],
  div[style*="background-color:#f4f4f4"],
  div[style*="background-color: #f4f4f4"] {
    background-color: #0b0a08 !important;
  }

  /* Inline white backgrounds on any element */
  div[style*="background:#fff"],
  div[style*="background: #fff"],
  div[style*="background-color:#fff"],
  div[style*="background-color: #fff"],
  span[style*="background:#fff"],
  span[style*="background: #fff"] {
    background-color: #16140f !important;
    background: #16140f !important;
  }

  /* Sticky header */
  #header-sticky {
    background-color: #100f0d !important;
    box-shadow: 0 1px 3px #000;
  }
  .header-sticky .menu li > a {
    color: #aba297;
  }

  /* Accent color: #bca480 → #ff5d3b — NOT on tab/footer links */
  a {
    color: #ff5d3b;
  }
  a:hover {
    color: #e04a2a;
  }
  .text-primary,
  .headline.style-3 h5,
  nav .menu > li.active > a,
  nav .menu > li:hover > a {
    color: #ff5d3b !important;
  }

  /* Buttons */
  .btn-primary {
    background-color: #ff5d3b !important;
    border-color: #ff5d3b !important;
    color: #160c08 !important;
  }

  /* Search */
  a.search-button,
  #search-trigger {
    color: #aba297 !important;
  }

  /* Mobile menu */
  #mobile-menu-button {
    color: #ece6d8 !important;
  }

  /* Headline deco */
  .headline.style-3 h2:after {
    background-color: #ff5d3b;
  }

  /* Menu arrows */
  nav .sf-arrows .sf-with-ul:after {
    border-top-color: #aba297;
  }

  /* ── Bootstrap component overrides ── */

  .nav > li > a:hover,
  .nav > li > a:focus,
  .nav .open > a,
  .nav .open > a:hover {
    background-color: #1b1916;
  }

  .dropdown-menu {
    background-color: #161410;
    border-color: #2a2620;
  }
  .dropdown-menu > li > a {
    color: #ece6d8;
  }
  .dropdown-menu > li > a:hover {
    background-color: #1b1916;
    color: #ff5d3b;
  }

  .well {
    background-color: #1b1916;
    border-color: #2a2620;
  }

  .panel,
  .panel-default {
    background-color: #16140f;
    border-color: #2a2620;
  }
  .panel-heading,
  .panel-footer,
  .panel-default > .panel-heading {
    background-color: #1b1916;
    border-color: #2a2620;
    color: #ece6d8;
  }

  .modal-content {
    background-color: #161410;
    border-color: #2a2620;
  }
  .modal-header,
  .modal-footer {
    border-color: #2a2620;
  }

  .list-group-item {
    background-color: #16140f;
    border-color: #2a2620;
  }

  .breadcrumb {
    background-color: #16140f;
  }
  .breadcrumb > li + li:before {
    color: #aba297;
  }
  .breadcrumb > .active {
    color: #aba297;
  }

  .pagination > li > a,
  .pagination > li > span {
    background-color: #16140f;
    color: #ece6d8;
    border-color: #2a2620;
  }
  .pagination > .active > a {
    background-color: #ff5d3b;
    border-color: #ff5d3b;
    color: #160c08;
  }

  .progress {
    background-color: #1b1916;
  }
  .progress-bar,
  .label-primary,
  .badge-primary,
  .label {
    background-color: #ff5d3b !important;
    color: #160c08 !important;
  }

  .alert {
    background-color: #16140f;
    border-color: #2a2620;
    color: #ece6d8;
  }
  .alert-info {
    background-color: #16140f;
    border-color: #ff5d3b;
  }

  .filter button,
  .filter a {
    background-color: #16140f;
    color: #aba297;
    border-color: #2a2620;
  }
  .filter button.active,
  .filter a.active {
    background-color: #ff5d3b;
    color: #160c08;
    border-color: #ff5d3b;
  }

  .testimonial {
    background-color: #16140f;
    border-color: #2a2620;
  }

  .price-plan {
    background-color: #16140f;
    border-color: #2a2620;
  }

  table, th, td {
    border-color: #2a2620;
  }
  th {
    background-color: #1b1916;
  }

  blockquote {
    border-left-color: #ff5d3b;
    color: #aba297;
  }

  hr {
    border-top-color: #2a2620;
  }

  .input-group-addon {
    background-color: #1b1916;
    border-color: #2a2620;
    color: #aba297;
  }

  .tooltip-inner {
    background-color: #ece6d8;
    color: #100f0d;
  }

  .carousel-control {
    color: #ece6d8;
  }
  .carousel-indicators li {
    border-color: #ece6d8;
  }
  .carousel-indicators .active {
    background-color: #ff5d3b;
  }

  /* Accent-colored elements → ember */
  section[style*="bca480"],
  div[style*="background:#bca480"],
  div[style*="background: #bca480"],
  div[style*="background-color:#bca480"],
  div[style*="background-color: #bca480"] {
    background-color: #ff5d3b !important;
    background: #ff5d3b !important;
  }

  /* Hero overlay */
  .full-section[style*="bg-3"]::before {
    background: rgba(0,0,0,0.2);
  }

  /* Page header */
  .page-header,
  .page-heading {
    background-color: #16140f;
    border-color: #2a2620;
  }
}

/* ═══════════════════════════════════════════
   GLOBAL TRANSITIONS
   ═══════════════════════════════════════════ */

header, footer, section, .services-boxes, .tab-content,
#page-wrapper, nav, .headline, .content, .container,
.vertical-tabs, .nav-tabs, .tab-pane {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}