/*
 * GemeindeBechhofen_v3_2 – Anpassungen für Joomla 6
 *
 * Das Original-CSS (template.css) stammt aus Artisteer und kennt nur das
 * Joomla-2.5-Markup. Joomla 6 erzeugt in seinen Core-Layouts Bootstrap-5-
 * Klassen, ohne dass dieses Template Bootstrap lädt. Hier werden die
 * wichtigsten Hilfsklassen nachgebildet und neue Elemente an das Design angepasst.
 */

/* ---------- Bootstrap-Hilfsklassen ---------- */
.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;
}
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.w-100 { width: 100% !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.img-fluid, .art-postcontent img { max-width: 100%; height: auto; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: .5em; }
.art-postcontent ul.list-inline > li:before,
.art-postcontent ul.tags > li:before { content: normal; }

/* ---------- Beitragsbilder (figure.item-image) ---------- */
figure.item-image { margin: 0 0 .5em 0; }
figure.item-image.left,
figure.item-image.float-start { float: left; margin: 0 .6em .3em 0; }
figure.item-image.right,
figure.item-image.float-end { float: right; margin: 0 0 .3em .6em; }
figure.item-image.none,
figure.item-image.float-none { float: none; }
figure.item-image figcaption { font-size: .85em; font-style: italic; }

/* ---------- Blog-Raster (num_columns > 1) ---------- */
.blog-items[class*="columns-"],
.blog-items[class*="masonry-"] { display: grid; gap: 0 1em; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .blog-items.columns-2, .blog-items.masonry-2 { grid-template-columns: repeat(2, 1fr); }
  .blog-items.columns-3, .blog-items.masonry-3 { grid-template-columns: repeat(3, 1fr); }
  .blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(4, 1fr); }
}
.blog-item { min-width: 0; }

/* ---------- Badges und Hinweise ---------- */
.badge {
  display: inline-block;
  padding: .2em .5em;
  font-size: .75em;
  font-weight: bold;
  line-height: 1;
  border-radius: .25em;
  vertical-align: middle;
}
.bg-warning { background-color: #f0ad4e; }
.bg-info, .btn-info { background-color: #5bc0de; }
.text-light { color: #fff; }
.alert {
  padding: .75em 1em;
  margin: 0 0 1em 0;
  border: 1px solid transparent;
  border-radius: .25em;
}
.alert-info { color: #055160; background: #cff4fc; border-color: #b6effb; }
.alert-success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.alert-warning { color: #664d03; background: #fff3cd; border-color: #ffecb5; }
.alert-danger { color: #842029; background: #f8d7da; border-color: #f5c2c7; }

/* Systemmeldungen: joomla-alert bringt eigenes CSS mit, hier nur Abstand */
#system-message-container:not(:empty) { margin: 0 0 1em 0; }

/* ---------- Bearbeiten-Icon (Frontend-Editing) ---------- */
.art-post .icons { float: right; margin-left: .5em; }
.art-post .icons .btn { padding: .2em .5em; }

/* ---------- Pagination (Override erzeugt div.art-pager) ---------- */
.com-content-category-blog__navigation,
.blog-featured .w-100 { clear: both; overflow: hidden; }
.art-pager span.disabled { opacity: .5; }

/* ---------- Formulare (Login, Kontakt, Smart Search) ---------- */
.control-group { margin-bottom: .75em; }
.control-label { display: block; margin-bottom: .25em; }
.form-control, .form-select { max-width: 100%; box-sizing: border-box; }
.input-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: .25em; }

/* ---------- Untermenüs der Core-Menülayouts (z. B. Seitenleiste) ---------- */
.mod-menu__toggle-sub {
  background: none;
  border: 0;
  padding: 0 .25em;
  cursor: pointer;
}

/* ---------- Bild-Menüpunkte ---------- */
ul.art-hmenu .image-title, ul.art-vmenu .image-title { margin-left: .3em; }

/* ---------- Logo auf schmalen Bildschirmen skalieren (Original war abgeschnitten) ---------- */
.responsive .art-header .art-logo { max-width: calc(100% - 20px); }
.responsive .art-header .art-logo img { max-width: 100%; height: auto; }

/* ---------- Frontend-Editing (Bearbeiten-Buttons für Module/Menüs bei Anmeldung) ---------- */
.jmoddiv { position: relative; }
.btn.jmodedit {
  z-index: 900;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  padding: .2em .45em;
  color: #333;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid #58595a;
  border-radius: .25em;
  line-height: 1;
}
[role="tooltip"]:not(.show) {
  display: none;
}
[role="tooltip"].show {
  position: absolute;
  z-index: 1070;
  right: 2.5em;
  max-width: 100%;
  padding: .5em;
  color: #000;
  text-align: start;
  background: #fff;
  border: 1px solid #6d757e;
  border-radius: .25em;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}