/* ==========================================================================
   Ambiant Arch Studio — Dark Theme Override
   Loaded AFTER style.css (and the page's own <style> block) so these rules
   win the cascade. Layout, spacing and images are untouched — only colors.
   ========================================================================== */

:root{
  --dark-bg:        #0d0d0d;
  --dark-surface:   #161616;
  --dark-surface-2: #1e1e1e;
  --dark-border:    rgba(255,255,255,0.12);
  --text-light:     #efefef;
  --text-muted:     #a8a8a8;
  --accent:         #cee002;
}

/* ---- About section decorative dot-grid (looks noisy on dark bg) ---- */
.dots-image .dots{
  display: none;
}

/* ---- Plain black instead of the dotted texture (What We Do, Clients,
   Contact sections all use .bg-dots) ---- */
.bg-dots{
  background: none;
}

/* ---- Base page ---- */
html, body{
  background-color: var(--dark-bg);
  color: var(--text-muted);
}

.loader{
  background: var(--dark-bg);
  color: var(--text-muted);
}

.jumbotron{
  background-color: var(--dark-bg);
}

/* ---- Typography ---- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  color: var(--text-light);
}

.text-dark{
  color: var(--text-light) !important;
}

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

.mc-label,
label.error{
  color: #9a9a9a;
}

/* ---- Navbar ---- */
.navbar .brand,
a.brand:hover,
a.brand:focus{
  color: var(--text-light);
}

/* Bigger logo */
.brand img{
  height: 3.4rem;
}

.navbar-address{
  color: var(--text-light);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.navbar-toggle .icon-bar{
  background-color: var(--text-light);
}

.navbar-toggle:hover .icon-bar{
  background-color: var(--accent);
}

.social-list a{
  color: var(--text-light);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.social-list a:hover{
  color: var(--accent);
}

.navbar-spacer{
  background-color: var(--dark-border);
}

.navigation ul li a{
  color: var(--text-light);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.navigation ul .active a,
.navigation ul li a:hover{
  color: var(--accent);
}

.navbar.affix{
  background: rgba(13,13,13,0.94);
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

/* ---- Sidebar menu ---- */
.menu{
  background-color: var(--dark-surface);
}

.close-menu{
  color: var(--text-light);
}

.close-menu:hover{
  color: var(--accent);
}

.mobile-menu ul li a{
  color: var(--text-muted);
}

.mobile-menu ul .active > a,
.mobile-menu ul .active,
.mobile-menu ul li a:hover{
  color: var(--text-light);
}

.menu-footer .copy{
  color: var(--text-muted);
}

/* ---- What We Do (embedded section styles) ---- */
.fifo80 .wwd-item{
  color: var(--text-muted);
}

.fifo80 .wwd-item .icon{
  color: var(--text-light);
}

.fifo80 .wwd-item h4{
  color: var(--text-light);
}

.fifo80 .wwd-item p{
  color: var(--text-muted);
}

/* ---- Fields / forms ---- */
input[type='text'],
input[type='address'],
input[type='url'],
input[type='password'],
input[type='email'],
input[type="search"],
input[type="tel"],
textarea{
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--text-light);
}

input.input-gray,
textarea.input-gray{
  background: var(--dark-surface-2);
  color: var(--text-light);
}

input.input-gray:focus,
textarea.input-gray:focus{
  background: #232323;
}

input::-moz-placeholder,
textarea::-moz-placeholder{ color: #8a8a8a; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{ color: #8a8a8a; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{ color: #8a8a8a; }

/* ---- Buttons ---- */
.btn{
  background-color: var(--dark-surface-2);
  color: var(--text-light);
  border: 1px solid var(--dark-border);
}

.btn:hover,
.btn:focus{
  background-color: var(--accent);
  color: #111;
}

.btn-yellow{
  background: var(--accent);
  color: #111;
  border: 0;
}

.btn-yellow:hover,
.btn-yellow:focus{
  background: var(--text-light);
  color: #111;
}

/* ---- Projects / portfolio ---- */
.portfolio-category-title{
  border-top-color: var(--dark-border);
}

.owl-dot span{
  background-color: rgba(255,255,255,0.25);
}

.owl-dot.active span{
  background-color: var(--accent);
}

.owl-nav .disabled{
  color: #555;
}

.owl-prev,
.owl-next{
  color: var(--text-light);
}

.owl-prev:hover,
.owl-next:hover{
  color: var(--accent);
}

.zoom-anim-dialog{
  background: var(--dark-surface);
  color: var(--text-muted);
}

.mfp-close,
.mfp-close-btn-in .mfp-close{
  color: #fff !important;
}

/* ---- Clients / testimonials ---- */
.client-box{
  background-color: var(--dark-surface);
  color: var(--text-muted);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.client-name{
  color: var(--text-light);
}

/* ---- Team ---- */
/* The member name/role only ever appears on top of the bright accent
   hover overlay, so it must stay dark there regardless of the page theme. */
.team-hover .team-name h6,
.team-hover .team-spec{
  color: #111 !important;
}

.add-new-team{
  border-color: var(--dark-border);
}

.add-new-text{
  color: var(--text-light);
}

.add-new-text .inner a{
  color: var(--text-light) !important;
}

.add-new-team:hover .add-new-text,
.add-new-team:hover .add-new-text .inner a{
  color: #111 !important;
}

/* ---- Contacts ---- */
.contact-title span{
  color: var(--text-muted);
}

.contact-social a{
  color: var(--text-muted);
}

.contact-social a:hover{
  color: var(--accent);
}

/* ---- Footer ---- */
.footer{
  color: var(--text-light);
}

.footer ul li a{
  color: var(--text-light);
}

.footer ul .active a,
.footer ul li a:hover{
  color: var(--accent);
}

/* ---- Scrollbar track (thumb already uses accent) ---- */
::-webkit-scrollbar-track{
  background: #111;
}