/*
 * css/styles.css
 * Shared styles for all PhET simulation hosting pages.
 *
 * Design goals:
 *   - WCAG 2.1 AAA color contrast (7:1 for normal text, 4.5:1 for large text)
 *   - Fluid, responsive iframe that preserves the 4:3 aspect ratio of PhET sims (800×600)
 *   - Visible focus indicators on all interactive elements
 *   - No animations (nothing to suppress for prefers-reduced-motion here)
 *
 * TODO(dev): Replace custom properties below with your design system tokens
 *            before integrating into a production site.
 */

/* ==========================================================================
   Custom properties (theming tokens)
   ========================================================================== */
:root {
  /* Colors
   * --color-text on --color-bg: #1a1a1a on #ffffff ≈ 18.1:1 (AAA ✓)
   * --color-heading on --color-bg: same pair ✓
   */
  --color-bg:      #ffffff;
  --color-text:    #1a1a1a;
  --color-heading: #1a1a1a;

  /* Focus ring — must be visible against both white and content backgrounds */
  --color-focus:       #0057a8;  /* #0057a8 on #ffffff ≈ 7.6:1 (AAA ✓) */
  --color-focus-width: 3px;

  /* Spacing */
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;       /* 16px */
  --font-size-h1:   1.75rem;    /* 28px — qualifies as "large text" (≥18pt) */
  --line-height:    1.6;

  /* Layout */
  --content-max-width: 1000px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

/* ==========================================================================
   Focus indicators
   Never remove :focus without a visible alternative (WCAG 2.4.7 / 2.4.11).
   :focus-visible targets keyboard-only focus so mouse clicks stay clean.
   ========================================================================== */
:focus-visible {
  outline: var(--color-focus-width) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Skip link
   Allows keyboard users to jump past repeated chrome directly to the iframe.
   Visually hidden until focused (WCAG 2.4.1).
   ========================================================================== */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-focus);
  color: #ffffff;          /* #ffffff on #0057a8 ≈ 7.6:1 (AAA ✓) */
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  z-index: 100;
  /* Hidden offscreen until focused */
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Page layout
   ========================================================================== */
main {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

h1 {
  font-size: var(--font-size-h1);
  color: var(--color-heading);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.25;
}

/* ==========================================================================
   Responsive iframe container

   PhET sims are designed at 800×600 px (4:3 aspect ratio).
   We use the intrinsic-ratio / padding-bottom technique as a baseline and
   layer the modern `aspect-ratio` property on top for supporting browsers.

   Sizing logic:
     Width-constrained:  container fills the parent's width; height follows
                         from the 4:3 ratio (padding-bottom: 75% fallback).
     Height-constrained: min() caps the width to (100vh × 4/3) so the sim
                         shrinks to fit when the window is made shorter.
                         Subtracting 8rem accounts for approximate page
                         chrome (heading, description text, body padding).

   Fallback (padding-bottom 75%): 600 ÷ 800 = 0.75
   The iframe is absolutely positioned inside the zero-height container so it
   always fills the computed box.
   ========================================================================== */
.sim-container {
  position: relative;
  /* min() picks the smaller of the two values:
     - 100%           — full parent width (width-constrained)
     - (100vh-8rem)*4/3 — max width that fits the viewport height (height-constrained)
     The 8rem offset is an estimate for heading + text + body padding above the sim. */
  width: min(100%, calc((100vh - 8rem) * 4 / 3));
  height: 0;
  /* 600/800 = 75% — preserves 4:3 ratio as the container scales */
  padding-bottom: min(75%, calc(100vh - 8rem));
  margin: 0 auto;
  overflow: hidden;
}

/* Override legacy technique with the cleaner aspect-ratio property where
   supported (all evergreen browsers since late 2021).                     */
@supports (aspect-ratio: 4 / 3) {
  .sim-container {
    aspect-ratio: 4 / 3;
    height: auto;
    padding-bottom: 0;
  }
}

.sim-container iframe {
  /* Fill the positioned ancestor created by .sim-container */
  position: absolute;
  inset: 0;       /* shorthand for top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* When aspect-ratio is supported, static positioning is sufficient */
@supports (aspect-ratio: 4 / 3) {
  .sim-container iframe {
    position: static;
  }
}