/* ZMRD Global — centralized brand color system */
:root {
  --brand-navy: #062C57;
  --brand-gold: #BB904A;
  --brand-white: #FFFFFF;

  --bg-main: #FFFFFF;
  --bg-soft: #F8F9FB;
  --bg-section: #F1F4F7;
  --bg-footer: #062C57;

  --text-primary: #062C57;
  --text-secondary: #526273;
  --text-muted: #7B8794;
  --text-on-navy: #FFFFFF;
  --text-on-gold: #FFFFFF;

  --border: #E2E7EC;
  --border-strong: rgba(6, 44, 87, 0.18);
  --shadow-sm: 0 6px 18px rgba(6, 44, 87, 0.06);
  --shadow-md: 0 12px 28px rgba(6, 44, 87, 0.1);

  --accent: var(--brand-gold);
  --focus-ring: rgba(187, 144, 74, 0.28);

  /* legacy aliases used by style.css */
  --marine-bg: var(--bg-main);
  --marine-bg-alt: var(--bg-section);
  --marine-text: var(--text-primary);
  --marine-text-muted: var(--text-muted);
  --marine-border: var(--border);
  --marine-primary: var(--brand-navy);
  --marine-primary-dark: #041F3E;
  --marine-gold: var(--brand-gold);
  --marine-gold-dark: #9A7538;
}

html.dark,
body.dark {
  --bg-main: #071A2D;
  --bg-soft: #0B223A;
  --bg-section: #0F2D49;
  --bg-footer: #051526;

  --text-primary: #FFFFFF;
  --text-secondary: #C5D0DB;
  --text-muted: #8FA0B0;
  --text-on-navy: #FFFFFF;
  --text-on-gold: #FFFFFF;

  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(187, 144, 74, 0.35);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.3);

  --marine-bg: var(--bg-main);
  --marine-bg-alt: var(--bg-section);
  --marine-text: var(--text-primary);
  --marine-text-muted: var(--text-muted);
  --marine-border: var(--border);
  --marine-primary: var(--brand-navy);
  --marine-gold: var(--brand-gold);

  color-scheme: dark;
}

html {
  color-scheme: light;
}

body,
body.bg-slate-50 {
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ---------- Header / Nav ---------- */
.header {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
.header.scrolled {
  box-shadow: var(--shadow-sm) !important;
}
html.dark .header,
html.dark .header.scrolled,
body.dark .header,
body.dark .header.scrolled {
  background: var(--bg-main) !important;
  border-bottom-color: var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.nav-logo .logo-brand .main {
  color: var(--brand-navy) !important;
}
.nav-logo .logo-brand .sub {
  color: var(--brand-gold) !important;
}
body.dark .nav-logo .logo-brand .main {
  color: var(--brand-white) !important;
}
body.dark .nav-logo .logo-brand .sub {
  color: var(--brand-gold) !important;
}
.nav-logo .logo-img {
  background: transparent !important;
  padding: 0 !important;
}
body.dark .nav-logo .logo-img {
  background: var(--brand-white) !important;
  padding: 0.25rem 0.4rem !important;
  border-radius: 0.5rem;
}
.nav-link {
  color: var(--brand-navy) !important;
}
body.dark .nav-link {
  color: var(--brand-white) !important;
}
.nav-link:hover,
.nav-link.active {
  color: var(--brand-gold) !important;
}
.hamburger .bar {
  background: var(--brand-navy) !important;
}
body.dark .hamburger .bar {
  background: var(--brand-gold) !important;
}

/* Theme / language toggles */
.theme-toggle,
.language-toggle {
  border: 1.5px solid var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}
.theme-toggle:hover,
.language-toggle:hover {
  background: var(--brand-navy) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-navy) !important;
}
body.dark .theme-toggle,
body.dark .language-toggle {
  border-color: var(--brand-gold) !important;
  color: var(--brand-gold) !important;
  background: transparent !important;
}
body.dark .theme-toggle:hover,
body.dark .language-toggle:hover {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-gold) !important;
}

@media (max-width: 1023px) {
  .nav-menu {
    background: var(--bg-main) !important;
    border-color: var(--border) !important;
  }
  body.dark .nav-menu {
    background: var(--bg-soft) !important;
  }
}

/* ---------- Buttons ---------- */
.btn-hero-primary,
.contact-submit,
.btn.btn-primary,
a.btn-primary {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
  border: 1.5px solid var(--brand-gold) !important;
  box-shadow: none !important;
}
.btn-hero-primary:hover,
.contact-submit:hover,
.btn.btn-primary:hover,
a.btn-primary:hover {
  background: #a67d3d !important;
  border-color: #a67d3d !important;
  color: var(--brand-white) !important;
}
.service-card-link {
  display: inline-flex;
  margin-top: 0.85rem;
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-gold) !important;
}
.service-card-link:hover {
  background: #a67d3d !important;
  border-color: #a67d3d !important;
}
.marine-agency-page .btn-hero-primary {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
  border: 1.5px solid var(--brand-gold) !important;
}
.btn-hero-outline,
.btn.btn-secondary,
a.btn-secondary {
  background: transparent !important;
  color: var(--brand-navy) !important;
  border: 1.5px solid var(--brand-navy) !important;
}
.btn-hero-outline:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover {
  background: rgba(6, 44, 87, 0.06) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-navy) !important;
}
/* Hero secondary CTA: readable on dark hero image (light + dark) */
.hero-bg .btn-hero-outline,
.hero-bg a.btn-hero-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--brand-white) !important;
  border: 1.5px solid var(--brand-gold) !important;
}
.hero-bg .btn-hero-outline:hover,
.hero-bg a.btn-hero-outline:hover {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-gold) !important;
}
body.dark .btn-hero-outline,
body.dark .btn.btn-secondary,
body.dark a.btn-secondary {
  color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
}
body.dark .btn-hero-outline:hover,
body.dark .btn.btn-secondary:hover,
body.dark a.btn-secondary:hover {
  background: rgba(187, 144, 74, 0.12) !important;
  color: var(--brand-white) !important;
}
body.dark .hero-bg .btn-hero-outline,
body.dark .hero-bg a.btn-hero-outline {
  color: var(--brand-white) !important;
  border-color: var(--brand-gold) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.dark .hero-bg .btn-hero-outline:hover,
body.dark .hero-bg a.btn-hero-outline:hover {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
}

/* ---------- Sections (alternating) ---------- */
.about-section {
  background: var(--bg-main) !important;
}
.identity-section {
  background: var(--bg-section) !important;
}
#services {
  background: var(--bg-soft) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
body.dark #services {
  background: var(--bg-section) !important;
}
#portfolio {
  background: var(--bg-main) !important;
}
#location {
  background: var(--bg-section) !important;
}
.contact-section {
  background: var(--bg-soft) !important;
}
body.dark .about-section,
body.dark .identity-section,
body.dark #portfolio,
body.dark #location,
body.dark .contact-section {
  background: var(--bg-main) !important;
}
body.dark .identity-section,
body.dark #location {
  background: var(--bg-section) !important;
}
body.dark .contact-section,
body.dark #services {
  background: var(--bg-soft) !important;
}

.section-title,
.about-title,
.portfolio-main-title,
.location-content h2,
.videos-section-title {
  color: var(--text-primary) !important;
}
.section-desc,
.about-lead,
.section-desc-light {
  color: var(--text-secondary) !important;
}
.section-badge,
.about-badge,
.location-badge,
.section-badge-light {
  background: rgba(6, 44, 87, 0.08) !important;
  color: var(--brand-navy) !important;
  border: 1px solid rgba(187, 144, 74, 0.35) !important;
}
body.dark .section-badge,
body.dark .about-badge,
body.dark .location-badge,
body.dark .section-badge-light,
body.dark #portfolio .gallery-section-header .section-badge-light,
body.dark section#gallery .gallery-section-header .section-badge-light,
body.dark #field-videos .gallery-section-header .section-badge-light {
  background: rgba(187, 144, 74, 0.14) !important;
  color: var(--brand-gold) !important;
  border-color: rgba(187, 144, 74, 0.45) !important;
}
.section-divider {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-gold)) !important;
}

/* Numbers / stats — gold accent */
.about-num,
#portfolio .stats-box .num,
.stat-number,
.identity-stat-num {
  color: var(--brand-gold) !important;
}
.identity-stat {
  background: var(--bg-main) !important;
  border: 1px solid var(--border) !important;
}
body.dark .identity-stat {
  background: var(--bg-soft) !important;
}
.identity-stat:hover {
  border-color: var(--brand-gold) !important;
}
.identity-stat-label {
  color: var(--text-primary) !important;
}
.about-badge-years {
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-gold)) !important;
}

/* ---------- Cards ---------- */
.service-card,
.identity-card,
.contact-info-card,
.contact-form-block,
#location .info-card,
.video-card,
.gallery-item {
  background: var(--bg-main) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
body.dark .service-card,
body.dark .identity-card,
body.dark .contact-info-card,
body.dark .contact-form-block,
body.dark #location .info-card,
body.dark .video-card {
  background: var(--bg-soft) !important;
  border-color: var(--border) !important;
}
.service-card:hover,
.identity-card:hover,
.contact-info-card:hover,
#location .info-card:hover,
.video-card:hover {
  border-color: var(--brand-gold) !important;
  box-shadow: var(--shadow-md) !important;
}
.service-card h3,
.identity-card h3,
.contact-info-card h4,
.video-card-body h4 {
  color: var(--text-primary) !important;
}
.service-card p,
.identity-card p,
.contact-info-card p,
.contact-info-card a,
.video-card-body p,
#location .info-card p {
  color: var(--text-secondary) !important;
}
body.dark .contact-info-card a:hover {
  color: var(--brand-gold) !important;
}

/* About feature chips — separate cards, correct light/dark surfaces */
.about-features {
  background: transparent !important;
}
.about-feature {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
}
body.dark .about-feature {
  background: var(--bg-soft) !important;
  border-color: var(--border) !important;
}
.about-feature span {
  color: var(--text-primary) !important;
}
.about-feature-icon {
  background: rgba(6, 44, 87, 0.1) !important;
  color: var(--brand-navy) !important;
  border: none !important;
}
body.dark .about-feature-icon {
  background: rgba(187, 144, 74, 0.14) !important;
  color: var(--brand-gold) !important;
  border: 1px solid rgba(187, 144, 74, 0.35) !important;
}

/* Icons — navy primary, gold for emphasis */
.service-card .card-icon,
.service-icon-badge,
.contact-info-icon,
#location .info-card i,
.footer-contact-list i,
.footer-brand-icon,
.about-trusted-icon {
  background: rgba(6, 44, 87, 0.08) !important;
  color: var(--brand-navy) !important;
}
.service-icon-badge,
.contact-info-icon {
  background: var(--brand-navy) !important;
  color: var(--brand-white) !important;
}
.service-card:hover .card-icon {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
}
body.dark .service-card .card-icon,
body.dark #location .info-card i,
body.dark .footer-contact-list i {
  background: rgba(187, 144, 74, 0.12) !important;
  color: var(--brand-gold) !important;
}
body.dark .service-icon-badge,
body.dark .contact-info-icon {
  background: var(--brand-gold) !important;
  color: var(--brand-white) !important;
}
body.dark .about-trusted-icon {
  background: rgba(187, 144, 74, 0.14) !important;
  color: var(--brand-gold) !important;
}

/* Gallery filters */
.gallery-filter,
#portfolio .gallery-filter,
section#gallery .gallery-filter {
  border: 1.5px solid var(--border) !important;
  color: var(--text-primary) !important;
  background: var(--bg-main) !important;
  font-weight: 700 !important;
}
.gallery-filter:hover,
.gallery-filter.active,
#portfolio .gallery-filter:hover,
#portfolio .gallery-filter.active,
section#gallery .gallery-filter:hover,
section#gallery .gallery-filter.active {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-white) !important;
}
body.dark .gallery-filter,
body.dark #portfolio .gallery-filter,
body.dark section#gallery .gallery-filter {
  background: var(--bg-soft) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
body.dark .gallery-filter.active,
body.dark .gallery-filter:hover,
body.dark #portfolio .gallery-filter.active,
body.dark #portfolio .gallery-filter:hover,
body.dark section#gallery .gallery-filter.active,
body.dark section#gallery .gallery-filter:hover {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-white) !important;
}

/* Forms */
.contact-label {
  color: var(--text-primary) !important;
}
.contact-input {
  background: var(--bg-main) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.contact-input:focus {
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
body.dark .contact-input {
  background: var(--bg-main) !important;
}

/* ---------- Footer (navy brand surface) ---------- */
.footer {
  background: var(--bg-footer) !important;
  border-top: none !important;
  color: var(--text-on-navy) !important;
}
.footer::before {
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-navy), var(--brand-gold)) !important;
  height: 3px !important;
}
.footer-brand-name,
.footer-title,
.footer-description,
.footer-menu a,
.footer-contact-list li,
.footer-contact-list a,
.footer-copyright {
  color: rgba(255, 255, 255, 0.92) !important;
}
.footer-title {
  color: var(--brand-gold) !important;
}
.footer-title::after {
  background: var(--brand-gold) !important;
}
.footer-menu a:hover,
.footer-contact-list a:hover {
  color: var(--brand-gold) !important;
}
.footer-logo-img {
  background: transparent !important;
  padding: 0 !important;
}
body.dark .footer-logo-img,
.footer-logo-img {
  background: var(--brand-white) !important;
  padding: 0.35rem 0.5rem !important;
  border-radius: 0.5rem;
}
.social-link {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--brand-white) !important;
  border: 1px solid rgba(187, 144, 74, 0.45) !important;
}
.social-link:hover {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-white) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
}
body.dark .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Portfolio header — readable on light/dark section bg */
#portfolio .gallery-section-header .portfolio-main-title,
#portfolio .gallery-section-header .section-title {
  color: var(--text-primary) !important;
}
#portfolio .gallery-section-header .section-desc-light,
#portfolio .gallery-section-header .section-desc {
  color: var(--text-secondary) !important;
}
#portfolio .gallery-section-header .section-badge-light {
  background: rgba(6, 44, 87, 0.08) !important;
  color: var(--brand-navy) !important;
  border: 1px solid rgba(187, 144, 74, 0.35) !important;
}
body.dark #portfolio .gallery-section-header .section-badge-light {
  background: rgba(187, 144, 74, 0.14) !important;
  color: var(--brand-gold) !important;
  border-color: rgba(187, 144, 74, 0.5) !important;
}

/* Soft transitions for theme switching */
.header,
.footer,
.service-card,
.identity-card,
.contact-info-card,
.contact-form-block,
.about-section,
.identity-section,
#services,
#portfolio,
#location,
.contact-section,
.nav-link,
.theme-toggle,
.language-toggle {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

/* Ensure html.dark (FOUC) matches body.dark component rules before JS runs */
html.dark body {
  background-color: var(--bg-main);
  color: var(--text-primary);
}