/*
 * Rhyddid Template 0.16.0
 * Site-wide layout, spacing, hierarchy, action, and surface consistency layer.
 * This layer changes presentation only. Components continue to own structure,
 * data, behavior, validation, authorization, and workflow meaning.
 */

:root {
  --rhyddid-gap-xs: 0.4rem;
  --rhyddid-gap-sm: 0.65rem;
  --rhyddid-gap-md: clamp(0.9rem, 1.8vw, 1.2rem);
  --rhyddid-gap-lg: clamp(1.25rem, 2.7vw, 1.85rem);
  --rhyddid-gap-xl: clamp(1.75rem, 4vw, 2.75rem);
  --rhyddid-panel-padding: clamp(0.9rem, 2vw, 1.25rem);
  --rhyddid-panel-padding-lg: clamp(1rem, 2.6vw, 1.6rem);
  --rhyddid-panel-radius: max(var(--radius), 0.25rem);
  --rhyddid-control-height: 2.65rem;
  --rhyddid-readable-measure: 72ch;
}

/* --------------------------------------------------------------------------
   Page rhythm and heading hierarchy
   -------------------------------------------------------------------------- */

.main-content {
  container-type: inline-size;
}

.main-content > :first-child,
.main-content > .com-content-article > :first-child,
.main-content > [class^="com-"] > :first-child,
.main-content > [class*=" com-"] > :first-child {
  margin-block-start: 0;
}

.main-content > :last-child,
.main-content > .com-content-article > :last-child,
.main-content > [class^="com-"] > :last-child,
.main-content > [class*=" com-"] > :last-child {
  margin-block-end: 0;
}

.main-content :where(h1, .page-title, .componentheading) {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.12;
}

.main-content :where(h2, .component-heading) {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.18;
}

.main-content h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
}

.main-content :where(h4, h5, h6) {
  line-height: 1.25;
}

.main-content :where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
}

.main-content :where(h2, h3, h4, h5, h6):not(:first-child) {
  margin-block-start: 1.35em;
}

.main-content :where(.page-header, .component-header, .component-heading, .section-header, .view-header, .list-header, .record-header) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhyddid-gap-sm) var(--rhyddid-gap-md);
  align-items: end;
  justify-content: space-between;
  min-width: 0;
  margin-block: 0 var(--rhyddid-gap-lg);
}

.main-content :where(.page-header, .component-header, .section-header, .view-header, .list-header, .record-header) > :where(h1, h2, h3, .page-title, .componentheading) {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
}

.main-content :where(.page-header, .component-header, .section-header, .view-header, .list-header, .record-header) > :where(.page-actions, .header-actions, .component-actions, .toolbar-actions, .record-actions, .btn-toolbar) {
  flex: 0 1 auto;
  margin: 0;
}

.page-intro,
.lead,
.intro-text,
.view-description,
.category-desc,
.category-description,
.component-description {
  max-width: var(--rhyddid-readable-measure);
  color: var(--text-muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

.page-intro > :last-child,
.view-description > :last-child,
.category-desc > :last-child,
.category-description > :last-child,
.component-description > :last-child {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Reusable layout primitives and common component layout names
   -------------------------------------------------------------------------- */

.stack,
.rhyddid-stack,
.form-stack,
.section-stack,
.panel-stack,
.card-stack,
.record-stack,
.item-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rhyddid-gap-md);
  min-width: 0;
}

.stack--tight,
.rhyddid-stack--tight {
  gap: var(--rhyddid-gap-sm);
}

.stack--loose,
.rhyddid-stack--loose {
  gap: var(--rhyddid-gap-lg);
}

.cluster,
.rhyddid-cluster,
.inline-list,
.inline-controls,
.filter-actions,
.page-actions,
.header-actions,
.component-actions,
.toolbar-actions,
.section-actions,
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhyddid-gap-sm);
  align-items: center;
  min-width: 0;
}

.split,
.rhyddid-split,
.title-row,
.heading-row,
.meta-row,
.summary-row,
.filter-row,
.toolbar-row,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhyddid-gap-sm) var(--rhyddid-gap-md);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.auto-grid,
.rhyddid-grid,
.panel-grid,
.section-grid,
.option-grid,
.choice-grid,
.result-grid,
.summary-grid,
.stats-grid,
.record-grid,
.item-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--rhyddid-gap-md);
  align-items: stretch;
  min-width: 0;
}

.auto-grid--wide,
.rhyddid-grid--wide,
.panel-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.content-with-aside,
.detail-layout,
.record-layout,
.editor-layout,
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: var(--rhyddid-gap-lg);
  align-items: start;
  min-width: 0;
}

.content-with-aside > *,
.detail-layout > *,
.record-layout > *,
.editor-layout > *,
.settings-layout > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared surfaces, sections, cards, and panels
   -------------------------------------------------------------------------- */

.surface,
.panel,
.section,
.content-panel,
.detail-panel,
.settings-panel,
.filter-panel,
.summary-panel,
.result-panel,
.info-panel,
.action-panel,
[class$="__panel"] {
  min-width: 0;
  padding: var(--rhyddid-panel-padding);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--rhyddid-panel-radius);
  box-shadow: 0 0.28rem 0.9rem var(--shadow);
}

.surface--quiet,
.panel--quiet,
.section--quiet,
.content-panel--quiet {
  background: var(--surface-soft);
  box-shadow: none;
}

.surface--bare,
.panel--bare,
.section--bare {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.card,
.dashboard-card,
.summary-card,
.stat-card,
.record-card,
.item-card,
.workflow-card,
.access-panel,
.privacy-panel,
.permission-panel,
.membership-card,
.member-card,
.sharing-card,
.media-card,
.attachment-card,
.download-card {
  min-width: 0;
  border-radius: var(--rhyddid-panel-radius);
  overflow-wrap: anywhere;
}

.card,
.dashboard-card,
.summary-card,
.stat-card,
.record-card,
.item-card,
.workflow-card,
.membership-card,
.member-card,
.sharing-card,
.media-card,
.attachment-card,
.download-card {
  display: flex;
  flex-direction: column;
}

.card > :where(.card-body, .card-content, .card-main),
.dashboard-card > :where(.dashboard-card__body, .card-body),
.record-card > :where(.record-card__body, .card-body),
.item-card > :where(.item-card__body, .card-body),
.workflow-card > :where(.workflow-card__body, .card-body) {
  flex: 1 1 auto;
  min-width: 0;
}

.card-header,
.card-footer,
.panel-header,
.panel-footer,
.section-header,
.section-footer,
[class$="__header"],
[class$="__footer"] {
  min-width: 0;
}

.card-header,
.panel-header,
.section-header,
[class$="__header"] {
  color: var(--text-strong);
}

.card-footer,
.panel-footer,
.section-footer,
[class$="__footer"] {
  color: var(--text-muted);
}

.card :where(.card-title, .card-header h2, .card-header h3),
.panel :where(.panel-title, .panel-header h2, .panel-header h3),
.section :where(.section-title, .section-header h2, .section-header h3) {
  margin-block: 0;
}

:where(.surface, .panel, .section, .content-panel, .detail-panel, .settings-panel, .filter-panel, .summary-panel, .result-panel, .info-panel, .action-panel, .card, .dashboard-card, .summary-card, .stat-card, .record-card, .item-card, .workflow-card) > :first-child {
  margin-block-start: 0;
}

:where(.surface, .panel, .section, .content-panel, .detail-panel, .settings-panel, .filter-panel, .summary-panel, .result-panel, .info-panel, .action-panel, .card, .dashboard-card, .summary-card, .stat-card, .record-card, .item-card, .workflow-card) > :last-child {
  margin-block-end: 0;
}

/* Avoid the heavy "box inside box inside box" effect while retaining structure. */
:where(.card, .panel, .section, .content-panel, .detail-panel, .settings-panel) :where(.card, .panel, .section, .content-panel, .detail-panel, .settings-panel) {
  box-shadow: none;
}

:where(.card, .panel, .section, .content-panel, .detail-panel, .settings-panel) :where(.panel--quiet, .section--quiet, .surface--quiet) {
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
}

/* --------------------------------------------------------------------------
   Lists, metadata, dividers, and key/value rows
   -------------------------------------------------------------------------- */

.meta-list,
.detail-list,
.key-value-list,
.summary-list,
.definition-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.meta-row,
.detail-row,
.key-value-row,
.summary-list > *,
.definition-row {
  padding-block: 0.65rem;
  border-block-end: 1px solid var(--border);
}

.meta-row:last-child,
.detail-row:last-child,
.key-value-row:last-child,
.summary-list > :last-child,
.definition-row:last-child {
  border-block-end: 0;
}

.meta-label,
.detail-label,
.key-label,
.definition-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.meta-value,
.detail-value,
.key-value,
.definition-value {
  min-width: 0;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.list-group,
.item-list,
.record-list,
.result-list,
.activity-list,
.notification-list {
  border-radius: var(--rhyddid-panel-radius);
  overflow: clip;
}

.list-group-item,
.item-row,
.record-row,
.result-row,
.activity-row,
.notification-row {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Forms and control groups
   -------------------------------------------------------------------------- */

fieldset,
.fieldset,
.form-section,
.form-panel {
  min-width: 0;
}

fieldset > legend,
.fieldset > .fieldset-legend,
.form-section > .form-section__title,
.form-panel > .form-panel__title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.form-grid,
.fields-grid,
.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--rhyddid-gap-md);
  align-items: start;
}

.form-grid > :where(.control-group, .form-group, .mb-3),
.fields-grid > :where(.control-group, .form-group, .mb-3),
.control-grid > :where(.control-group, .form-group, .mb-3) {
  margin-block-end: 0;
}

.control-group,
.form-group,
.field-group,
.field-wrapper {
  min-width: 0;
}

.form-text,
.help-block,
.field-help,
.control-helper,
.form-hint,
.form-description {
  max-width: var(--rhyddid-readable-measure);
  line-height: 1.5;
}

.form-actions,
.form-buttons,
.submit-buttons,
.modal-footer,
.dialog-actions,
.confirmation-actions,
.bulk-actions,
.batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhyddid-gap-sm);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.form-actions,
.form-buttons,
.submit-buttons {
  margin-block-start: var(--rhyddid-gap-lg);
  padding-block-start: var(--rhyddid-gap-md);
  border-block-start: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Buttons and action hierarchy
   -------------------------------------------------------------------------- */

.btn,
button,
input[type="submit"],
input[type="button"] {
  min-height: var(--rhyddid-control-height);
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: 2.15rem;
  padding: 0.38rem 0.7rem;
  font-size: 0.88rem;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 3.1rem;
  padding: 0.72rem 1.2rem;
}

.btn-link {
  min-height: auto;
  padding-inline: 0.2rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--link);
}

.btn-link:hover,
.btn-link:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--link-hover);
  text-decoration: underline;
}

.btn-icon,
.icon-button,
.btn-square,
button[aria-label]:empty {
  inline-size: var(--rhyddid-control-height);
  min-inline-size: var(--rhyddid-control-height);
  padding: 0;
}

.btn-toolbar,
.button-toolbar,
.toolbar,
.actions-toolbar {
  gap: var(--rhyddid-gap-sm);
  align-items: center;
  min-width: 0;
}

.btn-toolbar .btn-group,
.button-toolbar .btn-group,
.toolbar .btn-group,
.actions-toolbar .btn-group {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Tables, filters, pagination, and result regions
   -------------------------------------------------------------------------- */

.search-tools,
.filter-bar,
.filters,
.list-filters,
.results-tools,
.table-tools {
  margin-block-end: var(--rhyddid-gap-md);
}

.search-tools-form,
.filter-form,
.filters-form,
.list-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhyddid-gap-sm);
  align-items: end;
  min-width: 0;
}

.search-tools-form > *,
.filter-form > *,
.filters-form > *,
.list-filter-form > * {
  min-width: min(100%, 12rem);
}

.table-responsive,
.table-wrapper,
.results-table-wrapper {
  margin-block: var(--rhyddid-gap-md);
}

.pagination-wrapper,
.list-footer,
.results-footer,
.table-footer {
  padding-block-start: var(--rhyddid-gap-sm);
}

/* --------------------------------------------------------------------------
   Breadcrumbs, tabs, accordions, messages, and modal consistency
   -------------------------------------------------------------------------- */

.breadcrumb,
.breadcrumbs,
.mod-breadcrumbs {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nav-tabs,
.nav-pills {
  gap: 0.25rem;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
}

.tab-content,
.accordion-body,
.modal-body,
.offcanvas-body {
  min-width: 0;
}

.alert,
joomla-alert,
.notice,
.callout,
.component-notice,
.workflow-notice {
  overflow-wrap: anywhere;
}

.modal-header,
.modal-footer,
.offcanvas-header {
  gap: var(--rhyddid-gap-sm);
}

/* --------------------------------------------------------------------------
   Reading content and media alignment
   -------------------------------------------------------------------------- */

.com-content-article .article-body,
.com-content-article .com-content-article__body,
.article-content,
.item-page > :where(p, ul, ol, dl, blockquote, pre, figure) {
  max-width: 100%;
}

.com-content-article .article-info,
.com-content-article .article-info dd,
.article-meta,
.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  min-width: 0;
}

figure,
.figure,
.media-figure {
  max-width: 100%;
}

figure > :where(img, picture, video, iframe),
.figure > :where(img, picture, video, iframe),
.media-figure > :where(img, picture, video, iframe) {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Responsive consistency
   -------------------------------------------------------------------------- */

@container (max-width: 44rem) {
  .main-content :where(.page-header, .component-header, .section-header, .view-header, .list-header, .record-header) {
    align-items: stretch;
    flex-direction: column;
  }

  .main-content :where(.page-header, .component-header, .section-header, .view-header, .list-header, .record-header) > :where(.page-actions, .header-actions, .component-actions, .toolbar-actions, .record-actions, .btn-toolbar) {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .content-with-aside,
  .detail-layout,
  .record-layout,
  .editor-layout,
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .main-content {
    padding: clamp(0.8rem, 4vw, 1.15rem);
  }

  .surface,
  .panel,
  .section,
  .content-panel,
  .detail-panel,
  .settings-panel,
  .filter-panel,
  .summary-panel,
  .result-panel,
  .info-panel,
  .action-panel,
  [class$="__panel"] {
    padding: clamp(0.78rem, 4vw, 1rem);
  }

  .cluster,
  .rhyddid-cluster,
  .inline-controls,
  .filter-actions,
  .page-actions,
  .header-actions,
  .component-actions,
  .toolbar-actions,
  .section-actions,
  .footer-actions,
  .form-actions,
  .form-buttons,
  .submit-buttons,
  .dialog-actions,
  .confirmation-actions,
  .bulk-actions,
  .batch-actions {
    align-items: stretch;
  }

  :where(.page-actions, .header-actions, .component-actions, .toolbar-actions, .section-actions, .footer-actions, .form-actions, .form-buttons, .submit-buttons, .dialog-actions, .confirmation-actions, .bulk-actions, .batch-actions) > :where(.btn, button, input[type="submit"], input[type="button"]) {
    flex: 1 1 11rem;
  }

  .search-tools-form > *,
  .filter-form > *,
  .filters-form > *,
  .list-filter-form > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  .meta-row,
  .detail-row,
  .key-value-row,
  .definition-row {
    align-items: start;
    flex-direction: column;
  }
}

@media (forced-colors: active) {
  .surface,
  .panel,
  .section,
  .content-panel,
  .detail-panel,
  .settings-panel,
  .filter-panel,
  .summary-panel,
  .result-panel,
  .info-panel,
  .action-panel,
  .card,
  .dashboard-card,
  .summary-card,
  .stat-card,
  .record-card,
  .item-card,
  .workflow-card {
    box-shadow: none;
  }
}

@media print {
  .surface,
  .panel,
  .section,
  .content-panel,
  .detail-panel,
  .settings-panel,
  .filter-panel,
  .summary-panel,
  .result-panel,
  .info-panel,
  .action-panel,
  .card,
  .dashboard-card,
  .summary-card,
  .stat-card,
  .record-card,
  .item-card,
  .workflow-card {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .page-actions,
  .header-actions,
  .component-actions,
  .toolbar-actions,
  .section-actions,
  .footer-actions,
  .form-actions,
  .form-buttons,
  .submit-buttons,
  .dialog-actions,
  .confirmation-actions,
  .bulk-actions,
  .batch-actions,
  .search-tools,
  .filter-bar,
  .filters,
  .list-filters,
  .results-tools,
  .table-tools {
    display: none !important;
  }
}