/* ================================================================
   SIARE — CORRECTED HOMEPAGE COLOR OVERRIDES
   Purpose:
   1) Fix colors on the HOMEPAGE customization showcase (.customization-section)
      without changing its layout or replacing its background image.
   2) Make Facebook / Instagram / TikTok buttons readable and visually
      consistent with the WhatsApp contact card.

   IMPORTANT:
   This is an OVERRIDE layer, not a replacement for the large original CSS
   file. Load it AFTER siare-customization-contact-color-fix.css and every
   other stylesheet. It deliberately does not remove the standalone
   body.custom-page styles.
================================================================ */

:root {
  --siare-fix-paper: #F7F5EF;
  --siare-fix-white: #FFFDF8;
  --siare-fix-ink: #242521;
  --siare-fix-muted: #66665E;
  --siare-fix-gold: #C8A96B;
  --siare-fix-gold-deep: #8C6B37;
  --siare-fix-line: rgba(52, 53, 47, .16);
}

/* ================================================================
   A. HOMEPAGE CUSTOMIZATION SHOWCASE
   Keep the existing layout and image. Fix foreground colors and CTA states.
================================================================ */
.customization-section {
  --customization-fix-ink: #F5F2EA;
  --customization-fix-muted: rgba(245, 242, 234, .82);
  --customization-fix-gold: #C8A96B;
  color: var(--customization-fix-ink);
}

/* Main headings and eyebrow labels: clear ivory + champagne gold. */
.customization-section .customization-eyebrow,
.customization-section .customization-kicker,
.customization-section .customization-label,
.customization-section .section-eyebrow {
  color: var(--customization-fix-gold) !important;
}

.customization-section h1,
.customization-section h2,
.customization-section h3,
.customization-section .customization-title,
.customization-section .customization-heading {
  color: var(--customization-fix-ink) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .12);
}

.customization-section p,
.customization-section .customization-description,
.customization-section .customization-copy,
.customization-section .customization-text,
.customization-section .customization-subtitle {
  color: var(--customization-fix-muted) !important;
}

/* Gold primary button; quiet/secondary actions remain restrained. */
.customization-section a.customization-button,
.customization-section button.customization-button,
.customization-section .customization-cta,
.customization-section a.btn-primary,
.customization-section button.btn-primary,
.customization-section .button-primary {
  border: 1px solid #C8A96B !important;
  border-radius: 3px !important;
  background: #C8A96B !important;
  color: #24231E !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .12) !important;
  transition: background-color .22s ease, border-color .22s ease,
              color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

.customization-section a.customization-button:hover,
.customization-section button.customization-button:hover,
.customization-section .customization-cta:hover,
.customization-section a.btn-primary:hover,
.customization-section button.btn-primary:hover,
.customization-section .button-primary:hover {
  border-color: #D7B980 !important;
  background: #D7B980 !important;
  color: #171714 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
}

.customization-section a.customization-button:focus-visible,
.customization-section button.customization-button:focus-visible,
.customization-section .customization-cta:focus-visible,
.customization-section a.btn-primary:focus-visible,
.customization-section button.btn-primary:focus-visible,
.customization-section .button-primary:focus-visible {
  outline: 3px solid #F5F2EA !important;
  outline-offset: 4px !important;
}

/* ================================================================
   B. HOMEPAGE CONTACT — SOCIAL BUTTONS MATCH THE WHATSAPP CARD
   Strong dark text, same light surface, border, icon disc and dimensions.
================================================================ */
#contact.contact-section .contact-social-link,
.contact-section#contact .contact-social-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 84px !important;
  padding: 15px !important;
  border: 1px solid rgba(52, 53, 47, .13) !important;
  border-radius: 5px !important;
  background: rgba(255, 253, 248, .92) !important;
  color: #242521 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  letter-spacing: .005em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 16px rgba(39, 37, 29, .025) !important;
  transition: background-color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease !important;
}

/* Neutralize any inherited pale/white text color on inner labels. */
#contact.contact-section .contact-social-link span,
#contact.contact-section .contact-social-link strong,
#contact.contact-section .contact-social-link em,
.contact-section#contact .contact-social-link span,
.contact-section#contact .contact-social-link strong,
.contact-section#contact .contact-social-link em {
  color: #242521 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Same 34px gold icon disc used by the WhatsApp / contact action cards. */
#contact.contact-section .contact-social-icon,
.contact-section#contact .contact-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #F5EDDE !important;
  color: #8C6B37 !important;
  opacity: 1 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#contact.contact-section .contact-social-icon-instagram,
.contact-section#contact .contact-social-icon-instagram {
  font-size: 24px !important;
  font-weight: 400 !important;
}

#contact.contact-section .contact-social-icon-tiktok,
.contact-section#contact .contact-social-icon-tiktok {
  font-size: 22px !important;
}

#contact.contact-section .contact-social-link .contact-link-arrow,
.contact-section#contact .contact-social-link .contact-link-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  color: #8C6B37 !important;
  opacity: 1 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform .22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #contact.contact-section .contact-social-link:hover,
  .contact-section#contact .contact-social-link:hover {
    border-color: rgba(140, 107, 55, .48) !important;
    background: #FFFDF8 !important;
    color: #242521 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(39, 37, 29, .07) !important;
  }

  #contact.contact-section .contact-social-link:hover span,
  #contact.contact-section .contact-social-link:hover strong,
  .contact-section#contact .contact-social-link:hover span,
  .contact-section#contact .contact-social-link:hover strong {
    color: #242521 !important;
  }

  #contact.contact-section .contact-social-link:hover .contact-link-arrow,
  .contact-section#contact .contact-social-link:hover .contact-link-arrow {
    color: #8C6B37 !important;
    transform: translate(3px, -2px) !important;
  }
}

/* Tablets and phones: preserve the current grid behavior, fit labels cleanly. */
@media (max-width: 840px) {
  #contact.contact-section .contact-social-link,
  .contact-section#contact .contact-social-link {
    min-height: 70px !important;
    padding: 13px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 560px) {
  #contact.contact-section .contact-social-link,
  .contact-section#contact .contact-social-link {
    min-height: 62px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customization-section a.customization-button,
  .customization-section button.customization-button,
  .customization-section .customization-cta,
  #contact.contact-section .contact-social-link,
  .contact-section#contact .contact-social-link {
    transition: none !important;
  }
}


/* SIARE FIX — VIEW SHOWER COLLECTION hover artifact */
body.custom-page a.custom-button.custom-button-quiet,
body.custom-page a.custom-button.custom-button-quiet:link,
body.custom-page a.custom-button.custom-button-quiet:visited {
    background-color: rgba(255, 253, 248, 0.72) !important;
    background-image: none !important;
    color: #242521 !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}

body.custom-page a.custom-button.custom-button-quiet::before,
body.custom-page a.custom-button.custom-button-quiet::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

body.custom-page a.custom-button.custom-button-quiet:hover,
body.custom-page a.custom-button.custom-button-quiet:focus,
body.custom-page a.custom-button.custom-button-quiet:active {
    background: #F0E7D6 !important;
    background-image: none !important;
    border-color: #8C6B37 !important;
    color: #242521 !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    box-shadow: 0 8px 18px rgba(39, 37, 29, 0.08) !important;
    text-shadow: none !important;
}