/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Joomla 6 compatibility overrides for yoo_avenue / UIkit 1.x
   ========================================================================== */

/* 1 — Remove top gap
   theme.css sets .tm-container { margin: 20px/40px auto } which pushes the
   entire page (including the logo/header image) away from the viewport edge.
   Zero the top margin so the header sits flush against the browser top. */
.tm-container {
  margin-top: 0;
}

@media (min-width: 768px) {
  .tm-container {
    margin-top: 0;
  }
}

/* 2 — Remove gap between headerbar and navbar
   .tm-top-block carries class tm-grid-block, which inherits margin-top: 20px
   from the block-gutter rule. Zero it so the dark navbar sits immediately
   below the logo/header banner with no visible gap. */
.tm-top-block.tm-grid-block {
  margin-top: 0;
}

/* 3 — Main content area: white box + shadow
   Warp / J3 used .tm-noblog on the body + .uk-article for the white content
   box. Joomla 6 outputs neither class, so the content area stays transparent
   and the gray body shows through. Apply the white box directly to .tm-content
   (the <main> element in index.php). */
.tm-content {
  background: #ffffff;
  padding: 25px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.06);
  /* Establish a block-formatting context so floated content inside the main
     body (e.g. the homepage featured article's uk-float-left banner image)
     is fully contained — the white box grows to the float's height instead of
     collapsing and letting the gray page background show through. */
  display: flow-root;
}

/* 4 — Joomla 6 component output wrappers: transparent background
   J6 com_content wraps output in .com-content-article.item-page, etc.
   These should be transparent so they don't fight the white box on .tm-content. */
.com-content-article.item-page,
.com-content-category,
.com-content-blog,
.com-content-featured {
  background: transparent;
  box-shadow: none;
}

/* 5 — J6 article titles: match ATC theme's .uk-article-title style.
   Joomla 6 renders article titles as <div class="page-header"><h1>.
   The ATC theme.css defines .uk-article-title as 36px / weight 300 / line 42px
   with a subtle border-bottom separator. Mirror all of those here. */
.tm-content .page-header {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
}
/* Prevent the inner <h1>/<h2> from overriding the above with its own
   browser-default bold/large styles */
.tm-content .page-header h1,
.tm-content .page-header h2 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
}

/* 6 — Sidebar panels: Joomla 6 module chrome
   Modules rendered with style="xhtml" get a div.moduletable wrapper.
   Give sidebar module containers the same white-box treatment as .uk-panel. */
.tm-middle > [class*='tm-sidebar-'] .moduletable {
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 15px;
  margin-bottom: 20px;
}

/* 7 — Headerbar: close the gap between banner and navbar.
   The logo module outputs <p><img></p> or <div><img></div> inside mod-custom.
   Browser default margins on <p> and <div> + inline-image baseline gaps create
   white space below the banner before the dark navbar. Three targeted rules
   collapse that space without touching search or other headerbar modules. */
.tm-headerbar {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Logo anchor: block-level, no line-height gap from inline context */
a.tm-logo {
  display: block;
  float: left;
  line-height: 0;
}

/* Strip every block element's margin/padding inside the logo anchor so the
   image sits flush against the anchor bottom edge */
.tm-logo p,
.tm-logo div,
.tm-logo .mod-custom {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Image itself: block removes the inline-baseline descender gap (~4 px) */
.tm-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 8 — Vertical spacing around the main content band.
   The ATC theme.css sets .tm-top-block + .tm-middle { margin-top: 0px } with
   specificity 0-2-0 (two class selectors). A plain .tm-middle rule (0-1-0)
   would lose to it. We must match the adjacent-sibling selector to win. */
.tm-top-block + .tm-middle {
  margin-top: 15px;
}
.tm-middle {
  margin-bottom: 20px;
}

/* 9 — Prevent wide component output (tables, images, iframes) from breaking
   out of the white content box. */
.tm-content img,
.tm-content video,
.tm-content iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent table cell content from forcing horizontal overflow.
   Tables that exceed the content width will be capped; overflow scrolls
   on the .k-ui-namespace or other scrollable ancestor. */
.tm-content table {
  max-width: 100%;
  word-break: break-word;
}

/* DOCman's own UI namespace: allow horizontal scroll, never hard overflow */
.tm-content .k-ui-namespace {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 10 — Fix grid column right-edge overflow.
   .uk-grid > * has no box-sizing: border-box (UIkit 1.x omission).
   With box-sizing: content-box, width: 100% + padding-left: 20px makes each
   column 20px wider than the flex container, pushing it 20px past the right
   edge of sibling .tm-top-block / .tm-block-bottom sections.
   box-sizing: border-box makes percentage widths include the padding, so each
   column's border edge sits exactly at the container right edge. */
.tm-middle.uk-grid > * {
  box-sizing: border-box;
}

/* 11 — Toolbar white-box fix.
   .tm-top-block carries class tm-grid-block which gets background:#ffffff and
   a box-shadow in theme.css. Making the block itself transparent stops the
   shadow from rendering around the combined navbar+toolbar as one big white
   box. The toolbar then gets its own explicit white background so the
   breadcrumb/search strip still looks correct. */
.tm-top-block.tm-grid-block {
  background: transparent;
  box-shadow: none;
}
.tm-toolbar {
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* 12 — Grid module positions: auto-layout as equal-width flex columns.
   In J3 + Warp, the framework wrapped each module in a div with uk-width-*
   classes and uk-panel-box so UIkit's float grid sized them correctly.
   In J6, Joomla's xhtml chrome outputs plain <div class="mod-custom"> with
   no width or panel class, so all modules stack vertically.
   Fix: switch to CSS flexbox so children auto-size equally regardless of count.
   Vertical and horizontal separator lines are re-implemented via border rules
   (replacing the lost uk-panel-box border CSS from theme.css). */
.tm-main-top.uk-grid,
.tm-main-bottom.uk-grid,
.tm-top-a.uk-grid,
.tm-top-b.uk-grid,
.tm-bottom-a.uk-grid,
.tm-bottom-b.uk-grid,
.tm-bottom-c.uk-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0; /* cancel UIkit's -25px negative margin for float grid */
}

/* Each module gets equal share of the row */
.tm-main-top.uk-grid > div,
.tm-main-bottom.uk-grid > div,
.tm-top-a.uk-grid > div,
.tm-top-b.uk-grid > div,
.tm-bottom-a.uk-grid > div,
.tm-bottom-b.uk-grid > div,
.tm-bottom-c.uk-grid > div {
  flex: 1 1 200px; /* 200px min so modules wrap on narrow viewports */
  box-sizing: border-box;
  padding: 15px;
}

/* Vertical separator between side-by-side modules (≥ 768 px) */
@media (min-width: 768px) {
  .tm-main-top.uk-grid > div + div,
  .tm-main-bottom.uk-grid > div + div,
  .tm-top-a.uk-grid > div + div,
  .tm-top-b.uk-grid > div + div,
  .tm-bottom-a.uk-grid > div + div,
  .tm-bottom-b.uk-grid > div + div,
  .tm-bottom-c.uk-grid > div + div {
    border-left: 1px solid rgba(0, 0, 0, 0.07);
  }
}

/* Horizontal separator when modules wrap / stack on phones */
@media (max-width: 767px) {
  .tm-main-top.uk-grid > div + div,
  .tm-main-bottom.uk-grid > div + div,
  .tm-top-a.uk-grid > div + div,
  .tm-top-b.uk-grid > div + div,
  .tm-bottom-a.uk-grid > div + div,
  .tm-bottom-b.uk-grid > div + div,
  .tm-bottom-c.uk-grid > div + div {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }
}

/* 13 — Hide empty component content box on pages where the Joomla component
   renders nothing (e.g. homepage configured to show Featured articles but none
   are promoted). In that case J6 outputs <div class="blog-featured"></div>
   inside <main class="tm-content">, producing an empty white box.
   The :has() selector collapses the box when blog-featured is the only child
   and contains no elements. Falls back gracefully in older browsers. */
.tm-content:has(> .blog-featured:only-child:not(:has(*))) {
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* 14 — Float containment in article body.
   Article content often uses floated tables or images (e.g. the employee-bios
   page has <table style="float:left">). The floated element escapes normal flow
   so the containing .tm-content collapses and the white background doesn't
   extend to the full height of the floated content.
   display:flow-root on the article body creates a block formatting context that
   stretches to contain any floated children without clipping box-shadows. */
.com-content-article__body,
.com-content-blog__body,
.com-content-category__body {
  display: flow-root;
}

/* 15 — Article content tables: collapse borders.
   Content tables written with border="1" render in border-collapse:separate by
   default, producing chunky double-borders between every cell. UIkit always uses
   border-collapse:collapse. Apply it to all tables inside .tm-content so the
   border="1" + border-color inline style on legacy article tables renders cleanly
   (single thin lines) rather than the thick separate-border look. */
.tm-content table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 17 — J6 Bootstrap pagination → UIkit-style look.
   Joomla 6 outputs <ul class="pagination"><li class="page-item"><a class="page-link">.
   UIkit 1.x has no rules for any of this, so the list renders as bullet points.
   The prev/next arrows use Joomla's icomoon icon font (icon-angle-*) which is
   not loaded by this theme, making them invisible. Fix both issues here. */

/* Strip browser list defaults; lay out as a flex row */
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 15px 0;
  gap: 3px;
}

/* Each button */
ul.pagination .page-link {
  display: block;
  padding: 4px 10px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #444444;
  text-decoration: none;
  font-size: 13px;
  line-height: 20px;
  border-radius: 2px;
  min-width: 28px;
  text-align: center;
  cursor: pointer;
}

/* Active (current) page */
ul.pagination .page-item.active .page-link {
  background: #333333;
  border-color: #333333;
  color: #ffffff;
  cursor: default;
}

/* Disabled (prev/next on first/last page) */
ul.pagination .page-item.disabled .page-link {
  color: #cccccc;
  background: #f9f9f9;
  cursor: default;
}

/* Hover on clickable items */
ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: #f0f0f0;
  border-color: #aaaaaa;
  color: #222222;
  text-decoration: none;
}

/* Arrow icon fallbacks — Joomla's icomoon font is not loaded in this theme.
   Inject Unicode equivalents so navigation arrows are visible. */
.icon-angle-double-left::before  { content: '«'; }
.icon-angle-left::before         { content: '‹'; }
.icon-angle-right::before        { content: '›'; }
.icon-angle-double-right::before { content: '»'; }

/* 16 — ATC navbar: fix the broken gradient in styles/ATC/css/theme.css.
   The LESS compiler output has ##165C7D (double-hash) which is invalid CSS,
   so the browser falls back to background: #717C7D (slate).  The active
   item gradient IS valid (#383838 → #2f2f2f) and renders correctly.
   No overrides needed here — the ATC theme.css is now loaded as the primary
   stylesheet via joomla.asset.json. */