/* =====================================================================
   ahen26 - j6-compat.css
   ---------------------------------------------------------------------
   Maps Joomla 4/5/6 core markup onto the selectors the Joomla 3 era
   stylesheets (template.css / redesign.css) were written for.
   Loaded last. This template does not load Bootstrap, so the few utility
   classes that core layouts rely on are defined here.

   Menus are handled in the database, not here: every mod_menu module gets
   class_sfx = " menu" so the <ul> keeps the J3 class "menu"
   (J3: <ul class="nav menu mod-list">, J6: <ul class="mod-menu mod-list nav">).
   ===================================================================== */

/* Utility used by core layouts (e.g. the "Select your language" label of mod_languages). */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Breadcrumbs: J3 <ul class="breadcrumb_bc"> -> J6 <ol class="mod-breadcrumbs breadcrumb">.
   Same values as the J3 rules in template.css (ul.breadcrumb) and redesign.css section 13. */
ol.breadcrumb {
  font-size: 17px;
  color: var(--muted, #5e6b73);
  font-weight: 600;
  padding: 0;
  margin: 0;
  list-style: none;
}
ol.breadcrumb a {
  text-decoration: none;
  color: var(--brand, #0a6fa8);
}
ol.breadcrumb li {
  display: inline;
  padding-right: 4px;
}
@media (max-width: 479px) {
  ol.breadcrumb { font-size: 0.75em; }
}
/* J3 printed an explicit <span class="divider">&gt;</span> between items; J6 prints none. */
ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 4px;
  color: #414042;
}

/* Category blog items: J3 wrapped every item in <div class="span12"> and template.css sizes ".span12 img";
   J6 wraps items in .blog-item. Same values as the J3 rule. */
.blog .blog-item img {
  border: 1px solid #79c36f;
  width: 125px;
  height: 95px;
}

/* Pagination: J3 <div class="pagination"><ul class="pagination-list"><li> ->
   J6 <nav class="pagination__wrapper"><ul class="pagination"><li class="page-item"><a class="page-link">. */
nav.pagination__wrapper { text-align: center; }
ul.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
ul.pagination li {
  list-style: none;
  padding: 4px 10px;
  transition: all .15s var(--ease, ease);
}
ul.pagination .page-link { text-decoration: none; }
ul.pagination .active .page-link { font-weight: 700; color: var(--brand-deep, #08567e); }
ul.pagination .disabled .page-link { color: #999; }

/* J6 wraps intro/full images in <figure class="left|right|none item-image">; template.css has a generic
   ".left { float:left; overflow:hidden; width:245px }" meant for something else. J3 used the unstyled "pull-left". */
figure.item-image {
  float: none;
  overflow: visible;
  width: auto;
}

/* Photo gallery: articles built by port/build-gallery.php. Justified rows (flex-grow = aspect ratio), thumbnails from
   <folder>/_thumbs, the full picture opens in Fancybox through data-fancybox. */
.ah-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1.2em 0;
}
.ah-gallery .ah-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #e9eef1;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .12);
  text-decoration: none;
  transition: box-shadow .2s var(--ease, ease);
  /* --ar (width / height) is set inline by the builder: wide pictures get more room in the row */
  flex-grow: calc(var(--ar, 1) * 100);
  flex-basis: calc(var(--ar, 1) * 170px);
}
@media (max-width: 600px) {
  .ah-gallery .ah-gallery__item { flex-basis: calc(var(--ar, 1) * 95px); }
}
.ah-gallery .ah-gallery__item i { display: block; }
.ah-gallery .ah-gallery__item img {
  position: absolute;
  inset: 0;
  float: none;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  transition: transform .4s var(--ease, ease);
}
.ah-gallery .ah-gallery__item:hover { box-shadow: 0 6px 18px rgba(16, 42, 67, .22); }
.ah-gallery .ah-gallery__item:hover img { transform: scale(1.05); }
/* keeps the last row from stretching across the full width */
.ah-gallery .ah-gallery__fill { flex-grow: 1000000; }

/* Responsive embed (Slideshare presentations in articles 251/252; the old {slideshare} plugin is gone). */
.ah-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 1em 0;
}
.ah-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video gallery: articles built by port/build-videos.php. 16:9 thumbnails (YouTube's 4:3 frame is cropped by object-fit,
   which also drops its black bars), the player opens in Fancybox through data-fancybox. */
.ah-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px 14px;
  margin: 1.2em 0;
}
.ah-videos .ah-videos__item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ah-videos .ah-videos__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #1c2b36;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .12);
  transition: box-shadow .2s var(--ease, ease);
}
.ah-videos .ah-videos__thumb img {
  position: absolute;
  inset: 0;
  float: none;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  transition: transform .4s var(--ease, ease);
}
/* play button */
.ah-videos .ah-videos__thumb::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(10, 111, 168, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .2s var(--ease, ease), background .2s;
}
.ah-videos .ah-videos__thumb::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}
.ah-videos .ah-videos__item:hover .ah-videos__thumb { box-shadow: 0 6px 18px rgba(16, 42, 67, .22); }
.ah-videos .ah-videos__item:hover .ah-videos__thumb img { transform: scale(1.05); }
.ah-videos .ah-videos__item:hover .ah-videos__thumb::before { transform: scale(1.1); background: var(--brand, #0a6fa8); }
.ah-videos .ah-videos__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink, #1c2b36);
}
@media (max-width: 600px) {
  .ah-videos { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
  .ah-videos .ah-videos__title { font-size: 13px; }
  .ah-videos .ah-videos__thumb::before { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .ah-videos .ah-videos__thumb::after { margin: -8px 0 0 -5px; border-width: 8px 0 8px 14px; }
}