/* ==========================================================================
   Samui Infotech — CSS foundation (WPCodeBox)
   Type: CSS snippet · Location: Frontend · Load: site-wide
   Scope: classless global rules only.
   Colours → Bricks Color Manager · sizes → Bricks Variables Manager ·
   anything with a class → that Bricks global class (%root%).
   Uses the existing Bricks variable --header-h.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Foundation tokens (used by the rules below and by Bricks classes)
   -------------------------------------------------------------------------- */
:root {
  /* Focus ring: dark ring + light halo = visible on any background */
  --focus-ring: #15191e;
  --focus-halo: #ffffff;
  --focus-width: 3px;

  /* Target sizes */
  --target-min: 24px;    /* WCAG 2.2 minimum (2.5.8) */
  --target-touch: 44px;  /* icon-only buttons, mobile nav rows */

  /* Motion */
  --dur-short: 150ms;
  --dur-medium: 250ms;
  --dur-long: 400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}


/* --------------------------------------------------------------------------
   2. Document
   -------------------------------------------------------------------------- */
html {
  /* Keyboard focus and anchor jumps never land under the sticky header */
  scroll-padding-top: calc(var(--header-h, 80px) + 16px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-optical-sizing: auto;
}


/* --------------------------------------------------------------------------
   3. Typography behaviour
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, figcaption, blockquote {
  text-wrap: pretty;
}

/* Long German compounds break instead of overflowing on mobile */
:lang(de) h1,
:lang(de) h2,
:lang(de) h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   4. Focus (WCAG 2.4.7 / 2.4.11)
   -------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 calc(var(--focus-width) + 3px) var(--focus-halo);
}

/* Bricks builder: inline text editing makes elements contenteditable,
   which always matches :focus-visible. No ring while editing. */
[contenteditable]:focus-visible {
  outline: none;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   5. Target size baseline for native controls (WCAG 2.5.8)
   Inline text links are exempt. Classed controls are sized in their class.
   -------------------------------------------------------------------------- */
button,
[role="button"],
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"] {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
}


/* --------------------------------------------------------------------------
   6. Page transitions (cross-document View Transitions)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-medium);
    animation-timing-function: var(--ease-out);
  }

  /* Header stays put while the page cross-fades */
  #brx-header {
    view-transition-name: site-header;
  }
}


/* --------------------------------------------------------------------------
   7. Keyframes (used by the Bricks classes reading-progress and reveal)
   -------------------------------------------------------------------------- */
@keyframes reading-progress {
  to { transform: scaleX(1); }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   8. Reduced motion — global safety net
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}