/**
 * @file        relax.css
 * @description Relax page: full-height MindPieces iframe below the fixed site header
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         42aa4052-621c-4abe-b881-a3798cb4b41c
 * @version     0.1.0.1
 * @created     2026-10-25
 * @updated     2026-10-25
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* --relax-top is the measured header height (set in relax.php); 80px until then. */
.relax-stage {
  padding-top: var(--relax-top, 80px);
  background: var(--color-navy);
}

/* WHY: the game is a full-viewport app, so the frame fills the screen below the header. */
.relax-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--relax-top, 80px));
  height: calc(100dvh - var(--relax-top, 80px));
  min-height: 360px;
  border: 0;
}

.relax-stage .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}