/* Lighter emerald glass with a clear view of the imagery behind each panel. */
.minerals-site {
  --mineral-glass-solid: color-mix(in srgb, var(--bhp-green-700) 55%, var(--bhp-green-500));
  --mineral-glass-ink: var(--bhp-white);
  --mineral-glass-secondary: color-mix(in srgb, var(--bhp-green-50) 70%, var(--bhp-green-100));
  --mineral-glass-rim: color-mix(in srgb, var(--bhp-green-100) 28%, transparent);
  --mineral-glass-shadow: 0 12px 32px color-mix(in srgb, var(--bhp-asphalt-950) 18%, transparent);
  --mineral-glass-sheen: linear-gradient(135deg,
    color-mix(in srgb, var(--bhp-white) 8%, transparent),
    transparent 38%,
    transparent 70%,
    color-mix(in srgb, var(--bhp-green-100) 3%, transparent));
}

/* An opaque base is the default; transparency is progressively enhanced below. */
.minerals-site :is(.site-header, .hero-intro, .hero-guide, .mountain-footer,
  .mountain-popup, .product-detail, .inquiry-form,
  .library-controls, .library-footer, .material-card, .empty-state,
  .site-footer, .selection-toast) {
  --mineral-glass-fill: var(--mineral-glass-solid);
  --bhp-bg-subtle: color-mix(in srgb, var(--bhp-green-700) 20%, transparent);
  --bhp-bg-muted: color-mix(in srgb, var(--bhp-green-700) 28%, transparent);
  --bhp-bg-brand-subtle: color-mix(in srgb, var(--bhp-green-600) 32%, transparent);
  --bhp-surface: var(--mineral-glass-solid);
  --bhp-surface-raised: color-mix(in srgb, var(--bhp-green-600) 22%, transparent);
  --bhp-surface-strong: color-mix(in srgb, var(--bhp-green-600) 34%, transparent);
  --bhp-border: color-mix(in srgb, var(--bhp-green-100) 30%, var(--mineral-glass-solid));
  --bhp-border-strong: color-mix(in srgb, var(--bhp-green-200) 68%, var(--mineral-glass-solid));
  --bhp-border-brand: var(--bhp-green-200);
  --bhp-text: var(--mineral-glass-ink);
  --bhp-text-secondary: var(--mineral-glass-secondary);
  --bhp-text-muted: var(--mineral-glass-secondary);
  --bhp-text-brand: var(--bhp-green-50);
  --bhp-text-link: var(--bhp-green-50);
  --bhp-text-link-hover: var(--bhp-white);
  --bhp-text-inverse: var(--bhp-green-950);
  --bhp-table-head-ink: var(--bhp-green-50);
  --bhp-color-primary: var(--bhp-green-200);
  --bhp-color-primary-hover: var(--bhp-green-100);
  --bhp-color-primary-active: var(--bhp-green-50);
  --bhp-color-success: var(--bhp-green-100);
  --bhp-color-danger: var(--bhp-red-200);
  --bhp-focus: var(--bhp-green-100);
  --bhp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bhp-green-100) 48%, transparent);
  color-scheme: dark;
  color: var(--bhp-text);
  background-color: var(--mineral-glass-fill);
  background-image: var(--mineral-glass-sheen);
  border-color: var(--mineral-glass-rim);
  box-shadow: inset 1px 1px 0 var(--mineral-glass-rim),
    inset -1px -1px 0 color-mix(in srgb, var(--bhp-green-950) 12%, transparent),
    var(--mineral-glass-shadow);
}

/* Real interior spacing keeps text inside the glass rather than on its edge. */
.minerals-site :is(.hero-intro, .hero-guide, .mountain-footer,
  .library-controls, .library-footer) {
  border-radius: var(--bhp-radius);
  padding: var(--bhp-space-4) var(--bhp-space-5);
}
.minerals-site .hero-intro { inline-size: clamp(340px, 32vw, 420px); }
.minerals-site .hero-quick-guide { max-inline-size: none; }
.minerals-site .material-card {
  border-radius: var(--bhp-radius);
  padding: var(--bhp-space-4);
}
.minerals-site :is(.hero-intro, .hero-guide, .mountain-footer,
  .mountain-popup, .product-detail, .material-card, .inquiry-form,
  .library-controls, .library-footer) {
  text-align: start;
  overflow-wrap: break-word;
  word-break: normal;
}
.minerals-site :is(.hero-guide, .library-controls, .library-footer,
  .material-title, .selection-heading, .form-grid) > * { min-inline-size: 0; }
.minerals-site :is(.material-title > .icon, .search-field > .icon) { flex-shrink: 0; }
.minerals-site .material-title h3 { overflow-wrap: break-word; }
.minerals-site :is(.hero-quick-guide, .hero-guide-instruction,
  .product-summary, .research-description, .product-source,
  .mountain-popup-summary, .form-note) { text-wrap: pretty; }
.minerals-site .selection-heading { flex-wrap: wrap; gap: var(--bhp-space-2) var(--bhp-space-4); }
.minerals-site .selection-heading .text-link { text-align: start; }
.minerals-site .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.minerals-site .search-field { min-inline-size: 0; }
.minerals-site .search-field .bhp-input { min-inline-size: 0; flex: 1; }
.minerals-site .library-controls { flex-wrap: wrap; }
.minerals-site .product-specs .bhp-table caption { text-align: start; }
.minerals-site .empty-state { border-radius: var(--bhp-radius-lg); }

@media (max-width: 1100px) {
  .minerals-site .hero-intro { inline-size: min(100%, 420px); }
  .minerals-site .hero-guide { grid-template-columns: minmax(0, 1fr); gap: var(--bhp-space-2); }
  .minerals-site .hero-guide .text-link { grid-column: auto; }
}
@media (max-width: 900px) {
  .minerals-site .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .minerals-site :is(.hero-intro, .hero-guide, .mountain-footer,
    .library-controls, .library-footer) { padding: var(--bhp-space-4); }
  .minerals-site .material-card { padding: var(--bhp-space-3); }
  .minerals-site .search-field { flex: 1 0 100%; }
  .minerals-site .hero-guide .text-link { margin-block-start: var(--bhp-space-2); }
}
@media (max-width: 480px) {
  .minerals-site .material-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bhp-space-4); }
  .minerals-site .material-image-button img { aspect-ratio: 1.75; }
}

/* Nested popup has its own tint but shares its parent's filtered backdrop. */
.minerals-site .mountain-popup {
  background-color: var(--mineral-glass-fill);
  border-color: var(--bhp-border);
  box-shadow: inset 1px 1px 0 var(--mineral-glass-rim), var(--mineral-glass-shadow);
}
.minerals-site :is(.inquiry-form .bhp-input, .inquiry-form .bhp-textarea) {
  background: var(--bhp-bg-muted);
  border-color: var(--bhp-border-strong);
  color: var(--bhp-text);
}
.minerals-site :is(.library-controls, .inquiry-form) :is(input, textarea)::placeholder {
  color: var(--bhp-text-muted);
  opacity: 1;
}
.minerals-site .product-detail .bhp-table th {
  background: var(--bhp-bg-brand-subtle);
  color: var(--bhp-table-head-ink);
}
.minerals-site .product-detail .bhp-table td { color: var(--bhp-text); }
.minerals-site :is(.material-tags span, .product-applications span, .selection-chip) {
  border-color: var(--bhp-border);
}
.minerals-site :is(.library-controls .saved-filter[aria-pressed='true'],
  .save-material[aria-pressed='true']) {
  color: var(--bhp-text-inverse);
  background: var(--bhp-color-primary);
  border-color: var(--bhp-color-primary);
}
.minerals-site .inquiry-form .bhp-button:disabled,
.minerals-site .inquiry-form .copy-button:disabled {
  color: var(--bhp-text-muted);
  background: var(--bhp-bg-muted);
  border-color: var(--bhp-border);
  opacity: 1;
  cursor: not-allowed;
}
.minerals-site .inquiry-form .copy-button:disabled { text-decoration: none; }
.minerals-site :is(.site-header, .product-detail, .inquiry-form,
  .library-controls, .library-footer, .mountain-popup, .material-card)
  :is(button, a, input, textarea):focus-visible {
  outline: 3px solid var(--bhp-focus);
  outline-offset: 3px;
}

/* Thin tint and restrained blur retain the backdrop's colours and detail. */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .minerals-site :is(.site-header, .hero-intro, .hero-guide, .mountain-footer,
    .library-controls, .library-footer, .site-footer,
    .selection-toast) {
    --mineral-glass-fill: color-mix(in srgb, var(--mineral-glass-solid) 18%, transparent);
    -webkit-backdrop-filter: blur(10px) brightness(.68);
    backdrop-filter: blur(10px) brightness(.68);
  }
  .minerals-site :is(.product-detail, .inquiry-form, .empty-state) {
    --mineral-glass-fill: color-mix(in srgb, var(--mineral-glass-solid) 24%, transparent);
    -webkit-backdrop-filter: blur(8px) brightness(.68);
    backdrop-filter: blur(8px) brightness(.68);
  }
  .minerals-site .material-card {
    --mineral-glass-fill: color-mix(in srgb, var(--mineral-glass-solid) 28%, transparent);
    -webkit-backdrop-filter: brightness(.72);
    backdrop-filter: brightness(.72);
  }
  .minerals-site .mountain-popup {
    --mineral-glass-fill: color-mix(in srgb, var(--mineral-glass-solid) 24%, transparent);
  }
}

/* Preference fallbacks remove optical effects without changing the layout. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .minerals-site :is(.site-header, .hero-intro, .hero-guide, .mountain-footer,
    .mountain-popup, .product-detail, .inquiry-form,
    .library-controls, .library-footer, .material-card, .empty-state,
    .site-footer, .selection-toast) {
    --mineral-glass-fill: var(--mineral-glass-solid);
    background-color: var(--mineral-glass-solid);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .minerals-site :is(.site-header, .hero-intro, .hero-guide, .mountain-footer,
    .mountain-popup, .product-detail, .inquiry-form,
    .library-controls, .library-footer, .material-card, .empty-state,
    .site-footer, .selection-toast) {
    --bhp-text-muted: var(--bhp-text);
    --bhp-text-secondary: var(--bhp-text);
    --bhp-border: var(--bhp-border-strong);
    outline: 1px solid var(--bhp-border-strong);
    outline-offset: 0;
  }
}
@media (forced-colors: active) {
  .minerals-site :is(.site-header, .hero-intro, .hero-guide, .mountain-footer,
    .mountain-popup, .product-detail, .inquiry-form,
    .library-controls, .library-footer, .material-card, .empty-state,
    .site-footer, .selection-toast) {
    --mineral-glass-fill: Canvas;
    --bhp-bg-subtle: Canvas;
    --bhp-bg-muted: Canvas;
    --bhp-bg-brand-subtle: Canvas;
    --bhp-surface: Canvas;
    --bhp-surface-raised: Canvas;
    --bhp-border: CanvasText;
    --bhp-border-strong: CanvasText;
    --bhp-border-brand: LinkText;
    --bhp-text: CanvasText;
    --bhp-text-secondary: CanvasText;
    --bhp-text-muted: CanvasText;
    --bhp-text-brand: LinkText;
    --bhp-text-link: LinkText;
    --bhp-text-link-hover: LinkText;
    --bhp-text-inverse: HighlightText;
    --bhp-table-head-ink: CanvasText;
    --bhp-color-primary: Highlight;
    --bhp-color-primary-hover: Highlight;
    --bhp-color-primary-active: Highlight;
    --bhp-focus: Highlight;
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    outline: 1px solid CanvasText;
    outline-offset: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}