/*
 * Runtime counterpart of resources/css/app.css.
 * This file is intentionally loaded after the compiled app.css so the
 * semantic tokens below become the single palette used by all page styles.
 */
:root {
  color-scheme: dark;

  --copper: #c86a28;
  --copper-dark: #a85418;
  --copper-glow: #e57828;
  --amber: #d89e34;
  --wheat: #d5bea4;

  --forest-ink: #1e3524;
  --olive: #759664;
  --olive-deep: #486c3c;
  --olive-cta: #2a3825;

  --pkg-shell: #d89e34;
  --pkg-red-skin: #a43025;
  --pkg-blanched: #568a35;
  --pkg-cashew: #d29658;

  --paper: #0d1110;
  --paper-2: #141817;
  --paper-subtle: #1b211e;
  --footer-bg: #070908;

  --ink: #f3ede2;
  --muted: #ada496;
  --placeholder: #827b70;
  --line: rgba(243, 237, 226, 0.14);

  --selection-bg: var(--copper);
  --selection-color: #ffffff;
  --card-glow: 0 0 24px rgba(200, 106, 40, 0.22);
}

html[data-theme="light"] {
  color-scheme: light;

  --copper: #a85418;
  --copper-dark: #8c420f;
  --copper-glow: #c86a28;
  --amber: #b88224;
  --wheat: #c2ab92;

  --forest-ink: #1c2b20;
  --olive: #486c3c;
  --olive-deep: #2a3825;
  --olive-cta: #2a3825;

  --paper: #f6efe5;
  --paper-2: #fdfbf7;
  --paper-subtle: #ede4da;
  --footer-bg: #f6efe5;

  --ink: #1c2b20;
  --muted: #667064;
  --placeholder: #949a90;
  --line: rgba(40, 50, 38, 0.12);

  --selection-bg: var(--copper);
  --selection-color: #ffffff;
  --card-glow: 0 8px 24px rgba(200, 106, 40, 0.14);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}

/* Shared shell surfaces consume semantic tokens in both themes. */
.site-footer {
  color: var(--ink);
  background: var(--footer-bg);
}

.footer-note,
.footer-address,
.footer-newsletter-copy {
  color: var(--muted);
}

.footer-grid a {
  color: var(--muted);
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  color: var(--ink);
}

.floating-language-toggle,
.floating-language-menu {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
}

.floating-language-toggle:hover,
.floating-language-toggle:focus-visible,
.floating-language-option:hover,
.floating-language-option:focus-visible,
.floating-language-option.is-current {
  color: var(--copper);
}

.floating-language-toggle:hover,
.floating-language-toggle:focus-visible {
  border-color: var(--copper);
}

/* Product-specific hero glows share one interaction system. */
.home-hero-product--shell {
  --product-glow: rgba(216, 158, 52, 0.35);
  --product-glow-soft: rgba(216, 158, 52, 0.18);
}

.home-hero-product--red-skin {
  --product-glow: rgba(164, 48, 37, 0.35);
  --product-glow-soft: rgba(164, 48, 37, 0.18);
}

.home-hero-product--blanched {
  --product-glow: rgba(86, 138, 53, 0.3);
  --product-glow-soft: rgba(86, 138, 53, 0.16);
}

.home-hero-product--mixed {
  --product-glow: rgba(210, 150, 88, 0.32);
  --product-glow-soft: rgba(210, 150, 88, 0.17);
}

/* Contact controls use the same paper/line/focus language as the shell. */
.contact-inquiry-section .inquiry-form input,
.contact-inquiry-section .inquiry-form textarea,
.footer-newsletter-form {
  background: var(--paper-2);
  border-color: var(--line);
}

.contact-inquiry-section .inquiry-form input:focus,
.contact-inquiry-section .inquiry-form textarea:focus,
.footer-newsletter-form:focus-within {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 22%, transparent);
}

html[data-theme="light"] .contact-inquiry-section .inquiry-form .button-primary {
  background: var(--olive-cta);
  border-color: var(--olive-cta);
}

/* Shared page-hero sizing -----------------------------------------------
 * About is the reference page for the inner-page hero footprint. Keep the
 * Home hero independent because its full-screen product composition has its
 * own layout and reveal behavior. */
.site-body .page-hero {
  min-height: 515px;
}

.site-body .page-hero > .shell {
  padding-block: 0;
}

/* Keep the longest page titles inside the shared About-sized hero without
 * changing their type scale. */
.site-body :is(.quality-page-hero, .contact-hero) h1 {
  max-width: 1000px;
}

/* Shared page typography --------------------------------------------------
 * Products is the reference for the site-wide text hierarchy: the main title
 * uses ink and its emphasized title ending uses copper. Supporting copy stays
 * muted. This final token layer keeps that two-tone treatment consistent
 * without touching the Home hero's dedicated art direction. */
.site-body :is(.page-hero, .section, .content-shell, .product-detail-hero, .error-page)
  :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
}

.site-body :is(.page-hero, .section, .content-shell, .product-detail-hero, .error-page)
  :is(h1, h2, h3, h4, h5, h6) span {
  color: var(--copper);
}

/* Home headings keep an aria-hidden wrapper around the visual title. The
 * wrapper inherits ink so only the intentional ending uses the copper accent,
 * matching the About title treatment throughout the Home page in both themes. */
.site-body :is(.home-products-section, .home-process-section, .home-quality-section, .home-archive-section, .home-cta) h2 > span[aria-hidden="true"] {
  color: var(--ink);
}

.site-body :is(.home-products-section, .home-process-section, .home-quality-section, .home-archive-section, .home-cta) h2 > span[aria-hidden="true"] > span {
  color: var(--copper);
}

.site-body :is(.home-products-section, .home-process-section, .home-quality-section, .home-archive-section, .home-cta) h2 > span[aria-hidden="true"] > span > span {
  color: var(--copper);
}

/* The capability titles use the same two-tone hierarchy while retaining the
 * compact sans-serif treatment of the Hero information rail. */
.site-body .home-hero-capabilities .capability-item h2 {
  color: var(--hero-ink, var(--ink));
}

.site-body .home-hero-capabilities .capability-item h2 > span {
  color: inherit;
}

.site-body .home-hero-capabilities .capability-item h2 > span > span {
  color: var(--hero-accent, var(--copper));
}

.site-body .home-certificates-frame .home-certificates-label h2 span {
  color: var(--copper);
}

/* Mirror the existing Home Hero composition for Arabic without changing the
 * product artwork, theme image, or reveal timing. The product group currently
 * stages on the physical right in the wide LTR composition and on the
 * physical left in the narrow composition, so RTL mirrors each breakpoint. */
@media (min-width: 901px) {
  html[dir="rtl"] .home-hero-products {
    left: clamp(18px, 3vw, 52px);
    right: auto;
  }

  html[dir="rtl"] .home-hero-elements--back {
    transform: translateX(clamp(24px, 5vw, 60px));
  }
}

@media (max-width: 900px) {
  html[dir="rtl"] .home-hero-products {
    left: auto !important;
    right: clamp(-38px, -4vw, -16px) !important;
  }
}

@media (max-width: 560px) {
  html[dir="rtl"] .home-hero-products {
    left: auto !important;
    right: clamp(-24px, -5vw, -8px) !important;
  }
}

/* The reveal uses the same existing offset, reflected horizontally for RTL.
 * This makes the complete still-life swipe in from the side it occupies. */
html[dir="rtl"] .home-hero-products:not(.is-ready) {
  transform: translate3d(var(--home-hero-products-reveal-offset), 0, 0);
}

@media (min-width: 901px) {
  /* PHP provides the randomized left position and size as custom properties;
   * reflect the actual bounds so every decorative element follows the mirrored
   * composition rather than collecting on the original side. */
  html[dir="rtl"] .home-hero-elements .hero-element {
    left: auto;
    right: calc(100% - var(--element-left, 0%) - var(--element-size, 8%));
  }
}

/* In RTL, mirror the actual light/dark Hero cover as its own background layer
 * and synchronize its entry with the existing product group's is-ready state.
 * LTR keeps the original background painting path completely unchanged. */
.home-hero-backdrop {
  display: none;
}

html[dir="rtl"] .home-hero {
  background-image: none;
}

html[dir="rtl"] .home-hero-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background-image: var(--hero-image);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  transform: scaleX(-1);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, .8, .24, 1);
  will-change: opacity, transform;
}

html[dir="rtl"] .home-hero:has(.home-hero-products:not(.is-ready)) .home-hero-backdrop {
  opacity: 0;
  transform: translate3d(9vw, 0, 0) scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  html[dir="rtl"] .home-hero-backdrop,
  html[dir="rtl"] .home-hero:has(.home-hero-products:not(.is-ready)) .home-hero-backdrop {
    opacity: 1;
    transform: scaleX(-1);
    transition: none;
    will-change: auto;
  }
}

.site-body :is(.page-hero, .section, .content-shell, .product-detail-hero, .error-page)
  :is(.page-hero-copy, .hero-copy, .lead, .heading-copy),
.site-body :is(.page-hero, .section, .content-shell, .product-detail-hero, .error-page)
  :is(.page-hero-copy, .hero-copy, .lead, .heading-copy) :is(span, strong) {
  color: var(--muted);
}

/* The copper CTA band intentionally uses its own contrast surface. */
.site-body .cta-band h2,
.site-body .cta-band h2 span,
.site-body .cta-band .eyebrow,
.site-body .cta-band p {
  color: #fff7ec;
}