/* Wylia: bridge between Wylia's Bootstrap 2.3 CSS and Joomla 4/5/6 core markup.
   The bulk of core styling comes from joomla-core.css (Bootstrap 5 + Joomla
   blocks, in a cascade layer underneath Wylia). This file is unlayered and only
   handles places where a Bootstrap 2 rule in wylia.css would otherwise break a
   Bootstrap 5 component that core uses. */

/* ---- Icons: Joomla's icon font replaces BS2 glyphicon sprites ---------- */
[class^="icon-"],[class*=" icon-"]{background-image:none;width:auto;height:auto;line-height:1;vertical-align:baseline;margin-top:0}
.icon-bar{display:block;width:22px;height:2px;line-height:normal}

/* ---- Lists core marks up with BS5 list-inline (tags, article info) --- */
.list-inline,ul.tags{list-style:none;margin-left:0;padding-left:0}
.list-inline>li,.list-inline-item{display:inline-block;list-style:none}
.list-inline-item:not(:last-child){margin-right:.5rem}

/* ---- BS5 adds a CSS caret to .dropdown-toggle; Wylia draws its own ---- */
.nav .dropdown-toggle::after,.navbar .dropdown-toggle::after{content:none;display:none}

/* ---- Wylia's latest-news arrow lives on .icon-file::before ------------- */
[class^="latestnews"] li a .icon-file::before{display:inline-block}

/* ---- BS2 uses .in/.open for state, BS5 uses .show ---------------------- */
.collapse.show{height:auto;overflow:visible}
.collapsing{height:0;overflow:hidden;transition:height .35s ease}
.fade.show{opacity:1}
.dropdown-menu.show{display:block}
.tooltip.show{opacity:.9;visibility:visible}
.popover.show{display:block}

/* ---- BS5 modals (core opens a few) vs BS2 .modal box geometry ---------- */
.modal:has(> .modal-dialog){position:fixed;top:0;left:0;width:100%;height:100%;margin:0;background:none;border:0;border-radius:0;box-shadow:none;overflow-x:hidden;overflow-y:auto}
.modal:has(> .modal-dialog):not(.show){display:none}
.modal-backdrop.show{opacity:.5}

/* ---- Pagination: core uses BS5 ul.pagination>li.page-item>.page-link --- */
ul.pagination{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin-left:0;padding-left:0;box-shadow:none}
ul.pagination>li{display:block;float:none;list-style:none;margin:0}
ul.pagination>li>.page-link{float:none}
.pagination__wrapper{display:flex;justify-content:center}

/* ---- Breadcrumbs: let BS5 draw the "/" separators ---------------------- */
.mod-breadcrumbs.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;margin:0;background:none;border:0;box-shadow:none}
.mod-breadcrumbs.breadcrumb>li{display:list-item;list-style:none}
.mod-breadcrumbs__here{margin-right:.25rem}

/* ---- Front-end editing: module wrappers must be positioned ------------- */
.module,.moduletable,[class^="moduletable"],[class*=" moduletable"]{position:relative}
.btn.jmodedit{padding:2px 6px;line-height:1;text-shadow:none;box-shadow:none}

/* ---- Passkey button: core injects the SVG with no size ----------------- */
.plg_system_webauthn_login_button{display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.plg_system_webauthn_login_button svg{width:24px;height:24px;flex:0 0 auto}
.plg_system_webauthn_login_button svg path,.plg_system_webauthn_login_button svg circle{fill:currentColor}

/* ---- Small things core layouts expect ---------------------------------- */
img{max-width:100%;height:auto}
.com-users-methods-list-method-image{width:104px;flex:0 0 104px}
.com-users-methods-list-method-image img{width:100%;max-height:40px;object-fit:contain}
.com-users-methods-list-method-title h2,.com-users-methods-list-method-title .h4{font-size:1.15rem;line-height:1.3;margin:0}

/* Smart Search box: J3 showed "This site" as a value; J5+ uses a placeholder */
.search-query::placeholder{color:inherit;opacity:.8}
#footer .search-query::placeholder,.search .search-query::placeholder{color:#ccc!important;opacity:1}

/* ---- BS5 checkboxes/radios: BS2 sets input[type=checkbox]{width:auto},
        which collapses BS5's appearance:none box to nothing ------------- */
input.form-check-input[type="checkbox"],input.form-check-input[type="radio"]{width:1em!important;height:1em!important;min-width:1em;min-height:0!important;line-height:normal!important;padding:0!important;margin-top:.25em;vertical-align:top;border:1px solid #8a8d93;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;-webkit-appearance:none;appearance:none}
input.form-check-input[type="checkbox"]{border-radius:.25em}
input.form-check-input[type="radio"]{border-radius:50%}
input.form-check-input:checked{background-color:#9b5fb4;border-color:#9b5fb4}
.form-switch input.form-check-input[type="checkbox"]{width:2em;border-radius:2em}
.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}
.form-check .form-check-input{float:left;margin-left:-1.5em}
.form-check-label{display:inline;margin-bottom:0}

/* ---- Pagination items: give disabled <span>s the same box as links ----- */
ul.pagination .page-link{display:block;padding:.375rem .75rem;line-height:1.25}

/* ---- Selects: BS2 fixes select height at 30px; BS5 form-select adds
        padding + border-box, which clips the text ---------------------- */
select.form-select,select.form-control,select.custom-select{height:auto;min-height:30px;line-height:1.5;padding-top:.3rem;padding-bottom:.3rem}

/* ---- BS5 heading helper classes core uses (typography module excluded) - */
.h1{font-size:2rem}.h2{font-size:1.65rem}.h3{font-size:1.4rem}.h4{font-size:1.2rem}.h5{font-size:1.05rem}.h6{font-size:1rem}