/*
 * Rhyddid 0.18.0 — accessibility, responsive, browser, print, and performance
 * hardening layer.
 *
 * This file loads after interaction-states.css and before administrator
 * user.css. It strengthens the accepted presentation without changing
 * component semantics, data, permissions, validation, or behavior.
 */

:root {
  --rhyddid-safe-top: env(safe-area-inset-top, 0px);
  --rhyddid-safe-right: env(safe-area-inset-right, 0px);
  --rhyddid-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rhyddid-safe-left: env(safe-area-inset-left, 0px);
  --rhyddid-min-target: 2.75rem;
  --rhyddid-focus-width: 3px;
  --rhyddid-print-text: #111;
  --rhyddid-print-muted: #444;
  --rhyddid-print-border: #777;
}

html {
  min-block-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  hanging-punctuation: first last;
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

/* Keep native browser controls in the active template scheme. */
html[data-color-scheme="dark"],
html[data-color-scheme="dark"] body {
  color-scheme: dark;
}

html[data-color-scheme="light"],
html[data-color-scheme="light"] body {
  color-scheme: light;
}

/* Respect the physical safe area without changing ordinary desktop spacing. */
.skip-links .skip-link {
  inset-block-start: max(0.75rem, var(--rhyddid-safe-top));
  inset-inline-start: max(0.75rem, var(--rhyddid-safe-left));
}

.site-header--sticky {
  inset-block-start: var(--rhyddid-safe-top);
}

.site-footer {
  padding-block-end: max(var(--space-3, 1rem), var(--rhyddid-safe-bottom));
}

/* Structural resilience for nested Grid and Flex layouts. */
:where(
  .site-container,
  .brand-row,
  .header-actions,
  .primary-navigation__modules,
  .main-layout,
  .content-grid,
  .rhyddid-grid,
  .rhyddid-stack,
  .rhyddid-cluster,
  .rhyddid-split,
  .rhyddid-form-grid,
  .rhyddid-action-group,
  .record-grid,
  .dashboard-grid,
  .summary-grid,
  .media-grid,
  .gallery-grid,
  .row,
  .d-flex,
  .input-group,
  .btn-group,
  .pagination,
  .toolbar,
  .filter-bar
) > * {
  min-inline-size: 0;
}

:where(
  article,
  section,
  aside,
  main,
  nav,
  header,
  footer,
  form,
  fieldset,
  .card,
  .panel,
  .module,
  .moduletable,
  .rhyddid-card,
  .rhyddid-panel,
  .record-card,
  .workflow-card,
  .media-card,
  .attachment-card
) {
  max-inline-size: 100%;
}

/* Long content must wrap without forcing whole-page horizontal scrolling. */
:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  figcaption,
  caption,
  label,
  legend,
  th,
  td,
  .btn,
  .badge,
  .alert,
  .message,
  .metadata,
  .record-title,
  .item-title,
  .card-title,
  .module-title,
  .field-help,
  .form-text,
  .validation-message
) {
  overflow-wrap: break-word;
}

:where(
  a[href],
  .identifier,
  .record-id,
  .reference-id,
  .file-name,
  .source-url,
  .audit-value,
  .change-value
) {
  overflow-wrap: anywhere;
}

:where(pre, code, kbd, samp) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

pre {
  max-inline-size: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Media and embedded content remain inside their owning region. */
:where(img, picture, svg, canvas, video, audio, iframe, embed, object) {
  max-inline-size: 100%;
}

img[width][height] {
  block-size: auto;
}

iframe,
embed,
object {
  border: 0;
}

:where(video, audio) {
  inline-size: 100%;
}

/* Tables retain semantics and gain one contained overflow boundary. */
.table-responsive,
.rhyddid-table-wrap,
.table-wrapper,
.results-table-wrap,
.permission-matrix-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

:where(table) {
  max-inline-size: 100%;
}

/* Form controls remain usable at browser zoom and on iOS without forced zoom. */
:where(input, select, textarea, button) {
  max-inline-size: 100%;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  min-block-size: 2.75rem;
}

:where(button, .btn, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--accent-strong);
}

:where(input, select, textarea)::placeholder {
  opacity: 1;
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

:where(input, select, textarea):autofill,
:where(input, select, textarea):-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  transition: background-color 99999s ease-out 0s;
}

@media (max-width: 56.25rem) {
  :where(input, select, textarea) {
    font-size: max(1rem, 16px);
  }

  .js .primary-navigation.is-open {
    max-block-size: calc(var(--rhyddid-viewport-block, 100dvh) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Minimum target sizing is applied to compact controls, not ordinary text links. */
:where(
  .theme-toggle,
  .menu-toggle,
  .submenu-toggle,
  .btn-icon,
  .icon-button,
  .close,
  .btn-close,
  .pagination .page-link,
  .dropdown-toggle,
  .accordion-button,
  .jmodedit
) {
  min-inline-size: var(--rhyddid-min-target);
  min-block-size: var(--rhyddid-min-target);
}

/* Hidden, inert, and collapsed content must not leak into layout or interaction. */
[hidden] {
  display: none !important;
}

[inert] {
  pointer-events: none;
  user-select: none;
}

:where(dialog:not([open])) {
  display: none !important;
}

:where(details > summary) {
  cursor: pointer;
}

:where(details > summary)::marker {
  color: var(--accent-strong);
}

/* Robust visually-hidden utility, including Joomla and Bootstrap aliases. */
:where(.visually-hidden, .sr-only) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(.visually-hidden-focusable:not(:focus):not(:focus-within), .sr-only-focusable:not(:focus):not(:focus-within)) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus remains visible without drawing rings around pointer clicks in browsers
   that support :focus-visible. */
@supports selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
  }
}

@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: var(--rhyddid-focus-width) solid var(--accent-strong);
    outline-offset: 3px;
  }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-width: var(--rhyddid-focus-width);
  outline-style: solid;
  outline-color: var(--accent-strong);
  outline-offset: 3px;
  scroll-margin-block: 7rem 2rem;
}

:where([id]):target {
  scroll-margin-block-start: 7rem;
}

/* Keep disabled controls distinguishable while preserving readable labels. */
:where(button, input, select, textarea, option, optgroup):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

:where([aria-busy="true"], .is-busy, .loading, .processing) {
  cursor: progress;
}

/* Browser-native popovers and dialogs inherit the Rhyddid surface system. */
:where(dialog, [popover]) {
  max-inline-size: min(42rem, calc(100vw - 2rem));
  max-block-size: min(85vh, 85dvh);
  overflow: auto;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1rem 3rem var(--shadow);
}

:where(dialog, [popover])::backdrop {
  background: rgb(0 0 0 / 0.68);
  backdrop-filter: blur(2px);
}

/* Responsive reflow at high zoom and narrow visual viewports. */
@media (max-width: 64rem) {
  :where(
    .rhyddid-split,
    .page-header,
    .section-header,
    .record-header,
    .card-header,
    .toolbar,
    .filter-bar,
    .form-actions,
    .record-actions,
    .bulk-actions,
    .dialog-actions,
    .modal-footer
  ) {
    align-items: stretch;
  }

  :where(
    .page-header__actions,
    .section-header__actions,
    .record-actions,
    .toolbar-actions,
    .filter-actions,
    .form-actions,
    .dialog-actions,
    .modal-footer
  ) {
    flex-wrap: wrap;
  }
}

@media (max-width: 40rem) {
  :where(
    .page-header,
    .section-header,
    .record-header,
    .rhyddid-split,
    .toolbar,
    .filter-bar,
    .form-actions,
    .record-actions,
    .bulk-actions,
    .dialog-actions,
    .modal-footer
  ) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(
    .page-header__actions,
    .section-header__actions,
    .record-actions,
    .toolbar-actions,
    .filter-actions,
    .form-actions,
    .dialog-actions,
    .modal-footer
  ) > :where(.btn, button, input[type="submit"], input[type="button"], select) {
    inline-size: 100%;
  }

  :where(.dropdown-menu, .popover, [popover], dialog) {
    max-inline-size: calc(100vw - 1rem);
  }
}

/* Landscape phones and short viewports must keep critical controls reachable. */
@media (max-height: 34rem) and (orientation: landscape) {
  .primary-navigation.is-open {
    max-block-size: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(.modal, .offcanvas, dialog, [popover]) {
    max-block-size: calc(100dvh - 1rem);
  }
}

/* Contrast preferences strengthen boundaries without changing meaning. */
@media (prefers-contrast: more) {
  :root {
    --border: var(--border-strong);
    --rhyddid-focus-width: 4px;
  }

  :where(.card, .panel, .module, .alert, .btn, input, select, textarea, table, th, td) {
    border-width: max(2px, var(--bs-border-width, 1px));
  }

  :where(a) {
    text-decoration-thickness: 0.14em;
  }
}

/* Reduce decorative transparency when the operating system requests it. */
@media (prefers-reduced-transparency: reduce) {
  :where(.site-header, .dropdown-menu, .modal-content, .offcanvas, dialog, [popover]) {
    backdrop-filter: none !important;
  }

  :where(dialog, [popover])::backdrop {
    backdrop-filter: none;
    background: rgb(0 0 0 / 0.82);
  }
}

/* Forced-colors support keeps controls, targets, and state boundaries visible. */
@media (forced-colors: active) {
  :root {
    --rhyddid-focus-width: 3px;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }

  :where(
    .card,
    .panel,
    .module,
    .alert,
    .badge,
    .btn,
    input,
    select,
    textarea,
    table,
    th,
    td,
    dialog,
    [popover]
  ) {
    forced-color-adjust: auto;
    border-color: CanvasText;
  }

  :where(.btn-primary, .is-selected, [aria-selected="true"], [aria-current="page"]) {
    border-color: Highlight;
  }

  :where(.visually-hidden, .sr-only) {
    forced-color-adjust: none;
  }
}

/* Reduced motion covers scrolling, decorative transitions, and animated status
   indicators while preserving immediate state changes. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* Print is a readable record, not a dark screenshot of the interface. */
@page {
  margin: 18mm;
}

@media print {
  :root {
    color-scheme: light;
  }

  html,
  body {
    min-block-size: auto;
    overflow: visible !important;
    background: #fff !important;
    color: var(--rhyddid-print-text) !important;
    font-size: 10.5pt;
    line-height: 1.45;
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }

  body::before,
  body::after,
  .site-header,
  .site-utility,
  .primary-navigation,
  .skip-links,
  .theme-toggle,
  .menu-toggle,
  .submenu-toggle,
  .jmodedit,
  .frontend-edit,
  .toolbar,
  .filter-bar,
  .bulk-actions,
  .record-actions,
  .form-actions,
  .dialog-actions,
  .modal-footer,
  .pagination,
  .back-to-top,
  .toast-container,
  .offcanvas-backdrop,
  .modal-backdrop,
  [data-no-print],
  [aria-hidden="true"].decorative {
    display: none !important;
  }

  .site-container,
  .main-content,
  .main-layout,
  .content-area,
  .reading-width-readable,
  .reading-width-wide,
  .reading-width-full {
    inline-size: 100% !important;
    max-inline-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :where(.card, .panel, .module, .alert, .media-card, .attachment-card, .workflow-card) {
    break-inside: avoid;
    background: #fff !important;
    color: var(--rhyddid-print-text) !important;
    border-color: var(--rhyddid-print-border) !important;
    box-shadow: none !important;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--rhyddid-print-text) !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  :where(p, li, dt, dd, figcaption, caption) {
    orphans: 3;
    widows: 3;
  }

  :where(figure, blockquote, pre, table, img, svg, video, audio) {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr,
  img {
    break-inside: avoid;
  }

  :where(a, a:visited) {
    color: var(--rhyddid-print-text) !important;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
  }

  :where(pre, code, kbd, samp) {
    color: var(--rhyddid-print-text) !important;
    background: transparent !important;
    border-color: var(--rhyddid-print-border) !important;
  }

  :where(.text-muted, .metadata, .form-text, .field-help) {
    color: var(--rhyddid-print-muted) !important;
  }

  details {
    display: block !important;
  }

  details > :not(summary) {
    display: block !important;
  }

  dialog[open],
  [popover]:popover-open {
    position: static !important;
    max-inline-size: none !important;
    max-block-size: none !important;
    overflow: visible !important;
    border: 1px solid var(--rhyddid-print-border) !important;
    box-shadow: none !important;
  }
}