/* Hand-written rules only. Everything else must come from the mirrored theme CSS.
   Sections: [preloader] [lang-switcher] [chrome] [cta-hover] [map] [form] [slider] [reveal]
             [consent] [headings] [a11y] */

/* [lang-switcher] — sits in #tools where the search/side-panel icons used to be */
#tools ul.lang-switcher { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0 0 0 20px; list-style: none; }
#tools ul.lang-switcher li { display: inline-block; }
#tools ul.lang-switcher a { display: inline-block; padding: 4px 6px; font-family: 'Fira Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; color: #fff; opacity: .65; text-decoration: none; }
#tools ul.lang-switcher li.active a, #tools ul.lang-switcher a:hover { opacity: 1; }
#tools ul.lang-switcher li + li:before { content: "|"; color: #fff; opacity: .4; margin-right: 4px; }
.mobile-nav ul.lang-switcher { display: flex; justify-content: center; gap: 16px; padding: 14px 0; margin: 0; list-style: none; }
.mobile-nav ul.lang-switcher a { font-size: 14px; letter-spacing: 1px; color: inherit; opacity: .6; }
.mobile-nav ul.lang-switcher li.active a { opacity: 1; }

/* [preloader] fade the wrapper like the theme's jQuery .css({opacity:0}) */
#loader-wrapper { transition: opacity .4s ease; }
/* [chrome] buttons that replaced anchors/divs must not pick up UA button styling.
   Zero-specificity (:where) so the theme's own .go-to-top / .mobile-menu-button rules still win. */
button:where(.go-to-top, .mobile-menu-button) { border: 0; font: inherit; -webkit-appearance: none; appearance: none; background: none; }
/* the theme hides .go-to-top with opacity/z-index only — keep it out of the tab order while invisible */
button.go-to-top:not(.visible) { visibility: hidden; pointer-events: none; }
html { scroll-behavior: smooth; }

/* [cta-hover] */
.button_.cta-contact:hover { color: #ffffff !important; background-color: #9ed5f4 !important; border-color: #9ed5f4 !important; }

/* [reveal] theme's fadeInDown (animate.css) for [data-rt-animate] items */
.js [data-rt-animate="animate"] { opacity: 0; }
.js [data-rt-animate="animate"].rt-revealed { animation: rtFadeInDown .8s ease both; }
@keyframes rtFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-rt-animate="animate"] { opacity: 1; animation: none; }
  html { scroll-behavior: auto; }
}

/* [slider] geometry that rs6.min.js used to compute at runtime */
#rev_slider_1_1_wrapper { position: relative; width: 100%; overflow: hidden; }
#rev_slider_1_1 { position: relative; width: 100%; overflow: hidden; }
#rev_slider_1_1 rs-slides, #rev_slider_1_1 rs-slide { position: absolute; inset: 0; display: block; }
/* rs6.css ships rs-slide{visibility:hidden} and rs-module .rs-layer{opacity:0;visibility:hidden}
   because rs6.min.js used to reveal them; undo that here. `transition: visibility` keeps the
   outgoing slide painted for the whole 1s crossfade and flips it hidden only at the end. */
#rev_slider_1_1 rs-slide { visibility: hidden; transition: opacity 1s ease, visibility 1s ease; pointer-events: none; }
#rev_slider_1_1 rs-slide[data-state="active"] { visibility: visible; pointer-events: auto; z-index: 2; }
#rev_slider_1_1 .rev-slidebg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#rev_slider_1_1 .rs-grid { position: absolute; left: 50%; top: 50%; transform-origin: center center; }
#rev_slider_1_1 .rs-grid > .rs-layer, #rev_slider_1_1 .rs-grid > rs-layer { position: absolute; left: 50%; top: 50%; margin: 0; color: #fff; display: block; visibility: visible; opacity: 1;
  transform: translate(calc(-50% + var(--xo)), calc(-50% + var(--yo))); transition: none; }
#rev_slider_1_1 .rs-title { text-align: center; }
#rev_slider_1_1 .rev-btn { top: 50%; padding: 12px 65px; border: 2px solid #9ed5f4; border-radius: 50px; background: transparent; color: #fff; cursor: pointer; outline: none; box-shadow: none; box-sizing: border-box; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-in, border-color .15s ease-in; }
#rev_slider_1_1 .rev-btn[data-yfrom="t"] { top: 0; transform: translate(calc(-50% + var(--xo)), var(--yo)); }
#rev_slider_1_1 .rev-btn:hover { background-color: #9ed5f4; border-color: #9ed5f4; }
#rev_slider_1_1 .rev-scroll-btn { position: absolute; left: 50%; bottom: 10px; width: 25px; height: 40px; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.4); border-radius: 17px; background: transparent; padding: 0; cursor: pointer; z-index: 10; visibility: visible; opacity: 1; }
/* arrows: revapi1 nav config is h_offset:30, hide_onleave:true, hide_under:600 */
#rev_slider_1_1 .rs-prev, #rev_slider_1_1 .rs-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: 0; padding: 0;
  opacity: 0; transition: opacity .3s; }
#rev_slider_1_1 .rs-prev { left: 30px; } #rev_slider_1_1 .rs-next { right: 30px; }
#rev_slider_1_1_wrapper:hover .rs-prev, #rev_slider_1_1_wrapper:hover .rs-next,
#rev_slider_1_1 .rs-prev:focus-visible, #rev_slider_1_1 .rs-next:focus-visible { opacity: 1; }
@media (max-width: 599px) { #rev_slider_1_1 .rs-prev, #rev_slider_1_1 .rs-next { display: none; } }
/* layer entrance: frame_0 y:100% -> frame_1 power4.inOut 710ms, delayed by --st */
@keyframes rsLayerIn { from { opacity: 0; transform: translate(calc(-50% + var(--xo)), calc(-50% + var(--yo) + 100%)); } to { opacity: 1; } }
@keyframes rsLayerInTop { from { opacity: 0; transform: translate(calc(-50% + var(--xo)), calc(var(--yo) + 100%)); } to { opacity: 1; } }
@keyframes rsScrollIn { from { opacity: 0; transform: translate(-50%, 50px); } to { opacity: 1; transform: translateX(-50%); } }
#rev_slider_1_1 rs-slide[data-state="active"] .rs-grid > * { animation: rsLayerIn .71s cubic-bezier(.77,0,.175,1) both; animation-delay: var(--st); }
#rev_slider_1_1 rs-slide[data-state="active"] .rev-btn[data-yfrom="t"] { animation-name: rsLayerInTop; }
#rev_slider_1_1 rs-slide[data-state="active"] .rev-scroll-btn { animation: rsScrollIn .77s ease-in-out both; animation-delay: var(--st); }
/* Inactive slides must be `visibility: hidden` too, not just opacity 0: the rules above
   re-show every layer unconditionally (rs6.css hides them), and a descendant `visibility: visible`
   wins over the hidden ancestor, so opacity-0 layers would stay in the tab order inside an
   aria-hidden slide. The 1s crossfade lives on rs-slide/.rev-slidebg, which is untouched here. */
#rev_slider_1_1 rs-slide[data-state="inactive"] .rs-grid > *, #rev_slider_1_1 rs-slide[data-state="inactive"] .rev-scroll-btn { opacity: 0; visibility: hidden; animation: none; transition: opacity 1s ease, visibility 0s linear 1s; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #rev_slider_1_1 * { animation: none !important; transition: none !important; opacity: 1; } #rev_slider_1_1 rs-slide[data-state="inactive"] { opacity: 0; } }

/* [map] click-to-load placeholder, same box as the 600x450 iframe */
.wpb_map_wraper .map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; background: #f2f2f2 url(/wp-content/themes/urban/images/skin12/sub-header-background.jpg) center/cover; color: #222; text-align: center; padding: 20px; box-sizing: border-box; }
.wpb_map_wraper .map-placeholder p { margin: 0; font-weight: 700; }
.wpb_map_wraper .map-placeholder small { max-width: 320px; opacity: .8; }
.wpb_map_wraper iframe { width: 100%; }

/* [form] honeypot + CF7 state colours that cf7/styles.css leaves to the theme */
.wpcf7 .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-form.sent .wpcf7-response-output { border-color: #46b450; }
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.rate_limited .wpcf7-response-output { border-color: #dc3232; }
.wpcf7-form.init .wpcf7-response-output, .wpcf7-form.submitting .wpcf7-response-output { display: none; }

/* [consent] the plugin JS added these when opening; keep gdpr-main.css visuals.
   gdpr-main.css parks the modal with `content-visibility: hidden` and only reveals it via the
   plugin's `.gdpr_lightbox.moove_gdpr_cookie_modal_open` wrapper, which we do not render — a
   native <dialog> replaces the lightbox — so the open dialog reproduces what
   `.gdpr_lightbox dialog#moove_gdpr_cookie_modal` used to supply. */
dialog#moove_gdpr_cookie_modal[open] { display: flex; align-items: center; justify-content: center;
  content-visibility: visible; position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%;
  height: 100%; max-height: 100%; padding: 0; border: none; background: transparent; overflow: auto; }
dialog#moove_gdpr_cookie_modal[open] * { box-sizing: border-box; }
dialog#moove_gdpr_cookie_modal::backdrop { background: rgba(0,0,0,.6); }
#moove_gdpr_cookie_info_bar:not(.moove-gdpr-info-bar-hidden) { display: block; }
/* gdpr-main.css sets `display: none` on the real switch checkbox (the plugin drove it from JS),
   which drops the third-party consent control out of the tab order and the a11y tree. Keep it
   invisible but focusable and hit-testable; the slider still paints over it, so nothing moves. */
#moove_gdpr_cookie_modal .cookie-switch input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; }
#moove_gdpr_cookie_modal .cookie-switch input:disabled { cursor: default; }
#moove_gdpr_cookie_modal .cookie-switch input:focus-visible + .cookie-slider { box-shadow: 0 0 0 3px #0c4da2; }
/* gdpr-main.css hides the save button from >=768px; the plugin's JS revealed it inline when the
   modal opened. `.button-visible` (already on the markup) carries that reveal in CSS instead. */
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-modal-save-settings.button-visible { display: inline-block; }

/* [headings] port of the theme's `rt_font_resize` (themes/urban/js/layout3/scripts.js).
   Live, jQuery reads `data-maxfont-size` / `data-minfont-size` off every `.rt_heading`
   and writes an inline font-size of `max(min, compress * max)` on load and on resize,
   where compress steps 1 → .9 (<1290) → .8 (<1100) → .7 (<980) → .6 (<768) → .5 (<560)
   → .4 (<480) → .35 (<300) against `$(window).width()` (= documentElement.clientWidth,
   which is what a CSS media query measures too). Doing it in CSS instead of on load
   keeps the sizes right at first paint — no font-size jump, no layout shift.
   `!important` is needed because the markup carries the unscaled size inline, exactly
   as the WordPress template emitted it. The content uses two size pairs, so the clamp
   collapses to these four steps (47/30: 42.3, 37.6, 32.9, 30 — 40/30: 36, 32, 30, 30). */
@media (max-width: 1289.98px) {
  .rt_heading[data-maxfont-size="47"][data-minfont-size="30"] { font-size: 42.3px !important; }
  .rt_heading[data-maxfont-size="40"][data-minfont-size="30"] { font-size: 36px !important; }
}
@media (max-width: 1099.98px) {
  .rt_heading[data-maxfont-size="47"][data-minfont-size="30"] { font-size: 37.6px !important; }
  .rt_heading[data-maxfont-size="40"][data-minfont-size="30"] { font-size: 32px !important; }
}
@media (max-width: 979.98px) {
  .rt_heading[data-maxfont-size="47"][data-minfont-size="30"] { font-size: 32.9px !important; }
  .rt_heading[data-maxfont-size="40"][data-minfont-size="30"] { font-size: 30px !important; }
}
@media (max-width: 767.98px) {
  .rt_heading[data-maxfont-size="47"][data-minfont-size="30"] { font-size: 30px !important; }
}

/* [a11y] the theme relies on the UA focus ring and then removes outlines in places; give every
   interactive element a visible, brand-coloured focus indicator for keyboard users. */
a:focus-visible, button:focus-visible { outline: 2px solid #9ed5f4; outline-offset: 2px; }