/**
 * @file
 * Xpdient Paragraphs: settings and shared classes.
 *
 * Bootstrap 5 is the base: the templates use its grid, spacing utilities,
 * figure, card, accordion and tabs. Colours come from Bootstrap's CSS
 * variables, so a Bootstrap theme's own $primary, $secondary and $dark carry
 * through. A theme can override any --xp-* variable below on :root.
 */

:root {
  /* Section and panel backgrounds (field_xp_background). The last three are
     dark: text on them switches to light colours (xp-on-dark). */
  --xp-bg-white: #fff;
  --xp-bg-light: var(--bs-tertiary-bg, #f8f9fa);
  --xp-bg-tint: var(--bs-primary-bg-subtle, #cfe2ff);
  --xp-bg-primary: var(--bs-primary, #0d6efd);
  --xp-bg-secondary: var(--bs-secondary, #6c757d);
  --xp-bg-dark: var(--bs-dark, #212529);

  /* Body text on dark bands and panels. */
  --xp-on-dark-text: rgba(255, 255, 255, 0.85);
  /* Behind images while they load, and behind letterboxed media. */
  --xp-media-bg: var(--bs-dark, #212529);
  /* Darkens a background photo under light text. */
  --xp-overlay: rgba(0, 0, 0, 0.55);
  /* Hairlines ("Line below"). */
  --xp-rule: var(--bs-border-color, #dee2e6);

  /* The hero's text panel and the call-to-action band. */
  --xp-hero-panel-bg: var(--xp-bg-dark);
  --xp-cta-bg: var(--xp-bg-primary);

  /* Member voice card. */
  --xp-voice-card-padding: 1.75rem;
  --xp-voice-card-radius: var(--bs-border-radius-lg);
  --xp-voice-size: 1.25rem;

  /* Phone mock-up: the frame, and the three speech bubbles in order. */
  --xp-phone-width: 18rem;
  --xp-phone-frame: var(--bs-dark, #212529);
  --xp-bubble-1-bg: #fff;
  --xp-bubble-1-color: var(--bs-body-color);
  --xp-bubble-2-bg: var(--bs-primary);
  --xp-bubble-2-color: #fff;
  --xp-bubble-3-bg: var(--bs-secondary);
  --xp-bubble-3-color: #fff;

  /* Platform strip: the boxes' border and the + or arrow between them. */
  --xp-platform-border: 2px solid currentColor;
  --xp-platform-joiner-color: currentColor;
  --xp-platform-result-bg: var(--bs-primary);
  --xp-platform-result-color: #fff;

  /* Large headings. */
  --xp-font-size-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --xp-font-size-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --xp-font-size-lead: 1.125rem;

  /* Space above and below a section's content (phones, then from 992px). */
  --xp-section-spacing: 3rem;
  --xp-section-spacing-lg: 4rem;
  --xp-section-spacing-compact: 1.5rem;
  --xp-section-spacing-compact-lg: 3rem;
  --xp-section-spacing-large: 4rem;
  --xp-section-spacing-large-lg: 6rem;

  /* The site's own text colours, kept for light surfaces inside dark bands
     (xp-on-light). Worked out here, so they hold the page's values. */
  --xp-body-color: var(--bs-body-color);
  --xp-heading-color: var(--bs-heading-color);
  --xp-secondary-color: var(--bs-secondary-color);
  --xp-link-color-rgb: var(--bs-link-color-rgb);
  --xp-link-hover-color-rgb: var(--bs-link-hover-color-rgb);
}

/* Light text on a dark band or panel: Bootstrap reads these variables for
   body text, headings, muted text, links and borders. */
.xp-on-dark,
.xp-text-light {
  --bs-body-color: #fff;
  --bs-heading-color: #fff;
  --bs-secondary-color: var(--xp-on-dark-text);
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-border-color: rgba(255, 255, 255, 0.25);

  color: #fff;
}

/* The site's own colours again on a light surface inside a dark band (light
   text panels and cards). */
.xp-on-light,
.xp-on-dark .card {
  --bs-body-color: var(--xp-body-color);
  --bs-heading-color: var(--xp-heading-color);
  --bs-secondary-color: var(--xp-secondary-color);
  --bs-link-color-rgb: var(--xp-link-color-rgb);
  --bs-link-hover-color-rgb: var(--xp-link-hover-color-rgb);

  color: var(--xp-body-color);
}

/* "Section: background photo": the photo is an inline background-image
   style set by the template. */
.xp-bg-image {
  position: relative;
  background-position: center;
  background-size: cover;
}

.xp-bg-overlay::before {
  position: absolute;
  inset: 0;
  background-color: var(--xp-overlay);
  content: "";
}

.xp-bg-overlay > * {
  position: relative;
}

/* Band heights: a share of the small viewport height (svh), so phone
   toolbars do not hide the bottom; vh first for older browsers. */
.xp-bg-image--half {
  min-height: 50vh;
  min-height: 50svh;
}

.xp-bg-image--tall {
  min-height: 75vh;
  min-height: 75svh;
}

.xp-bg-image--screen {
  min-height: 100vh;
  min-height: 100svh;
}

/* "Line below" on a content paragraph: a hairline with space either side,
   none after the last item in a column. On a band: a line along its bottom. */
.xp-rule-below:not(.xp-rule-below--band) {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--xp-rule);
}

.xp-rule-below:not(.xp-rule-below--band):last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.xp-rule-below--band {
  border-bottom: 1px solid var(--xp-rule);
}

.xp-on-dark .xp-rule-below,
.xp-rule-below--band.xp-on-dark {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}