/*
 * The styling half of the effects that assets/js/app.js used to drive through
 * jQuery. It is linked after app.css so these rules land exactly where jQuery's
 * inline styles used to land in the cascade — and no further: anything app.css
 * marks !important still wins here, just as it won over .css().
 *
 * jQuery's default "swing" easing is sinusoidal in-out, which is what
 * cubic-bezier(0.45, 0, 0.55, 1) reproduces.
 */

/* --- Preloader ----------------------------------------------------------- */
/* footer.php's $('#preloaderimg').fadeOut(): 400ms to transparent, then gone. */

#preloaderimg.is-fading-out {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.45, 0, 0.55, 1);
}

#preloaderimg.is-hidden {
  display: none;
}

/* --- Header palette per fullPage section --------------------------------- */
/*
 * app.js recoloured .main-menu out of a table keyed by the active section's
 * target-data attribute. Those twelve keys collapse to four distinct palettes;
 * the section -> palette mapping stays in useMenuColors.js and arrives here as
 * data-menu-theme on <header>. Each block sets exactly the properties the
 * matching .css() calls set, so the solid themes deliberately leave
 * .main-menu-btn's colour alone.
 */

.main-menu[data-menu-theme='light'] .main-menu-name {
  background: white;
  color: #1f3d90;
}
.main-menu[data-menu-theme='light'] .main-menu-btn {
  background: white;
  color: #1f3d90;
}
.main-menu[data-menu-theme='light'] .main-menu-btn-default {
  filter: invert(80%) sepia(90%) saturate(1595%) hue-rotate(193deg) brightness(103%) contrast(102%);
}
.main-menu[data-menu-theme='light'] .custom-logo {
  filter: brightness(0) invert(1);
}

.main-menu[data-menu-theme='blue'] .main-menu-name {
  background: #1f3d90;
  color: white;
}
.main-menu[data-menu-theme='blue'] .main-menu-btn {
  background: #1f3d90;
}
.main-menu[data-menu-theme='blue'] .main-menu-btn-default {
  filter: unset;
}
.main-menu[data-menu-theme='blue'] .custom-logo {
  filter: unset;
}

.main-menu[data-menu-theme='green'] .main-menu-name {
  background: #8db42b;
  color: white;
}
.main-menu[data-menu-theme='green'] .main-menu-btn {
  background: #8db42b;
}
.main-menu[data-menu-theme='green'] .main-menu-btn-default {
  filter: unset;
}
.main-menu[data-menu-theme='green'] .custom-logo {
  filter: unset;
}

.main-menu[data-menu-theme='red'] .main-menu-name {
  background: #cd272d;
  color: white;
}
.main-menu[data-menu-theme='red'] .main-menu-btn {
  background: #cd272d;
}
.main-menu[data-menu-theme='red'] .main-menu-btn-default {
  filter: unset;
}
.main-menu[data-menu-theme='red'] .custom-logo {
  filter: unset;
}

/* --- Homepage slider section colours ------------------------------------- */
/*
 * app.js recoloured every .homepage-sec-two-a — not just the one on screen — as
 * each slider section loaded, so the attribute is set on all of them at once.
 * app.css already transitions both properties; these rules only supply the end
 * value, exactly as .css() did. The mobile .slider-title rules in app.css are
 * !important and still win, which is what happened before too.
 */

.homepage-sec-two-a[data-slider-theme='slide-1'] {
  background-color: #dce9ff;
}
.homepage-sec-two-a[data-slider-theme='slide-2'] {
  background-color: #f3f9e4;
}
.homepage-sec-two-a[data-slider-theme='slide-3'] {
  background-color: #ffe1e2;
}

/*
 * The full ancestor chain is here to outrank
 * `.homepage-sec-two-a .container .row .content-section h5`, which is the rule
 * the inline style from .css() used to beat.
 */
.homepage-sec-two-a[data-slider-theme='slide-1'] .container .row .content-section .slider-title {
  color: #5e7aa8;
}
.homepage-sec-two-a[data-slider-theme='slide-2'] .container .row .content-section .slider-title {
  color: #819255;
}
.homepage-sec-two-a[data-slider-theme='slide-3'] .container .row .content-section .slider-title {
  color: #965355;
}

/* --- Contact form dropdowns ---------------------------------------------- */
/*
 * select2 appended its dropdown to <body> and positioned it with an inline
 * `top`. src/components/Select.jsx renders it inside `.select2-container`
 * instead, so it needs the one coordinate that inline style used to supply;
 * select2's own CSS already handles `left` and `width` once the container is
 * open. The measured dropdown sat exactly on the container's bottom edge.
 */

.select2-container .select2-dropdown {
  top: 100%;
}

/*
 * select2 never styled the option text, so it inherited from <body> — #212529,
 * from bootstrap. Rendered inside the form it would instead inherit the #3f5270
 * that app.css puts on `p`, so the colour is restored explicitly here. The
 * highlighted option keeps the white that select2's own CSS gives it.
 */
.select2-container .select2-dropdown {
  color: #212529;
}

/* --- Sidenav tab panels -------------------------------------------------- */
/*
 * app.js hid every panel and then faded the selected one back in over 1s. The
 * two identical animations alternate so that re-selecting the panel that is
 * already open replays the fade, which is what calling fadeIn() again did.
 *
 * app.css hides every panel but the first with
 * `.tab-content:not(:first-of-type)` / `.service-tab:not(:first-of-type)`, and
 * fadeIn() used to outrank that with an inline display:block. The selectors
 * below match that specificity and win by coming later in the cascade, which is
 * the same position the inline style held.
 */

.is-tab-hidden {
  display: none;
}

.is-tab-fade-a {
  animation: ppTabFadeA 1s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.is-tab-fade-b {
  animation: ppTabFadeB 1s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.main-container .tab-content.is-tab-fade-a,
.main-container .tab-content.is-tab-fade-b,
.main-container .service-tab.is-tab-fade-a,
.main-container .service-tab.is-tab-fade-b {
  display: block;
}

@keyframes ppTabFadeA {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ppTabFadeB {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Swiper navigation arrows ------------------------------------------- */
/*
 * Swiper 14 dropped the swiper-icons font and the ::after pseudo-elements
 * that drew the < > glyphs, so the buttons app.css styles would render empty.
 * These four rules are lifted verbatim from the Swiper 7 bundle the theme
 * shipped, so the arrows draw exactly as they did before the upgrade.
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}