/* ===============================================================
   GREENFIELD.SOLAR — brand.css
   Design tokens, base typography, header, footer.
   Nothing component-specific here. v1.1
   =============================================================== */

/* ---------------------------------------------------------------
   SELF-HOSTED WEBFONTS
   Variable woff2, subset to latin + latin extended-A. Served from
   this domain: no request to Google, nothing to disclose in the
   cookie policy, nothing for the consent banner to block.
   font-display: swap — text paints immediately in the fallback.
   --------------------------------------------------------------- */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-var.woff2") format("woff2-variations"),
         url("../fonts/newsreader-var.woff2") format("woff2");
    font-weight: 200 800;
    font-stretch: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-var.woff2") format("woff2-variations"),
         url("../fonts/public-sans-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    /* --- Colour -------------------------------------------------
       Paper / Field are the two light bands, Ink is the dark band.
       Green carries every action. Ochre is reserved for data
       emphasis (figures, stage markers, rules) and never for CTAs,
       so the two accents can never be confused on a page.        */

    --gfs-paper:      #F6F5F1;
    --gfs-field:      #EBE9E1;
    --gfs-ink:        #17201D;
    --gfs-ink-90:     rgba(23, 32, 29, 0.90);
    --gfs-text:       #1B2421;
    --gfs-text-soft:  #58615C;
    --gfs-line:       #D8D5CB;
    --gfs-line-dark:  rgba(246, 245, 241, 0.16);
    --gfs-green:      #23564A;
    --gfs-green-dark: #184037;
    --gfs-ochre:      #A9762B;
    --gfs-white:      #FFFFFF;
    --gfs-success:    #2A7F3C;
    --gfs-error:      #B4322C;

    /* Semantic aliases used by components */
    --gfs-bg:         var(--gfs-paper);
    --gfs-on-ink:     #E8E9E4;
    --gfs-on-ink-soft:#A8B0AB;

    /* --- Type --------------------------------------------------- */
    --gfs-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --gfs-sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --gfs-h1:    clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
    --gfs-h2:    clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
    --gfs-h3:    clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --gfs-lede:  clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    --gfs-body:  1rem;
    --gfs-small: 0.875rem;

    /* --- Layout ------------------------------------------------- */
    --gfs-wrap:       1180px;
    --gfs-wrap-narrow: 760px;
    --gfs-gutter:     clamp(1.15rem, 4vw, 2.5rem);
    --gfs-band:       clamp(3.5rem, 7vw, 6rem);
    --gfs-radius:     3px;
    --gfs-header-h:   72px;
}


/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */

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

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

body.gfs-body {
    margin: 0;
    background: var(--gfs-paper);
    color: var(--gfs-text);
    font-family: var(--gfs-sans);
    font-size: var(--gfs-body);
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a { color: var(--gfs-green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gfs-green-dark); }

:focus-visible {
    outline: 2px solid var(--gfs-ochre);
    outline-offset: 3px;
}

h1, h2, h3, h4 {
    font-family: var(--gfs-serif);
    font-weight: 500;
    color: var(--gfs-ink);
    margin: 0 0 0.6em;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--gfs-h1); line-height: 1.1; }
h2 { font-size: var(--gfs-h2); line-height: 1.18; }
h3 { font-size: var(--gfs-h3); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; font-family: var(--gfs-sans); font-weight: 600; }

p { margin: 0 0 1.15em; max-width: 68ch; }

strong { font-weight: 600; }

hr {
    border: 0;
    border-top: 1px solid var(--gfs-line);
    margin: 2.5rem 0;
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--gfs-ochre); color: #fff; }


/* ---------------------------------------------------------------
   SKIP LINK
   --------------------------------------------------------------- */

.gfs-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--gfs-ink);
    color: #fff;
    padding: 0.75rem 1.25rem;
}
.gfs-skip:focus { left: 0; }


/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */

.gfs-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 245, 241, 0.94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--gfs-line);
}

.gfs-header__inner {
    max-width: var(--gfs-wrap);
    margin-inline: auto;
    padding: 0 var(--gfs-gutter);
    min-height: var(--gfs-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.gfs-header__brand { display: inline-flex; align-items: center; }
.gfs-header__logo { height: 30px; width: auto; }

.gfs-nav { display: flex; align-items: center; gap: 1.75rem; }

.gfs-nav__list {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gfs-nav__list a {
    font-size: 0.94rem;
    color: var(--gfs-text);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 1px solid transparent;
}
.gfs-nav__list a:hover,
.gfs-nav__list a.is-current { border-bottom-color: var(--gfs-ochre); }

.gfs-nav__cta { font-size: 0.9rem; padding: 0.6rem 1.1rem; }

.gfs-nav__checkbox { position: absolute; opacity: 0; }

.gfs-nav__button { display: none; }


/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */

.gfs-footer {
    background: var(--gfs-ink);
    color: var(--gfs-on-ink);
    padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
}

.gfs-footer__inner {
    max-width: var(--gfs-wrap);
    margin-inline: auto;
    padding: 0 var(--gfs-gutter);
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
}

.gfs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.gfs-footer__col li { margin-bottom: 0.5rem; font-size: var(--gfs-small); }
.gfs-footer__col a { color: var(--gfs-on-ink); text-decoration: none; }
.gfs-footer__col a:hover { color: #fff; text-decoration: underline; }

.gfs-footer__title {
    font-family: var(--gfs-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gfs-on-ink-soft);
    margin-bottom: 1rem;
}

.gfs-footer__blurb {
    font-size: var(--gfs-small);
    color: var(--gfs-on-ink-soft);
    margin-top: 1rem;
    max-width: 34ch;
}

.gfs-footer__muted { color: var(--gfs-on-ink-soft); }

.gfs-footer__legal {
    max-width: var(--gfs-wrap);
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    padding: 1.75rem var(--gfs-gutter) 0;
    border-top: 1px solid var(--gfs-line-dark);
}

.gfs-footer__legal p {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--gfs-on-ink-soft);
    max-width: 92ch;
}

.gfs-footer__copy { margin-bottom: 0; }


/* ---------------------------------------------------------------
   RESPONSIVE (header + footer only — components handle their own)
   --------------------------------------------------------------- */

@media (max-width: 900px) {
    .gfs-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {

    .gfs-nav__button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 9px;
        cursor: pointer;
        border: 1px solid var(--gfs-line);
        border-radius: var(--gfs-radius);
    }
    .gfs-nav__button span {
        display: block;
        height: 1.5px;
        background: var(--gfs-ink);
    }

    .gfs-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--gfs-paper);
        border-bottom: 1px solid var(--gfs-line);
        padding: 0.5rem var(--gfs-gutter) 1.25rem;
    }

    .gfs-nav__checkbox:checked ~ .gfs-header .gfs-nav,
    .gfs-header:has(.gfs-nav__checkbox:checked) .gfs-nav { display: flex; }

    .gfs-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .gfs-nav__list li { border-bottom: 1px solid var(--gfs-line); }
    .gfs-nav__list a { display: block; padding: 0.85rem 0; }
    .gfs-nav__cta { margin-top: 1rem; text-align: center; }
}

@media (max-width: 560px) {
    .gfs-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

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