/*
  Starter styles: deliberately plain. A project restyles them through its design tokens (css/tokens.css, overridden by
  the site's own tokens file), not by editing block CSS.
  Only what every page needs: readable defaults, a visible skip link and focus ring, and the shared parts every section
  uses (MB-1): the eyebrow label and the pill buttons. The --starter-* names stay for the starter's own module styles and
  read the tokens, with fallbacks for the standalone pages that load this file without tokens.css.
*/
:root {
  --starter-text: var(--color-text, #1a1a1a);
  --starter-background: var(--color-page, #ffffff);
  --starter-link: var(--color-link, #0b57d0);
  --starter-focus: var(--color-focus, #0b57d0);
  --starter-muted: var(--color-muted, #4a4a4a);
}

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

body {
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.5);
  color: var(--starter-text);
  background: var(--starter-background);
}

a { color: var(--starter-link); }
img { max-width: 100%; height: auto; }

/* The focus ring follows the section colour: band classes redefine --color-focus (css/shared/themes.css). */
:focus-visible {
  outline: 3px solid var(--color-focus, var(--starter-focus));
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  padding: 0.5rem 1rem;
  background: var(--starter-background);
  color: var(--starter-link);
  z-index: 100;
}
.skip-link:focus { top: 1rem; }

.site-header, .site-main, .site-footer {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1rem;
}

.site-header__name { font-weight: 700; text-decoration: none; }
/* MB-136 (MC-6): Menu tab › Logo in the header: Site settings' logo in the site name's place, Header logo width wide
   (empty = 180 px), at most 64 px high, kept to its shape on the left. */
.site-header__name--logo { display: block; flex: 0 0 auto; max-width: 100%; line-height: 0; }
.site-header__logo-image {
  display: block;
  width: var(--header-logo-width, 180px);
  max-width: 100%;
  height: auto;
  max-height: 4rem;
  object-fit: contain;
  object-position: left center;
}
.site-main:focus { outline: none; }
.site-footer { color: var(--starter-muted); border-top: 1px solid var(--color-hairline, #d0d0d0); }

code { overflow-wrap: anywhere; }

/* Staff-only line on the Page not found page in Umbraco's preview (PT-a fix round 1, U5). Never shown to visitors. */
.staff-preview-note {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border: 2px dashed var(--starter-muted);
  color: var(--starter-text);
  background: var(--starter-background);
}

/* Eyebrow (MB-1): a short label above a heading. Markup <p class="eyebrow"> (a label, never a heading). Its look comes
   from the --eyebrow-* tokens; .eyebrow--pill puts it in an outlined pill, and a site can make every eyebrow a pill by
   setting --eyebrow-bg, --eyebrow-border and --eyebrow-padding in its tokens. */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3, 12px);
  padding: var(--eyebrow-padding, 0);
  border: var(--border-width, 1px) solid var(--eyebrow-border, transparent);
  border-radius: var(--eyebrow-radius, 999px);
  background: var(--eyebrow-bg, transparent);
  color: var(--eyebrow-color, var(--color-eyebrow, #4a4a4a));
  font-family: var(--eyebrow-font, inherit);
  font-size: var(--eyebrow-fs, 0.8125rem);
  font-weight: var(--eyebrow-fw, 700);
  letter-spacing: var(--eyebrow-ls, 0.06em);
  line-height: var(--lh-label, 1.3);
  text-transform: var(--eyebrow-transform, uppercase);
  overflow-wrap: anywhere;
}
/* Highlighted words in a section heading (MB-31: Article cards, Team and Steps; Views use HeroHighlight.Html): the same
   colour as the Hero's highlight, the section's eyebrow colour. A site restyles them with --text-highlight (colour) and
   --text-highlight-weight (e.g. bold, as Boyd's last word). */
.text-highlight {
  color: var(--text-highlight, var(--color-eyebrow));
  font-weight: var(--text-highlight-weight, inherit);
}
.eyebrow--pill {
  --eyebrow-bg: var(--eyebrow-pill-bg);
  --eyebrow-border: var(--eyebrow-pill-border);
  --eyebrow-padding: var(--eyebrow-pill-padding);
}

/* Pill buttons (MB-1, from Boyd T02): the Action button's look (Views/Partials/shared/actionButton.cshtml).
   btn--primary and btn--secondary read --btn-1-* and --btn-2-*; band classes swap them for their ground. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: var(--tap-min, 44px);
  max-width: 100%;
  padding: var(--btn-padding, 0.65em 1.4em);
  border: var(--border-width-heavy, 2px) solid var(--btn-border);
  border-radius: var(--btn-radius, 999px);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--btn-font, inherit);
  font-size: var(--btn-fs, 1rem);
  font-weight: var(--btn-fw, 600);
  line-height: var(--lh-label, 1.3);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--motion-fast, 0.2s) var(--motion-ease, ease), color var(--motion-fast, 0.2s) var(--motion-ease, ease);
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn svg { flex: none; width: 15px; height: 15px; }
.btn--primary {
  --btn-bg: var(--btn-1-bg, #1f3a5f);
  --btn-fg: var(--btn-1-fg, #ffffff);
  --btn-border: var(--btn-1-border, #1f3a5f);
  --btn-hover-bg: var(--btn-1-hover-bg, #111111);
  --btn-hover-fg: var(--btn-1-hover-fg, #ffffff);
}
.btn--secondary {
  --btn-bg: var(--btn-2-bg, transparent);
  --btn-fg: var(--btn-2-fg, #111111);
  --btn-border: var(--btn-2-border, #4a4a4a);
  --btn-hover-bg: var(--btn-2-hover-bg, #111111);
  --btn-hover-fg: var(--btn-2-hover-fg, #ffffff);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* MB-28: a section with an Anchor id (BlockAnchor) stops clear of a sticky header when a link jumps to it. */
.umb-block-list > [id] { scroll-margin-top: calc(var(--site-sticky-header-height, 0px) + 1rem); }