/* Figma palette, followed by the shared typography and spacing foundation. */
:root {
  --oles-cream: #fefcf7;
  --oles-ink: #161511;
  --oles-green: #006b24;
  --oles-brown: #6f472e;
  --oles-dark: #30231b;
  --oles-gold: #d4bc7f;
  --oles-placeholder: #8b897c;

  --font-body: 'Noto Sans', sans-serif;
  --font-heading: 'Anton', sans-serif;
  --type-display: clamp(2.625rem, 5.8vw, 6.25rem);
  --type-heading: clamp(2rem, 3.71vw, 4rem);
  --type-subheading: clamp(1.75rem, 2.78vw, 3rem);
  --type-lead: clamp(1.25rem, 1.86vw, 2rem);
  --type-body: clamp(1rem, 1.16vw, 1.25rem);
  --type-small: clamp(.875rem, 1.04vw, 1.125rem);
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --page-gutter: clamp(1.25rem, 4.5vw, 4.875rem);
  --section-space: clamp(3rem, 9.5vw, 10.25rem);
  --panel-space: clamp(1.5rem, 3.7vw, 4rem);
  --content-width: 98.25rem;
  --reading-width: min(68rem, 63.4vw);
}
@media (max-width: 767px) { :root { --reading-width: 100%; } }

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--oles-ink);
  background: var(--oles-cream);
}

#main-wrapper h1, #main-wrapper h2, #main-wrapper h3,
#main-wrapper h4, #main-wrapper h5, #main-wrapper h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--leading-heading);
  text-transform: uppercase;
  margin-block: 0 var(--space-3);
}
#main-wrapper h1 { font-size: var(--type-display); }
#main-wrapper h2 { font-size: var(--type-heading); }
#main-wrapper h3 { font-size: var(--type-subheading); }
#main-wrapper h4 { font-size: var(--type-lead); }
#main-wrapper h5, #main-wrapper h6 { font-size: var(--type-body); }
#main-wrapper p { margin-block: 0 var(--space-3); }
#main-wrapper a { color: var(--oles-green); text-underline-offset: .2em; }
#main-wrapper :focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.node--type-page .body-wrapper { max-width: var(--reading-width); margin-inline: auto; }
.node--type-page .body-wrapper:not(:empty) { padding: var(--section-space) var(--page-gutter); }

/* Page sections own their gutters; remove the starter theme's nested gutters. */
body.oles-section-page #main-wrapper > #main.container,
body.oles-section-page #content,
body.oles-section-page .node--type-page > .node__content > .container-fluid,
body.oles-section-page .node--type-page .content-wrapper {
  width: 100%; max-width: none; padding-inline: 0;
}
body.oles-section-page #main-wrapper > #main { padding-top: 0; }
body.oles-section-page #main-wrapper > #main > .row,
body.oles-section-page .node--type-page > .node__content > .container-fluid > .row { margin-inline: 0; }
body.oles-section-page #content > .section { padding: 0; }

/* Shared page toolbar, aligned with the header on every public page. */
#main-wrapper .region-after-hero {
  width: min(100%, calc(var(--content-width) + 2 * var(--page-gutter)));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
#main-wrapper .region-after-hero > .tabs { padding-inline: 0; }
#main-wrapper .region-after-hero .nav-tabs {
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--oles-gold);
}
#main-wrapper .region-after-hero .nav-tabs .nav-link {
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-size: var(--type-small);
  font-weight: 700;
  text-transform: uppercase;
  background: transparent;
}
#main-wrapper .region-after-hero .nav-tabs .nav-link:is(.active, :hover) {
  border-bottom-color: var(--oles-green);
  color: var(--oles-green);
}