/* LakiTuki brand finishing based on the official deep blue and teal artwork. */
.brand .brand-logo {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-copy strong { color: var(--brand-strong, #06384d); }
.brand-copy span { color: var(--muted, #5c747a); }

html[data-theme="dark"] .brand-copy strong { color: var(--brand-strong, #7ee7e2); }
html[data-theme="dark"] .brand-copy span { color: var(--muted, #b6cdd1); }

/* Inner-page builder blocks used by About, Team and Contact. Their bundled
 * styles use translucent white cards, so give them explicit dark surfaces
 * instead of combining those cards with inherited light-on-dark text. */
html[data-theme="dark"] .dsc-hero,
html[data-theme="dark"] .dsc-hero--v2 {
  color: var(--text, #f1fbfc) !important;
  background:
    radial-gradient(circle at top right, rgba(36, 150, 181, 0.25), transparent 32%),
    radial-gradient(circle at bottom left, rgba(42, 157, 143, 0.14), transparent 34%),
    linear-gradient(145deg, #0b2530, #071923) !important;
  border-color: var(--line, rgba(76, 212, 207, 0.24)) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .dsc-hero__copy :is(h1, h2, h3, h4, strong),
html[data-theme="dark"] :is(.team-values-card, .team-ops-card, .contact-info-card, .about-process-card) :is(h1, h2, h3, h4) {
  color: var(--text, #f1fbfc) !important;
}

html[data-theme="dark"] .dsc-hero__copy :is(p, li),
html[data-theme="dark"] .dsc-hero__metric p,
html[data-theme="dark"] .dsc-hero__card p,
html[data-theme="dark"] .contact-info-item span,
html[data-theme="dark"] .team-value-item p,
html[data-theme="dark"] .team-ops-item p,
html[data-theme="dark"] .about-process-card p {
  color: var(--muted, #b6cdd1) !important;
}

html[data-theme="dark"] .dsc-hero__side--panel,
html[data-theme="dark"] .team-values-card,
html[data-theme="dark"] .team-ops-card,
html[data-theme="dark"] .contact-info-card {
  color: var(--text, #f1fbfc) !important;
  background: var(--surface-strong, #06384d) !important;
  border-color: var(--line, rgba(76, 212, 207, 0.24)) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .dsc-hero__metric,
html[data-theme="dark"] .dsc-hero__link,
html[data-theme="dark"] .dsc-hero__card,
html[data-theme="dark"] .team-value-item,
html[data-theme="dark"] .team-ops-item,
html[data-theme="dark"] .contact-social-card,
html[data-theme="dark"] .about-process-card {
  color: var(--text, #f1fbfc) !important;
  background: var(--surface-soft, #173d49) !important;
  border: 1px solid var(--line-soft, rgba(76, 212, 207, 0.12)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 30px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .dsc-hero__card--brand,
html[data-theme="dark"] .dsc-hero__card--soft,
html[data-theme="dark"] .contact-info-card--map {
  background: linear-gradient(135deg, #173d49, rgba(18, 92, 99, 0.78)) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__metric,
  .dsc-hero__link,
  .dsc-hero__card,
  .team-value-item,
  .team-ops-item,
  .contact-social-card,
  .about-process-card
) :is(h1, h2, h3, h4, strong) {
  color: var(--text, #f1fbfc) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__metric,
  .dsc-hero__link,
  .dsc-hero__card,
  .team-value-item,
  .team-ops-item,
  .contact-social-card,
  .about-process-card
) :is(p, span:not(.dsc-hero__eyebrow):not(.dsc-hero__link-label):not(.about-process-card__step)) {
  color: var(--muted, #b6cdd1) !important;
}

html[data-theme="dark"] :is(
  .dsc-hero__eyebrow,
  .dsc-hero__link-label,
  .contact-info-item strong,
  .contact-social-card strong,
  .team-value-item > strong,
  .team-ops-item > strong,
  .about-process-card__step
) {
  color: var(--brand-strong, #7ee7e2) !important;
}

html[data-theme="dark"] .contact-social-card__icon {
  color: var(--brand-strong, #7ee7e2) !important;
  background: var(--brand-soft, rgba(76, 212, 207, 0.18)) !important;
  box-shadow: inset 0 0 0 1px var(--line, rgba(76, 212, 207, 0.24)) !important;
}

html[data-theme="dark"] .contact-social-card:hover {
  background: #174b57 !important;
}

.lakituki-install__logo {
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(11, 79, 108, 0.22);
}

/* Make the active archive type unmistakable in dark mode. */
html[data-theme="dark"] .archive-sidebar .segmented-control--dual .segmented-option span {
  color: #e8f6f7 !important;
  background: #173d49 !important;
  border: 1px solid rgba(126, 231, 226, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .archive-sidebar .segmented-control--dual .segmented-option:is(.is-active, :has(input:checked)) span {
  color: #032d38 !important;
  background: linear-gradient(135deg, #4cd4cf, #7ee7e2) !important;
  border-color: #9af1ed !important;
  box-shadow: 0 8px 20px rgba(76, 212, 207, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

html[data-theme="dark"] .archive-sidebar .segmented-control--dual .segmented-option:hover span {
  border-color: rgba(126, 231, 226, 0.55) !important;
}

html[data-theme="dark"] .archive-sidebar .segmented-control--dual .segmented-option input:focus-visible + span {
  outline: 3px solid #7ee7e2;
  outline-offset: 3px;
}

/* Contact inputs use a distinct inset surface instead of a flat colour block. */
.directory-form[data-form-id="contact"] .directory-form__field :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select
) {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 11px 13px !important;
  color: #15313a !important;
  caret-color: #0b4f6c;
  background: #f5fafb !important;
  border: 1px solid rgba(11, 79, 108, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(6, 56, 77, 0.04) !important;
}

.directory-form[data-form-id="contact"] .directory-form__field textarea {
  min-height: 148px;
  line-height: 1.65;
  resize: vertical;
}

.directory-form[data-form-id="contact"] .directory-form__field :is(input, textarea)::placeholder {
  color: #526d73 !important;
  opacity: 1;
}

.directory-form[data-form-id="contact"] .directory-form__field :is(input, textarea, select):focus {
  border-color: #2a9d8f !important;
  outline: 3px solid rgba(42, 157, 143, 0.18) !important;
  outline-offset: 1px;
}

html[data-theme="dark"] .directory-form[data-form-id="contact"] .directory-form__field :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select
) {
  color: #f1fbfc !important;
  caret-color: #7ee7e2;
  background: #0b2530 !important;
  border-color: rgba(126, 231, 226, 0.3) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .directory-form[data-form-id="contact"] .directory-form__field :is(input, textarea)::placeholder {
  color: #a9c5c9 !important;
}

html[data-theme="dark"] .directory-form[data-form-id="contact"] .directory-form__field :is(input, textarea, select):focus {
  border-color: #7ee7e2 !important;
  outline-color: rgba(76, 212, 207, 0.22) !important;
}

@media (max-width: 720px) {
  .brand .brand-logo { width: 54px; height: 54px; }
}