/*
 * The page layout: a three-column grid on <body>. Direct children of <body>
 * land in the centred content column (at most --measure wide); add
 * class="full-bleed" to break one out edge to edge, and
 * class="full-bleed--contained" with it to keep that element's own children in
 * the centre column. Same layout as tools.dryan.com's theme.css.
 */

/* The cascade layers, weakest first: Open Props, normalize and the Open Props
   buttons (open-props.css), the site's globals (this file), then each
   element's own stylesheet
   (src/components/*.css, linked beside its content), so a component's rules
   beat the globals whatever their specificity. */
@layer openprops, normalize, buttons, globals, components;

/* Registered so --measure can be overridden (in :root, at any specificity or
   layer) and still be a real <length>; a bad override falls back to the
   initial value. initial-value has to be absolute: no rem, em or %. */
@property --measure {
  syntax: "<length>";
  inherits: true;
  initial-value: 1024px;
}

/* Where an element sits in the page grid, set by its own stylesheet (see body >
   * below). Not inherited, so a value on <main> does not reach its children. */
@property --grid-column {
  syntax: "*";
  inherits: false;
}

:root {
  --primary-1: #1c9dbc;
  --primary-2: #1c90bc;
  --primary-3: #1c82bc;
  --primary-4: #1c75bc;
  --primary-5: #1c68bc;
  --primary-6: #1c9dbc;
  --primary-7: #1c4dbc;
  --primary: var(--primary-4);
  --accent-1: #664cc0;
  --accent-2: #5c41b7;
  --accent-3: #543ca9;
  --accent-4: #4d379a;
  --accent-5: #46318c;
  --accent-6: #37276f;
  --accent-7: #291d52;
  --accent: var(--accent-7);
  --brand: var(--primary);
  --font-open-sans: "Open Sans Variable", var(--font-system-ui);
  --size-content-3: 680px;
  --measure: var(--size-content-3);

  /* Fluid heading sizes from 360px to 1240px viewports (utopia.fyi/clamp),
     each growing to the size Open Props gives the heading at the top end */
  --font-size-h1: clamp(2.25rem, 1.7386rem + 2.2727vi, 3.5rem);
  --font-size-h2: clamp(1.875rem, 1.6193rem + 1.1364vi, 2.5rem);
  --font-size-h3: clamp(1.625rem, 1.4716rem + 0.6818vi, 2rem);
  --font-size-h4: clamp(1.3125rem, 1.2358rem + 0.3409vi, 1.5rem);
  --font-size-h5: clamp(1.125rem, 1.0739rem + 0.2273vi, 1.25rem);
  --transition-duration: 1ms;

  @media (prefers-reduced-motion: no-preference) {
    --transition-duration: 200ms;
  }
}

/* Cross-document view transitions between the site's pages (elements that
   should morph rather than crossfade name themselves in their component CSS).
   Reduced motion gets plain navigations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-group(*) {
  animation-duration: var(--transition-duration);
}

@layer globals {
  html {
    font-family: var(--font-open-sans);
    font-weight: var(--font-weight-3);
  }

  * {
    transition-duration: var(--transition-duration);
    transition-property: outline;
  }

  /* after the rule above, which would otherwise take back the links'
     transition-property. On a dark surface (dark mode, or anything that sets
     color-scheme: dark, like the hero) the brand blue is too dark to read,
     so links take its lightest stop mixed with white: about APCA Lc 75 on
     --surface-1, enough for body text */
  :where(a[href]) {
    color: light-dark(
      var(--primary),
      color-mix(in oklch, var(--primary-1), white 60%)
    );
    text-decoration-color: color-mix(in oklch, currentcolor, transparent 50%);
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration);
    transition-property: color, text-decoration-color, outline;

    &:where(:active, :focus-visible) {
      color: light-dark(
        var(--primary-7),
        color-mix(in oklch, var(--primary-1), white 45%)
      );
    }

    @media (hover: hover) {
      &:hover {
        color: light-dark(
          var(--primary-6),
          color-mix(in oklch, var(--primary-1), white 75%)
        );
      }
    }
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--size-2);
    inset-inline-start: var(--size-2);
    z-index: 1;
    padding: var(--size-2) var(--size-3);
    color: var(--text-1);
    background-color: var(--surface-1);
    border: 2px solid currentcolor;
    border-radius: var(--radius-2);
    translate: 0 -200%;
  }

  .skip-link:focus {
    translate: 0 0;
  }

  body {
    --body-row-gap: var(--size-7);

    display: grid;

    /* Names the three columns. Children place by name (grid-column, not
     grid-area: rows still auto-flow). */
    grid-template-areas: "gutter-left content gutter-right";
    grid-template-columns:
      1fr
      calc(min(var(--measure), 100%) - 2 * var(--size-3))
      1fr;
    grid-auto-rows: max-content;
    row-gap: var(--body-row-gap);
  }

  /* An element moves out of the centre column by setting --grid-column, which
     this reads (lz-hero and lz-site-header go full width). */
  body > * {
    grid-column: var(--grid-column, content);
  }

  /* <main> spans the page and shares its three columns, so a block in it can
     go full width the same way (by setting --grid-column); the rest sit in the
     centre column. */
  main {
    --grid-column: gutter-left-start / gutter-right-end;

    display: grid;
    grid-template-areas: inherit;
    grid-template-columns: subgrid;

    > * {
      grid-column: var(--grid-column, content);
    }

    > article {
      --grid-column: gutter-left-start / gutter-right-end;

      display: grid;
      grid-template-areas: inherit;
      grid-template-columns: subgrid;
      grid-auto-rows: inherit;

      > * {
        grid-column: var(--grid-column, content);
      }
    }
  }

  .full-bleed {
    grid-column: gutter-left-start / gutter-right-end;
  }

  /* Pair with .full-bleed: makes the element a subgrid of the page's three
   tracks, so its direct children re-align to the centre column instead of
   spanning edge to edge with it. */
  .full-bleed--contained {
    display: grid;
    grid-template-areas: inherit;
    grid-template-columns: subgrid;
    grid-auto-rows: inherit;
  }

  .full-bleed--contained > * {
    grid-column: content;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 1rem;
    font-family: var(--font-system-ui);
    font-weight: var(--font-weight-9);
    line-height: 1.1;
  }

  :where(h1) {
    font-size: var(--font-size-h1);
  }

  :where(h2) {
    font-size: var(--font-size-h2);
  }

  :where(h3) {
    font-size: var(--font-size-h3);
  }

  :where(h4) {
    font-size: var(--font-size-h4);
  }

  :where(h5) {
    font-size: var(--font-size-h5);
  }

  :where(p, li) {
    margin-bottom: 1rem;
  }

  /* Font Awesome icons ({% icon %}): sized to the text they sit in, as
     Font Awesome's own CSS does, rather than normalize's 5rem for an SVG
     with no width */
  .icon {
    display: inline-block;
    inline-size: auto;
    block-size: 1em;
    overflow: visible;
    vertical-align: -0.125em;
  }

  .visually-hidden {
    /* stylelint-disable */
    /* This rule is for visually hiding elements while keeping them accessible to screen readers */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
  }
}