/* tibu-afrika sections/404.css */

/*
 * Plan 07-15's partial: the theme-file 404 (templates/404.html, D-06). Loaded
 * right after theme.css on the front end and in the editor
 * (includes/assets.php), under the same rules: presets and color-mix() only,
 * no hex, no preset variable declared (D-13). Every selector is scoped under
 * .tibu-route--404, the template's main.
 *
 * The page follows the Astro 404 (07-UI-SPEC 404): one brand-gradient band
 * with white text, centred, at least 60vh tall with 80px vertical padding and
 * the root gutters at the sides. It holds the numeral (a paragraph, 72px,
 * then 128px from 768px, 800), the h1 (24px, then 36px from 768px, 700), the
 * lead (white 90%, capped at 36rem) and the recovery buttons, centred and
 * wrapping 16px apart. The Astro glyphs are drawn, not written: the Home
 * button's leading home icon and the on-dark buttons' trailing arrow are
 * empty pseudo-elements painted currentColor through the theme's icon masks,
 * so they stay out of the accessible name and the label (the theme.css
 * section-button idiom, extended here to the 404 band).
 */

/* ---- Band ---- */

.tibu-route--404 > * {
  margin-block: 0;
}

.tibu-route--404 .tibu-404 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--wp--preset--spacing--20) var(--wp--style--root--padding-right) var(--wp--preset--spacing--20) var(--wp--style--root--padding-left);
  text-align: center;
}

.tibu-route--404 .tibu-404 > * {
  max-width: 100%;
  margin-block: 0;
  overflow-wrap: anywhere;
}

/* ---- Copy ---- */

.tibu-route--404 .tibu-404__numeral {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
}

.tibu-route--404 .tibu-404 h1 {
  margin-block-start: var(--wp--preset--spacing--4);
  color: inherit;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 1.25;
}

.tibu-route--404 .tibu-404__lead {
  max-width: 36rem;
  margin-block-start: var(--wp--preset--spacing--4);
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.56;
}

@media (min-width: 768px) {
  .tibu-route--404 .tibu-404__numeral {
    font-size: 128px;
  }

  .tibu-route--404 .tibu-404 h1 {
    font-size: var(--wp--preset--font-size--xx-large);
  }
}

/* ---- Recovery buttons ---- */

.tibu-route--404 .tibu-404 .tibu-404__actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--4);
  margin-block-start: var(--wp--preset--spacing--8);
}

.tibu-route--404 .tibu-404__actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
}

/* The ring is white on the gradient, as on the maroon footer. */
.tibu-route--404 .tibu-404 :focus-visible {
  outline-color: var(--wp--preset--color--surface-0);
}

/* Home: the lucide home glyph before the label. */
.tibu-route--404 .tibu-button--home > .wp-block-button__link::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url(../../icons/home.svg);
  mask-image: url(../../icons/home.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Services and Contact: the trailing arrow after the label. */
.tibu-route--404 .wp-block-button.is-style-on-dark > .wp-block-button__link::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url(../../icons/arrow-right.svg);
  mask-image: url(../../icons/arrow-right.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}