/*
  Strategic Carbon LLC — site layer. Loaded after the theme (unlayered), so anything here wins.
  Design taken from strategic-carbonllc.com:
    Oswald 300/400 headings, Open Sans body at 1.9 line-height
    warm-grey chrome #5e6065 (footer base bar #46474d), slate-blue links #717e9f
    square corners, 1180px container, 100px header
*/

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Colour */
  --maw-accent: #717e9f;
  --maw-accent-hover: #59668a;
  --maw-accent-contrast: #ffffff;
  --maw-link: #717e9f;
  --maw-text: #1e1f23;
  --maw-text-muted: #5b5c61;
  --maw-bg: #ffffff;
  --maw-bg-alt: #fafafa;
  --maw-bg-inverse: #5e6065;
  --maw-surface: #ffffff;
  --maw-border: #e6e6e7;

  /* Brand greys used by the header, footer and dark sections */
  --sc-grey: #5e6065;
  --sc-grey-dark: #46474d;

  /* Typography */
  --maw-leading: 1.9;
  --maw-leading-tight: 1.1;
  --maw-text-base: 1rem;
  --maw-text-sm: 0.9375rem;
  --maw-text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --maw-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
  --maw-text-2xl: clamp(1.5rem, 1.35rem + 0.7vw, 1.88rem);
  --maw-text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --maw-text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);

  /* Shape and layout */
  --maw-radius: 0;
  --maw-shadow-sm: none;
  --maw-shadow: 0 2px 10px rgb(30 31 35 / 0.07);
  --maw-header-h: 6.25rem;

  /* Oswald sub-heading size (30px on the WordPress site), scaled down on phones */
  --sc-heading-sm: clamp(1.4rem, 1.15rem + 1.2vw, 1.88rem);
}

/* --------------------------------------------------- 2. Site-wide typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.1;
}
h1 { font-size: var(--maw-text-4xl); }
h2 { font-size: var(--maw-text-2xl); }
h3, h4 { font-size: var(--sc-heading-sm); }
.prose :is(h2, h3, h4) { color: var(--maw-text); }
.eyebrow { letter-spacing: 0.04em; text-transform: none; }
.lead { font-weight: 400; }

a { text-decoration: none; }
.prose a { text-decoration: underline; text-underline-offset: 0.15em; }

.btn { font-weight: 600; letter-spacing: 0.02em; }

/* ------------------------------------------------------------- 3. Site header */
.site-header {
  background: var(--sc-grey);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.site-header::before { display: none; }
.site-header .site-logo img { height: 2.5rem; }

/* Desktop nav: Oswald, letterspaced, with an accent rule that draws in on hover
   and stays under the current page — lighter than the theme's grey hover pill. */
.site-header .nav-list { gap: var(--maw-space-2); }
.site-header .nav-list > li > a {
  position: relative;
  color: #fff;
  font-family: var(--maw-font-heading);
  font-size: 1.0625rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  padding: var(--maw-space-3) var(--maw-space-2);
  background: none;
}
.site-header .nav-list > li > a::after {
  content: "";
  position: absolute;
  left: var(--maw-space-2);
  right: var(--maw-space-2);
  bottom: calc(var(--maw-space-2) - 2px);
  height: 2px;
  background: var(--maw-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--maw-duration) var(--maw-ease);
}
.site-header .nav-list > li > a:hover::after,
.site-header .nav-list > li > a:focus-visible::after,
.site-header .nav-list > li > a[aria-current="page"]::after,
.site-header .nav-list > .is-active > a::after { transform: scaleX(1); }
.site-header .nav-list > li > a:hover,
.site-header .nav-list > li > a[aria-current="page"],
.site-header .nav-list > .is-active > a { background: none; color: #fff; }

/* Dropdown: a dark panel continuing the header bar, not a white card. */
.site-header .nav-list ul {
  padding: var(--maw-space-2) 0;
  background: var(--sc-grey-dark);
  border: 0;
  border-top: 2px solid var(--maw-accent);
  border-radius: 0;
  box-shadow: 0 12px 28px rgb(30 31 35 / 0.28);
  min-width: 15rem;
}
/* The last item sits at the right edge, so its panel opens inwards. */
.site-header .nav-list > li:last-child > ul { left: auto; right: 0; }
.site-header .nav-list ul a {
  color: #fff;
  font-size: var(--maw-text-sm);
  padding: var(--maw-space-2) var(--maw-space-5);
}
.site-header .nav-list ul a:hover { background: rgb(255 255 255 / 0.1); }

.site-header .btn-ghost { color: #fff; }

/* Menu button: hard right, and the bars fold into an X while the drawer is open.
   `aria-expanded` is maintained by the theme's JS, so no markup change is needed. */
@media (max-width: 860px) {
  .site-header__actions { margin-left: auto; }

  .nav-toggle {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav-toggle:hover { background: rgb(255 255 255 / 0.12); }
  .nav-toggle svg { display: none; }
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform var(--maw-duration) var(--maw-ease),
                box-shadow 80ms linear;
  }
  /* ::before is the top bar; its box-shadow draws the middle one. */
  .nav-toggle::before { transform: translate(-50%, -7px); box-shadow: 0 7px 0 #fff; }
  .nav-toggle::after { transform: translate(-50%, 7px); }
  .nav-toggle[aria-expanded="true"]::before { transform: translate(-50%, 0) rotate(45deg); box-shadow: 0 0 0 transparent; }
  .nav-toggle[aria-expanded="true"]::after { transform: translate(-50%, 0) rotate(-45deg); }

  /* Drawer */
  .site-nav {
    background: var(--sc-grey);
    padding: var(--maw-space-4) 0;
  }
  .site-nav .nav-list > li + li { border-top: 1px solid rgb(255 255 255 / 0.12); }
  .site-nav .nav-list > li > a {
    padding: var(--maw-space-4) var(--maw-gutter);
    font-size: 1.3rem;
  }
  .site-nav .nav-list > li > a::after { display: none; }
  .site-nav .nav-list > li > a[aria-current="page"],
  .site-nav .nav-list > .is-active > a {
    box-shadow: inset 3px 0 0 var(--maw-accent);
    background: rgb(255 255 255 / 0.07);
  }
  .site-nav .nav-list ul {
    background: rgb(0 0 0 / 0.12);
    border-top: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav .nav-list ul a {
    font-size: 1.0625rem;
    padding: var(--maw-space-3) var(--maw-gutter) var(--maw-space-3) calc(var(--maw-gutter) + var(--maw-space-5));
  }
}

/* ------------------------------------------------------------- 4. Site footer */
.site-footer {
  background: var(--sc-grey);
  color: #fff;
  border-top: 0;
  padding-block: 3.125rem 0;
  font-size: 1rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--maw-space-6);
  align-items: start;
}
.site-footer a { color: #fff; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
  font-size: var(--sc-heading-sm);
  margin-bottom: var(--maw-space-3);
}
.site-footer p { margin: 0; line-height: 1.9; }
.site-footer .footer-links { flex-direction: column; gap: 0; }
.site-footer .site-logo { display: none; }
.site-footer__bar {
  background: var(--sc-grey-dark);
  margin-top: 1.875rem;
  padding-block: var(--maw-space-2);
  font-size: var(--maw-text-sm);
}
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- 5. Sections and page body */
.section--bg-dark { background: var(--sc-grey); }
.page-header h1 { margin-bottom: var(--maw-space-4); }
.prose p { line-height: 1.9; }
.prose :is(ul, ol) li { line-height: 1.9; }

/* Footer contact column: name/region on their own lines, as on the WordPress site. */
.site-footer .stack p strong,
.site-footer .stack p a { display: block; }
.site-footer .stack p + p { margin-top: var(--maw-space-4); }