/* Shared opt-in contact controls. No header, adviser or page context required. */
.contact-actions,
.contact-actions *,
.contact-actions *::before,
.contact-actions *::after {
  box-sizing: border-box;
}

.contact-actions.contact-actions {
  grid-column: 1 / -1;
  display: grid;
  gap: .8rem;
  min-width: 0;
  width: 100%;
  font-family: var(--home-sans, "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif);
}

.contact-actions.contact-actions .contact-actions__desktop {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.contact-actions.contact-actions .contact-actions__contact {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.4rem;
  border: 1px solid var(--home-navy, #102942);
  border-radius: 0;
  background: var(--home-navy, #102942);
  color: #fff;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.contact-actions.contact-actions .contact-actions__phone {
  display: grid;
  gap: .12rem;
  align-content: center;
  padding: 0 0 0 20px;
  border: 0;
  border-left: 1px solid var(--home-warm-soft, #e6d6bc);
  background: transparent;
  color: var(--home-navy, #102942);
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.contact-actions.contact-actions .contact-actions__phone span {
  color: #8d6735;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-actions.contact-actions .contact-actions__phone strong {
  font-family: var(--home-serif, Charter, Cambria, Georgia, serif);
  font-size: 1.08rem;
  font-weight: 400;
}

.contact-actions.contact-actions .contact-actions__mobile {
  display: none;
  gap: .5rem;
  align-items: center;
  flex: 0 0 auto;
}

/* Define the complete box outside media rules; visibility alone is responsive. */
.contact-actions.contact-actions .contact-actions__icon {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  flex: 0 0 3.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--home-navy, #102942);
  border-radius: 0;
  background: var(--home-navy, #102942);
  color: #fff;
  line-height: 1;
  text-decoration: none;
}

.contact-actions.contact-actions .contact-actions__icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

.contact-actions.contact-actions .contact-actions__phone:hover,
.contact-actions.contact-actions .contact-actions__phone:focus-visible {
  border-color: var(--home-warm, #b98a45);
  background: #faf8f4;
}

.contact-actions.contact-actions .contact-actions__contact:hover,
.contact-actions.contact-actions .contact-actions__contact:focus-visible,
.contact-actions.contact-actions .contact-actions__contact:active,
.contact-actions.contact-actions .contact-actions__icon:hover,
.contact-actions.contact-actions .contact-actions__icon:focus-visible,
.contact-actions.contact-actions .contact-actions__icon:active {
  border-color: #806037;
  background: #806037;
  color: #fff;
}

.contact-actions.contact-actions .contact-actions__about {
  justify-self: start;
  color: var(--home-navy, #102942);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding-block: .5rem;
  text-decoration: underline;
  text-underline-offset: .22em;
  white-space: nowrap;
}

.contact-actions.contact-actions a:focus-visible {
  outline: 3px solid #9a6b2f;
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .contact-actions.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
  }

  .contact-actions.contact-actions .contact-actions__desktop {
    display: none;
  }

  .contact-actions.contact-actions .contact-actions__mobile {
    display: flex;
  }

  .contact-actions.contact-actions .contact-actions__about {
    margin-left: auto;
    text-align: right;
  }
}

/* Optional adviser integration: keep this component beneath the copy column.
   The default adviser actions and standalone component remain unaffected. */
@media (min-width: 640px) and (max-width: 950px) and (max-height: 430px) and (orientation: landscape) {
  .redesign-adviser__actions:has(> .contact-actions) {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    justify-self: start;
  }
}

/* Batch 5J: mobile function colours from redesign-chrome.css. Keep the
   blue phone on mist for contrast; brass and green remain clear on navy. */
.contact-actions.contact-actions .contact-actions__icon {
  color: var(--contact-action-color, #fff);
  border-color: currentColor;
  background: var(--contact-action-background, var(--home-navy, #102942));
}

.contact-actions.contact-actions .contact-actions__icon--contact {
  --contact-action-color: var(--home-warm, #b98a45);
}

.contact-actions.contact-actions .contact-actions__icon--whatsapp {
  --contact-action-color: #25d366;
}

.contact-actions.contact-actions .contact-actions__icon--phone {
  --contact-action-color: var(--home-blue, #30619f);
  --contact-action-background: var(--home-mist, #eef3f6);
  --contact-action-hover-background: #faf8f4;
}

.contact-actions.contact-actions .contact-actions__icon:hover,
.contact-actions.contact-actions .contact-actions__icon:focus-visible,
.contact-actions.contact-actions .contact-actions__icon:active {
  color: var(--contact-action-color, #fff);
  border-color: currentColor;
  background: var(--contact-action-hover-background, var(--home-navy-2, #173b5b));
}

/* Batch 5L: explicit light surfaces, independent of inherited background tokens. */
.contact-actions.contact-actions .contact-actions__icon--contact {
  --contact-action-color: #b98a45;
  background: #fff;
}

.contact-actions.contact-actions .contact-actions__icon--whatsapp {
  --contact-action-color: #25d366;
  background: #fff;
}

.contact-actions.contact-actions .contact-actions__icon--contact:hover,
.contact-actions.contact-actions .contact-actions__icon--contact:focus-visible,
.contact-actions.contact-actions .contact-actions__icon--contact:active,
.contact-actions.contact-actions .contact-actions__icon--whatsapp:hover,
.contact-actions.contact-actions .contact-actions__icon--whatsapp:focus-visible,
.contact-actions.contact-actions .contact-actions__icon--whatsapp:active {
  background: #faf8f4;
}

/* Explicit adviser-surface opt-in. Default guide controls stay on white. */
@media (max-width: 980px) {
  .contact-actions.contact-actions--adviser .contact-actions__icon--contact,
  .contact-actions.contact-actions--adviser .contact-actions__icon--whatsapp,
  .contact-actions.contact-actions--adviser .contact-actions__icon--contact:hover,
  .contact-actions.contact-actions--adviser .contact-actions__icon--contact:focus-visible,
  .contact-actions.contact-actions--adviser .contact-actions__icon--contact:active,
  .contact-actions.contact-actions--adviser .contact-actions__icon--whatsapp:hover,
  .contact-actions.contact-actions--adviser .contact-actions__icon--whatsapp:focus-visible,
  .contact-actions.contact-actions--adviser .contact-actions__icon--whatsapp:active {
    background: transparent;
  }
}

/* Optional mobile phone surface, matching the default light contact controls. */
@media (max-width: 980px) {
  .contact-actions.contact-actions--light-phone .contact-actions__icon--phone {
    background: #fff;
  }

  .contact-actions.contact-actions--light-phone .contact-actions__icon--phone:hover,
  .contact-actions.contact-actions--light-phone .contact-actions__icon--phone:focus-visible,
  .contact-actions.contact-actions--light-phone .contact-actions__icon--phone:active {
    background: #faf8f4;
  }
}