/**
 * @file
 * Safety Info Block — styles.
 *
 * CSS custom properties (set as inline styles from block config via Twig):
 *
 *   --sib-bar-bg           Header/bar background color
 *   --sib-bar-text         Header/bar text & icon color
 *   --sib-body-bg          Body background color
 *   --sib-body-text        Body text color
 *   --sib-header-font-size Font size for header column titles
 *   --sib-body-font-size   Font size for body content text
 *
 * Override layout variables in your theme:
 *   --sib-container-max        Max content width  (default 1200px)
 *   --sib-container-gutter     Mobile gutter      (default 20px)
 *   --sib-container-gutter-md  Tablet gutter      (default 30px)
 *   --sib-container-gutter-lg  Desktop gutter     (default 40px)
 *   --sib-btn-col-width        Width of the toggle button column (default 56px)
 *
 * State classes on .sib-fixed-wrapper (applied by JS):
 *   (none)               peek     — peekHeight px of body visible
 *   .sib-state--bar      bar      — header only
 *   .sib-state--expanded expanded — full overlay
 *   .sib-state--hidden   hidden   — off-screen, inline copy in view
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — bb-container / bb-inner
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-fixed-wrapper .bb-container,
.sib-inline-wrapper .bb-container {
  width: 100%;
  max-width: var(--sib-container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.sib-fixed-wrapper .bb-inner,
.sib-inline-wrapper .bb-inner {
  padding-left: var(--sib-container-gutter, 20px);
  padding-right: var(--sib-container-gutter, 20px);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sib-fixed-wrapper .bb-inner,
  .sib-inline-wrapper .bb-inner {
    padding-left: var(--sib-container-gutter-md, 30px);
    padding-right: var(--sib-container-gutter-md, 30px);
  }
}

@media (min-width: 1200px) {
  .sib-fixed-wrapper .bb-inner,
  .sib-inline-wrapper .bb-inner {
    padding-left: var(--sib-container-gutter-lg, 40px);
    padding-right: var(--sib-container-gutter-lg, 40px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXED WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-fixed-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* z-index applied inline by JS from drupalSettings; CSS fallback: */
  z-index: 10000;
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-fixed-panel {
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER BAR
   The header uses a 3-column grid that mirrors the body's 2-column layout:
     col 1 (approved uses title)  — same width as body approved-uses column
     col 2 (safety info title)    — same width as body safety column
     col 3 (toggle button)        — fixed width, flush right
   This keeps the titles vertically aligned with their content below.
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-header {
  flex-shrink: 0;
  background-color: var(--sib-bar-bg, #000000);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sib-header__row {
  display: flex;
  align-items: stretch;
  min-height: 64px;
}

/* The two content columns each take half the available space
   (minus the button column). Using flex so they stay proportional. */
.sib-header__col--approved,
.sib-header__col--safety {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

.sib-header__col--approved {
  /* Must match .sib-section--approved padding-right in body */
  padding-right: 24px;
}

.sib-header__col--safety {
  /* Must match .sib-section--safety padding-left in body */
  padding-left: 24px;
  padding-right: 0;
}

/* Button column — fixed width, centred */
.sib-header__col--btn {
  flex: 0 0 var(--sib-btn-col-width, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sib-header__title {
  font-size: var(--sib-header-font-size, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sib-bar-text, #ffffff);
  line-height: 1.25;
  margin: 0;
  padding: 0;
}

/* ── Inline header variant (no button column needed, spacer keeps alignment) */

.sib-header--inline {
  cursor: default;
}

.sib-header__col--btn-spacer {
  /* Invisible spacer, matches button column width so titles stay aligned
     between fixed and inline copies. */
  flex: 0 0 var(--sib-btn-col-width, 56px);
}

/* ── Responsive: stack headers on narrow screens ── */
@media (max-width: 600px) {
  .sib-header__row {
    flex-wrap: wrap;
    min-height: auto;
  }

  .sib-header__col--approved,
  .sib-header__col--safety {
    flex: 1 1 100%;
    padding-bottom: 4px;
  }

  .sib-header__col--approved {
    padding-top: 12px;
    padding-right: 0;
  }

  .sib-header__col--safety {
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 12px;
  }

  .sib-header__col--btn {
    position: absolute;
    right: var(--sib-container-gutter, 20px);
    top: 50%;
    transform: translateY(-50%);
  }

  /* Make the header relatively positioned so the absolute button works */
  .sib-header .bb-inner {
    position: relative;
  }

  .sib-header__title {
    font-size: calc(var(--sib-header-font-size, 2rem) * 0.8);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE BUTTON  (+/-)
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-toggle-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 1;
}

.sib-toggle-btn:hover,
.sib-toggle-btn:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.sib-toggle-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* Plus / minus via pseudo-elements */
.sib-toggle-btn__icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sib-toggle-btn__icon::before,
.sib-toggle-btn__icon::after {
  content: '';
  position: absolute;
  background: var(--sib-bar-text, #ffffff);
  border-radius: 2px;
}

/* Horizontal bar (always visible) */
.sib-toggle-btn__icon::before {
  width: 16px;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Vertical bar (hidden when expanded = shows minus sign) */
.sib-toggle-btn__icon::after {
  width: 2px;
  height: 16px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  opacity: 1;
}

.sib-fixed-wrapper.sib-state--expanded .sib-toggle-btn__icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer scroll container.
 * Starts at height: 0 so the panel never flashes full-height before JS runs.
 * JS sets an explicit px height for peek and expanded states.
 * The inline copy overrides this back to auto further down. */
.sib-fixed-wrapper .sib-body {
  height: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Once JS has initialised and set a real height, allow vertical scroll */
.sib-fixed-wrapper.sib-state--peek .sib-body,
.sib-fixed-wrapper.sib-state--expanded .sib-body {
  overflow-y: auto;
}

/* Background fill */
.sib-body__bg {
  background-color: var(--sib-body-bg, #ffffff);
  width: 100%;
  min-height: 100%;
}

/* Inner padding row */
.sib-body__inner {
  padding-top: 24px;
  padding-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT  (header titles align with body columns)
   ═══════════════════════════════════════════════════════════════════════════ */

/* On all screen sizes the columns flex; on mobile they stack */
.sib-columns {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .sib-columns {
    flex-direction: row;
    gap: 0;
  }

  /* Each section takes exactly half — matching the header's flex:1 columns */
  .sib-columns .sib-section {
    flex: 1 1 0;
    min-width: 0;
  }

  .sib-section--approved {
    padding-right: 24px;
  }

  .sib-section--safety {
    padding-left: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-section__content {
  font-size: var(--sib-body-font-size, 0.9rem);
  line-height: 1.65;
  color: var(--sib-body-text, #333333);
}

.sib-section__content p {
  margin: 0 0 10px;
}

.sib-section__content p:last-child {
  margin-bottom: 0;
}

.sib-section__content ul,
.sib-section__content ol {
  margin: 6px 0 12px 20px;
  padding: 0;
}

.sib-section__content li {
  margin-bottom: 5px;
}

.sib-section__content strong,
.sib-section__content b {
  font-weight: 700;
}

.sib-section__content a {
  color: var(--sib-body-text, #333333);
  text-decoration: underline;
}

.sib-section__content a:hover {
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESCRIBING LINK
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-prescribing-link {
  font-size: calc(var(--sib-body-font-size, 0.9rem) * 0.88);
  color: var(--sib-body-text, #333333);
  opacity: 0.75;
  margin: 24px 0 0;
  padding-top: 0;
}

.sib-prescribing-link a {
  color: var(--sib-body-text, #333333);
  text-decoration: underline;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-body::-webkit-scrollbar        { width: 6px; }
.sib-body::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.04); }
.sib-body::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.2); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   JAVASCRIPT STATE CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bar — body hidden, only header visible */
.sib-fixed-wrapper.sib-state--bar .sib-body {
  height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Hidden — panel slides fully off-screen */
.sib-fixed-wrapper.sib-state--hidden {
  transform: translateY(110%) !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE COPY
   ═══════════════════════════════════════════════════════════════════════════ */

.sib-inline-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.sib-inline-panel {
  overflow: hidden;
}

/* Inline body — always fully visible, JS does not control height */
.sib-body--inline {
  overflow: visible !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */