/* ============================================================
   Dark + Teal Theme
   Loaded last so it wins the cascade over critical.css/main.css
   and inline page styles. Dark "physical AI" surface with a
   teal accent. NOTE: the logo is still orange — recolor it to
   teal (or a neutral) to fully match this theme.
   ============================================================ */

:root {
  --primary-color: #15c2a3;   /* teal accent on dark */
  --primary-hover: #34d4b6;   /* brighter teal for hovers */
  --secondary-color: #f4ede6; /* light text on dark bg */
  --accent-color: #5fe0c8;
  --text-dark: #f4ede6;       /* primary text (light on near-black) */
  --text-medium: #cabbac;
  --text-light: #92857a;
  --bg-light: #141210;
  --bg-section: #0b0a08;
  --border-light: #2a2420;
  --shadow-light: 0 2px 10px rgba(255, 122, 51, 0.12);
  --shadow-medium: 0 8px 30px rgba(255, 122, 51, 0.18);
}

/* ---- Base / backgrounds ---- */
html,
body {
  background: #0b0a08 !important;
  background-attachment: fixed;
  color: #f4ede6 !important;
}

/* Neutralize the orange light gradients -> dark with subtle warm glow */
.hero,
.hero.main-hero,
.hero-landing {
  background: radial-gradient(ellipse at 70% 50%, rgba(255, 122, 51, 0.10) 0%, transparent 60%), #0b0a08 !important;
}

.content-section,
.faq-section,
.insights-section {
  background: transparent;
}

.team-section {
  background: #141210;
}

/* ---- Headings & text ---- */
h1,
.hero h1,
h2,
h3,
.faq-intro h2,
.insight-title,
.team-name,
.logo-text {
  color: #f4ede6 !important;
}

.hero-text h1 span {
  color: #15c2a3 !important;
}

p,
.hero-subtitle,
.insight-excerpt,
.faq-answer {
  color: #d2c4b6 !important;
}

.hero-text .hero-sub {
  color: #cabbac !important;
}

/* ---- Links & accents ---- */
a {
  color: #15c2a3;
}

a:hover {
  color: #5fe0c8;
}

strong,
.team-role,
.faq-answer strong {
  color: #15c2a3 !important;
}

.post-content a,
.post-content a:hover {
  color: #15c2a3;
}

/* ---- Navigation ---- */
header.scrolled {
  background: rgba(11, 10, 8, 0.96) !important;
  box-shadow: 0 2px 10px rgba(255, 122, 51, 0.15);
}

.nav-center a,
.nav-links a:not(.contact-button) {
  color: #f4ede6;
}

.nav-center a:hover,
.nav-center a.active,
.nav-links a:hover,
.nav-links a.active {
  color: #15c2a3;
}

/* ---- Buttons / CTAs ---- */
.cta-button,
.read-more,
.nav-cta .contact-button,
.nav-links .contact-button {
  background: #15c2a3 !important;
  color: #04241c !important;
  border-color: #15c2a3 !important;
}

.cta-button:hover,
.read-more:hover,
.nav-cta .contact-button:hover,
.nav-links .contact-button:hover {
  background: #34d4b6 !important;
  border-color: #34d4b6 !important;
  color: #04241c !important;
  box-shadow: 0 10px 25px rgba(255, 122, 51, 0.35);
}

/* ---- Cards ---- */
.team-card,
.insight-card,
.faq-item {
  background: #141210 !important;
  border-color: #2a2420 !important;
  color: #f4ede6;
}

.team-card:hover,
.insight-card:hover {
  box-shadow: 0 10px 30px rgba(255, 122, 51, 0.18);
}

.insight-card:hover,
.faq-item:hover {
  border-color: #15c2a3 !important;
}

.faq-question {
  color: #f4ede6;
}

.faq-question:hover {
  background: #1c1814;
}

.faq-chevron {
  color: #15c2a3;
}

.team-photo,
.insight-icon {
  background: #2a2420;
}

.insight-meta,
.insight-author,
.insight-date {
  color: #cabbac;
}

/* ---- Highlight box ---- */
.highlight-box {
  background: #1a120c !important;
  border-left-color: #15c2a3 !important;
}

/* ---- Footer ---- */
footer {
  background: #000 !important;
  color: #cabbac !important;
}

.footer-section a {
  color: #cabbac !important;
}

.footer-section a:hover {
  color: #15c2a3 !important;
}

.footer-bottom {
  border-top: 1px solid #2a2420 !important;
  color: #92857a !important;
}

/* ---- Contact section gradient overlay ---- */
.contact-section {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(255, 122, 51, 0.28) 100%) !important;
}

.contact-section p {
  color: #d2c4b6 !important;
}

/* ---- Video / media wrappers stay dark ---- */
.video-wrapper,
.hero-video-wrapper video {
  background: #000;
}

/* ============================================================
   Consolidated dropdown navigation + mobile menu
   ============================================================ */
header nav.container { position: relative; }

.nav-links .caret { font-size: 0.7em; opacity: 0.75; margin-left: 2px; }
.nav-links .has-dropdown { position: relative; }

.nav-links .dropdown {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: #141210; border: 1px solid #2a2420; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1000;
}
.nav-links .has-dropdown:hover > .dropdown,
.nav-links .has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .dropdown li { margin: 0; }
.nav-links .dropdown a {
  display: block; padding: 0.55rem 0.8rem; border-radius: 6px;
  white-space: nowrap; color: #cabbac !important; font-weight: 500;
}
.nav-links .dropdown a:hover { background: #1c1814 !important; color: #2fd5b4 !important; }

/* hamburger */
.mobile-nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px; margin-left: auto;
}
.mobile-nav-toggle span {
  display: block; width: 24px; height: 2px; background: #f4ede6;
  border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .mobile-nav-toggle { display: flex; }
  .nav-links { display: none; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(11,10,8,0.98); border-top: 1px solid #2a2420;
    padding: 1rem 1.5rem 1.5rem; box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  }
  .nav-links.mobile-open .has-dropdown { width: 100%; }
  .nav-links.mobile-open .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0.1rem 0 0.5rem 1rem; min-width: 0;
  }
  .nav-links.mobile-open .dropdown a { padding: 0.45rem 0; }
  .nav-links.mobile-open .caret { display: none; }
}

/* Keep wide protocol tables from forcing horizontal page scroll on phones */
@media (max-width: 600px) {
  table.tbl { table-layout: fixed; width: 100%; }
  table.tbl th, table.tbl td { word-break: break-word; overflow-wrap: anywhere; }
}