/* ======================================================================
   One Social Care - Calm Mode
   Version: 1.0.0

   The plugin owns the toggle and the generic Calm Mode utility layer.
   Component-specific Calm Mode styling can continue to live with the
   component that owns it.
   ====================================================================== */

:root {
  --osc-cm-canvas: var(--osc-sand, #F5F1E8);
  --osc-cm-panel: var(--osc-sand-light, #F9F6F1);
  --osc-cm-strength: var(--osc-charcoal, #1F2430);
  --osc-cm-active: var(--osc-rich-teal, #006D70);
  --osc-cm-inactive: #4F4F4F;
  --osc-cm-placeholder: #5F5B54;

  --osc-cm-wisdom: var(--osc-calm-wisdom, #715A8B);
  --osc-cm-balance: var(--osc-calm-balance, #4D7E7F);
  --osc-cm-compassion: var(--osc-calm-compassion, #9A665E);

  --osc-cm-wisdom-bg: var(--osc-calm-wisdom-bg, #F0ECF4);
  --osc-cm-balance-bg: var(--osc-calm-balance-bg, #EAF4F2);
  --osc-cm-compassion-bg: var(--osc-calm-compassion-bg, #F8EFEC);
  --osc-cm-neutral-bg: var(--osc-calm-neutral-bg, #F7F3EA);

  --osc-cm-wisdom-text: var(--osc-calm-wisdom-text, #3E3150);
  --osc-cm-balance-text: var(--osc-calm-balance-text, #244A49);
  --osc-cm-compassion-text: var(--osc-calm-compassion-text, #5C3833);

  --osc-cm-rule-soft: var(--osc-calm-rule-soft, rgba(95, 90, 81, 0.42));
  --osc-cm-rule-medium: var(--osc-calm-rule-medium, rgba(95, 90, 81, 0.56));
  --osc-cm-image-opacity: var(--osc-calm-image-opacity, 0.82);
  --osc-cm-transition: var(--osc-calm-transition, 260ms ease);
  --osc-cm-focus: var(--osc-focus, 3px solid #4E2A84);
}

/* ======================================================================
   Toggle
   ====================================================================== */

.osc-calm-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;

  min-height: 44px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  font: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  color: var(--osc-cm-placeholder) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;

  transition: color var(--osc-cm-transition) !important;
}

.osc-calm-toggle:hover,
.osc-calm-toggle:active,
.osc-calm-toggle:focus {
  color: var(--osc-cm-inactive) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.osc-calm-toggle:focus-visible {
  outline: var(--osc-cm-focus) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}

.osc-calm-toggle__switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;

  width: 2.35rem !important;
  height: 1.2rem !important;
  flex: 0 0 auto !important;

  background: transparent !important;
  border: 1.5px solid var(--osc-cm-inactive) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;

  transition:
    background-color var(--osc-cm-transition),
    border-color var(--osc-cm-transition) !important;
}

.osc-calm-toggle__thumb,
.osc-calm-toggle__knob {
  position: absolute !important;
  top: 50% !important;
  left: 0.18rem !important;

  width: 0.62rem !important;
  height: 0.62rem !important;

  background: var(--osc-cm-inactive) !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;

  transition:
    left var(--osc-cm-transition),
    background-color var(--osc-cm-transition) !important;
}

.osc-calm-toggle__label {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}

html.osc-calm-mode .osc-calm-toggle {
  color: var(--osc-cm-active) !important;
}

html.osc-calm-mode .osc-calm-toggle__switch {
  background: var(--osc-cm-active) !important;
  border-color: var(--osc-cm-active) !important;
}

html.osc-calm-mode .osc-calm-toggle__thumb,
html.osc-calm-mode .osc-calm-toggle__knob {
  left: calc(100% - 0.18rem - 0.62rem) !important;
  background: var(--osc-cm-canvas) !important;
}

@media (max-width: 767.98px) {
  .osc-calm-toggle {
    position: relative !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    gap: 0 !important;
  }

  .osc-calm-toggle__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .osc-calm-toggle__switch {
    width: 2.15rem !important;
    height: 1.15rem !important;
  }

  .osc-calm-toggle__thumb,
  .osc-calm-toggle__knob {
    width: 0.58rem !important;
    height: 0.58rem !important;
  }

  html.osc-calm-mode .osc-calm-toggle__thumb,
  html.osc-calm-mode .osc-calm-toggle__knob {
    left: calc(100% - 0.18rem - 0.58rem) !important;
  }
}

/* ======================================================================
   Calm Mode foundation
   ====================================================================== */

html.osc-calm-mode {
  --osc-link-colour: var(--osc-cm-balance-text);
  --osc-link-hover-colour: var(--osc-cm-wisdom-text);
  --osc-focus: 3px solid var(--osc-cm-balance-text);
  --osc-current-wisdom: var(--osc-cm-wisdom);
  --osc-current-balance: var(--osc-cm-balance);
  --osc-current-compassion: var(--osc-cm-compassion);
}

html.osc-calm-mode body {
  color: var(--osc-cm-strength) !important;
}

/*
 * Readability is deliberately taggable rather than forced over every widget.
 * Add .osc-calm-readable to reading-content wrappers that can safely reflow.
 */
html.osc-calm-mode .osc-calm-readable :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  .x-text,
  .x-text-content,
  .x-text-content-text
),
html.osc-calm-mode [data-osc-calm="readable"] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  .x-text,
  .x-text-content,
  .x-text-content-text
) {
  font-size: max(1rem, 19px) !important;
  line-height: 1.65 !important;
}

/* ======================================================================
   Media and decoration utilities
   ====================================================================== */

.osc-calm-fade,
.osc-calm-fade-image,
.osc-calm-bg-fade,
.osc-calm-hide,
.osc-calm-hide-image,
.osc-calm-bg-hide,
.osc-decoration,
.osc-decorative,
.osc-blob,
.osc-shape,
.osc-svg-shape {
  transition:
    opacity var(--osc-cm-transition),
    filter var(--osc-cm-transition),
    visibility 0s linear var(--osc-cm-transition) !important;
}

html.osc-calm-mode .osc-calm-fade,
html.osc-calm-mode .osc-calm-fade-image,
html.osc-calm-mode .osc-calm-bg-fade {
  opacity: var(--osc-cm-image-opacity) !important;
  visibility: visible !important;
  filter: saturate(0.72) contrast(0.96) brightness(1.03) !important;
}

html.osc-calm-mode .osc-calm-hide,
html.osc-calm-mode .osc-calm-hide-image,
html.osc-calm-mode .osc-calm-bg-hide,
html.osc-calm-mode .osc-decoration,
html.osc-calm-mode .osc-decorative,
html.osc-calm-mode .osc-blob,
html.osc-calm-mode .osc-shape,
html.osc-calm-mode .osc-svg-shape {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.osc-has-calm-bg {
  position: relative !important;
}

html.osc-calm-mode .osc-has-calm-bg::before {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ======================================================================
   Softened surface utilities
   ====================================================================== */

.osc-calm-soften-wisdom,
.osc-calm-soften-violet,
.osc-calm-soften-blue,
.osc-calm-soften-balance,
.osc-calm-soften-teal,
.osc-calm-soften-green,
.osc-calm-soften-compassion,
.osc-calm-soften-coral,
.osc-calm-soften-red,
.osc-calm-soften-neutral,
.osc-calm-soften-footer,
.osc-calm-soften-cta,
.osc-calm-soften-border {
  transition:
    background-color var(--osc-cm-transition),
    border-color var(--osc-cm-transition),
    color var(--osc-cm-transition),
    box-shadow var(--osc-cm-transition) !important;
}

html.osc-calm-mode :is(
  .osc-calm-soften-wisdom,
  .osc-calm-soften-violet,
  .osc-calm-soften-blue,
  .osc-calm-soften-footer
) {
  background-color: var(--osc-cm-wisdom-bg) !important;
  color: var(--osc-cm-wisdom-text) !important;
  border-color: var(--osc-cm-rule-soft) !important;
  box-shadow: none !important;
}

html.osc-calm-mode :is(
  .osc-calm-soften-balance,
  .osc-calm-soften-teal,
  .osc-calm-soften-green,
  .osc-calm-soften-cta
) {
  background-color: var(--osc-cm-balance-bg) !important;
  color: var(--osc-cm-balance-text) !important;
  border-color: var(--osc-cm-rule-soft) !important;
  box-shadow: none !important;
}

html.osc-calm-mode :is(
  .osc-calm-soften-compassion,
  .osc-calm-soften-coral,
  .osc-calm-soften-red
) {
  background-color: var(--osc-cm-compassion-bg) !important;
  color: var(--osc-cm-compassion-text) !important;
  border-color: var(--osc-cm-rule-soft) !important;
  box-shadow: none !important;
}

html.osc-calm-mode .osc-calm-soften-neutral {
  background-color: var(--osc-cm-neutral-bg) !important;
  color: var(--osc-cm-strength) !important;
  border-color: var(--osc-cm-rule-soft) !important;
  box-shadow: none !important;
}

html.osc-calm-mode :is(
  .osc-calm-soften-wisdom,
  .osc-calm-soften-violet,
  .osc-calm-soften-blue,
  .osc-calm-soften-balance,
  .osc-calm-soften-teal,
  .osc-calm-soften-green,
  .osc-calm-soften-compassion,
  .osc-calm-soften-coral,
  .osc-calm-soften-red,
  .osc-calm-soften-neutral,
  .osc-calm-soften-footer,
  .osc-calm-soften-cta
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  li,
  a,
  strong,
  em,
  .x-text,
  .x-text-content,
  .x-text-content-text,
  .x-headline,
  .x-headline-text,
  .x-anchor-text-primary,
  .x-anchor-text-secondary
) {
  color: inherit !important;
}

html.osc-calm-mode :is(
  .osc-calm-soften-border,
  .osc-calm-border-wisdom,
  .osc-calm-border-balance,
  .osc-calm-border-compassion,
  .osc-calm-border-blue,
  .osc-calm-border-purple,
  .osc-calm-border-green,
  .osc-calm-border-rule
) {
  border-color: var(--osc-cm-rule-medium) !important;
  box-shadow: none !important;
}

/* ======================================================================
   Motion utilities
   ====================================================================== */

html.osc-calm-mode :is(
  .osc-calm-stop-motion,
  .osc-calm-reduce-motion,
  .osc-decoration,
  .osc-decorative,
  .osc-blob,
  .osc-shape,
  .osc-svg-shape
),
html.osc-calm-mode :is(
  .osc-calm-stop-motion,
  .osc-calm-reduce-motion
) * {
  animation: none !important;
  scroll-behavior: auto !important;
}

html.osc-calm-mode :is(
  .osc-calm-stop-motion,
  .osc-calm-reduce-motion
) {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .osc-calm-toggle,
  .osc-calm-toggle__switch,
  .osc-calm-toggle__thumb,
  .osc-calm-toggle__knob,
  .osc-calm-fade,
  .osc-calm-fade-image,
  .osc-calm-bg-fade,
  .osc-calm-hide,
  .osc-calm-hide-image,
  .osc-calm-bg-hide,
  .osc-calm-soften-wisdom,
  .osc-calm-soften-violet,
  .osc-calm-soften-blue,
  .osc-calm-soften-balance,
  .osc-calm-soften-teal,
  .osc-calm-soften-green,
  .osc-calm-soften-compassion,
  .osc-calm-soften-coral,
  .osc-calm-soften-red,
  .osc-calm-soften-neutral {
    transition: none !important;
  }
}