/*
 * AWABIHARI V2 — Production Runtime
 *
 * Global accessibility, rendering, loading,
 * error-recovery and performance safeguards.
 */

:root {
  --v2-runtime-header-offset: 96px;
}

html {
  scroll-padding-top:
    var(--v2-runtime-header-offset);
}

body {
  overflow-x: clip;
}

main {
  display: block;
}

section[id],
footer[id],
[data-v2-section] {
  scroll-margin-top:
    var(--v2-runtime-header-offset);
}

/* Accessible keyboard focus */

:where(
  a,
  button,
  input,
  select,
  textarea,
  [tabindex]
):focus-visible {
  outline:
    2px solid
    var(--v2-gold-light, #f0dda7);

  outline-offset: 4px;
}

/* Skip navigation */

.skip-link {
  position: fixed;
  z-index: 100000;
  top: 0.8rem;
  left: 0.8rem;

  padding: 0.75rem 1rem;

  border:
    1px solid
    rgba(240, 221, 167, 0.45);
  border-radius: 999px;

  background: #050706;
  color: #f7f4ed;

  font:
    600 0.75rem/1.2
    system-ui,
    sans-serif;

  transform: translateY(-180%);

  transition:
    transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Improve below-the-fold rendering */

[data-v2-section-host]:not(
  [data-v2-section-host="header"]
):not(
  [data-v2-section-host="hero"]
) {
  content-visibility: auto;

  contain-intrinsic-size:
    auto 1000px;
}

/* Section loading state */

[data-v2-section-host] {
  position: relative;
}

[data-v2-section-host][data-v2-loading="true"] {
  min-height: 9rem;
}

[data-v2-section-host="header"][data-v2-loading="true"] {
  min-height: 5rem;
}

[data-v2-section-host="hero"][data-v2-loading="true"] {
  min-height: 78svh;
}

[data-v2-section-host][data-v2-loading="true"]::before {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;

  width: 2.4rem;
  height: 2.4rem;

  content: "";

  border:
    1px solid
    rgba(240, 221, 167, 0.2);
  border-top-color:
    var(--v2-gold-light, #f0dda7);
  border-radius: 50%;

  animation:
    v2RuntimeSpin
    850ms
    linear
    infinite;

  transform: translate(-50%, -50%);
}

/* Section error recovery */

.v2-runtime-error {
  display: grid;

  width:
    min(
      calc(100% - 2rem),
      760px
    );

  min-height: 17rem;
  margin: 2rem auto;
  padding: 2rem;

  place-items: center;

  border:
    1px solid
    rgba(239, 107, 107, 0.32);
  border-radius: 1.5rem;

  background:
    linear-gradient(
      145deg,
      rgba(239, 107, 107, 0.07),
      rgba(255, 255, 255, 0.025)
    );

  color:
    var(--v2-text, #f7f4ed);

  text-align: center;
}

.v2-runtime-error__content {
  max-width: 520px;
}

.v2-runtime-error__content > span {
  color: #f29a9a;

  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v2-runtime-error__content h2 {
  margin: 0.8rem 0 0;

  font-family:
    var(
      --v2-font-display,
      Georgia,
      serif
    );

  font-size:
    clamp(2rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 0.9;
}

.v2-runtime-error__content p {
  margin: 1rem auto 0;

  color:
    var(
      --v2-text-soft,
      rgba(247, 244, 237, 0.72)
    );

  font-size: 0.75rem;
  line-height: 1.65;
}

.v2-runtime-error__content button {
  min-height: 46px;
  margin-top: 1.4rem;
  padding: 0 1.2rem;

  border: 0;
  border-radius: 999px;

  background:
    linear-gradient(
      120deg,
      var(--v2-gold-light, #f0dda7),
      var(--v2-gold, #d6b873)
    );

  color: #171208;

  font-size: 0.64rem;
  font-weight: 650;
}

/* Media defaults */

img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

video {
  background: #050706;
}

/* Existing floating WhatsApp control */

.floating-wa {
  position: fixed;
  z-index: 8000;
  right:
    max(
      1rem,
      env(safe-area-inset-right)
    );
  bottom:
    max(
      1rem,
      env(safe-area-inset-bottom)
    );

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  min-height: 48px;
  padding: 0 0.9rem;

  border:
    1px solid
    rgba(255, 255, 255, 0.17);
  border-radius: 999px;

  background:
    rgba(5, 11, 7, 0.82);
  color: #f7f4ed;

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, 0.42);

  font:
    600 0.68rem/1
    system-ui,
    sans-serif;

  backdrop-filter:
    blur(16px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(150%);

  transition:
    transform 220ms ease,
    border-color 180ms ease;
}

.floating-wa:hover {
  border-color:
    rgba(110, 214, 160, 0.5);

  transform: translateY(-3px);
}

/* Existing toast control */

.toast {
  position: fixed;
  z-index: 9000;
  right: 1rem;
  bottom: 5.4rem;

  max-width:
    min(
      calc(100vw - 2rem),
      390px
    );

  padding: 0.8rem 1rem;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 0.9rem;

  background:
    rgba(5, 8, 6, 0.92);
  color: #f7f4ed;

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, 0.42);

  font:
    500 0.68rem/1.5
    system-ui,
    sans-serif;

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pause decorative animation while hidden */

html.v2-page-hidden *,
html.v2-page-hidden *::before,
html.v2-page-hidden *::after {
  animation-play-state:
    paused !important;
}

/* Offline indicator */

html.v2-offline::after {
  position: fixed;
  z-index: 9500;
  right: 1rem;
  bottom: 5.4rem;

  padding: 0.65rem 0.85rem;

  content: "Connection unavailable";

  border:
    1px solid
    rgba(239, 107, 107, 0.35);
  border-radius: 999px;

  background:
    rgba(45, 11, 11, 0.92);
  color: #ffd6d6;

  font:
    600 0.58rem/1
    system-ui,
    sans-serif;
}

/* Noscript fallback */

.v2-noscript {
  margin: 1rem;
  padding: 1rem;

  border:
    1px solid
    rgba(240, 221, 167, 0.28);
  border-radius: 1rem;

  background: #101411;
  color: #f7f4ed;

  font:
    500 0.75rem/1.6
    system-ui,
    sans-serif;
}

@keyframes v2RuntimeSpin {
  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@media (max-width: 620px) {
  :root {
    --v2-runtime-header-offset: 78px;
  }

  .floating-wa {
    width: 48px;
    padding: 0;

    justify-content: center;
  }

  .floating-wa .wa-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-v2-section-host][data-v2-loading="true"]::before {
    animation: none;
  }
}

@media print {
  .floating-wa,
  .toast,
  .skip-link,
  [data-v2-footer-back-to-top],
  .v2-gallery-lightbox {
    display: none !important;
  }

  [data-v2-section-host] {
    content-visibility: visible;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }
}