/* ============================================
   BuildGuide — Company Detail upgrades
   Brand v2 (navy + gold + trust green)
   ============================================ */

.page-company {
  background: var(--color-cream);
}

/* Cover gradient = navy → trust green met gold accent */
.company-hero__cover {
  height: 220px;
  background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-trust-green) 100%) !important;
}
@media (min-width: 768px) {
  .company-hero__cover { height: 260px; }
}
.company-hero__cover-gradient {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 75% 30%, rgba(232, 176, 75, 0.20) 0%, transparent 60%),
    radial-gradient(circle at 20% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-trust-green) 100%) !important;
}

/* BG Score badge GROOT rechtsboven in cream cirkel met gold accent */
.company-hero__score {
  margin-top: -68px !important;
}
.bg-score--xl {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: var(--color-brand-gold) !important;
  border: 5px solid #fff !important;
  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.bg-score--xl .bg-score__value {
  color: var(--color-brand-navy) !important;
  font-size: 32px !important;
}
.bg-score--xl .bg-score__label {
  color: rgba(11, 37, 69, 0.75) !important;
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px !important;
}
.company-hero__score-text {
  color: var(--color-brand-navy) !important;
  font-weight: var(--font-semibold);
}

/* Avatar accent border in gold */
.company-hero__avatar {
  background: linear-gradient(135deg, var(--color-cream-warm), var(--color-cream)) !important;
  border-color: #fff !important;
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.15);
}
.company-hero__avatar-initials {
  color: var(--color-brand-navy) !important;
}

/* Hero title */
.company-hero__name {
  color: var(--color-brand-navy) !important;
}

/* Verificatie badges rij */
.company-hero__verifications {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
  color: rgba(11, 37, 69, 0.7);
}
.company-hero__verifications span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.company-hero__verifications svg {
  color: var(--color-trust-green);
}

/* Trust line: reageert binnen + actief sinds */
.company-hero__trustline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 6px 12px;
  background: rgba(46, 125, 91, 0.08);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-trust-green);
  font-weight: var(--font-medium);
}
.company-hero__trustline::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-trust-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 91, 0.20);
}

/* Action bar = navy buttons */
.company-action--primary {
  background: var(--color-brand-navy) !important;
  border-color: var(--color-brand-navy) !important;
  color: #fff !important;
}
.company-action--primary:hover {
  background: var(--color-brand-gold) !important;
  border-color: var(--color-brand-gold) !important;
  color: var(--color-brand-navy) !important;
}
.company-action:hover {
  border-color: var(--color-brand-gold) !important;
  color: var(--color-brand-navy) !important;
}

/* Tabs (vanilla JS, geen framework) */
.company-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.company-tabs::-webkit-scrollbar { display: none; }
.company-tab {
  background: none;
  border: none;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: rgba(11, 37, 69, 0.6);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}
.company-tab:hover { color: var(--color-brand-navy); }
.company-tab.is-active {
  color: var(--color-brand-navy);
  border-bottom-color: var(--color-brand-gold);
}

/* Sticky CTA — desktop right sidebar (already exists), mobile bottom-fixed */
@media (max-width: 1023px) {
  .company-cta-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background: #fff;
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -4px 16px rgba(11, 37, 69, 0.10);
    display: flex;
    gap: var(--space-2);
  }
  .company-cta-mobile .btn {
    flex: 1;
  }
  .page-company { padding-bottom: 90px !important; }
}
@media (min-width: 1024px) {
  .company-cta-mobile { display: none; }
}

/* Specs/categorieën chips: gold accent */
.company-spec {
  background: rgba(232, 176, 75, 0.10) !important;
  border-color: rgba(232, 176, 75, 0.30) !important;
  color: var(--color-brand-navy) !important;
}
.company-spec:hover {
  background: rgba(232, 176, 75, 0.20) !important;
  border-color: var(--color-brand-gold) !important;
}
.company-spec svg { color: var(--color-trust-green) !important; }

/* Sidebar contact card top accent in gold */
.sidebar-card--contact {
  border-top: 4px solid var(--color-brand-gold) !important;
}
.sidebar-card__title {
  color: var(--color-brand-navy) !important;
}
.contact-form .btn--primary {
  background: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}
.contact-form .btn--primary:hover {
  background: var(--color-brand-gold);
  border-color: var(--color-brand-gold);
  color: var(--color-brand-navy);
}

/* Sectie surfaces: blanco op cream achtergrond */
.company-section {
  background: #fff !important;
}
.company-section__title {
  color: var(--color-brand-navy) !important;
}

/* Stats numbers gold */
.company-stat__num {
  color: var(--color-brand-navy) !important;
}