/* ==================================================================
   Vibo Investment — app layer
   ------------------------------------------------------------------
   Loads after the vendor stylesheets and before the section files:

     1. content normalisation inside <main>
     2. the scroll-reveal system
     3. small base rules

   Visual/typography rules live in custom.css,
   per-section rules live in assets/css/sections/*.css.
   ================================================================== */

/* ---- 1. content normalisation -----------------------------------
   Scoped to the page content: the header, the footer and the modals
   keep the browser defaults.
   ----------------------------------------------------------------- */

/* WordPress prints width/height on every image (good for layout stability);
   without this the attributes would win over the CSS box and squash the logo. */
img {
  max-width: 100%;
  height: auto;
}

:is(.vibo-main, .acf-block-preview) img {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
}

:is(.vibo-main, .acf-block-preview) hr {
  background-color: transparent;
  margin: 0;
  /* the section dividers are drawn as solid rules, not Bootstrap's faded one */
  opacity: 1;
}

/* Wide editor tables (the cookie policy) scroll inside their own box instead
   of pushing the page sideways on a phone. */
:is(.vibo-main, .acf-block-preview) .wp-block-table,
:is(.vibo-main, .acf-block-preview) figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}

/* Long raw URLs in the legal copy wrap instead of running off the screen. */
:is(.vibo-main, .acf-block-preview) a {
  overflow-wrap: break-word;
}

/* Comfortable tap target for links inside running text, without changing the
   line box (vertical padding on an inline box does not affect layout). */
:is(.vibo-main, .acf-block-preview) p a,
:is(.vibo-main, .acf-block-preview) li a,
:is(.vibo-main, .acf-block-preview) td a {
  padding-block: 4px;
}

/* ---- 2. scroll reveal -------------------------------------------
   Elements marked [data-reveal] start slightly offset and transparent
   and settle once they enter the viewport (assets/js/modules/reveal.js).

   Only opacity and transform are animated, so nothing reflows and no
   layout shift is introduced. The whole mechanism is gated behind the
   .js class, which means content is fully visible when JavaScript is
   unavailable, and it is switched off for reduced-motion users.
   ----------------------------------------------------------------- */

:root {
  --reveal-duration: 0.8s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift-y: 24px;
  --reveal-shift-x: 32px;
}

.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0s),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0s);
}

.js [data-reveal=""],
.js [data-reveal="up"] {
  transform: translate3d(0, var(--reveal-shift-y), 0);
}

.js [data-reveal="down"] {
  transform: translate3d(0, calc(var(--reveal-shift-y) * -1), 0);
}

/* "left"/"right" describe where the element comes from */
.js [data-reveal="left"] {
  transform: translate3d(calc(var(--reveal-shift-x) * -1), 0, 0);
}

.js [data-reveal="right"] {
  transform: translate3d(var(--reveal-shift-x), 0, 0);
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* the other motion on the site: the stacked photos that fly in on the
     services page, and the sliding hero counter */
  .offer-section .stacked-image,
  .offer-section .stacked-image.animate {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .vibo-stat .slide-item {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- 3. base ---------------------------------------------------- */

body {
  transition: opacity ease-in 0.2s;
}

body[unresolved] {
  opacity: 0;
  display: block;
  overflow: hidden;
  position: relative;
}

/* Visually hidden, still read by screen readers. */
.screen-reader-text {
  position: absolute;
  top: -10000em;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}