﻿/*
 * Contrast correction layer
 * Light surfaces use deep espresso/brown text; ivory text is reserved for
 * photography and intentionally dark brand panels.
 */
:root {
  --contrast-ink: #1E1511;
  --contrast-body: #2D211B;
  --contrast-muted: #5A4032;
  --contrast-surface: #FFFBE9;
  --contrast-accent: #AD8B73;
}

/* Homepage: the about/value area is intentionally light after the brand refresh. */
.about-premium .intro-badge {
  color: var(--contrast-muted) !important;
  background: rgba(227, 202, 165, .34) !important;
  border-color: rgba(173, 139, 115, .42) !important;
}
.about-premium .intro-heading {
  color: var(--contrast-ink) !important;
}
.about-premium .story-para {
  color: var(--contrast-muted) !important;
}
.about-premium .story-para.lead {
  color: var(--contrast-body) !important;
}
.about-premium .story-para strong {
  color: var(--contrast-ink) !important;
}
.about-premium .value-card-inner {
  background: rgba(227, 202, 165, .52) !important;
  border-color: rgba(173, 139, 115, .38) !important;
}
.about-premium .value-card h4 {
  color: var(--contrast-ink) !important;
}
.about-premium .value-card p {
  color: var(--contrast-muted) !important;
}
.about-premium .value-card .vc-number {
  color: rgba(90, 64, 50, .72) !important;
}
.about-premium .crane-label {
  color: var(--contrast-ink) !important;
}
.about-premium .stat-crane:hover .crane-label {
  color: var(--contrast-ink) !important;
  background: linear-gradient(135deg, #E3CAA5 0%, #CEAB93 100%) !important;
}

/* Homepage: the operational proof cards are on a pale translucent surface. */
.operational-proof article {
  background: rgba(227, 202, 165, .34) !important;
  border-color: rgba(173, 139, 115, .42) !important;
}
.operational-proof article > strong,
.operational-proof h4 {
  color: var(--contrast-ink) !important;
}
.operational-proof p {
  color: var(--contrast-muted) !important;
}

/* Catalog: inactive filters and hero copy sit on the ivory canvas. */
.catalog-page {
  color: var(--contrast-body) !important;
}
.catalog-page .atlas-hero .hero-description,
.catalog-page .hero-index,
.catalog-page .hero-copy .eyebrow,
.catalog-page .hero-insight span,
.catalog-page .filter-intro,
.catalog-page .filter-button:not(.is-active),
.catalog-page .filter-button:not(.is-active) small {
  color: var(--contrast-muted) !important;
}
.catalog-page .filter-button:not(.is-active) {
  background: rgba(227, 202, 165, .18) !important;
  border-color: rgba(173, 139, 115, .34) !important;
}
.catalog-page .filter-button:not(.is-active):hover,
.catalog-page .filter-button:not(.is-active):focus-visible {
  color: var(--contrast-ink) !important;
  background: rgba(227, 202, 165, .42) !important;
}
.catalog-page .band-copy {
  color: rgba(255, 251, 233, .9) !important;
}

/* Blog: improve the readable editorial canvas without changing dark answer panels. */
.blog-page {
  color: var(--contrast-body);
}
.blog-page .hero-intro,
.blog-page .featured-article p,
.blog-page .result-note,
.blog-page .article-body p,
.blog-page .local-copy p,
.blog-page .journal-footer > div p,
.blog-page .journal-form #form-note {
  color: var(--contrast-muted) !important;
}
.blog-page .section-heading h2,
.blog-page .answers-heading h2,
.blog-page .local-copy h2,
.blog-page .article-body h3,
.blog-page .modal-card h2 {
  color: var(--contrast-ink) !important;
}
.blog-page .article-search input,
.blog-page .journal-form input {
  color: var(--contrast-body) !important;
}
.blog-page .article-search input::placeholder,
.blog-page .journal-form input::placeholder {
  color: rgba(90, 64, 50, .72) !important;
}
.blog-page .topic-control:not(:hover):not(.is-active) {
  color: var(--contrast-body) !important;
}
.blog-page .topic-control:not(:hover):not(.is-active) small {
  color: var(--contrast-muted) !important;
}

/* Inline FAQ styles on the homepage: keep ivory text on its dark section only. */
.faq-section details {
  background: rgba(45, 33, 27, .86) !important;
  border-color: rgba(227, 202, 165, .3) !important;
}
.faq-section details summary,
.faq-section details summary span:first-child {
  color: var(--contrast-surface) !important;
}
.faq-section details p {
  color: rgba(255, 251, 233, .9) !important;
}

/* Search: the input sits on an ivory surface, so use espresso text for reliable contrast. */
.search-dropdown .search-input-wrapper {
  background: #FFFBE9 !important;
  border-color: #CEAB93 !important;
  color: #5A4032 !important;
}
.search-dropdown .search-input-wrapper input,
.search-dropdown input {
  background: #FFFBE9 !important;
  color: #1E1511 !important;
  caret-color: #AD8B73 !important;
}
.search-dropdown .search-input-wrapper input::placeholder,
.search-dropdown input::placeholder {
  color: rgba(45, 33, 27, .7) !important;
}
.search-dropdown .search-result {
  background: #2D211B !important;
  border-color: rgba(227, 202, 165, .5) !important;
  color: #FFFBE9 !important;
}
.search-dropdown .search-result strong {
  color: #FFFBE9 !important;
}
.search-dropdown .search-result span,
.search-dropdown .search-status {
  color: #E3CAA5 !important;
}
.search-dropdown .search-result:hover,
.search-dropdown .search-result:focus-visible {
  background: #5A4032 !important;
  border-color: #E3CAA5 !important;
}

/* Keyboard focus must remain visible against both surfaces. */
:focus-visible {
  outline-color: var(--contrast-accent) !important;
  box-shadow: 0 0 0 3px rgba(173, 139, 115, .28) !important;
}

/* Quote page: restore WCAG contrast for the small marker and category pill. */
.quote-page .heading-mark em {
  color: #FFFBE9 !important;
  background: #5A4032 !important;
}
.quote-page .quote-summary .summary-category {
  color: #2D211B !important;
}

/* Catalog hero label: scoped contrast correction for the ivory background. */
.project-atlas .index-label {
  color: #5A4032 !important;
}



/* ── Floating WhatsApp Button ──────────────────────────── */
.wa-float-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform;
}
.wa-float-btn:hover,
.wa-float-btn:focus {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55) !important;
  outline: none;
}
.wa-float-btn:active {
  transform: scale(0.97) !important;
}
/* Pulse animation for attention */
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45); }
  50%       { box-shadow: 0 4px 30px rgba(37,211,102,0.75), 0 0 0 8px rgba(37,211,102,0.1); }
}
.wa-float-btn {
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.wa-float-btn:hover {
  animation: none;
}
@media (max-width: 480px) {
  .wa-float-btn span { display: none; }
  .wa-float-btn { padding: 14px !important; border-radius: 50% !important; }
}