/* ------------------------------------------------------------
   CMS content base (module pages)
   Parent scope: .cms-page. Styles of the classes allowed in CMS content
   (config cms.php). A site overrides this file in
   public/assets/modules/pages/css/cms-content.css, or adds rules in site.css.
------------------------------------------------------------ */

.cms-page img {
  max-width: 100%;
  height: auto;
}

.cms-page hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1rem 0;
}

.cms-page .cms-p {
  margin: 0 0 0.75rem;
}


/* ------------------------------------------------------------
   Headings and lead text (sized for page content, instead of the
   Bootstrap display sizes)
------------------------------------------------------------ */

.cms-page h1 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.cms-page h2 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e5e7eb;
}

/* A section heading after content: room above it (tables, lists...). */
.cms-page * + h2 {
  margin-top: 1.75rem;
}

.cms-page h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.25rem 0 0.5rem;
}

.cms-page h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.cms-page .p-lead {
  font-size: 1.05rem;
  color: #4b5563;
}

.cms-page .card > :last-child,
.cms-page .cms-section > :last-child {
  margin-bottom: 0;
}

.cms-page table[align="center"] {
  margin-left: auto;
  margin-right: auto;
}

.cms-page table[align="left"] {
  margin-right: auto;
}

.cms-page table[align="right"] {
  margin-left: auto;
}


/* ------------------------------------------------------------
   TinyMCE UI fix
   Keep dropdowns/toolbars above admin layout
------------------------------------------------------------ */

.tox.tox-tinymce-aux,
.tox .tox-menu,
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  z-index: 99999;
}


/* ------------------------------------------------------------
   Text alignment helpers
------------------------------------------------------------ */

.cms-page .ta-left {
  text-align: left;
}

.cms-page .ta-center {
  text-align: center;
}

.cms-page table.ta-center {
  margin-left: auto;
  margin-right: auto;
}

.cms-page .ta-right {
  text-align: right;
}

.cms-page .ta-justify {
  text-align: justify;
}


/* ------------------------------------------------------------
   Text helpers
------------------------------------------------------------ */

.cms-page .txt-small {
  font-size: 0.875em;
  opacity: 0.9;
}

.cms-page .txt-highlight {
  background: #fff2a8;
  padding: 0 0.15em;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Font size helpers
------------------------------------------------------------ */

.cms-page .fs-xs {
  font-size: 12px;
}

.cms-page .fs-sm {
  font-size: 14px;
}

.cms-page .fs-md {
  font-size: 16px;
}

.cms-page .fs-lg {
  font-size: 18px;
}

.cms-page .fs-xl {
  font-size: 22px;
}

.cms-page .fs-xxl {
  font-size: 28px;
}


/* ------------------------------------------------------------
   Layout helpers
------------------------------------------------------------ */

.cms-page .cms-section {
  margin: 2rem 0;
}

.cms-page .cols {
  display: grid;
  gap: 1.5rem;
  margin: 1rem 0;
}

.cms-page .cols--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-page .cols--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cms-page .cols--2-1 {
  grid-template-columns: 2fr 1fr;
}

.cms-page .cols--1-2 {
  grid-template-columns: 1fr 2fr;
}

.cms-page .col {
  min-width: 0;
}


/* ------------------------------------------------------------
   Callouts
------------------------------------------------------------ */

.cms-page .callout {
  padding: 14px 16px;
  border-left: 4px solid #9ca3af;
  border-radius: 12px;
  margin: 1rem 0;
  background: #f9fafb;
}

.cms-page .callout--note {
  border-left-color: #3b82f6;
  background: #eff6ff;
}

.cms-page .callout--warn {
  border-left-color: #ef4444;
  background: #fff1f2;
}


/* ------------------------------------------------------------
   Cards
------------------------------------------------------------ */

.cms-page .card {
  padding: 16px;
  border-radius: 16px;
  margin: 1rem 0;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.cms-page .card--soft {
  background: #f9fafb;
  box-shadow: none;
}

.cms-page .card--border {
  border: 1px solid #e5e7eb;
  box-shadow: none;
}


/* ------------------------------------------------------------
   Badges
------------------------------------------------------------ */

.cms-page .badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.85em;
  line-height: 1.4;
}

.cms-page .badge--info {
  border-color: #cfe3ff;
  background: #eef6ff;
}

.cms-page .badge--warn {
  border-color: #ffd0d6;
  background: #fff1f2;
}


/* ------------------------------------------------------------
   Buttons
   Applied on links only
------------------------------------------------------------ */

.cms-page a.btn {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  text-decoration: none;
}

.cms-page a.btn--primary {
  border-color: #111;
  background: #111;
  color: #fff;
}

.cms-page a.btn--ghost {
  background: transparent;
}

.cms-page a.btn--secondary {
  background: #f3f4f6;
}


/* ------------------------------------------------------------
   Dividers
------------------------------------------------------------ */

.cms-page .divider,
.cms-page .sep {
  border-top: 1px solid #e5e7eb;
}

.cms-page .sep--soft {
  border-top-color: rgba(0, 0, 0, 0.08);
}


/* ------------------------------------------------------------
   Image alignment helpers
------------------------------------------------------------ */

.cms-page img.img-left {
  display: block;
  margin: 1rem auto 1rem 0;
}

.cms-page img.img-center {
  display: block;
  margin: 1rem auto;
}

.cms-page img.img-right {
  display: block;
  margin: 1rem 0 1rem auto;
}


/* ------------------------------------------------------------
   Image float helpers
------------------------------------------------------------ */

.cms-page img.float-left {
  float: left;
  max-width: 50%;
  margin: 0 1rem 1rem 0;
}

.cms-page img.float-right {
  float: right;
  max-width: 50%;
  margin: 0 0 1rem 1rem;
}


/* ------------------------------------------------------------
   Image size helpers
------------------------------------------------------------ */

.cms-page img.w-100 {
  display: block;
  width: 100%;
  height: auto;
}

.cms-page img.img-sm {
  max-width: 240px;
}

.cms-page img.img-md {
  max-width: 480px;
}

.cms-page img.img-lg {
  max-width: 720px;
}


/* ------------------------------------------------------------
   Image decoration helpers
------------------------------------------------------------ */

.cms-page img.rounded {
  border-radius: 0.75rem;
}

.cms-page img.shadow {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.cms-page img.bordered {
  border: 1px solid rgba(0, 0, 0, 0.12);
}


/* ------------------------------------------------------------
   Image spacing helpers
------------------------------------------------------------ */

.cms-page img.m-t-sm {
  margin-top: 0.5rem;
}

.cms-page img.m-t-md {
  margin-top: 1rem;
}

.cms-page img.m-r-sm {
  margin-right: 0.5rem;
}

.cms-page img.m-r-md {
  margin-right: 1rem;
}

.cms-page img.m-b-sm {
  margin-bottom: 0.5rem;
}

.cms-page img.m-b-md {
  margin-bottom: 1rem;
}

.cms-page img.m-l-sm {
  margin-left: 0.5rem;
}

.cms-page img.m-l-md {
  margin-left: 1rem;
}

.cms-page img.mx-sm {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.cms-page img.my-sm {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}


/* ------------------------------------------------------------
   Figure helpers
------------------------------------------------------------ */

.cms-page figure.media {
  margin: 1.5rem 0;
}

.cms-page figure.media--center {
  text-align: center;
}

.cms-page figure.media--wide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.cms-page figcaption.caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.75;
}


/* ------------------------------------------------------------
   Tables: readable by default (spacing, row separators, header);
   the helpers below still adjust them.
------------------------------------------------------------ */

.cms-page table {
  width: 100%;
  margin: 0.75rem 0 1rem;
  border-collapse: collapse;
}

.cms-page th,
.cms-page td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.cms-page thead th {
  background: var(--surface-2, #f3f4f6);
  font-weight: 600;
}

/* ------------------------------------------------------------
   Table and cell helpers (classes allowed by config cms.php)
------------------------------------------------------------ */

.cms-page .table-compact {
  border-collapse: collapse;
}

.cms-page .table-spaced {
  border-collapse: separate;
  border-spacing: 0.5rem;
}

.cms-page .table-bordered td,
.cms-page .table-bordered th {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.cms-page .table-soft td,
.cms-page .table-soft th {
  background: rgba(0, 0, 0, 0.035);
}

.cms-page .cell-muted {
  background-color: #f5f5f5;
}

.cms-page .cell-primary {
  background-color: #eef4ff;
}

.cms-page .cell-warning {
  background-color: #fff7e6;
}

.cms-page .cell-success {
  background-color: #edf9f0;
}

/* ------------------------------------------------------------
   Responsive behavior
------------------------------------------------------------ */

@media (max-width: 760px) {
  .cms-page .cols,
  .cms-page .cols--2,
  .cms-page .cols--3,
  .cms-page .cols--2-1,
  .cms-page .cols--1-2 {
    grid-template-columns: 1fr;
  }

  .cms-page img.float-left,
  .cms-page img.float-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 1rem auto;
  }
}