/* GPPSF component styles. Class names are the Webflow class names to create
   (Client-First style: block_element for structure, is-* for combo classes).
   Every value comes from tokens.css; nothing here is hand-tuned. */

.page-wrapper, .page-wrapper * { box-sizing: border-box; }
.page-wrapper { font-family: var(--font-sans); font-size: 16px; line-height: 1.8; color: var(--text); background: var(--surface); }
:where(.page-wrapper) :where(h1, h2, h3, p) { margin: 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.button { display: inline-block; font-family: var(--font-sans); text-decoration: none; cursor: pointer; border-radius: var(--radius-none); transition: all .3s ease; }
.button.is-outline { font-size: 16px; line-height: 1.8; font-weight: 600; text-transform: uppercase; color: var(--ink); background: var(--surface); border: var(--border-strong) solid var(--ink); padding: var(--space-xs) 15px; }
.button.is-outline:hover { color: var(--surface); background: var(--ink); }
.button.is-hero { font-size: 15px; line-height: 1.8; font-weight: 400; color: var(--on-image); background: transparent; border: var(--border-strong) solid var(--on-image); padding: var(--space-xs) var(--space-m); }
.button.is-hero:hover { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.button.is-donate { font-size: 20px; line-height: 1.2; font-weight: 400; color: var(--surface); background: var(--donate); border: 0; border-radius: var(--radius-button); padding: var(--space-s) var(--space-m); text-align: center; }
.button.is-donate.is-aa { background: var(--donate-aa); }
.button.is-search { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 30px; color: var(--surface); background: var(--ink); border: var(--border-hairline) solid var(--ink); padding: 0; }
.button.is-search:hover { color: var(--muted); background: var(--surface); border-color: var(--border); }
.button:focus-visible, .nav_link:focus-visible, .form_input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Header ---------- */
.nav_component { background: var(--surface); border-bottom: var(--border-hairline) solid var(--border); font-size: 15px; line-height: 1.8; }
.nav_container { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.nav_logo { display: block; height: var(--logo-height); width: auto; }
.nav_menu { display: flex; align-items: center; }
.nav_link { color: var(--ink); text-decoration: none; padding: 59px 20px; display: block; transition: all .3s ease; }
.nav_link:hover, .nav_link.w--current { color: var(--muted); }
.nav_search { display: flex; align-items: center; padding-left: 10px; }
.nav_search-input { width: 125px; height: 30px; font: inherit; font-size: 15px; color: var(--ink); background: none; border: var(--border-hairline) solid var(--border); border-right: 0; padding: 5px 10px; }
.nav_search-input::placeholder { color: var(--muted); }
.nav_component.is-mobile .nav_container { height: auto; padding: 10px; }
.nav_component.is-mobile .nav_logo { height: 45px; }
.nav_hamburger { width: 40px; display: grid; gap: 4px; padding: 8px; }
.nav_hamburger span { display: block; height: 3px; background: var(--ink); }
.nav_mobile-menu { background: var(--ink); padding: 0 20px 20px; }
.nav_mobile-link { display: block; height: 50px; line-height: 50px; padding: 0 50px 0 20px; color: var(--muted); border-bottom: 1px dotted var(--text); text-decoration: none; }
.nav_mobile-link.w--current { color: var(--surface); }

/* ---------- Banner ---------- */
.section_banner { position: relative; height: var(--banner-height); background-color: var(--brand-charcoal); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.section_banner.is-home { height: var(--hero-height); }
.banner_content { max-width: var(--container); }
.banner_title { display: inline-block; color: var(--on-image); font-size: 50px; line-height: 1; font-weight: 600; margin-bottom: var(--space-l); }
.banner_subtitle { color: var(--on-image); font-size: 22px; line-height: 1.4; margin-bottom: 35px; }

/* ---------- Content blocks ---------- */
.section_content { padding: var(--content-top) var(--gutter) var(--content-bottom); }
.text-lead { font-size: 22px; line-height: 1.8; color: var(--text); }
.text-align-center { text-align: center; }
.divider { border: 0; border-top: var(--border-strong) solid var(--separator); margin: 0 0 1.5em; }
.divider.is-black { border-top-color: var(--black); }
.panel { background: var(--surface-panel); padding: 20px var(--space-xl); }
.heading-h1 { font-size: 28px; line-height: 1.5; font-weight: 700; color: var(--ink); margin-bottom: .8em; }
.heading-section { font-size: 30px; line-height: 1.5; font-weight: 700; color: var(--ink); text-align: center; background: var(--surface-panel); padding: 37.5px 71.25px; margin: 0 0 24px; }

.crests_grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 var(--column-gap); align-items: center; }
.crests_item { text-decoration: none; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.crests_item img { max-width: 100%; height: auto; display: block; }
.crests_placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; line-height: 1.3; color: var(--text); border: var(--border-hairline) dashed var(--separator); padding: 6px; }

.profile_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--column-gap); align-items: center; }
.profile_name { font-size: 28px; line-height: 1.5; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: .8em; }
.profile_line { font-size: 22px; line-height: 1.8; color: var(--black); text-align: center; margin-bottom: 20px; }
.profile_photo { width: 100%; aspect-ratio: 3 / 4; background: var(--surface-panel); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 14px; }

.cta_component { background: var(--surface-panel); padding: 22.8px 16px 16px; min-height: 13em; text-align: center; color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cta_heading { font-size: 32px; line-height: 1; font-weight: 400; color: var(--black); margin-bottom: 25.6px; }
.cta_text { font-size: 16px; line-height: 1; margin-bottom: 20px; }
.cta_component .button.is-donate { width: 50%; }

.projects_item { display: grid; grid-template-columns: 30% 1fr; gap: 0 5%; align-items: start; padding-bottom: 5%; margin-bottom: 5%; border-bottom: var(--border-hairline) solid var(--divider-soft); }
.projects_item:last-child { border-bottom: 0; }
.projects_image { width: 100%; display: block; }
.projects_title { font-size: 34px; line-height: 1.2; font-weight: 400; margin: 0 0 15px; }
.projects_title a { color: var(--link-strong); text-decoration: none; }
.projects_title a:hover { text-decoration: underline; }
.projects_excerpt { font-size: 16px; line-height: 1.8; margin-bottom: 15px; }
.projects_more { font-weight: 700; color: var(--link-strong); text-decoration: none; }
.projects_more:hover { text-decoration: underline; }

.post_meta { font-size: 14px; line-height: 1.8; text-transform: uppercase; color: var(--muted); border-top: var(--border-hairline) solid var(--border); border-bottom: var(--border-hairline) solid var(--border); padding: 5px 0; margin-bottom: var(--space-l); }
.post_meta a { color: var(--ink); text-decoration: none; }
.post_nav { display: flex; justify-content: space-between; padding: 12px 0; margin-bottom: var(--space-2xl); border-top: var(--border-hairline) solid var(--border); border-bottom: var(--border-hairline) solid var(--border); }
.post_nav a { color: var(--muted); text-decoration: none; }
.post_nav a:hover { color: var(--text); }
.feature-label { font-size: 36px; line-height: 1.8; color: var(--text); }

.form_label { display: block; font-size: 16px; line-height: 1.8; color: var(--text); }
.form_required { color: var(--text); }
.form_input { display: block; width: 100%; font: inherit; font-size: 16px; line-height: 1.8; color: var(--text); background: var(--surface); border: var(--border-strong) solid var(--border); border-radius: var(--radius-none); padding: var(--space-s) 15px; margin-bottom: 10px; }
.form_input.is-textarea { min-height: 82px; resize: vertical; }
.form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form_sublabel { font-size: 14px; color: var(--text); margin-top: -6px; margin-bottom: 10px; display: block; }

/* ---------- Footer ---------- */
.footer_component { background: var(--surface); font-size: 14px; line-height: 1.8; }
.footer_container { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: var(--border-hairline) solid var(--border); padding: var(--space-l) var(--gutter); }
.footer_copyright { color: var(--muted); }
.footer_menu { display: flex; flex-wrap: wrap; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.footer_menu li:not(:last-child)::after { content: "/"; color: var(--muted); }
.footer_link { color: var(--text); text-decoration: none; padding: 0 8px; }
.footer_link:hover { color: var(--muted); }