/*-----------------------------------------------------------------------------------
    MARINE THEME - ENHANCED OVERRIDES
    
    This file contains additional specific overrides for elements that weren't
    caught by the general overrides. Include this AFTER marine-theme-overrides.css
    
    Or replace marine-theme-overrides.css with this enhanced version.
-----------------------------------------------------------------------------------*/

/* ====================== IMPORT BASE COLORS ====================== */
/* Make sure marine-colors.css is loaded first! */

/* ====================== NAVBAR FIXES ====================== */

/* Navbar - All States */
.navbar,
.navbar.nav-scroll,
.navbar.change {
  background: var(--bg-dark) !important;
}

.navbar .navbar-brand {
  background: transparent !important;
}

/* Navbar when scrolled/sticky */
.navbar.nav-scroll {
  background: var(--bg-darkest) !important;
  box-shadow: 0 2px 20px rgba(10, 37, 64, 0.3) !important;
}

/* Navbar Links */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-item a {
  color: var(--text-primary-dark) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item a:hover,
.navbar .navbar-nav .nav-item a.active {
  color: var(--primary-aqua) !important;
}

/* Mobile Menu */
.navbar-collapse {
  background: var(--bg-darkest) !important;
}

.hamenu,
.hamenu .menu-links {
  background: var(--bg-dark) !important;
}

/* ====================== STATS/NUMBERS BOXES ====================== */

/* Numbers/Stats Section - Fix brown boxes */
.numbers,
.numbers-box,
.feat-numbers,
.stats-section {
  background: transparent !important;
}

/* Individual stat boxes - CRITICAL FIX */
.numbers .item,
.numbers-box .item,
.feat-numbers .item,
.num-item,
[class*="number"] .item {
  background: var(--bg-dark-card) !important;
  border: 1px solid var(--border-dark) !important;
}

/* Stat box hover */
.numbers .item:hover,
.numbers-box .item:hover {
  background: var(--bg-dark-secondary) !important;
  box-shadow: var(--shadow-aqua) !important;
}

/* Stats numbers color */
.numbers .item h3,
.numbers .item .count,
.feat-numbers h3,
.num-item h3,
[class*="number"] h3 {
  color: var(--primary-aqua) !important;
}

/* Stats text */
.numbers .item span,
.numbers .item p,
.feat-numbers span,
.num-item span {
  color: var(--text-primary-dark) !important;
}

/* SPECIFIC FIX for your "25 Years" and "290+" boxes */
.bord-box,
.numbers .bord-box,
[class*="years"],
[class*="clients"],
[class*="projects"] {
  background: var(--bg-dark-card) !important;
  border-color: var(--border-dark) !important;
}

/* ====================== SERVICES SECTION ====================== */

/* Services Section Background */
.services-col,
.services-section,
section.services,
.services5 {
  background: var(--bg-dark) !important;
}

/* Service Items */
.services-col .item-bx,
.services .item-bx,
.service-item,
.item-bx {
  background: var(--bg-dark-card) !important;
  border: 1px solid var(--border-dark) !important;
  transition: all 0.3s ease;
}

/* Service Items Hover */
.services-col .item-bx:hover,
.services .item-bx:hover,
.service-item:hover,
.item-bx:hover {
  background: var(--bg-dark-secondary) !important;
  transform: translateY(-5px);
  box-shadow: var(--shadow-aqua) !important;
}

/* Service Icons */
.services-col .item-bx .icon,
.services .item-bx .icon,
.service-item .icon,
.item-bx .icon,
.item-bx span[class*="flaticon"],
.item-bx span[class*="icon"] {
  color: var(--primary-aqua) !important;
}

/* Service Titles */
.services-col .item-bx h6,
.services .item-bx h6,
.service-item h6,
.item-bx h6 {
  color: var(--text-primary-dark) !important;
}

/* Service Text */
.services-col .item-bx p,
.services .item-bx p,
.service-item p,
.item-bx p {
  color: var(--text-secondary-dark) !important;
}

/* Service "Read More" Links */
.services-col .item-bx .more,
.services .item-bx .more,
.service-item .more,
.item-bx .more,
.item-bx a.more {
  color: var(--primary-aqua) !important;
}

.services-col .item-bx .more:hover,
.item-bx a.more:hover {
  color: var(--aqua-light) !important;
}

/* ====================== SECTION BACKGROUNDS - ALTERNATING ====================== */

/* Default section background */
section,
.section-padding {
  background: var(--bg-dark);
}

/* Alternate sections with different navy shade */
section:nth-child(even),
.section-padding:nth-child(even) {
  background: var(--bg-dark-secondary);
}

/* Or use these specific classes for manual control */
.section-navy-dark {
  background: var(--bg-dark) !important;
}

.section-navy-medium {
  background: var(--bg-dark-secondary) !important;
}

.section-navy-light {
  background: var(--bg-dark-card) !important;
}

.section-navy-darkest {
  background: var(--bg-darkest) !important;
}

/* ====================== SPECIFIC COMPONENT FIXES ====================== */

/* About Section */
.about,
.about-section {
  background: var(--bg-dark);
}

/* About boxes/cards */
.about .feat,
.about .item,
.about-box {
  background: var(--bg-dark-card) !important;
}

/* Footer - Force darkest navy */
footer,
.footer {
  background: var(--bg-darkest) !important;
}

/* ====================== BORDERS & DIVIDERS ====================== */

/* All borders in dark theme */
.bord-box,
.border,
[class*="border"],
.row.bord-box,
.bord-box .col-lg-3,
.bord-box .col-md-6 {
  border-color: var(--border-dark) !important;
}

/* Remove or fix borders that break layout */
.services-col .row.bord-box {
  border: none !important;
}

.services-col .item-bx {
  border: 1px solid var(--border-dark) !important;
  border-radius: 8px;
}

/* ====================== TEXT COLORS ====================== */

/* Ensure all headings are white on dark backgrounds */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary-dark) !important;
}

/* Paragraph text */
p {
  color: var(--text-secondary-dark) !important;
}

/* Links */
a {
  color: var(--primary-aqua);
}

a:hover {
  color: var(--aqua-light);
}

/* ====================== MAIN HEADER (Section Titles) ====================== */

.main-header h3,
.main-header h2,
.sec-head h3,
.section-head h3 {
  color: var(--text-primary-dark) !important;
}

.main-header .tex-bg,
.tex-bg,
.text-bg {
  color: rgba(69, 183, 209, 0.1) !important;
  -webkit-text-stroke: 1px rgba(69, 183, 209, 0.2);
}

/* ====================== BUTTONS ====================== */

/* All button types */
.butn,
.btn,
button,
[class*="button"] {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 2px solid var(--btn-primary-bg) !important;
}

.butn:hover,
.btn:hover,
button:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}

/* Secondary/Outline buttons */
.butn-light,
.btn-outline {
  background: transparent !important;
  color: var(--primary-aqua) !important;
  border: 2px solid var(--primary-aqua) !important;
}

.butn-light:hover,
.btn-outline:hover {
  background: var(--primary-aqua) !important;
  color: var(--text-primary-dark) !important;
}

/* ====================== SPECIFIC LAYOUT FIXES ====================== */

/* Top bar (if exists) */
.topbar,
.top-bar {
  background: var(--bg-darkest) !important;
}

/* Hero/Intro sections */
.intro,
.header,
.hero {
  background: var(--bg-dark) !important;
}

.intro:after,
.header:after,
.hero:after {
  background: var(--overlay-dark) !important;
}

/* ====================== PORTFOLIO/WORKS ====================== */

.works,
.portfolio {
  background: var(--bg-dark);
}

.works .item,
.portfolio .item {
  background: var(--bg-dark-card);
}

.works .item:hover .cont,
.portfolio .item:hover .cont {
  background: var(--overlay-navy) !important;
}

/* ====================== BLOG ====================== */

.blog,
.blog-section {
  background: var(--bg-dark-secondary);
}

.blog .item {
  background: var(--bg-dark-card) !important;
}

/* ====================== CONTACT FORM ====================== */

.contact,
.contact-section {
  background: var(--bg-dark);
}

.contact .form input,
.contact .form textarea {
  background: var(--bg-dark-card) !important;
  border: 1px solid var(--border-dark) !important;
  color: var(--text-primary-dark) !important;
}

.contact .form input:focus,
.contact .form textarea:focus {
  border-color: var(--primary-aqua) !important;
  box-shadow: 0 0 0 3px rgba(69, 183, 209, 0.1) !important;
}

/* ====================== FIXES FOR INLINE STYLES ====================== */

/* Override any inline background colors */
[style*="background: #"] {
  background: var(--bg-dark-card) !important;
}

[style*="background-color: #"] {
  background-color: var(--bg-dark-card) !important;
}

/* ====================== RESPONSIVE ADJUSTMENTS ====================== */

@media (max-width: 991px) {
  /* Mobile navbar */
  .navbar {
    background: var(--bg-dark) !important;
  }
  
  .navbar-collapse {
    background: var(--bg-darkest) !important;
  }
  
  /* Mobile service items - stack better */
  .services-col .item-bx {
    margin-bottom: 30px;
  }
}

/* ====================== IMPORTANT OVERRIDES ====================== */

/* Use these if nothing else works - forces colors */
.force-navy-bg {
  background: var(--bg-dark) !important;
}

.force-navy-card {
  background: var(--bg-dark-card) !important;
}

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

.force-white-text {
  color: var(--text-primary-dark) !important;
}

/* ====================== UTILITY CLASSES ====================== */

/* Add these classes to elements that need specific colors */

.bg-navy { background: var(--bg-dark) !important; }
.bg-navy-secondary { background: var(--bg-dark-secondary) !important; }
.bg-navy-card { background: var(--bg-dark-card) !important; }
.bg-navy-darkest { background: var(--bg-darkest) !important; }

.text-aqua { color: var(--primary-aqua) !important; }
.text-white { color: var(--text-primary-dark) !important; }
.text-light-blue { color: var(--text-secondary-dark) !important; }

.border-aqua { border-color: var(--primary-aqua) !important; }
.border-navy { border-color: var(--border-dark) !important; }

/* ====================== DEBUGGING HELPERS ====================== */

/* Uncomment these to see which sections are using which backgrounds */

/*
section:nth-child(odd) {
  border: 2px solid red !important;
}

section:nth-child(even) {
  border: 2px solid blue !important;
}
*/