/*
 * Avant template — avant-fixups.css
 * Phase 3c follow-up (2026-05-24): Template-specific fixups extracted from the old
 *   bs2-bs5-bridge.css after the BS2-aliasing rules became obsolete.
 *
 * Background
 * ----------
 * Phase 3b shipped a "bridge" file (bs2-bs5-bridge.css) that did two unrelated things
 * mashed together:
 *   (1) BS2 grid + utility aliasing — .row-fluid as flex, .row-fluid > .spanN widths,
 *       .pull-left/.pull-right, .visible-phone/.hidden-phone/etc., .btn-inverse.
 *       The Phase 3b inline-JS bridge also added BS2 class names to BS5 markup so
 *       these selectors could match. Lowest-touch unblock for legacy rules.
 *   (2) Template-specific fixups — VM4 product-grid <ul> bullet resets, VM debug
 *       message suppression, BS3-style nav-tabs bridge, currency-select native chrome,
 *       menu-vanilla parent-arrow indicators + submenu width/transition rules,
 *       menu-nav/social-links list-style resets, vmmanufacturer list reset.
 *
 * Phase 3c rewrote the ~200 BS2 grid/utility selectors throughout the template's CSS
 * files to native BS5 (.row, .col-md-N, .float-end, .d-none/.d-md-block, .btn-dark),
 * and the inline-JS bridge was retired. Concern (1) above became truly obsolete: no
 * markup outputs .row-fluid / .spanN / .pull-* / .hidden-phone / .btn-inverse anymore,
 * so the bridge's aliases were silently no-op'ing. Verified 2026-05-24 by grepping
 * the template tree — only comments mention those classes, no actual class="" usage.
 *
 * BUT concern (2) is permanent — those fixups target VM/Joomla/admin classes
 * (ul.vmproduct, ul.nav.nav-tabs, .vmdebug, .menu-nav, .default-currency, etc.) that
 * never had any BS2 equivalent. They were always going to be needed; they just got
 * filed in the wrong place.
 *
 * Architectural lesson recorded in Skill 26: when introducing a bridge layer to unblock
 * a modernization, keep BS2-aliasing rules and template-specific-fixup rules in SEPARATE
 * FILES from day one. Otherwise retiring the bridge silently strips out fixups that still
 * matter, and the regressions only surface when a user catches them visually (bullets-
 * left-of-products, VM debug messages re-appearing in #system-message-container, tab
 * labels concatenating, etc.).
 *
 * This file is the permanent home for Avant template-specific fixups. Load LAST in the
 * <head> CSS stack so the fixups win cascade against earlier preset/template rules.
 *
 * The legacy bs2-bs5-bridge.css was retired (no longer loaded) on 2026-05-24 morning during
 * the Phase 3c follow-up restructure, and was deleted from disk later the same day after a
 * clean smoke-test confirmed this file was carrying all the permanent rules correctly. See
 * the Avant modernization vault doc for the full audit + restructure narrative.
 */

/* ---------- VirtueMart product-grid bullet resets ---------- */

/*
 * VM4 outputs product grids as <ul class="vmproduct product-details row"> with
 * <li class="col-md-3 floatleft productdetails"> children. The module slider variant uses
 * <ul class="sl-products vmproduct ..."> with id="slider*".
 *
 * BS5's Reboot leaves <ul> with default disc bullets + padding-left, which paints a stray
 * bullet to the left of the four-product-in-a-row grid on home/category pages. The fix:
 * strip the list semantics from VM's product-grid <ul>s.
 *
 * VM manufacturer list (<ul class="row vmmanufacturer">) gets the same treatment — it
 * used to be styled away by old .row-fluid > ul logic; explicit reset now.
 */
ul.vmmanufacturer {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
ul.vmmanufacturer > li { list-style: none; }

ul.vmproduct,
ul.sl-products,
ul.vm-product-list-container {
	list-style: none;
	padding-left: 0;
}
ul.vmproduct > li,
ul.sl-products > li {
	list-style: none;
}

/* ---------- BS3-style nav-tabs bridge (VM4 tab module markup) ---------- */

/*
 * VM4 + Avant's tab module output:
 *   <ul class="nav nav-tabs"><li><a class="tab_heading" data-toggle="tab">...</a></li></ul>
 * which uses the BS3-era markup pattern (no .nav-item on <li>, no .nav-link on <a>).
 * BS5's nav-tabs CSS only applies tab-button layout (display: block, padding, etc.) via
 * .nav-link — so without these aliases the tab labels render as bare inline text
 * concatenated together ("LATEST PRODUCTSFEATURED PRODUCTSCUSTOMERS CHOICEHOW TO BUY").
 * The bridge gives the BS3 selectors the foundational layout BS5 only ships on .nav-link.
 */
ul.nav.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	border-bottom: 1px solid #dee2e6;
}
ul.nav.nav-tabs > li {
	list-style: none;
	margin-bottom: -1px;
}
ul.nav.nav-tabs > li > a {
	display: block;
	padding: 0.5rem 1rem;
	color: #495057;
	text-decoration: none;
	border: 1px solid transparent;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}
ul.nav.nav-tabs > li > a:hover {
	border-color: #e9ecef #e9ecef #dee2e6;
}
ul.nav.nav-tabs > li.active > a,
ul.nav.nav-tabs > li > a.active {
	color: #495057;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
}

/* ---------- VM debug message suppression ---------- */

/*
 * Suppress VirtueMart vmRam() debug output. vmdefines.php calls vmRam('Used Memory after
 * including autoloader') at line 184 and vmRam('After class aliases') at line 302 BEFORE
 * any debug_enable/dev config check, so VM's debug_enable=none does not silence them. The
 * function pushes <span class="vmdebug">...</span> messages through Joomla's
 * enqueueMessage('info') path, which renders inside #system-message-container on every
 * page. Hiding the class is the lowest-touch fix — avoids patching a vendor file that
 * would be lost on VM update.
 */
.vmdebug,
#system-message-container .alert-info:has(.vmdebug) {
	display: none !important;
}

/* ---------- Menu + social-links list resets ---------- */

/*
 * Bootstrap 5's Reboot adds default <ul> list-style/padding/margin. Avant's main nav
 * (<ul class="menu-nav" id="nav">) and the social-links <ul id="social-links"> rely on
 * unstyled lists; re-establish the resets explicitly so we do not depend on a preset's
 * implicit overrides.
 */
ul.menu-nav,
ul#social-links {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
ul.menu-nav > li {
	list-style: none;
}

/* ---------- Phase 5c (2026-05-24): Vanilla menu support ---------- */

/*
 * Parent-item arrow indicator. supersubs.js's autoArrows feature appended a tiny <span>
 * to every parent <a>; we replicate that visually with a CSS ::after on .menu-parent (the
 * class menu-vanilla.js adds to every <li> that has a nested <ul>). Pure CSS — no DOM
 * nodes added.
 */
ul.menu-nav li.menu-parent > a::after {
	content: " \25BE"; /* small down-arrow */
	font-size: 0.7em;
	opacity: 0.7;
	margin-left: 4px;
}
ul.menu-nav li.menu-parent li.menu-parent > a::after {
	content: " \25B8"; /* small right-arrow for nested submenu parents */
}

/*
 * Submenu width — replaces what supersubs.js used to calculate dynamically. white-space
 * keeps each menu item on one line; min/max-width gives a sensible range without measuring.
 */
ul.menu-nav ul {
	min-width: 12em;
	max-width: 22em;
}
ul.menu-nav ul li > a {
	white-space: nowrap;
}

/*
 * Side-panel slide animation — replaces the .animate({width:'show'}) + .fadeIn() chains
 * that the old inline jQuery did. menu-vanilla.js toggles .is-open; CSS handles the visual.
 */
div.panel1 {
	overflow: hidden;
	transition: width 300ms ease;
}
div.panel1:not(.is-open) {
	width: 0 !important;
}
div.menupanel {
	transition: opacity 200ms ease;
	opacity: 0;
	pointer-events: none;
}
div.menupanel.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Phase 5b (2026-05-24): Native currency selector chrome ---------- */

/*
 * Replaces dropkick's custom <select> chrome. Native <select> with a touch of styling so
 * it looks intentional rather than browser-default. Used in the .default-currency container
 * inside the currency module.
 */
select.default-currency,
.default-currency select {
	padding: 6px 28px 6px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background-color: #fff;
	font-size: 13px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666' d='M0 0l5 6 5-6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
select.default-currency:hover,
.default-currency select:hover {
	border-color: #999;
}
select.default-currency:focus,
.default-currency select:focus {
	outline: 0;
	border-color: #37bbe1; /* Avant accent teal — matches preset style1 */
	box-shadow: 0 0 0 2px rgba(55, 187, 225, 0.2);
}

/* ---------- Phase 5i (2026-05-29): Footer centering ---------- *
 *
 * Avant's live footer renders #bot-modules-2 (containing the social-links UL)
 * above #footer-line (containing only the copyright module, which already has
 * inline text-align: center). The original template's social-links rules float
 * the <li>s left, which leaves the row left-aligned inside its column. Phase 5i
 * centers the row to match the centered copyright underneath it.
 *
 * Scope is intentionally CSS-only — Avant's HTML structure already supports
 * centering (full-width col-md-12 wrappers). No structural restructure of
 * index.php is needed (unlike Axxen, where #footer-line used a 6/6 split that
 * had to be unrolled to 3 stacked centered rows in markup).
 */
#bot-modules-2 ul#social-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	float: none;
}
#bot-modules-2 ul#social-links li {
	display: inline-block;
	float: none;
	margin: 4px 6px;
}
/* Wrap the social-links UL in a centered block so inline-flex can center
   inside the parent <div>. The UL renders as a single inline element. */
#bot-modules-2 .row > div {
	text-align: center;
}


/* ============================================================
   cwlt-20260722 — maintenance fixes (Expression 6.1.0.1 parity)
   1. Search icon + pagination arrows as self-contained SVGs
      (jui IcoMoon font was removed in Joomla 4+ — glyphs showed
      as stray characters / empty squares).
   2. Featured-view tall-article clip fix.
   3. Search button snug against the input.
   ============================================================ */
span.icon-search { display:inline-block; width:14px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center / contain; }
span.icon-search::before { content:"" !important; }

.icon-angle-left { display:inline-block; width:10px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 1 2 8l6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 1 2 8l6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-left::before { content:"" !important; }

.icon-angle-right { display:inline-block; width:10px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-right::before { content:"" !important; }

.icon-angle-double-left { display:inline-block; width:13px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 2 8l6 7M14 1 8 8l6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 2 8l6 7M14 1 8 8l6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-double-left::before { content:"" !important; }

.icon-angle-double-right { display:inline-block; width:13px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l6 7-6 7M8 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l6 7-6 7M8 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-double-right::before { content:"" !important; }

.blog-featured .blog-items { display: block !important; }
.blog-featured .blog-item { display: block !important; overflow: visible !important; height: auto !important; }
#search-position .btn, .mod-finder__search .btn, .search .btn { margin: 0 !important; }

/* sidewaysfix 2026-10-15 */
/* Phone: the page scrolled sideways. */
@media (max-width: 767px) {
  /* these bands kept margin 0 -20px from the old 20 px phone body gutter, which is gone: they hung 20 px off both
     sides (sideways scroll, text at the edge). */
  #top-sticky-panel, #footer { margin-left: 0 !important; margin-right: 0 !important; }
  /* row gutters / an absolutely placed module overhang the screen by a few px: no sideways scroll (clip keeps sticky). */
  html, body { overflow-x: clip; }
}

/* edgefix 2026-10-15 */
/* Phone: text in these bands ran to the screen edge. Inset just these bands. */
@media (max-width: 767px) {
  #main-content-handler { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; }
}

/* CS-PATCH: avant-phone-menu-panel-2026-10-16 */
/* 2026-10-16 (released-template phone pass): the phone menu button did nothing. The May vanilla-JS rewrite toggles
   .is-open on div.panel1, but nothing mapped .is-open to "shown" (the old jQuery set display inline, and nav.css still
   says display:none), so the menu never appeared. */
div.panel1.is-open { display: block !important; }
/* /CS-PATCH: avant-phone-menu-panel-2026-10-16 */

/* CS-PATCH: avant-phone-menu-panel-fit-2026-10-16 */
/* phones: the opened menu was a 2,800px absolute popup whose close button sat half outside its corner. Make it a fixed,
   scrollable panel inside the screen, with the close button always visible. */
@media (max-width: 767px) {
  body div.panel1.is-open { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 64px !important; width: auto !important; height: auto !important; margin: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 300000 !important; }
  body div.panel1.is-open .menupanel { padding: 52px 20px 24px !important; }
  body div.panel1.is-open span.closemenu { position: fixed !important; top: 12px !important; right: 76px !important; left: auto !important; margin: 0 !important; z-index: 300001 !important; }
  body div.panel1.is-open ul.selectnav li a { display: block; padding: 6px 0; }
}
/* /CS-PATCH: avant-phone-menu-panel-fit-2026-10-16 */

/* CS-PATCH: avant-phone-header-standard-2026-10-16 */
/* 2026-10-16 (Tim's grad test: "the header on Avant is a mess ... not laid out according to the skill for mobile view").
   Canonical phone chrome (cs-mobile-generic.js + cs-phone-chrome.css) builds the logo row + burger and the icon row;
   the donor's own phone header pieces are hidden on phones (their content lives in the drawer / chips now). */
@media (max-width: 767px) {
  #top-sticky-panel #info-line, #top-sticky-panel #nav-line, #top-sticky-panel nav#menu, a#menupanel, div.panel1 { display: none !important; }
}
/* /CS-PATCH: avant-phone-header-standard-2026-10-16 */

/* CS-PATCH: avant-phone-cart-chip-2026-10-16 */
/* phone cart chip: the donor cart link (its basket is a background image) fills the canonical chip box and takes its
   rounded corners; the donor's hover popover and "Cart empty" text label stay out of the chip (the count is the
   canonical badge, shown when the cart has items). */
@media (max-width: 767px) {
  #cs-utility-row > .cs-adopted-cart .show-cart, #cs-utility-row > .cs-adopted-cart a#cartpanel { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background-color: transparent !important; background-position: center center !important; box-shadow: none !important; }
  #cs-utility-row > .cs-adopted-cart .popover, #cs-utility-row > .cs-adopted-cart > .show-both { display: none !important; }
}
/* /CS-PATCH: avant-phone-cart-chip-2026-10-16 */

/* CS-PATCH: avant-phone-basket-size-2026-10-16 */
/* basket image sized like the other chip glyphs (it was drawn at its natural size, larger than the icons beside it) */
@media (max-width: 767px) { #cs-utility-row > .cs-adopted-cart a#cartpanel { background-size: 26px auto !important; } }
/* /CS-PATCH: avant-phone-basket-size-2026-10-16 */

/* CS-PATCH: avant-qty-overlay-2026-10-16 */
/* 2026-10-16: "Add to Cart" could not be clicked in its middle. The quantity box and +/- controls are a hover-reveal
   (vm-avant.css: they slide up above the button on .spacer:hover), but while hidden they sit INVISIBLY on top of the
   button (opacity 0, top 0) and still catch clicks - a tap on the button hit the hidden "+". Hidden = not clickable.
   Touch screens have no hover: the controls are hidden there (quantity 1; change it in the cart), so the button and
   the price stay clear. */
.spacer .addtocart-bar .quantity-box, .spacer .addtocart-bar span.quantity-controls { pointer-events: none; }
.spacer:hover .addtocart-bar .quantity-box, .spacer:hover .addtocart-bar span.quantity-controls { pointer-events: auto; }
@media (hover: none) {
  .spacer .addtocart-bar .quantity-box, .spacer .addtocart-bar span.quantity-controls { display: none !important; }
}
/* /CS-PATCH: avant-qty-overlay-2026-10-16 */