/*
Theme Name:   TEAM
Theme URI:    https://taxesandfinancial.com/
Description:  GeneratePress child theme for Tax Efficient Advice & Management. Holds only what GenerateBlocks cannot: fonts, non-color tokens, base element styles, the header menu details, and the WS Form skin. Section and component styling lives in GenerateBlocks global styles and block styles.
Author:       Sproutling & Company
Author URI:   https://sproutlingconsulting.com/
Template:     generatepress
Version:      1.1.0
Update URI:   https://sproutlingconsulting.com/
Text Domain:  team
*/

/* This theme's folder is "taxesandfinancial", not "team", on purpose. wordpress.org has an unrelated theme
   whose folder is "team"; WordPress matches updates by folder name and offered that theme's 1.0.5 as an
   update to this one. Do not rename the folder back. The header and footer logos point at this folder. */

/* ------------------------------------------------------------
   1. Fonts (self-hosted variable fonts: Newsreader for headings,
      Public Sans for everything else; latin and latin-ext)
   ------------------------------------------------------------ */
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/newsreader-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: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/newsreader-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: "Public Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/public-sans-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: "Public Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/public-sans-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; }

/* ------------------------------------------------------------
   2. Tokens
   Colors (--primary, --band, --ink ...) are GeneratePress global
   colors: edit them in Customize > Colors. They are set as defaults
   in functions.php. Only non-color tokens live here.
   ------------------------------------------------------------ */
:root {
  --f-display: "Newsreader Variable", Georgia, serif;
  --f-body: "Public Sans Variable", system-ui, sans-serif;

  --gutter: clamp(20px, 5.5vw, 80px);
  --max: 1280px;
  --radius: 10px;
  --radius-lg: 12px;
  --section-y: clamp(64px, 8vw, 96px);

  --step-hero: clamp(2.6rem, 1.6rem + 4.2vw, 4.75rem);
  --step-h1: clamp(2.4rem, 1.7rem + 3vw, 4.25rem);
  --step-h2: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --step-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem);
  --step-lede: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

/* ------------------------------------------------------------
   3. Base elements
   Kept at element-selector strength so any GenerateBlocks class
   or block style wins without !important.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* GeneratePress adds default margins, sizes, and list indents. The design sets
   these per block, so start every text element from zero. */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }

a { color: var(--primary); text-decoration: underline; transition: none; }
a:hover { color: var(--primary-dark); }
/* GeneratePress breaks long words inside content; the design does not. */
.entry-content { overflow-wrap: normal; word-wrap: normal; }
img, svg, iframe { display: block; max-width: 100%; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

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

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

/* 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 the design's look for it). */
.screen-reader-text.skip-link:focus {
  left: 16px; top: 16px; z-index: 100000;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: 12px 18px;
  background: var(--primary); color: var(--white);
  border-radius: 6px; box-shadow: none;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.6; text-decoration: none;
}

/* ------------------------------------------------------------
   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 are the details 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); }

/* A service's icon in the Services drop-down (added by the TEAM Site Content plugin). */
.team-menu-icon { display: flex; flex-shrink: 0; color: var(--primary); }
.gb-menu-container--mobile .team-menu-icon { display: none; }

/* Menu item with the CSS class "menu-all" (Appearance > Menus > CSS Classes): the "All services" row,
   ruled off from the list above it, with an arrow after the label. */
.gb-sub-menu > .menu-all { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.gb-sub-menu > .menu-all > .gb-menu-link { color: var(--primary); font-weight: 600; }
.gb-sub-menu > .menu-all > .gb-menu-link::after {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gb-menu-container--mobile .gb-sub-menu > .menu-all { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------
   6. Office map (the [team_map] shortcode on the Contact page)
   ------------------------------------------------------------ */
.team-map { height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.team-map iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------
   7. 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 "team-contact-form".
   Class hooks set on the form's fields: team-submit.
   ------------------------------------------------------------ */
.team-contact-form form.wsf-form.wsf-form-canvas { color: var(--ink); font-family: var(--f-body); }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-sections,
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { margin: 0; }
.team-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. */
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.team-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; }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: auto; }
@media (max-width: 700px) {
  .team-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { grid-template-columns: minmax(0, 1fr); }
  .team-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 */
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > label.wsf-label {
  display: block; margin: 0;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.6; color: var(--ink);
}
.team-contact-form form.wsf-form.wsf-form-canvas .team-req { color: var(--label); font-weight: 600; }
/* A field whose wrapper has the class "team-optional" (field settings > Advanced > Wrapper CSS classes) says so after its label. */
.team-contact-form form.wsf-form.wsf-form-canvas .team-optional > label.wsf-label::after { content: " (optional)"; color: var(--muted); font-weight: 400; }
/* WS Form prints the help text after the field. The design has it between the label and the field. */
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > * { order: 3; }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > label.wsf-label { order: 1; }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > .wsf-help { order: 2; margin: -4px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > .wsf-invalid-feedback { order: 4; margin: 0; font-size: 0.875rem; line-height: 1.6; color: #b3261e; }

/* Fields */
.team-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="text"],
.team-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="email"],
.team-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type="tel"],
.team-contact-form form.wsf-form.wsf-form-canvas select.wsf-field,
.team-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field {
  display: block;
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.team-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field { min-height: 130px; padding: 12px 14px; 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. */
.team-contact-form form.wsf-form.wsf-form-canvas select.wsf-field:not([multiple]):not([size]) { -webkit-appearance: menulist; appearance: auto; }
.team-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 */
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-field:focus { border-color: var(--field); 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. */
.team-contact-form form.wsf-form.wsf-form-canvas input.wsf-field[type]:focus-visible,
.team-contact-form form.wsf-form.wsf-form-canvas select.wsf-field:focus-visible,
.team-contact-form form.wsf-form.wsf-form-canvas textarea.wsf-field:focus-visible { border-color: var(--primary); outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.team-contact-form form.wsf-form.wsf-form-canvas.wsf-validated .wsf-field:invalid { border-color: #b3261e; }

/* Send button: the site's primary button */
.team-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.team-submit { display: block; }
.team-contact-form form.wsf-form.wsf-form-canvas button.wsf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 160px;
  height: auto;
  min-height: 52px;
  margin: 0;
  padding: 0 26px;
  background: var(--primary);
  border: 1.5px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.team-contact-form form.wsf-form.wsf-form-canvas button.wsf-button:hover,
.team-contact-form form.wsf-form.wsf-form-canvas button.wsf-button:focus { background: var(--primary-dark); color: var(--white); }
.team-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) */
.team-contact-form .wsf-alert { margin: 0 0 20px; padding: 14px 16px; background: var(--band); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------
   8. Blog (not used yet)
   The design has no blog. If posts are published later they use
   GeneratePress's own layout in a readable column with the site's type.
   ------------------------------------------------------------ */
.single-post .site-main,
.blog .site-main,
.archive .site-main,
.search .site-main { max-width: 760px; margin-inline: auto; padding: clamp(48px, 6vw, 88px) var(--gutter); }
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article,
.search .inside-article { padding: 0; }
.single-post .entry-content > * + *, .entry-summary > * + * { margin-top: 1.2em; }
.single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.3em; }