/**
 * Base: layout variables, the color-section system, typography rules and
 * small resets. Reads its values from colors.css and typography.css.
 *
 * Color sections: every page is built from full-width GB containers with the
 * class `color-section`. A section without a palette wrapper uses the :root
 * palette; `wrapper-alternate-color` and `wrapper-extra-color` switch the
 * palette for everything inside. See colors.css.
 *
 *   <div class="color-section gb-container alignfull">…</div>
 *   <div class="color-section wrapper-alternate-color gb-container alignfull">…</div>
 *
 * Breakpoints (mobile first): 768px, 990px, 1280px.
 */

:root {
    --section-padding-y: 100px;
    --section-padding: var(--section-padding-y) 0;
    --mobile-side-padding: 5vw; /* side gutter, same at every nesting level; 40px from 1280px (below) */
    --default-margin-top: 100px;
    --default-margin-bottom: 100px;
    --container-width: 1280px;
    --wrapper-width: var(--container-width);
    --transition-speed: 0.5s;
    --transition-timing-function: ease;
    --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* ---------- Color system ---------- */

body {
    color: var(--font-clr);
    background-color: var(--body-bg-clr);
}

.one-container .site-content,
.site-footer .footer-container {
    background: var(--body-bg-clr);
}

/* color inherits as a computed value, so a palette wrapper that redefines
   --font-clr has to apply it again; everything inside then inherits the
   text color normally. Only the palette wrappers do this: a block can color
   its content with color on its outer element, and nested GB containers no
   longer reset it (headings and links keep their own role variables). */
.color-section,
.wrapper-alternate-color,
.wrapper-extra-color {
    color: var(--font-clr);
}

/* A section paints its palette background. A palette wrapper alone (without
   color-section, e.g. hero or newsletter containers) does too. */
.gb-container.color-section,
.gb-container.wrapper-alternate-color,
.gb-container.wrapper-extra-color {
    background-color: var(--bg-clr);
}

/* Nested containers inherit the section background instead of painting their own. */
.wrapper-alternate-color .gb-container,
.wrapper-extra-color .gb-container {
    background-color: unset;
}

section,
div {
    border-color: var(--border-clr);
}

hr {
    color: var(--border-clr);
}

a {
    color: var(--link-clr);
}

a:hover {
    color: var(--link-hover-clr);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--link-clr);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-clr);
}

/* ---------- Typography ---------- */

html, body {
    font-family: var(--main-font);
    font-size: var(--base-font-size);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

p {
    line-height: var(--base-line-height);
}

.main-navigation .main-nav ul li a {
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
}

/* ---------- Sections and page layout ---------- */

.gb-container.color-section {
    padding: var(--section-padding);
}

/* Two consecutive sections with the same palette: drop the top padding of the
   second one so there is no double gap. Same palette = same wrapper class or
   both without one. Add a line here when adding a palette. */
.gb-container.color-section:not(.wrapper-alternate-color):not(.wrapper-extra-color)
  + .gb-container.color-section:not(.wrapper-alternate-color):not(.wrapper-extra-color),
.gb-container.color-section.wrapper-alternate-color
  + .gb-container.color-section.wrapper-alternate-color,
.gb-container.color-section.wrapper-extra-color
  + .gb-container.color-section.wrapper-extra-color {
    padding-top: 0;
}

.one-container .site-content,
.site-footer .footer-container {
    padding: 0 var(--mobile-side-padding);
}

.gb-container.alignfull {
    padding-left: var(--mobile-side-padding);
    padding-right: var(--mobile-side-padding);
}

.archive .header-wrap + .site.grid-container,
.error404 .header-wrap + .site.grid-container,
.search .header-wrap + .site.grid-container {
    padding-top: 100px;
}

/* ---------- Resets ---------- */

div > p:last-child {
    margin-bottom: 0;
}

.entry-content {
    position: relative;
}

ul, ol {
    margin: 0 0 1.5em 1em;
}

/* Anchor links (one-page menus, the article table of contents) glide to
   their target unless the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* From 1280px the gutter is a fixed 40px. Full-width sections keep it too:
   the inner container is at most --container-width, so on a viewport narrower
   than 1280px + 2 × 40px the content would otherwise touch the screen edge. */
@media only screen and (min-width: 1280px) {
    :root {
        --mobile-side-padding: 40px;
    }
}