/*
 * Emeraude base: fonts, reset, typography, focus, layout containers.
 * Values come from tokens.css. Do not hard-code a colour or size here.
 */

/* ---- Archivo, self-hosted -------------------------------------------
   One variable file per unicode range, covering weights 200 to 700.
   unicode-range means a visitor downloads only the range they need, so
   the latin file alone (about 35KB) covers Australian English. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---- Reset ---------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--em-font);
  font-size: var(--em-size-body);
  line-height: var(--em-lh-body);
  color: var(--em-ink);
  background: var(--em-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.admin-bar .em-header{
    top:32px;
}

img,
picture,
video,
svg { max-width: 100%; }

img,
video { height: auto; }

button { font-family: inherit; }

/* ---- Typography ----------------------------------------------------- */

/* Bottom margins are the mockup's own values. They have to be stated here
   rather than left to the block gap: this reset out-specifies core's
   zero-specificity :where() flow rule, so zeroing them removes the gap
   entirely with nothing putting it back. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--em-heading-gap);
  font-weight: 600;
  line-height: var(--em-lh-heading);
  letter-spacing: -.018em;
  color: var(--em-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--em-size-hero);
  line-height: var(--em-lh-tight);
  letter-spacing: -.02em;
  --em-heading-gap: 26px;
}

h2 {
  font-size: var(--em-size-heading);
  --em-heading-gap: 28px;
}

h3 {
  font-size: var(--em-size-card-lead);
  --em-heading-gap: 10px;
}

/* A heading that ends its container needs no trailing gap. */
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; }

p { margin: 0 0 22px; line-height: 1.65;}
p:last-child { margin-bottom: 0; }

a {
  color: var(--em-link);
  text-decoration: none;
  transition: color .2s;
}

a:hover { color: var(--em-link-hover); }

strong { font-weight: 600; }

/* ---- Focus ----------------------------------------------------------
   Agreed in PROJECT-BRIEF.md section 8.2: a 2px accent outline with no
   offset. Keyboard only, so a mouse click does not draw a ring. */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--em-accent);
  outline-offset: 0;
  border-radius: var(--em-radius-sm);
}

.em-skip-link {
  position: fixed;
  left: -9999px;
  top: 12px;
  z-index: 600;
  background: var(--em-ink);
  color: var(--em-white);
  padding: 12px 18px;
  border-radius: var(--em-radius-sm);
  font-size: var(--em-size-small-plus);
  font-weight: 600;
}

.em-skip-link:focus-visible {
  left: 12px;
  color: var(--em-white);
}

.em-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Shared pieces --------------------------------------------------- */

.em-eyebrow {
  font-size: var(--em-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--em-track-eyebrow);
  text-transform: uppercase;
  color: var(--em-link);
  margin: 0 0 30px;
}

.em-lead {
  font-size: var(--em-size-standfirst);
  line-height: 1.45;
  color: var(--em-muted);
}

/* Buttons. The mockup uses two: a filled primary and an outlined
   secondary, both 290px wide in the hero and auto elsewhere. */

.em-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--em-font);
  font-size: var(--em-size-small-plus);
  font-weight: 700;
  letter-spacing: var(--em-track-button);
  text-transform: uppercase;
  padding: 18px 44px;
  border: none;
  border-radius: var(--em-radius-sm);
  background: var(--em-button);
  color: var(--em-white);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.em-button:hover,
.wp-block-button__link:hover {
  background: var(--em-button-hover);
  color: var(--em-white);
}

.em-button--outline,
.is-style-outline .wp-block-button__link {
  background: none;
  color: var(--em-ink);
  font-weight: 600;
  border: 1px solid var(--em-accent);
  padding: 17px 43px;
}

.em-button--outline:hover,
.is-style-outline .wp-block-button__link:hover {
  background: var(--em-accent-wash);
  color: var(--em-ink);
}

/* Text link with the mockup's trailing arrow treatment. */
.em-textlink {
  font-size: var(--em-size-small);
  font-weight: 700;
  letter-spacing: var(--em-track-node);
  text-transform: uppercase;
  color: var(--em-link);
}

/* ---- Layout ---------------------------------------------------------- */

.em-shell {
  position: relative;
  width: 100%;
  padding-left: 0;
  transition: padding-left var(--em-rail-speed) var(--em-ease);
}

.em-section {
  padding: var(--em-gutter);
  /* The same 100px band every .em-section-block sits on. This wrapper is used
     by the 404 and by the "awaiting content" panel on a page with no blocks
     yet, and drew 104/150 while those sections drew 100/100. */
  padding-block: 100px;
  scroll-margin-top: var(--em-bar);
}

.em-container {
  max-width: var(--em-max);
  margin: 0 auto;
}

/* ---- Motion ---------------------------------------------------------- */

@keyframes emDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 4%, 0) scale(1.06); }
}

@keyframes emJourneyRun {
  0% { left: 0; opacity: 0; }
  4% { opacity: 1; }
  96% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes emTrailRun {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes emNodeLight {
  0%, 8% { background: var(--em-dot); transform: scale(1); }
  12%, 20% { background: var(--em-accent); transform: scale(1.25); }
  30%, 100% { background: var(--em-dot); transform: scale(1); }
}

@keyframes emLabelLight {
  0%, 8% { color: var(--em-muted); }
  12%, 20% { color: var(--em-ink); }
  30%, 100% { color: var(--em-muted); }
}

@keyframes emRailIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Nothing in this build animates content into existence. Movement is only
   ever added on top of a finished, readable visual, per the mockup's own
   decision log section 9. Honour the system preference regardless. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}