/* ==========================================================================
   Generation Solar — design system
   Ported from the original Squarespace 7.1 (Fluid Engine) site.
   Palette, type scale, grid metrics and section themes were read out of the
   live site's computed styles so the rebuild matches it.
   ========================================================================== */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  /* palette (resolved from the original site's HSL custom properties) */
  --off-white: #f2f4f4;
  --black: #212121;
  --lime: #c4d242;
  --blue: #93b5e4;
  --deep-blue: #0c2288;
  --pure-white: #fff;
  --pure-black: #000;

  /* layout */
  --max-w: 1825px;
  --gutter: 6vw;          /* mobile; desktop overrides to 7vw */
  --grid-gap: 15px;
  --row-min: 24px;        /* mobile row floor */
  --header-h: 66px;

  /* fonts */
  --font-heading: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Helvetica Neue', Arial, sans-serif;

  /* fluid type size-values, straight from the original theme */
  --h1-v: 6.9;
  --h2-v: 5.2;
  --h3-v: 2.75;
  --h4-v: 1.5;
  --body-v: 1.2;
  --large-v: 1.2;
  --small-v: 2.1;

  /* current section colours; each theme re-declares these */
  --bg: var(--off-white);
  --fg: var(--black);
}

@media (min-width: 768px) {
  :root {
    --gutter: 7vw;
    --header-h: 84px;
  }
}

/* Squarespace 7.1 fluid type: grows with viewport width, then clamps to a
   ceiling derived from the max page width. */
:root {
  --fluid-h1: min(calc((var(--h1-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--h1-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--h1-v) * 1rem)));
  --fluid-h2: min(calc((var(--h2-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--h2-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--h2-v) * 1rem)));
  --fluid-h3: min(calc((var(--h3-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--h3-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--h3-v) * 1rem)));
  --fluid-h4: min(calc((var(--h4-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--h4-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--h4-v) * 1rem)));
  --fluid-body: min(calc((var(--body-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--body-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--body-v) * 1rem)));
  --fluid-large: min(calc((var(--large-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--large-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--large-v) * 1rem)));
  --fluid-small: min(calc((var(--small-v) - 1) * 1.2vw + 1rem),
    max(calc((var(--small-v) - 1) * 0.012 * var(--max-w) + 1rem), calc(var(--small-v) * 1rem)));
}

/* ---------- reset ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fluid-body);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--black);
  color: var(--off-white);
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: normal;
}

h1 { font-size: var(--fluid-h1); line-height: 0.84; }
h2 { font-size: var(--fluid-h2); line-height: 0.915; }
h3 { font-size: var(--fluid-h3); line-height: 1.023; }
h4 { font-size: var(--fluid-h4); line-height: 1.078; }

.rt h4 { margin-top: 2rem; }
.rt h4:first-child { margin-top: 0; }

.rt p { margin: 0 0 1rem; }
.rt p:last-child { margin-bottom: 0; }
.rt p:empty { margin: 0; min-height: 1rem; }

.rt a { text-decoration: underline; text-underline-offset: 2px; }
.rt a:hover { opacity: 0.7; }

.rt ul,
.rt ol { margin: 0 0 1rem; padding-left: 1.5em; }
.rt li { margin-bottom: 0.35em; }

.rt blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid currentColor;
}

/* Squarespace renders <pre><code> inside a text block in the meta font with
   no code styling at all (.sqs-block-html pre code), so it reads as ordinary
   copy rather than a monospace box. Matched here. */
.rt pre {
  margin: 0 0 1rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.rt pre,
.rt pre code,
.rt code {
  padding: 0;
  background: none;
  font-family: var(--font-body);
  font-size: min(calc((0.9 - 1) * 1.2vw + 1rem),
    max(calc((0.9 - 1) * 0.012 * var(--max-w) + 1rem), calc(0.9 * 1rem)));
  line-height: 1.2;
}

.rt img { margin: 1rem 0; }

.rt hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

/* Squarespace rich-text size classes. Note: this site's theme configures
   "small" (2.1) LARGER than "large" (1.2) -- preserved to match. */
.sqsrte-large { font-size: var(--fluid-large); line-height: 1.2; }
.sqsrte-small { font-size: var(--fluid-small); line-height: 1.2; }

.sqsrte-text-color--white { color: var(--off-white); }
.sqsrte-text-color--black { color: var(--black); }
.sqsrte-text-color--accent { color: var(--blue); }
.sqsrte-text-color--lightAccent { color: var(--lime); }
.sqsrte-text-color--darkAccent { color: var(--deep-blue); }

/* ---------- section themes ---------- */

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}

.section[data-theme='white'],
.section[data-theme=''],
.section[data-theme='white-bold'] { --bg: var(--off-white); --fg: var(--black); }
.section[data-theme='bright-inverse'] { --bg: var(--pure-white); --fg: var(--black); }
.section[data-theme='light'],
.section[data-theme='light-bold'] { --bg: var(--lime); --fg: var(--black); }
.section[data-theme='bright'] { --bg: var(--blue); --fg: var(--pure-black); }
.section[data-theme='dark'],
.section[data-theme='dark-bold'] { --bg: var(--deep-blue); --fg: var(--off-white); }
.section[data-theme='black'],
.section[data-theme='black-bold'] { --bg: var(--black); --fg: var(--off-white); }

.section-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- fluid engine grid ---------- */
/* Mirrors the original: N content columns flanked by gutter columns, so
   grid-area column indices run 1..(cols + 2). */

/* Each section carries its original row count as --rows-m / --rows-d. Those
   matter: a section often declares more rows than its blocks occupy, and the
   spare trailing rows are what give tight-line-height headings room to
   breathe inside the section background. */
.fe {
  --grid-gutter: calc(var(--gutter) - var(--grid-gap));
  --cell-max: calc((var(--max-w) - (var(--grid-gap) * 7)) / 8);
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max)))
    minmax(var(--grid-gutter), 1fr);
  grid-template-rows: repeat(var(--rows-m, 1), minmax(var(--row-min), auto));
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fe {
    --cell-max: calc((var(--max-w) - (var(--grid-gap) * 23)) / 24);
    --row-scale: 0.0215;
    --container-w: min(var(--max-w), calc(100vw - var(--gutter) * 2));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max)))
      minmax(var(--grid-gutter), 1fr);
    grid-template-rows:
      repeat(var(--rows-d, 1), minmax(calc(var(--container-w) * var(--row-scale)), auto));
    grid-auto-rows: minmax(calc(var(--container-w) * var(--row-scale)), auto);
  }
}

/* one positioned block */
.fb {
  display: flex;
  grid-area: var(--m);
  z-index: var(--zm, 1);
  min-width: 0;
  justify-content: var(--jm, flex-start);
  align-items: var(--am, flex-start);
}

@media (min-width: 768px) {
  .fb {
    grid-area: var(--d);
    z-index: var(--zd, 1);
    justify-content: var(--jd, flex-start);
    align-items: var(--ad, flex-start);
  }
}

.fb > * { min-width: 0; max-width: 100%; }

/* text blocks fill their cell so alignment reads the same as the original */
.fb-rt { width: 100%; }

/* ---------- shapes ---------- */

.fb-shape { width: 100%; height: 100%; }
.shape {
  width: 100%;
  height: 100%;
  background: var(--shape-fill, var(--lime));
}

/* ---------- images ---------- */

.fb-img { width: 100%; }
.fb-img img { width: 100%; height: auto; }
.fb-img figure { margin: 0; }
.fb-img figcaption { margin-top: 0.5rem; font-size: 0.85em; opacity: 0.8; }

.fb-video { width: 100%; }
.fb-video video { width: 100%; height: auto; }

/* ---------- buttons ---------- */

.btn-wrap {
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  padding: 32px 48px;
  border: 2px solid var(--pure-black);
  border-radius: 100%;
  background: var(--pure-black);
  color: var(--pure-white);
  font-weight: 400;
}
.btn--primary:hover { opacity: 0.82; }

.btn--secondary {
  padding: 32px 48px;
  border: 2px solid currentColor;
  border-radius: 100%;
  background: transparent;
  color: inherit;
  font-weight: 400;
}
.btn--secondary:hover { background: var(--pure-black); border-color: var(--pure-black); color: var(--pure-white); }

.btn--tertiary {
  padding: 0 48px 4px;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 700;
}
.btn--tertiary:hover { opacity: 0.65; }

.btn--small { font-size: 0.8rem; }
.btn--large { font-size: 1rem; }

.btn--primary.btn--small,
.btn--secondary.btn--small { padding: 22px 34px; }
.btn--primary.btn--large,
.btn--secondary.btn--large { padding: 38px 58px; }

.btn--tertiary.btn--small { padding: 0 24px 4px; }

/* a button whose original href was empty renders inert */
.btn[aria-disabled='true'] { cursor: default; opacity: 0.6; }

/* ---------- accordion ---------- */

.accordion { margin: 0; padding: 0; width: 100%; list-style: none; }

.accordion-item { border-top: 1px solid currentColor; }
.accordion-item:last-child { border-bottom: 1px solid currentColor; }

.accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--fluid-small);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.accordion-icon::after { transform: translateY(-50%) rotate(90deg); }

.accordion-btn[aria-expanded='true'] .accordion-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* Height is driven from site.js: measured in px on open, then released to auto
   once the transition ends so the panel reflows with its content. Chosen over
   the CSS-only grid 0fr->1fr trick because an explicit px height animates
   predictably regardless of the container's intrinsic sizing. */
.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}
.accordion-body { padding: 0 0 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
}

/* ---------- embeds ---------- */

.embed { width: 100%; }
.embed iframe { display: block; width: 100%; border: 0; }

.calendly-inline-widget { width: 100%; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--off-white);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px var(--gutter);
}

.header-logo { flex: 0 0 auto; margin-right: auto; }
.header-logo img { height: 34px; width: auto; }

@media (max-width: 767px) {
  .header-logo img { height: 24px; }
}

.header-nav { display: none; }

@media (min-width: 900px) {
  .header-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
}

.header-nav a {
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.header-nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 3px; }

.header-cta {
  display: none;
  flex: 0 0 auto;
  padding: 22px 34px;
  border: 2px solid var(--pure-black);
  border-radius: 100%;
  background: var(--pure-black);
  color: var(--pure-white);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.header-cta:hover { opacity: 0.82; }

@media (min-width: 900px) { .header-cta { display: inline-block; } }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background: var(--black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  padding: 0 var(--gutter) 2rem;
  background: var(--off-white);
}
.mobile-nav[data-open='true'] { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(33, 33, 33, 0.15);
  font-size: 1.15rem;
  text-decoration: none;
}

.mobile-nav .header-cta {
  display: inline-block;
  margin-top: 1.5rem;
  border-bottom: 2px solid var(--pure-black);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--off-white);
  color: var(--black);
}

.footer-inner {
  display: grid;
  gap: 2.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem var(--gutter);
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
    align-items: start;
  }
}

.footer-cta h3 { margin-bottom: 0.75rem; }
.footer-cta p { margin: 0 0 1.5rem; }

.footer-aside { display: grid; gap: 1.5rem; }

@media (min-width: 900px) {
  .footer-aside { justify-items: end; text-align: right; }
}

.footer-email a { text-decoration: none; }
.footer-email a:hover { text-decoration: underline; }

.footer-quote p { margin: 0; }
.footer-quote em { font-style: italic; }

.footer-legal {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 2.5rem;
  font-size: 0.8rem;
  opacity: 0.7;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* ---------- blog ---------- */

.blog-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem var(--gutter);
}

.blog-list { display: grid; gap: 3.5rem; }

.blog-card { display: grid; gap: 1.5rem; }

@media (min-width: 800px) {
  .blog-card {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
}

.blog-card-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.blog-card h2 { margin-bottom: 0.5rem; font-size: var(--fluid-h3); }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; }

.blog-meta {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.blog-excerpt p { margin: 0 0 1rem; }

.read-more {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.post-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem var(--gutter) 2rem;
}
.post-header h1 { font-size: var(--fluid-h2); }

.post-hero {
  max-width: var(--max-w);
  margin: 0 auto 3rem;
  padding: 0 var(--gutter);
}
.post-hero img { width: 100%; height: auto; }

.post-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}
.post-body p,
.post-body li { font-size: var(--fluid-large); line-height: 1.5; }
.post-body h2,
.post-body h3,
.post-body h4 { margin: 2.5rem 0 1rem; }
.post-body img { margin: 2rem auto; }

.post-tags {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.post-tags a {
  padding: 0.4rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 0.8rem;
  text-decoration: none;
}
.post-tags a:hover { background: var(--black); color: var(--off-white); }

.archive-empty {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem var(--gutter) 6rem;
}

/* ---------- utility ---------- */

.text-center { text-align: center; }
.text-right { text-align: right; }

/* ---------- homepage post summary ---------- */

.summary-grid {
  display: grid;
  gap: 2rem;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.summary-card { display: grid; gap: 0.75rem; align-content: start; }

.summary-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.summary-card h4 { margin: 0; }
.summary-card h4 a { text-decoration: none; }
.summary-card h4 a:hover { text-decoration: underline; }

/* ---------- footer legal row ---------- */

.footer-legal {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

.footer-legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-legal p { margin: 0; }

/* anchors in the privacy policy sit below the sticky header */
.rt [id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ---------- text-block background panels ---------- */
/* Squarespace text blocks can carry their own fill, padding and radius. On
   the homepage three of these are deep blue panels holding white text, so
   without the fill the text lands on a white page and disappears. */

.fb-rt.fb-panel {
  height: 100%;
  box-sizing: border-box;
  background: var(--panel-bg);
  padding: var(--panel-pad, 6% 6% 6% 6%);
  border-radius: var(--panel-radius, 0);
}