/*
Theme Name:   Humble Performance
Theme URI:    https://sproutlingconsulting.com/
Description:  GeneratePress child theme for Humble Performance. Holds only what GenerateBlocks cannot: fonts, non-color tokens, base element styles, focus rings, the WS Form skin, and the fallback layout for blog posts. Section and component styling lives in GenerateBlocks global styles and block styles.
Author:       Sproutling & Company
Author URI:   https://sproutlingconsulting.com/
Template:     generatepress
Version:      1.2.1
Update URI:   https://sproutlingconsulting.com/
Text Domain:  humble-performance
*/

/* ------------------------------------------------------------
   1. Fonts (self-hosted: Manrope for text, Barlow Semi Condensed
      for headings; latin and latin-ext)
   ------------------------------------------------------------ */
@font-face { font-family: "Manrope Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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; }
@font-face { font-family: "Manrope Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-semi-condensed-latin-800-normal.woff2) format("woff2"); }

/* ------------------------------------------------------------
   2. Tokens
   Colors (--navy, --sky, --ink ...) are GeneratePress global
   colors: edit them in Customize > Colors. They are set as defaults
   in functions.php. Only the two font stacks live here.
   ------------------------------------------------------------ */
:root {
  --body-font: "Manrope Variable", Arial, sans-serif;
  --display-font: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}

/* ------------------------------------------------------------
   3. Base elements
   The design was built on a reset that starts every element from
   zero: no margins, no list bullets, headings and links that look
   like the text around them. GeneratePress starts from the
   opposite end, so this section puts the reset back. Everything
   is at element-selector strength, so any GenerateBlocks class or
   block style wins without !important.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* The reset gave every element a solid border of zero width, so setting a width alone draws a line.
   Zero strength (:where), and only inside the site's own header, pages and footer. */
:where(.gb-site-header, .site-main, .site-footer) :where(*) { border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; border: 0 solid; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-transform: inherit; color: inherit; }
/* No a:hover color here on purpose. It would outrank the color a class gives a button-style link. */
a { color: inherit; text-decoration: inherit; transition: none; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; height: auto; }
sup { top: -0.5em; bottom: auto; }
sub { bottom: -0.25em; top: auto; }
ol, ul { list-style: none; }
img, svg, video, iframe { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
/* GeneratePress breaks long words inside content; the design does not. */
.entry-content { overflow-wrap: normal; word-wrap: normal; }

/* Tables: undo GeneratePress and core table-block chrome. The membership comparison table is styled
   on the GenerateBlocks container that wraps it (Memberships page). */
table { border-collapse: collapse; border-color: inherit; border-width: 0; margin: 0; text-indent: 0; width: auto; }
td, th { border: 0 solid; padding: 0; }
.wp-block-table { margin: 0; overflow: visible; border-color: inherit; }
.wp-block-table td, .wp-block-table th { border: 0 solid; padding: 0; word-break: normal; }
.wp-block-table table { width: auto; }
.wp-block-table thead { border-bottom: 0; }

/* Keyboard focus. The design has no focus style of its own, and one flat color cannot show on navy, sky
   and white alike. Three bands (navy, white, navy) are visible on all of them. */
:root :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy), 0 0 0 6px var(--navy); }

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

/* ------------------------------------------------------------
   4. Utilities
   ------------------------------------------------------------ */
/* GenerateBlocks wraps every icon in <span class="gb-shape">. By default that
   wrapper makes no box, so the svg itself is the flex or grid item. Zero
   strength: any style set on a Shape block overrides it. */
:where(.gb-shape) { display: contents; }

/* Skip link (GeneratePress prints it; this is its look on this site). */
.screen-reader-text.skip-link:focus {
  left: 16px; top: 16px; z-index: 100000;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: 14px 20px;
  background: var(--sky); color: var(--navy);
  border-radius: 0; box-shadow: none;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.5; text-decoration: none; text-transform: uppercase;
}

/* ------------------------------------------------------------
   5. Header
   The header is a GenerateBlocks Site Header with a Navigation
   block (Appearance > Elements > Site header) showing the menu
   "Primary" (Appearance > Menus). The blocks carry the layout,
   colors and type. What is here is what a block cannot express.
   ------------------------------------------------------------ */
/* Signed-in editors: keep the sticky header below the admin bar. */
.admin-bar .gb-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* In-page links ("Compare Memberships", "View Eligible Programs") stop below the sticky header. */
:target { scroll-margin-top: 94px; }
@media (max-width: 1000px) { :target { scroll-margin-top: 76px; } }

/* ------------------------------------------------------------
   6. Contact form (WS Form)
   WS Form draws its own markup, so its look is set here instead
   of in GenerateBlocks. The form is placed by shortcode inside a
   GenerateBlocks container with the class "hp-contact-form".
   Class hooks set on the form's fields: hp-submit.
   ------------------------------------------------------------ */
.hp-contact-form form.wsf-form.wsf-form-canvas { color: var(--ink); font-family: var(--body-font); }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-sections,
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { margin: 0; }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-section { min-width: 0; margin: 0; padding: 0; border: 0; }
/* WS Form sizes each field as a twelfth-column tile (flex-basis and max-width, both !important, driven by --wsf-c).
   This form lays its fields out with CSS grid instead, so every tile is told to fill its grid cell. */
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper { --wsf-c: 12; display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; margin: 0; padding: 0; }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: auto; }
@media (max-width: 680px) {
  .hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { grid-template-columns: minmax(0, 1fr); }
  .hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: 1 / -1; }
}

/* Labels, and the hint that sits between a label and its field */
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > label.wsf-label {
  display: block; margin: 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: var(--ink);
}
.hp-contact-form form.wsf-form.wsf-form-canvas .hp-req { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
/* A field whose wrapper has the class "hp-optional" (field settings > Advanced > Wrapper CSS classes) says so after its label. */
.hp-contact-form form.wsf-form.wsf-form-canvas .hp-optional > label.wsf-label::after { content: " (optional)"; color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
/* WS Form prints the help text after the field. The design has it between the label and the field. */
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > * { order: 3; }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > label.wsf-label { order: 1; }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > .wsf-help { order: 2; margin: -4px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > .wsf-invalid-feedback { order: 4; margin: 0; font-size: 14px; line-height: 1.6; color: #b3261e; }

/* Fields */
.hp-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="text"],
.hp-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="email"],
.hp-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="tel"],
.hp-contact-form form.wsf-form.wsf-form-canvas select.wsf-field,
.hp-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field {
  display: block;
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.hp-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field { min-height: 140px; padding: 14px 16px; resize: vertical; }
/* The menus keep the browser's own arrow, as in the design. WS Form swaps it for a drawn arrow with long selectors; these match them. */
.hp-contact-form form.wsf-form.wsf-form-canvas select.wsf-field:not([multiple]):not([size]) { -webkit-appearance: menulist; appearance: auto; }
.hp-contact-form form.wsf-form.wsf-form-canvas select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow { display: none !important; } /* WS Form forces this arrow on with !important */
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-field:focus { border-color: var(--muted); box-shadow: none; }
/* Focus ring. WS Form removes the outline from text fields with a selector as strong as a plain .wsf-field rule
   and loaded later, so these carry the tag and attribute to outrank it. */
.hp-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type]:focus-visible,
.hp-contact-form form.wsf-form.wsf-form-canvas select.wsf-field:focus-visible,
.hp-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field:focus-visible { border-color: var(--navy); outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy), 0 0 0 6px var(--navy); }
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy), 0 0 0 6px var(--navy); }
.hp-contact-form form.wsf-form.wsf-form-canvas.wsf-validated .wsf-field:invalid { border-color: #b3261e; }

/* Send button: the site's button (sky, navy text) */
.hp-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.hp-submit { display: block; }
.hp-contact-form form.wsf-form.wsf-form-canvas button.wsf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 17px 26px;
  background: var(--sky);
  border: 1px solid var(--sky);
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  transition: none;
}
.hp-contact-form form.wsf-form.wsf-form-canvas button.wsf-button:hover,
.hp-contact-form form.wsf-form.wsf-form-canvas button.wsf-button:focus { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.hp-contact-form form.wsf-form.wsf-form-canvas button.wsf-button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Messages WS Form shows above the form (a failed send, for example) */
.hp-contact-form .wsf-alert { margin: 0 0 20px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--sky); border-radius: 0; color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   7. Blog (not used yet)
   The design has no blog. If posts are published they use
   GeneratePress's own layout in a readable column with the site's
   type, until a blog design exists.
   ------------------------------------------------------------ */
.single-post .site-main,
.blog .site-main,
.archive .site-main,
.search .site-main { max-width: 760px; margin-inline: auto; padding: clamp(48px, 6vw, 88px) clamp(25px, 7vw, 110px); }
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article,
.search .inside-article { padding: 0; }
:is(.single-post, .blog, .archive, .search) :is(.entry-title, .page-title) { font-family: var(--display-font); font-size: clamp(38px, 4vw, 64px); font-weight: 800; line-height: 1.03; text-transform: uppercase; }
:is(.single-post, .blog, .archive, .search) .entry-content :is(h2, h3) { font-family: var(--display-font); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
:is(.single-post, .blog, .archive, .search) .entry-content h2 { font-size: 34px; }
:is(.single-post, .blog, .archive, .search) .entry-content h3 { font-size: 25px; }
:is(.single-post, .blog, .archive, .search) .entry-content a { text-decoration: underline; }
.single-post .entry-content > * + *, .entry-summary > * + * { margin-top: 1.2em; }
.single-post .entry-content ul { list-style: disc; padding-left: 1.3em; }
.single-post .entry-content ol { list-style: decimal; padding-left: 1.3em; }