/* ==========================================================================
   BASE STYLES: colours, fonts, buttons and layout used by every section.
   Change the colours below to re-theme the whole website.
   ========================================================================== */
:root {
  --night: #0c2340;      /* deep blue: header, hero, footer */
  --panel: #16467a;      /* solar panel blue: links, accents */
  --panel-soft: #e6eef7; /* light blue tint */
  --sun: #f5a623;        /* sun amber: buttons, highlights */
  --sun-deep: #b56f00;   /* darker amber for text on white */
  --field: #2e7d4f;      /* green: "operating" status */
  --paper: #f5f8fb;      /* page tint */
  --ink: #14202e;        /* main text */
  --muted: #55677a;      /* secondary text */
  --line: #d5dee8;       /* borders */
  --white: #ffffff;

  --font-head: "Outfit", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 76px;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(12, 35, 64, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--panel); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; color: var(--night); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

.container { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--tint { background: var(--paper); }
.section-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); max-width: 22ch; }
.section-intro { color: var(--muted); max-width: 60ch; font-size: 1.125rem; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--sun); color: var(--night); padding: .6rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1 var(--font-head);
  padding: .95rem 1.5rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--panel); color: var(--white);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--night); }
.btn--sun { background: var(--sun); color: var(--night); }
.btn--sun:hover { background: #ffb83d; }
.btn--line { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--line:hover { background: rgba(255,255,255,.14); }

/* Status badges (used on project tiles and project pages) */
.badge {
  display: inline-block; padding: .28rem .7rem; border-radius: 999px;
  font: 600 .8125rem/1.2 var(--font-head);
  background: var(--white); color: var(--night);
}
.badge--operating { background: #d9f0e2; color: #1d6a3f; }
.badge--construction { background: #ffe8bd; color: #8a5300; }
.badge--development { background: #dbe8f8; color: #16467a; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}