/* Additions to styles.css and gg-components.css.
   The header and footer run full width; their contents line up with the text edge of the
   1120px column (1120 less the 40px section padding each side). */
.gg-wrap{width:100%;max-width:calc(var(--page-max) - 80px);margin-inline:auto}
.gg-header__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.gg-footer__inner{display:flex;flex-direction:column;gap:var(--space-9)}

/* Menu and theme button, grouped at the end of the header. */
/* The button stays on the menu's row; if space runs out, the menu wraps within itself. */
.gg-header__end{display:flex;align-items:center;gap:var(--space-8)}
.gg-header__end nav{min-width:0}
.gg-theme-toggle{flex:none}
.gg-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);padding:0;border:0;border-radius:var(--radius);background:none;color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.gg-theme-toggle[hidden]{display:none}
.gg-theme-toggle:hover{color:var(--accent)}
.gg-theme-toggle .gg-icon{font-size:20px}

.gg-footer__bottom a{color:inherit;text-decoration:none;transition:var(--transition-control)}
.gg-footer__bottom a:hover{color:var(--accent)}

/* Headings are always Jost. The gg-h classes otherwise inherit, so inside gg-prose they
   picked up the body serif. Plain h2/h3 in prose copy get the same styles as gg-h2/gg-h3. */
.gg-h1,.gg-h2,.gg-h3,.gg-prose h2,.gg-prose h3{font-family:var(--font-ui)}
.gg-prose h2,.gg-prose h3{margin:1.6em 0 .5em;font-weight:var(--weight-medium);color:var(--text-heading)}
.gg-prose h2{font-size:var(--type-h2-size);letter-spacing:var(--type-h2-track);line-height:var(--type-h2-line)}
.gg-prose h3{font-size:var(--type-h3-size);line-height:var(--type-h3-line)}
.gg-prose > :first-child{margin-top:0}

/* Page hero for content pages: the page head on the left, a photo on the right.
   A cut-down home hero, laid out like the husbandry & rotation split. */
.gg-page-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.gg-page-hero{grid-template-columns:minmax(0,1fr);gap:22px}}

/* Full-width text: add gg-section--wide to a section and its prose runs the full column,
   instead of stopping at the 68-character reading measure. */
.gg-section--wide .gg-prose,.gg-section--wide .gg-lead{max-width:none}

/* Content block: a gg-section placed inside page content, e.g. a gg-split of text and photo.
   Spaced like a paragraph instead of a full section, and its columns align to the top. */
.gg-section--block{padding:1em 0}
.gg-section--block .gg-split{align-items:start}
.gg-section--block .gg-split__text > :first-child{margin-top:0}

/* Gallery lightbox: the photo at full size over a dark screen, alt text as the caption. */
.gg-gallery a{cursor:zoom-in}
.gg-lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:rgba(0,0,0,.9);color:#fff}
.gg-lightbox[open]{display:flex;align-items:center;justify-content:center}
.gg-lightbox::backdrop{background:none}
.gg-lightbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.gg-lightbox__figure img{display:block;max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;border-radius:var(--radius)}
.gg-lightbox__caption{font-family:var(--font-body);font-size:var(--type-small-size);text-align:center}
.gg-lightbox__close{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);padding:0;border:0;background:none;color:inherit;cursor:pointer}
.gg-lightbox__close .gg-icon{font-size:28px}

/* Browser-drawn parts (scrollbars, form controls) follow the theme too. */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}