/* ============================================================
   LIGHT-PROFILE.CSS — Light-mode theme for company profile pages
   Depends on: global.css, profile.css (link AFTER both)
   Mirrors light-listing.css: re-maps the dark tokens to light,
   switches the profile hero to the crimson gradient with white
   text, lightens every content block / sidebar widget / modal,
   and keeps the footer dark so the white logo stays visible.
   ============================================================ */

/* ── CSS variable overrides (cascade through global.css + profile.css) ── */
:root {
  --dark-2: #f4f5f7;
  --dark-3: #ebedf0;
  --dark-4: #e5e7eb;
  --text: #1f2937;          /* was near-white (#e5e5e5); fixes <strong> + var(--text) text */
  --text-dim: #374151;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --crimson-light: #c23b6e;
}

/* Page background */
body { background: #f8f9fa !important; color: #374151; }

/* Nav stays dark — no override needed */

/* ── Profile Hero: light page, white identity card, navy cover banner ── */
.profile-hero { background: transparent !important; border-bottom: none !important; }
.profile-card { background: #fff !important; border-color: #e8eaed !important; box-shadow: 0 4px 18px rgba(10,37,64,.07) !important; }
.profile-cover { background: linear-gradient(120deg, #07182b 0%, #0a2540 55%, #14365c 100%) !important; }
.profile-avatar { border-color: #fff !important; }
.profile-avatar--logo { background: #fff !important; }
.profile-hero h1 { color: #141414 !important; }
.profile-hero .profile-tagline { color: #4b5563 !important; }
.profile-hero .profile-hero-meta { border-top: none !important; }
.profile-hero .profile-meta-item { color: #6b7280 !important; }
.profile-hero .profile-meta-item strong { color: #141414 !important; }
.profile-hero .profile-meta-item svg { color: #0ea5e9 !important; }
.profile-hero .profile-meta-item a { color: #0a2540 !important; }

/* Breadcrumb + back-link sit on the light-gray page above the card → dark text */
.profile-hero .breadcrumb,
.profile-hero .breadcrumb a { color: #6b7280 !important; }
.profile-hero .breadcrumb span { color: #9ca3af !important; }
.profile-hero .breadcrumb .current { color: #374151 !important; }
.profile-hero .back-link { color: #6b7280 !important; }
.profile-hero .back-link:hover { color: #0a2540 !important; }

/* Hero CTA on the white card */
.profile-hero .btn-outline { color: #374151 !important; border-color: #d1d5db !important; }
.profile-hero .btn-outline:hover { background: #f1f5f9 !important; border-color: #0a2540 !important; color: #0a2540 !important; }

/* ── Leader-index banner variant: stays navy with white text ── */
.profile-hero.is-banner { background: linear-gradient(140deg, #07182b 0%, #0a2540 55%, #14365c 100%) !important; padding: 48px 0 !important; }
.profile-hero.is-banner h1,
.profile-hero.is-banner .profile-tagline { color: #fff !important; }
.profile-hero.is-banner .breadcrumb,
.profile-hero.is-banner .breadcrumb a { color: rgba(255,255,255,.75) !important; }
.profile-hero.is-banner .breadcrumb span { color: rgba(255,255,255,.45) !important; }
.profile-hero.is-banner .breadcrumb .current { color: #fff !important; }

/* ── Profile Body ── */
.profile-body { background: #f8f9fa !important; }

/* Content blocks → white cards on the light-gray page */
.profile-block { background: #fff !important; border-color: #e5e7eb !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; }
.profile-block-title { color: #141414 !important; border-bottom-color: #e5e7eb !important; }
.profile-block p { color: #374151 !important; }

/* Service list */
.service-item { background: #f8f9fa !important; border-color: #e5e7eb !important; color: #374151 !important; }
.service-item:hover { border-color: #0a2540 !important; color: #141414 !important; }
.service-item-name { color: #141414 !important; }

/* Industries */
.industry-chip { background: #f8f9fa !important; border-color: #e5e7eb !important; color: #374151 !important; }
.industry-chip:hover { border-color: #0a2540 !important; color: #141414 !important; }

/* Why choose */
.why-content h4, .why-content h3 { color: #141414 !important; }
.why-content p { color: #6b7280 !important; }

/* Certifications */
.cert-item { background: #f8f9fa !important; border-color: #e5e7eb !important; }
.cert-name { color: #374151 !important; }

/* ── Sidebar widgets ── */
.side-widget { background: #fff !important; border-color: #e5e7eb !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; }
.side-widget-title { background: #f8f9fa !important; color: #6b7280 !important; border-bottom-color: #e5e7eb !important; }

/* Rating widget */
.rating-big { border-bottom-color: #e5e7eb !important; }
.rating-big-val { color: #141414 !important; }
.rating-big .review-count { color: #6b7280 !important; }
.rating-bar-row { color: #6b7280 !important; }
.rating-bar-track { background: #e5e7eb !important; }

/* Quick facts */
.fact-row { border-bottom-color: #e5e7eb !important; }
.fact-key { color: #6b7280 !important; }
.fact-val { color: #141414 !important; }

/* Contact widget */
.contact-info-row { color: #6b7280 !important; }
.contact-info-row a { color: #0a2540 !important; }

/* Sidebar "back to directory" outline button (on white) */
.profile-side .btn-outline { color: #374151 !important; border-color: #e5e7eb !important; }
.profile-side .btn-outline:hover { border-color: #0a2540 !important; color: #0a2540 !important; background: #e6f4fb !important; }

/* ── Contact Modal (white) ── */
.modal-box { background: #fff !important; border-color: #e5e7eb !important; }
.modal-box h3 { color: #141414 !important; }
.modal-box .modal-sub { color: #6b7280 !important; }
.modal-close { background: #f4f5f7 !important; border-color: #e5e7eb !important; color: #6b7280 !important; }
.modal-close:hover { background: #0a2540 !important; border-color: #0a2540 !important; color: #fff !important; }
.form-group label { color: #6b7280 !important; }
.form-group input,
.form-group textarea,
.form-group select { background: #f8f9fa !important; border-color: #e5e7eb !important; color: #141414 !important; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { background: #fff !important; border-color: #0a2540 !important; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9ca3af !important; }
.form-success h4 { color: #141414 !important; }
.form-success p { color: #6b7280 !important; }

/* ── Footer stays dark so white SVG logo remains visible ── */
.site-footer { background: #141414 !important; }
footer.site-footer p,
footer.site-footer a { color: rgba(255,255,255,.65) !important; }
footer.site-footer h4, footer.site-footer h3 { color: #fff !important; }
footer.site-footer .footer-bottom { border-top-color: rgba(255,255,255,.12) !important; }
.footer-logo { opacity: 1 !important; }

/* ── Readability: bare headings + outline buttons (hand-built profile variants) ── */
h2, h3, h4, h5, h6 { color: #141414; }
.profile-hero h1, .profile-hero h2, .profile-hero h3 { color: #141414 !important; }
.profile-hero.is-banner h1, .profile-hero.is-banner h2, .profile-hero.is-banner h3 { color: #fff !important; }
.modal-heading { color: #141414 !important; }
.btn-outline { color: #374151 !important; border-color: #e5e7eb !important; }
.profile-hero .btn-outline { color: #374151 !important; border-color: #d1d5db !important; }
.profile-hero.is-banner .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.45) !important; }

/* ── Team Members widget (company profile sidebar) ─────────────── */
.team-members { display: flex; flex-direction: column; }
.team-member {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .4rem; text-decoration: none; border-radius: 10px;
  transition: background .15s ease;
}
.team-member:hover { background: #f4f6f9; }
.team-member + .team-member { border-top: 1px solid #edf0f3; }
.team-member-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #0e7a4b; color: #fff; font-weight: 700; font-size: .95rem;
}
.team-member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-member-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.team-member-name {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 700; color: #1f2937; font-size: .95rem; line-height: 1.25;
}
.team-member-name .tm-verify { color: #16a34a; font-size: .8rem; }
.team-member-role {
  color: #6b7280; font-size: .82rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* leader bio attribution */
.leader-quote { margin: 1rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid #c9162c;
  background: #faf7f8; border-radius: 0 8px 8px 0; }
.leader-quote p { margin: 0 0 .4rem; color: #374151; font-style: italic; }
.leader-quote cite { color: #6b7280; font-style: normal; font-weight: 600; font-size: .85rem; }

/* client reviews - light mode (dark-on-white, contrast-safe) */
.review-card { background: #f8f9fa !important; border-color: #e5e7eb !important; }
.review-stars { color: #0ea5e9 !important; }
.review-meta, .review-foot, .review-source { color: #6b7280 !important; }
.review-text { color: #374151 !important; }
.review-author { color: #141414 !important; }

/* ── Multi-location switcher (ratings / reviews / map dropdowns) ── */
.loc-switch-label { display: block; font-size: .82rem; font-weight: 600; color: #374151;
  margin: 0 0 .7rem; }
.loc-switch { display: block; width: 100%; margin: .3rem 0 .9rem;
  padding: .55rem .7rem; font: inherit; font-size: .9rem; color: #141414;
  background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; }
.loc-switch:focus { outline: none; background: #fff; border-color: #0a2540;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.loc-panel[hidden] { display: none !important; }
.loc-more { font-weight: 600; font-size: .8rem; color: #0ea5e9; }

/* One fixed box per switcher: only the selected location's panel shows, so the
   layout never jumps when you change the dropdown. Reviews get a bordered, scrollable
   box; the map panel stays its natural 16:9 size. */
.loc-panels { position: relative; }
[data-loc-group="reviews"] .loc-panels {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px; min-height: 160px; max-height: 520px; overflow-y: auto; }
[data-loc-group="reviews"] .loc-panels .review-foot { margin-bottom: 0; }
.loc-empty { margin: 0; padding: 36px 12px; text-align: center;
  font-size: .9rem; color: #6b7280 !important; }

/* ── Embedded location map (responsive 16:9, no layout shift) ── */
.map-place { font-size: .9rem; font-weight: 600; color: #374151 !important; margin: 0 0 .6rem; }
.map-embed { position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; background: #eef1f4; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }