/* ========================================================================== 
   Phillips360 Modern V2.033 — accessibility safeguards
   --------------------------------------------------------------------------
   This final stylesheet implements WCAG 2.2-oriented focus, target-size,
   reflow, motion, text-spacing and forced-color safeguards. It intentionally
   loads after the visual-system and legacy compatibility layers.

   Safe options:
   - --p360-target-min may be increased; do not reduce it below 24px.
   - --p360-focus-width may be increased; do not remove the visible outline.
   - Keep motion-paused selectors synchronized with accessibility.js.
   ========================================================================== */

:root {
  --p360-target-min: 44px;
  --p360-focus-width: 3px;
  --p360-fixed-header-offset: 104px;
  --p360-focus-color: #ff5d3a;
}

/* Focus must not be hidden behind the fixed site header. */
html { scroll-padding-top: var(--p360-fixed-header-offset); }
body.p360-site :where(:target, [tabindex="-1"], [id^="p360-"]) { scroll-margin-top: var(--p360-fixed-header-offset); }
body.admin-bar { --p360-fixed-header-offset: 136px; }

/* Strong, shape-independent keyboard focus. Component-level outline resets
   are overridden here by design. */
body.p360-site :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--p360-focus-width) solid var(--p360-focus-color) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 10px rgba(8, 17, 26, .48) !important;
}
body.p360-site :where(.p360-section--dark, .p360-next-step, .p360-footer, .p360-reviews) :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--p360-accent-2) !important;
  box-shadow: 0 0 0 6px rgba(8, 17, 26, .96), 0 0 0 10px rgba(255, 255, 255, .72) !important;
}

/* Pointer targets. Inline links inside prose are covered by WCAG's inline
   exception; standalone controls and navigation links use a larger 44px floor. */
body.p360-site :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .p360-button,
  .p360-menu-panel__list a,
  .p360-nav__list .sub-menu a,
  .p360-footer__nav-list a,
  .p360-pagination a,
  .p360-pagination span,
  .comment-reply-link
) { min-block-size: var(--p360-target-min); }
body.p360-site :where(.p360-menu-toggle, .p360-menu-panel__close, .p360-submenu-toggle, .p360-story__controls button, .p360-review-carousel__button) {
  min-inline-size: var(--p360-target-min);
  min-block-size: var(--p360-target-min);
}

/* Motion preference control. */
.p360-motion-toggle {
  display: inline-flex;
  min-width: var(--p360-target-min);
  min-height: var(--p360-target-min);
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(8, 17, 26, .34);
  color: inherit;
  font: inherit;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.p360-motion-toggle:hover { border-color: var(--p360-accent-2); background: rgba(8, 17, 26, .7); }
.p360-motion-toggle__icon { position: relative; display: block; width: 13px; height: 14px; }
.p360-motion-toggle__icon::before,
.p360-motion-toggle__icon::after { position: absolute; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: currentColor; content: ""; }
.p360-motion-toggle__icon::before { left: 1px; }
.p360-motion-toggle__icon::after { right: 1px; }
.p360-motion-toggle.is-paused .p360-motion-toggle__icon::before { top: 0; bottom: auto; left: 2px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; border-radius: 0; background: transparent; }
.p360-motion-toggle.is-paused .p360-motion-toggle__icon::after { display: none; }
.no-js .p360-motion-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .p360-motion-toggle { display: none; } }

/* A visitor-controlled pause stops non-essential CSS motion and exposes any
   content that was waiting for a reveal. JavaScript separately pauses media and
   carousel timers. */
html.user-paused-motion *,
html.user-paused-motion *::before,
html.user-paused-motion *::after {
  animation-play-state: paused !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}
html.user-paused-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
html.user-paused-motion .p360-phone { transform: none !important; }

/* Reflow, zoom and user text-spacing resilience. */
body.p360-site :where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, a, button, label, legend, th, td) {
  overflow-wrap: anywhere;
}
body.p360-site :where(pre, code, table) { max-width: 100%; }
body.p360-site pre { overflow-x: auto; white-space: pre-wrap; }
body.p360-site table { width: 100%; border-collapse: collapse; }
body.p360-site :where(th, td) { padding: .75rem; text-align: left; vertical-align: top; }
body.p360-site th[scope="row"] { width: 42%; font-weight: 720; }
body.p360-site :where(.p360-entry-content, .p360-content-body, .comment-content) a:not(.p360-button) {
  text-decoration-line: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}
.p360-menu-panel__list .menu-item-has-children.is-submenu-open > .sub-menu { max-height: none; overflow: visible; }

/* Contact Form 7 error semantics and status visibility. */
body.p360-site .wpcf7 :where([aria-invalid="true"], .wpcf7-not-valid) {
  border-color: #9e2112 !important;
  box-shadow: 0 0 0 3px rgba(158, 33, 18, .18) !important;
}
body.p360-site .wpcf7-not-valid-tip { display: block; margin-top: 8px; font-weight: 700; }
body.p360-site .p360-form-status:not(:empty) { margin-top: 14px; padding: 12px 14px; border-inline-start: 4px solid currentColor; }
body.p360-site .p360-form-status.is-error { color: #8b1d10; background: #fff1ef; }
body.p360-site .p360-form-status.is-success { color: #145c32; background: #effaf3; }

/* Local review autoplay control. */
.p360-review-carousel__status-group { display: grid; justify-items: center; gap: 6px; }
.p360-review-carousel__autoplay {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .7rem;
  font-weight: 720;
  cursor: pointer;
}
.p360-review-carousel__autoplay:hover { border-color: var(--p360-accent-2); color: var(--p360-accent-2); }

/* Extra contrast preference without changing the approved default palette. */
@media (prefers-contrast: more) {
  :root {
    --p360-line: rgba(8, 17, 26, .42);
    --p360-line-strong: rgba(8, 17, 26, .72);
    --p360-text-dark-muted: #303841;
    --p360-text-light-muted: #e3e8ed;
  }
  body.p360-site :where(.p360-card, .p360-post-card, .p360-story-step, .card) { border-width: 2px; }
}

/* Windows High Contrast / forced-color support. */
@media (forced-colors: active) {
  body.p360-site :where(a, button, input, select, textarea) { forced-color-adjust: auto; }
  body.p360-site :where(.p360-button, .p360-motion-toggle, .p360-review-carousel__button, .p360-review-carousel__autoplay, .p360-submenu-toggle) {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText !important;
  }
  body.p360-site :where(a[href], button, input, select, textarea, summary):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
  .p360-scroll-progress,
  .p360-phone__glass,
  .p360-story__atmosphere { display: none !important; }
}

@media (max-width: 720px) {
  .p360-motion-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
