/* ============================================================
   yoo_aurora — Joomla 4+ compatibility bridge
   ------------------------------------------------------------
   Warp 7 emitted UIkit 2 markup that Joomla 4+ core no longer
   produces. The compiled Warp CSS (styles/red/css/theme.css) is
   still doing the visual work; this file re-attaches it to the
   markup Joomla 4 actually outputs.
   Mirrors the approach proven on yoo_avenue for atcouncil.org.
   ============================================================ */

/* 1 — Joomla 4 wraps component output in .com-content-*; keep it
       transparent so the theme's content panel shows through. */
.com-content-article.item-page,
.com-content-category,
.com-content-category-blog,
.com-content-blog,
.com-content-featured,
.com-finder,
.com-users {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* 2 — Article titles: Joomla 4 emits .page-header > h1/h2 instead of
       Warp's .uk-article-title. Match the theme's heading treatment. */
.tm-content .page-header {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tm-content .page-header h1,
.tm-content .page-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
}

/* 3 — Contain floated content (images/tables inside articles) so the
       content panel grows to fit instead of collapsing. */
.com-content-article__body,
.com-content-category__body,
.com-content-blog__body,
.tm-content {
  display: flow-root;
}

/* 4 — Joomla 4 module chrome. Warp's "xhtml" chrome produced
       .uk-panel; J4 outputs plain div.moduletable. Give sidebar and
       grid modules the panel treatment the theme expects. */
.tm-sidebar-main .moduletable,
.tm-sidebar-a .moduletable,
.tm-sidebar-b .moduletable,
.tm-grid-block .moduletable {
  margin-bottom: 20px;
}
.tm-sidebar-main .moduletable > h3,
.tm-sidebar-a .moduletable > h3,
.tm-sidebar-b .moduletable > h3 {
  margin-bottom: 10px;
}

/* 5 — Grid positions: Warp added uk-width-* to each child. Joomla 4
       chrome does not, so every module stacked. Use flex so children
       size evenly regardless of count. */
.tm-grid-block.uk-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
}
.tm-grid-block.uk-grid > div {
  flex: 1 1 220px;
  box-sizing: border-box;
  padding: 15px;
}
@media (min-width: 768px) {
  .tm-grid-block.uk-grid > div + div {
    border-left: 1px solid rgba(0, 0, 0, 0.07);
  }
}
@media (max-width: 767px) {
  .tm-grid-block.uk-grid > div + div {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }
}

/* 6 — Wide content (tables, images, iframes, DOCman listings) must not
       break out of the content panel. */
.tm-content img,
.tm-content video,
.tm-content iframe {
  max-width: 100%;
  height: auto;
}
.tm-content table {
  max-width: 100%;
  border-collapse: collapse;
  word-break: break-word;
}
.tm-content .koowa,
.tm-content .k-ui-namespace {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 7 — Joomla 4 pagination is Bootstrap-flavoured (ul.pagination /
       .page-item / .page-link) and unstyled by UIkit 2. */
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 15px 0;
  gap: 3px;
}
ul.pagination .page-link {
  display: block;
  padding: 4px 10px;
  border: 1px solid #d4d4d4;
  background: #fff;
  color: #444;
  text-decoration: none;
  font-size: 13px;
  line-height: 20px;
  border-radius: 2px;
  min-width: 28px;
  text-align: center;
}
ul.pagination .page-item.active .page-link {
  background: #333;
  border-color: #333;
  color: #fff;
}
ul.pagination .page-item.disabled .page-link {
  color: #ccc;
  background: #f9f9f9;
}
/* Joomla's icomoon arrows are not loaded by this theme */
.icon-angle-double-left::before  { content: '\00AB'; }
.icon-angle-left::before         { content: '\2039'; }
.icon-angle-right::before        { content: '\203A'; }
.icon-angle-double-right::before { content: '\00BB'; }

/* 8 — Joomla 4 system messages use .alert instead of UIkit's
       .uk-alert; give them equivalent spacing. */
.tm-content .alert {
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 3px;
}
.tm-content .alert-message,
.tm-content .alert-success { background: #ebf7ed; border: 1px solid #bcdfc4; }
.tm-content .alert-warning { background: #fff6e6; border: 1px solid #f5d9a4; }
.tm-content .alert-danger,
.tm-content .alert-error   { background: #fdf0ef; border: 1px solid #f3c3c0; }

/* 9 — Search form: Joomla 4 Smart Search markup inside the theme's
       .tm-search shell. */
.tm-search .uk-search,
.tm-search form {
  display: inline-block;
  margin: 0;
}
.tm-search input[type="search"],
.tm-search .uk-search-field {
  max-width: 220px;
}