/* Haswell Child (Ariston) - central child CSS.
   Loads AFTER the parent stylesheet stack (dep: cmssuperheroes-static).
   Feature CSS gets ported here section by section. */

/* ---------------------------------------------------------------------
   Mobile action bar  (inc/mobile-action-bar.php)
   Replaces developress-sticky-footer-bar: fixed bottom icon bar, phone +
   tablet only (<= 1024px, the plugin's only_phone_tablet.css breakpoint).
   Geometry = the plugin's effective look on the 2025 conferences page
   (plugin CSS + that page's WPBakery overrides): 10px bar padding, 22px
   icon, 14px label on the theme's 25px line-height -> 68px bar.
   A nested menu renders one list per tab group; assets/mobile-action-bar.js
   toggles the [hidden] attribute (nav + lists) to follow the active tab.
   The desktop hide stays !important so no script-set display can reveal
   the bar above 1024px.
   --------------------------------------------------------------------- */
:root {
  --ariston-bar-bg: #2499a8;
  --ariston-bar-fg: #ffffff;
  --ariston-bar-height: 68px;
}

.mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: var(--ariston-bar-bg);
  color: var(--ariston-bar-fg);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}

.mobile-action-bar[hidden],
.mobile-action-bar__list[hidden] {
  display: none;
}

.mobile-action-bar__list {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-action-bar__item {
  flex: 0 1 auto; /* content-sized + space-around, as the plugin laid them out */
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.mobile-action-bar__link,
.mobile-action-bar__link:hover,
.mobile-action-bar__link:focus,
.mobile-action-bar__link:active {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ariston-bar-fg);
  text-decoration: none;
  padding: 0;
}

.mobile-action-bar__icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 1px;
}

.mobile-action-bar__label {
  font-size: 14px;
  line-height: 25px;
  color: var(--ariston-bar-fg);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  body.has-mobile-action-bar {
    padding-bottom: calc(var(--ariston-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1025px) {
  .mobile-action-bar {
    display: none !important; /* beats the snippet's inline display from jQuery .show() */
  }
}

/* ---- header search popup (inc/search.php renders the live Search & Filter form) ----
   The theme hides the closed popup with opacity:0 + visibility:hidden, but the form's own markup (the "Search" <h4> label)
   stays hit-testable and sits on top of the main-menu links until the first click closes the popup for real
   (found on live 2026-10-13). Make the closed popup inert and its children hidden; .is-visible is the theme's open state. */
.cd-search:not(.is-visible) { pointer-events: none; }
.cd-search:not(.is-visible) * { visibility: hidden !important; }

/* --CC-- CSS step 6 (2026-10-14): Font Awesome 6 class names used in a few landing pages (fa-solid fa-map-pin on 35087,
   35165, 35351, 35569) used to be rendered by the Max Mega Menu Pro FA6 sheet, which is no longer loaded (the menu uses no icons).
   Map the FA6 style prefixes onto the one Font Awesome 5 that inc/icon-fonts.php keeps; the icon names used exist in FA5. */
.fa-solid { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.fa-regular { font-family: "Font Awesome 5 Free"; font-weight: 400; }
.fa-brands { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

/* --CC-- 2026-10-14 iPhone: first tap on a WPBakery grid link does nothing (found with the owner's on-device test, grid-touch-test
 * archived in development/archives/grid-touch-test-2026-10-14/). WPBakery's paginated grids are Owl carousels whose arrow container
 * `.vc_grid-owl-nav` sits at opacity 0 and is revealed by `.vc_grid-owl-theme:hover`. iOS turns the first tap into a hover, sees
 * content appear, and withholds the click (the second tap works because the grid is already hovered). Single-page grids were not
 * affected (their nav is display:none). On devices without hover the arrows get a constant opacity, so a hover changes nothing;
 * the site's grids use arrows_design "none" (zero-width arrows), so nothing becomes visible. !important: js_composer.min.css loads
 * after this sheet with the same specificity. */
@media (hover: none) {
    .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav { opacity: 1 !important; transition: none !important; }
}

/* --CC-- 2026-10-15 header search popup (owner bug report, phone screenshot): (1) Search & Filter prints the field heading
   "Search" as an <h4> above the input — the form (8252) is only used in this popup, hide the heading there (the search-results
   page form is outside .cd-search and keeps its headings); (2) haswell's widgets.scss shifts the open-state X by
   `right:-37px` on <=1024px (vendor layout with a cart icon next to it) — here it lands on the burger; keep it in its slot.
   Specificity beats the theme rules regardless of stylesheet order (child.css loads before the theme/base sheets). */
.cd-search .sf-field-search h4 { display: none; }
@media screen and (max-width: 1024px) {
  html body .cd-search-trigger.search-is-visible { right: 0; }
  /* --CC-- 2026-10-15 (owner follow-up): on phones the 44px trigger sits 15px above the centre of the 100px gold bar
     (trigger box top 61 vs bar 48..148 on iPhone 12 Pro); the trigger is position:relative so nudge it down only while
     the popup is open — the magnifier keeps its place when closed. */
  html body .cd-search-trigger.search-is-visible { top: 15px; }
}

/* --CC-- 2026-10-15 category sidebars on phones (owner bug report): the lab-technician / dental-designer category pages
   (sidebar-5) show a collapsed CATEGORIES accordion on phones and the plain menu list on desktop. The accordion is a Custom
   HTML widget per language (custom_html-12 GR, custom_html-14 EN added 2026-10-15); the plain list must be hidden on phones.
   The GR pages did that with per-page WPBakery CSS (#nav_menu-19), the EN pages had neither the widget nor the CSS. Both
   lists are hidden here centrally, same breakpoint as the theme's own #nav_menu-15/16 rules in base.css. */
@media (max-width: 767px) {
  #nav_menu-19, #nav_menu-21 { display: none; }
}