/*
 * Base elements and the type scale.
 *
 * Sizes are taken from the rendered old site, not from Astra's settings screen -- several
 * stored values were never applied. The site title uses a readable line height rather than
 * the collapsed value that Astra's heading rule leaked onto it.
 */

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

body {
  margin: 0;
  background-color: var(--nx-bg);
  color: var(--nx-text);
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-body-size);
  line-height: var(--nx-body-line-height);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* The old site had no responsive body size: font-size-body carried empty tablet and mobile
   values, so 16px/1.6 held at every width. */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--nx-heading);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--nx-brand);
}

/* Inline article links remain identifiable without relying on colour. */
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  font-family: var(--nx-font-heading);
  font-weight: 600;
  color: var(--nx-heading);
  letter-spacing: 0;
}

h1 { font-size: 54px; line-height: 1.1em; letter-spacing: -1px; }
h2 { font-size: 42px; line-height: 1.1em; }
h3 { font-size: 32px; line-height: 1.3em; }
h4 { font-size: 28px; line-height: 1.25em; }
h5 { font-size: 20px; line-height: 1.33em; }

/* h6 is the one heading that is not Sora: Outfit 500, uppercase, 2px tracking. */
h6 {
  font-family: var(--nx-font-accent);
  font-weight: 500;
  font-size: 16px;
  line-height: 1em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* The site title took its family and weight from the heading group rule but had no
   line-height of its own, so it inherited Astra's line-height:0 and rendered in a collapsed
   line box. Given a real value here. */
.site-title,
.site-title a {
  font-family: var(--nx-font-heading);
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 921px) {
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  h3 { font-size: 32px; }
  h4 { font-size: 28px; }
  h5 { font-size: 20px; }
  h6 { font-size: 16px; }
}

@media (max-width: 544px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  h5 { font-size: 16px; }
  h6 { font-size: 15px; }
}

/* Layout container. 1240px with 20px gutters; the 968px and 1349px widths the blog audit
   reported are stored in Astra's settings but were never applied. */
.nx-container {
  width: 100%;
  max-width: var(--nx-container);
  margin: 0 auto;
  padding: 0 var(--nx-container-pad);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus is visible independently of hover and colour. */
:focus-visible { outline: 2px solid var(--nx-brand); outline-offset: 4px; }
a.screen-reader-text:focus { position: fixed !important; top: 12px; left: 20px; width: auto; height: auto; padding: 12px 18px; clip-path: none; z-index: 100000; background: white; }