/**
 * @file
 * Paragraphs Bundles - base tokens + utility classes.
 *
 * Filename:     paragraphs-bundles-base.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com
 *
 * NOTE on cascade layers: this file - and all PB CSS - is deliberately
 * UN-LAYERED. A distributable module can't know whether the host theme
 * uses @layer, and per CSS Cascade L5 un-layered author CSS beats every
 * layered rule regardless of specificity. Staying un-layered is the only
 * way PB's editor-set values reliably win under any theme (layered or
 * not). PB declares NO `pb.*` layer ladder. The per-paragraph dynamic
 * file (also un-layered) wins via element-id specificity (1,0,0),
 * beating any `:root` declaration (0,0,1) or `.pb-ui-inner .pb-ui-inner`
 * (0,2,0) selector here.
 */

:root {
  --pb-px2560: 160rem;
  --pb-px1920: 120rem;
  --pb-px1600: 100rem;
  --pb-px1440: 90rem;
  --pb-px1400: 87.5rem;
  --pb-px1280: 80rem;
  --pb-px1200: 75rem;
  --pb-px1024: 64rem;
  --pb-px992: 62rem;
  --pb-px800: 50rem;
  --pb-px768: 48rem;
  --pb-px600: 37.5rem;
  --pb-px576: 36rem;
  --pb-px420: 26.25rem;
  --pb-px320: 20rem;
  --pb-px64: 4rem;
  --pb-px48: 3rem;
  --pb-px36: 2.25rem;
  --pb-px32: 2rem;
  --pb-px28: 1.75rem;
  --pb-px24: 1.5rem;
  --pb-px22: 1.375rem;
  --pb-px20: 1.25rem;
  --pb-px18: 1.125rem;
  --pb-px17: 1.063rem;
  --pb-px16: 1rem;
  --pb-px15: 0.938rem;
  --pb-px14: 0.875rem;
  --pb-px13: 0.8125rem;
  --pb-px12: 0.75rem;
  --pb-px11: 0.688rem;
  --pb-px10: 0.625rem;
  --pb-px8: 0.5rem;
  --pb-px6: 0.375rem;
  --pb-px5: 0.313rem;
  --pb-px4: 0.25rem;
  --pb-px3: 0.188rem;
  --pb-px2: 0.125rem;
  --pb-px1: 0.063rem;
  --pb-px0: 0;
  --pb-text-align-start: left;
  --pb-text-align-end: right;
}

:root:dir(rtl) {
  --pb-text-align-start: right;
  --pb-text-align-end: left;
}

/* Scope every foundation rule to this module's own wrapper class. `.paragraph`
   is Drupal core's class, shared with every other Paragraphs-based module, so
   styling through it — `all: unset` on links above all — would strip colour,
   underline and weight from links in paragraphs this module does not own.
   `PbPreprocessHook` puts `paragraphs-bundles` alongside `paragraph` on every
   wrapper it renders, so this is equivalent here and inert elsewhere. */
.paragraphs-bundles * {
  box-sizing: border-box;
}

/* `all: unset` MUST come first. It resets every property to inherit-or-initial,
   so any declaration above it in this same block is wiped -- and `box-sizing`
   does not inherit, so it fell back to its initial value `content-box` on every
   button and link in the module.

   Measured on a test site 2026-09-10, accordion node: with `all` last, ALL 12 PB
   buttons/links on the page computed to content-box, so `width: 100%` became the
   CONTENT width and the 24px inline padding was ADDED on top. The accordion
   button then overhung its `overflow: hidden` parent by exactly 24px and clipped
   the right half of the 24px plus icon -- the icon rendered as the left half of
   a `+`. With `all` first: overhang 24px -> 0px, and the icon sits 12px inside
   the edge. `cursor` and `outline` were being wiped the same way and only looked
   correct because later rules re-declare them. */
.paragraphs-bundles a,
.paragraphs-bundles button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  outline: revert;
}

/* Button */
.paragraphs-bundles .button,
.paragraphs-bundles .pb-ui-btn {
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  color: inherit;
  background-color: inherit;
  line-height: inherit;
  padding-block: var(--pb-px8);
  padding-inline: var(--pb-px16);
  -webkit-touch-callout: none;
}

.paragraphs-bundles a.pb-ui-link {
  z-index: 1;
  display: block;
}

.paragraphs-bundles .pb-ui-row::after,
.paragraphs-bundles .pb-ui-row::before {
  display: table;
  clear: both;
  content: "";
}

.paragraphs-bundles .pb-ui-bar {
  overflow: hidden;
  width: 100%;
}

.paragraphs-bundles .pb-ui-bar .button,
.paragraphs-bundles .pb-ui-bar .pb-ui-btn {
  white-space: normal;
}

.paragraphs-bundles .pb-ui-bar::before,
.paragraphs-bundles .pb-ui-bar::after {
  display: table;
  clear: both;
  content: "";
}

/* Borders */
.pb-u-round--circle {
  border-radius: 50%;
}

.pb-u-round--small {
  border-radius: var(--pb-px2);
}

.pb-u-round--medium {
  border-radius: var(--pb-px4);
}

.pb-u-round--large {
  border-radius: var(--pb-px8);
}

.pb-u-round--xlarge {
  border-radius: var(--pb-px16);
}

.pb-u-round--xxlarge {
  border-radius: var(--pb-px32);
}

.pb-u-border {
  border-width: var(--pb-px1);
  border-style: solid;
}

.pb-u-border--3px {
  border-width: var(--pb-px3);
  border-style: solid;
}

.pb-u-border--6px {
  border-width: var(--pb-px6);
  border-style: solid;
}

.pb-u-border--top {
  border-block-start-width: var(--pb-px1);
  border-block-start-style: solid;
}

.pb-u-border--bottom {
  border-block-end-width: var(--pb-px1);
  border-block-end-style: solid;
}

.pb-u-border--left {
  border-inline-start-width: var(--pb-px1);
  border-inline-start-style: solid;
}

.pb-u-border--right {
  border-inline-end-width: var(--pb-px1);
  border-inline-end-style: solid;
}

.pb-u-border--top-bar {
  border-block-start-width: var(--pb-px6);
  border-block-start-style: solid;
}

.pb-u-border--bottom-bar {
  border-block-end-width: var(--pb-px6);
  border-block-end-style: solid;
}

.pb-u-border--left-bar {
  border-inline-start-width: var(--pb-px6);
  border-inline-start-style: solid;
}

.pb-u-border--right-bar {
  border-inline-end-width: var(--pb-px6);
  border-inline-end-style: solid;
}

/* Shadows - pb__card_2 / pb__card_4 are display tokens (pb_display_shadow), not
   the card bundle L0 class pb-card. */
.pb-u-shadow--2 {
  margin: var(--pb-px10);
  box-shadow:
    0 var(--pb-px2) var(--pb-px5) 0 rgb(0, 0, 0, 0.16),
    0 var(--pb-px2) var(--pb-px10) 0 rgb(0, 0, 0, 0.12);
}

.pb-u-shadow--4 {
  margin: var(--pb-px20);
  box-shadow:
    0 var(--pb-px4) var(--pb-px10) 0 rgb(0, 0, 0, 0.2),
    0 var(--pb-px4) var(--pb-px20) 0 rgb(0, 0, 0, 0.19);
}

/* Margin */
.pb-u-margin:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin: var(--pb-px16);
}

.pb-u-margin--top:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin-block-start: var(--pb-px16);
}

.pb-u-margin--bottom:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin-block-end: var(--pb-px16);
}

.pb-u-margin--left:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin-inline-start: var(--pb-px16);
}

.pb-u-margin--right:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin-inline-end: var(--pb-px16);
}

.pb-u-margin--section:not(.pb-u-shadow--2, .pb-u-shadow--4) {
  margin-block-start: var(--pb-px16);
  margin-block-end: var(--pb-px16);
}

/* Padding */
.pb-u-padding--small {
  padding-block: var(--pb-px4);
  padding-inline: var(--pb-px8);
}

.pb-u-padding {
  padding-block: var(--pb-px8);
  padding-inline: var(--pb-px16);
}

.pb-u-padding--large {
  padding-block: var(--pb-px12);
  padding-inline: var(--pb-px24);
}

.pb-u-padding--16 {
  padding-block-start: var(--pb-px16);
  padding-block-end: var(--pb-px16);
}

.pb-u-padding--24 {
  padding-block-start: var(--pb-px24);
  padding-block-end: var(--pb-px24);
}

.pb-u-padding--32 {
  padding-block-start: var(--pb-px32);
  padding-block-end: var(--pb-px32);
}

.pb-u-padding--48 {
  padding-block-start: var(--pb-px48);
  padding-block-end: var(--pb-px48);
}

.pb-u-padding--64 {
  padding-block-start: var(--pb-px64);
  padding-block-end: var(--pb-px64);
}

/* Display Container */
.pb-u-display-container {
  position: relative;
}

.pb-u-ds--top-left {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}

.pb-u-ds--top-right {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.pb-u-ds--bottom-left {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
}

.pb-u-ds--bottom-right {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
}

.pb-u-ds--middle {
  position: absolute;
  min-width: 70%;
  transform: translate(-50%, -50%);
  inset-block-start: 50%;
  inset-inline-start: 50%;
}

.pb-u-ds--left {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0%;
  transform: translate(0%, -50%);
}

.pb-u-ds--right {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0%;
  transform: translate(0%, -50%);
}

.pb-u-ds--top-middle {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  transform: translate(-50%, 0%);
}

.pb-u-ds--bottom-middle {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  transform: translate(-50%, 0%);
}

/* Border Colors */

.pb-u-animate--opacity {
  animation: opac 0.8s ease-out;
}

@keyframes opac {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pb-u-animate--top {
  position: relative;
  animation: animatetop 0.6s ease-out;
}

@keyframes animatetop {
  from {
    inset-block-start: -100px;
    opacity: 0;
  }

  to {
    inset-block-start: 0;
    opacity: 1;
  }
}

.pb-u-animate--left {
  position: relative;
  animation: animateleft 0.6s ease-out;
}

@keyframes animateleft {
  from {
    inset-inline-start: -100px;
    opacity: 0;
  }

  to {
    inset-inline-start: 0;
    opacity: 1;
  }
}

.pb-u-animate--right {
  position: relative;
  animation: animateright 0.6s ease-out;
}

@keyframes animateright {
  from {
    inset-inline-end: -100px;
    opacity: 0;
  }

  to {
    inset-inline-end: 0;
    opacity: 1;
  }
}

.pb-u-animate--bottom {
  position: relative;
  animation: animatebottom 0.6s ease-out;
}

@keyframes animatebottom {
  from {
    inset-block-end: -100px;
    opacity: 0;
  }

  to {
    inset-block-end: 0;
    opacity: 1;
  }
}

.pb-u-animate--zoom {
  animation: animatezoom 0.6s ease-out;
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1.05);
  }
}

/* The entry animations above are editor-selectable, so honour the user's
   reduced-motion preference (WCAG 2.3.3). Each animation only fades or slides
   an element into its resting position, so suppressing it entirely leaves the
   final rendered state unchanged. */
@media (prefers-reduced-motion: reduce) {
  .pb-u-animate--opacity,
  .pb-u-animate--top,
  .pb-u-animate--left,
  .pb-u-animate--right,
  .pb-u-animate--bottom,
  .pb-u-animate--zoom {
    animation: none;
  }
}