/*
 * Ariol Auto — site chrome: header bar, footer, cookie notice. Every value is a token from
 * ariol-design-system.css (loaded first); nothing here has its own colour, font or radius.
 *
 * Layout, logo, buttons, icons, colours of the widgets themselves are Elementor settings of the
 * header/footer templates (build_site_header.py, build_site_footer.py). This file only covers what
 * those widgets cannot express: one shared look for the menu and the Polylang language switcher
 * (the menu itself: ariol-header-v2.css), the sticky bar, and the plugin-rendered cookie notice.
 *
 * Elements are addressed by the classes set in Elementor → Advanced → CSS Classes:
 *   .ariol-header (bar container), .ariol-header__logo, .ariol-footer (footer container), .ariol-footer__logo,
 *   .ariol-footer__copyright (the cookie script appends "Cookie settings" there).
 * The theme's location wrappers (#ariol-site-header / #ariol-site-footer, ARIOL_SITE_HEADER_V2 / _FOOTER_V2 in
 * functions.php) scope the rules, so they outrank the per-widget CSS Elementor generates without !important.
 */

/* ---------- Header: sticky bar ---------- */

#ariol-site-header { position: sticky; top: 0; z-index: 1000; overflow-x: clip; } /* nothing in the bar may widen the page (a wider page shifts sticky elements on phones) */
body.admin-bar #ariol-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
html { scroll-padding-top: 96px; }

/* Home: the bar is transparent over the hero and turns into the internal-page bar once the page
 * scrolls, or while it is hovered / focused / has a dropdown open. */
#ariol-site-header .ariol-header {
  transition: background-color var(--aa-duration) var(--aa-ease), border-color var(--aa-duration) var(--aa-ease);
}
#ariol-site-header:is(.is-scrolled, :focus-within) .ariol-header {
  background-color: var(--aa-dark);
  border-bottom-color: var(--aa-line-dark);
}
/* Scrolled: the bar turns dark at once, otherwise fast scrolling shows the page through it for the fade; it still fades back over the hero. */
#ariol-site-header.is-scrolled .ariol-header { transition: none; }
/* Hover only on pointer devices: touch browsers keep :hover after a tap. */
@media (hover: hover) {
  #ariol-site-header:hover .ariol-header {
    background-color: var(--aa-dark);
    border-bottom-color: var(--aa-line-dark);
  }
}

/* ---------- Header: top-level items (menu links and the language toggle — one style) ---------- */

#ariol-site-header .cpel-switcher__toggle > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 11px var(--aa-menu-pad-x);
  color: var(--aa-white);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: var(--aa-menu-font);
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--aa-duration) ease;
}
#ariol-site-header .cpel-switcher__toggle > a .cpel-switcher__code {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
/* Hover/open, and the current page — not in-page anchors (#services on the home page). */
#ariol-site-header .cpel-switcher__toggle--on > a {
  color: var(--aa-accent);
}

/* One dropdown chevron; it turns while its panel is open. */
#ariol-site-header .cpel-switcher__toggle > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--aa-duration) var(--aa-ease);
}
#ariol-site-header .cpel-switcher__toggle--on > a::after {
  transform: translateY(3px) rotate(225deg);
}

/* ---------- Header: language dropdown panel (same look as the Services sub-menu in ariol-header-v2.css) ---------- */

#ariol-site-header .cpel-switcher__list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: max-content;
  min-width: 72px;
  max-width: 340px;
  margin: var(--aa-panel-offset) 0 0;
  /* Item text sits exactly under the trigger's label. */
  margin-left: calc(var(--aa-menu-pad-x) - var(--aa-panel-pad) - var(--aa-panel-item-pad-x));
  left: 0;
  right: auto;
  padding: var(--aa-panel-pad);
  background: var(--aa-dark);
  border: 0;
  border-radius: var(--aa-radius-menu);
  box-shadow: var(--aa-shadow-menu);
  text-align: left;
  line-height: normal;
  transition: opacity var(--aa-duration) var(--aa-ease), visibility var(--aa-duration);
}
/* Invisible bridge over the gap, so moving the pointer from the item to its panel keeps it open. */
#ariol-site-header .cpel-switcher__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--aa-panel-offset);
}
/* Dropdown items — one style, one hover. */
#ariol-site-header .cpel-switcher__list > li > a {
  display: block;
  margin: 0;
  padding: 11px var(--aa-panel-item-pad-x);
  color: var(--aa-white);
  background: transparent;
  border-radius: var(--aa-radius-control);
  font: var(--aa-menu-item-font);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--aa-duration) ease, color var(--aa-duration) ease;
}
/* The label inside the item: a plain block. */
#ariol-site-header .cpel-switcher__list > li > a .cpel-switcher__code {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
@media (hover: hover) {
  #ariol-site-header .cpel-switcher__list > li > a:hover {
    background: var(--aa-hover-dark);
    color: var(--aa-accent);
  }
}

/* Language switcher plumbing (Polylang widget): panel position and the open/closed state, as for the
 * sub-menu; opening uses the same hover-with-delay (ariol-site.js). */
#ariol-site-header .cpel-switcher__nav { position: relative; }
#ariol-site-header .cpel-switcher__toggle { padding: 0; }
#ariol-site-header .cpel-switcher__toggle::after { pointer-events: none; }
#ariol-site-header .cpel-switcher__icon { display: none; }
#ariol-site-header .cpel-switcher__list {
  position: absolute;
  z-index: 1020;
  top: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
}
#ariol-site-header .cpel-switcher__list > li { margin: 0; padding: 0; background: transparent; }
#ariol-site-header .cpel-switcher__toggle--on + .cpel-switcher__list { opacity: 1; visibility: visible; }
/* Opening: visible at once (fades in), so the keyboard can focus the first item immediately;
 * closing keeps the fade-out delay from the panel rule above. */
#ariol-site-header .cpel-switcher__toggle--on + .cpel-switcher__list {
  transition: opacity var(--aa-duration) var(--aa-ease), visibility 0s;
}

/* ---------- Header: focus and motion ---------- */

#ariol-site-header :is(a, [role="button"]):focus-visible { outline: var(--aa-focus-ring); outline-offset: var(--aa-focus-offset); }
/* Elementor animates "all"; only colours may animate, the focus ring appears at once. */
#ariol-site-header :is(.elementor-button, .elementor-icon, .ariol-header__logo a) { transition-property: background-color, color, border-color; }
/* Elementor's Icon wrapper is a line box (adds descender space); flex centres the icon. */
#ariol-site-header .elementor-icon-wrapper { display: flex; }
/* Tablet/mobile: the logo is as tall as the 44 px buttons (195 px wide, Elementor setting; the file has no transparent margins). On very narrow
   phones (< 375 px) the logo gives way and scales down; the menu, phone and language buttons keep 44 px. */
@media (max-width: 1024px) {
  #ariol-site-header .ariol-header :is(.ariol-nav-open, .elementor-widget-icon, .elementor-widget-polylang-language-switcher) { flex-shrink: 0; }
  #ariol-site-header .ariol-header__logo { min-width: 0; flex-shrink: 1; }
  #ariol-site-header .ariol-header__logo img { max-width: 100%; height: auto; }
}

/* ---------- Footer ---------- */
/* Layout, colours and type are Elementor settings of the footer templates; here only the
 * developer credit, the moved "Cookie settings" link and focus. */

#ariol-site-footer { background: var(--aa-dark); }
/* Logo: no line-box gap under the image; the focus ring hugs it. */
#ariol-site-footer .ariol-footer__logo a { display: block; width: fit-content; }
#ariol-site-footer .ariol-footer__logo img { display: block; }
#ariol-site-footer a:focus-visible { outline: var(--aa-focus-ring); outline-offset: var(--aa-focus-offset); }
/* Elementor animates "all" on links; only colours may animate, the focus ring appears at once (as in the header). */
#ariol-site-footer a { transition-property: color, background-color, border-color; }
/* Car brands and minibus models: dense inline lists (rows 24 px apart, no gap), so the footer's 3 px
 * ring would cover the neighbouring rows and is clipped by the widget's overflow:hidden. Here each link
 * gets 4 px side padding taken from the item spacing (Elementor: 22 px = 11 + 11 → 7 + 4 | 4 + 7), so
 * the text stays where it was, and a 2 px ring drawn inside the link box — clear of the letters and
 * of the next row; the edge links' ring sits in the 15 px page gutter. */
#ariol-site-footer .ariol-footer__vehicle-links > .elementor-widget-container { overflow: visible; }
#ariol-site-footer .ariol-footer__vehicle-links .elementor-icon-list-item { margin-inline: 7px; }
#ariol-site-footer .ariol-footer__vehicle-links a { padding-inline: 4px; border-radius: var(--aa-radius-control); }
#ariol-site-footer .ariol-footer__vehicle-links a:focus-visible { outline: 2px solid var(--aa-accent-hover); outline-offset: -2px; }
/* Column headings that link to a hub page: a 24 px target (WCAG 2.5.8) without changing the line. */
#ariol-site-footer .elementor-heading-title a { display: inline-block; margin-block: -4px; padding-block: 4px; }
/* Top columns grid: on phones about and contacts span the row; under 360 px one column, so the
 * navigation labels are not squeezed into 130 px. */
@media (max-width: 767px) {
  #ariol-site-footer .ariol-footer__wide { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  #ariol-site-footer .ariol-footer__cols { --e-con-grid-template-columns: minmax(0, 1fr); }
}

#ariol-site-footer .ariol-credit { color: var(--aa-text-on-dark); font: var(--aa-small-font); letter-spacing: .02em; }
#ariol-site-footer .ariol-credit__link {
  display: inline-block;
  margin-left: 3px;
  padding: 4px 0;
  color: var(--aa-white);
  font: 700 13px/16px var(--aa-font-heading);
  letter-spacing: -.02em;
  text-decoration: none;
  vertical-align: baseline;
  transition: color var(--aa-duration) ease;
}
#ariol-site-footer .ariol-credit__link span { color: #9b8aff; } /* the developer's own mark colour */
#ariol-site-footer .ariol-credit__link em { margin-left: 1px; color: var(--aa-text-on-dark); font-size: 12px; font-style: normal; letter-spacing: .01em; }

/* Service links of the bottom line, one style: the privacy policy and "Cookie settings" (the plugin's
 * floating button, moved here by ariol-site.js; the plugin hides it with an inline display:none,
 * hence the one !important). */
#ariol-site-footer .ariol-footer__copyright :is(.ariol-footer__service, .lwpcngShowAgain) {
  display: inline-flex !important;
  position: static;
  align-items: center;
  width: auto;
  min-height: 24px;
  margin: 0 0 0 9px;
  padding: 0;
  background: transparent;
  color: var(--aa-text-on-dark);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: var(--aa-small-font);
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  transition: color var(--aa-duration);
}
#ariol-site-footer .ariol-footer__copyright :is(.ariol-footer__service, .lwpcngShowAgain)::before { content: "·"; margin-right: 9px; color: var(--aa-text-on-dark); }
/* Phones: three short centred lines, clear of the fixed reCAPTCHA badge. */
@media (max-width: 767px) {
  #ariol-site-footer .ariol-footer__copyright :is(.ariol-footer__service, .lwpcngShowAgain) { display: flex !important; justify-content: center; margin: 2px 0 0; }
  #ariol-site-footer .ariol-footer__copyright :is(.ariol-footer__service, .lwpcngShowAgain)::before { content: none; }
}
@media (hover: hover) {
  #ariol-site-footer :is(.ariol-credit__link, .ariol-footer__service, .ariol-footer__copyright .lwpcngShowAgain):hover { color: var(--aa-accent); }
}

/* ---------- Cookie notice (LuckyWP Cookie Notice: plugin markup, copy set by ariol-site.js) ----------
 * The same dialog look as the booking popup, and the site's two buttons: primary "Allow all",
 * outline "Reject". `:root` lifts the rules over the plugin's own ones. !important only where the
 * plugin writes inline styles (left/right/bottom) or uses !important itself (<= 600 px). */

:root .lwpcngNotice {
  position: fixed;
  z-index: 2147483000;
  top: auto;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  box-sizing: border-box;
  width: min(580px, calc(100vw - 32px));
  max-width: none;
  margin: 0;
  padding: 26px;
  transform: translateX(-50%);
  background: var(--aa-dark);
  color: var(--aa-white);
  border: 1px solid var(--aa-line-dark);
  border-radius: var(--aa-radius-lg) !important;
  box-shadow: var(--aa-shadow-dialog);
  font: 400 14px/1.6 var(--aa-font-body);
  text-align: left;
}
:root .lwpcngNotice .lwpcngNotice_message { display: block; margin: 0; padding: 0; color: var(--aa-copy-on-dark); font: inherit; }
:root .lwpcngNotice .ariol-cookie-title { display: block; margin: 0 0 8px; color: var(--aa-white); font: 700 20px/26px var(--aa-font-heading); }
:root .lwpcngNotice .ariol-cookie-policy { color: var(--aa-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:root .lwpcngNotice .lwpcngNotice_buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 0; }
/* The site button (.aa-button): one type, primary + outline-on-dark. */
:root .lwpcngNotice :is(.lwpcngNotice_accept, .lwpcngNotice_reject) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 58px;
  margin: 0;
  padding: 20px;
  background: var(--aa-accent);
  color: var(--aa-dark);
  border: 0;
  border-radius: var(--aa-radius-control);
  box-shadow: none;
  font: var(--aa-button-font);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--aa-duration), color var(--aa-duration), box-shadow var(--aa-duration);
}
:root .lwpcngNotice .lwpcngNotice_reject { background: transparent; color: var(--aa-white); box-shadow: inset 0 0 0 1px var(--aa-outline-dark); }
@media (hover: hover) {
  :root .lwpcngNotice .lwpcngNotice_accept:hover { background: var(--aa-accent-hover); color: var(--aa-dark); }
  :root .lwpcngNotice .lwpcngNotice_reject:hover { background: transparent; color: var(--aa-accent); box-shadow: inset 0 0 0 1px var(--aa-accent); }
  :root .lwpcngNotice .ariol-cookie-policy:hover { color: var(--aa-accent-hover); }
}
:root :is(.lwpcngNotice_accept, .lwpcngNotice_reject, .lwpcngShowAgain, .ariol-cookie-policy):focus-visible {
  outline: var(--aa-focus-ring);
  outline-offset: var(--aa-focus-offset);
}
:root .lwpcngNotice .lwpcngNotice_more { display: none; }

/* The plugin's floating "Cookie settings" button, where a page has no footer to move it into. */
:root .lwpcngShowAgain {
  z-index: 2147482999;
  padding: 10px 13px;
  background: var(--aa-dark);
  color: var(--aa-white);
  border: 1px solid var(--aa-line-dark);
  border-radius: var(--aa-radius-control);
  box-shadow: var(--aa-shadow-menu);
  font: 600 12px/16px var(--aa-font-body);
}
@media (hover: hover) {
  :root .lwpcngShowAgain:hover { background: var(--aa-dark-raised); color: var(--aa-white); }
}

@media (max-width: 600px) {
  :root .lwpcngNotice { bottom: 10px !important; width: calc(100vw - 20px); padding: 22px 18px 18px; }
  :root .lwpcngNotice .ariol-cookie-title { font-size: 18px; line-height: 24px; }
  :root .lwpcngNotice .lwpcngNotice_buttons { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; } /* full labels, no wrapping */
}
@media (prefers-reduced-motion: reduce) {
  :root .lwpcngNotice :is(.lwpcngNotice_accept, .lwpcngNotice_reject) { transition: none; }
}

/* ---------- reCAPTCHA ----------
 * Google's floating badge covered page content; every Contact Form 7 form shows the required
 * attribution instead (functions.php, ARIOL_RECAPTCHA_NOTE), as Google allows. */
.grecaptcha-badge { visibility: hidden; }

/* The attribution on forms outside the design system (design-system forms style it as .aa-form__privacy). */
.ariol-recaptcha-note { margin: 10px 0 0; color: var(--aa-text); font: 400 12px/1.5 var(--aa-font-body); }
.ariol-recaptcha-note a { color: inherit; text-decoration: underline; }

/* ---------- Trustindex reviews (home) ----------
 * The slider row has -8 px side margins, so the page was 8 px wider than the phone screen: mobile
 * browsers then widen the layout viewport and the sticky header slides up under the screen edge.
 * Clip the row to the widget (clip, not hidden: no extra scroll container). */
.ti-widget .ti-reviews-container { overflow-x: hidden; overflow-x: clip; }