/*
 * 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 JetMenu menu and the Polylang language
 * switcher, 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__copyright (the cookie script appends "Cookie settings" there).
 * The Jet Theme Core location wrappers (#jet-theme-core-header / -footer) scope the rules, so they
 * outrank the per-widget CSS Elementor generates without !important.
 */

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

#jet-theme-core-header { position: sticky; top: 0; z-index: 1000; }
body.admin-bar #jet-theme-core-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. */
#jet-theme-core-header .ariol-header {
  transition: background-color var(--aa-duration) var(--aa-ease), border-color var(--aa-duration) var(--aa-ease);
}
#jet-theme-core-header:is(.is-scrolled, :focus-within) .ariol-header {
  background-color: var(--aa-dark);
  border-bottom-color: var(--aa-line-dark);
}
/* Hover only on pointer devices: touch browsers keep :hover after a tap. */
@media (hover: hover) {
  #jet-theme-core-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) ---------- */

#jet-theme-core-header :is(.jet-menu > li > a.top-level-link, .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;
}
#jet-theme-core-header :is(.jet-menu > li > a.top-level-link, .cpel-switcher__toggle > a) :is(.jet-menu-title, .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). */
#jet-theme-core-header :is(.jet-menu > li:hover > a, .jet-menu > li.jet-menu-hover > a, .jet-menu > li.jet-current-menu-item > a:not([href*="#"]), .cpel-switcher__toggle--on > a) {
  color: var(--aa-accent);
}

/* Home item: JetMenu item icon (fa-home); the label stays for screen readers (visually hidden). */
#jet-theme-core-header .jet-menu .jet-menu-icon { margin: 0; color: inherit; font-size: 16px; line-height: 22px; }
#jet-theme-core-header .jet-menu > li:is(.ariol-menu-home, .jet-ariol-menu-home) .jet-menu-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One dropdown chevron; it turns while its panel is open. */
#jet-theme-core-header :is(.jet-menu > li.jet-menu-item-has-children > a .jet-menu-title, .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);
}
#jet-theme-core-header :is(.jet-menu > li.jet-menu-hover > a .jet-menu-title, .cpel-switcher__toggle--on > a)::after {
  transform: translateY(3px) rotate(225deg);
}

/* ---------- Header: dropdown panels (Services sub-menu and the language list — one style) ---------- */

#jet-theme-core-header :is(.jet-menu > li > .jet-sub-menu, .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. */
#jet-theme-core-header :is(.jet-menu > li > .jet-sub-menu, .cpel-switcher__list)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--aa-panel-offset);
}
/* Dropdown items — one style, one hover. */
#jet-theme-core-header :is(.jet-sub-menu > li > a, .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 two plugins nest the label differently (wrapper div vs span): flatten both to plain blocks. */
#jet-theme-core-header :is(.jet-sub-menu > li > a, .cpel-switcher__list > li > a) :is(.jet-menu-item-wrapper, .jet-menu-title, .cpel-switcher__code) {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
@media (hover: hover) {
  #jet-theme-core-header :is(.jet-sub-menu > li > a, .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 that
 * JetMenu does for the sub-menu; opening uses the same hover-with-delay (ariol-site.js). */
#jet-theme-core-header .cpel-switcher__nav { position: relative; }
#jet-theme-core-header .cpel-switcher__toggle { padding: 0; }
#jet-theme-core-header .cpel-switcher__toggle::after { pointer-events: none; }
#jet-theme-core-header .cpel-switcher__icon { display: none; }
#jet-theme-core-header .cpel-switcher__list {
  position: absolute;
  z-index: 1020;
  top: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
}
#jet-theme-core-header .cpel-switcher__list > li { margin: 0; padding: 0; background: transparent; }
#jet-theme-core-header .cpel-switcher__toggle--on + .cpel-switcher__list { opacity: 1; visibility: visible; }

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

#jet-theme-core-header :is(a, [role="button"]):focus-visible { outline: var(--aa-focus-ring); outline-offset: var(--aa-focus-offset); }
/* Elementor and JetMenu animate "all"; only colours may animate, the focus ring appears at once. */
#jet-theme-core-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. */
#jet-theme-core-header .elementor-icon-wrapper { display: flex; }

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

#jet-theme-core-footer { background: var(--aa-dark); }
#jet-theme-core-footer .jet-logo__img { display: block; width: 154px; height: auto; }
#jet-theme-core-footer a:focus-visible { outline: var(--aa-focus-ring); outline-offset: var(--aa-focus-offset); }
/* Column headings that link to a hub page: a 24 px target (WCAG 2.5.8) without changing the line. */
#jet-theme-core-footer .elementor-heading-title a { display: inline-block; margin-block: -4px; padding-block: 4px; }

#jet-theme-core-footer .ariol-credit { color: var(--aa-text-on-dark); font: var(--aa-small-font); letter-spacing: .02em; }
#jet-theme-core-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;
}
#jet-theme-core-footer .ariol-credit__link span { color: #9b8aff; } /* the developer's own mark colour */
#jet-theme-core-footer .ariol-credit__link em { margin-left: 1px; color: var(--aa-text-on-dark); font-size: 12px; font-style: normal; letter-spacing: .01em; }

/* "Cookie settings": the plugin's floating button, moved by ariol-site.js into the copyright line.
 * It stays visible there: the plugin hides it with an inline display:none, hence the one !important. */
#jet-theme-core-footer .ariol-footer__copyright .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);
}
#jet-theme-core-footer .ariol-footer__copyright .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) {
  #jet-theme-core-footer .ariol-footer__copyright .lwpcngShowAgain { display: flex !important; justify-content: center; margin: 2px 0 0; }
  #jet-theme-core-footer .ariol-footer__copyright .lwpcngShowAgain::before { content: none; }
}
@media (hover: hover) {
  #jet-theme-core-footer :is(.ariol-credit__link, .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; }