@charset "UTF-8";
/*
Theme Name: Kleyboldt 2026
Theme URI:
Author: Pascal Juppe
Author URI:
Description:
Version: 2.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =======
    Fonts
   ======= */

/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2');
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* merriweather-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-v33-latin-regular.woff2') format('woff2');
}
/* merriweather-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/merriweather-v33-latin-700.woff2') format('woff2');
}
/* merriweather-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/merriweather-v33-latin-700italic.woff2') format('woff2');
}

/* ===============
    Design Tokens
   =============== */

:root {
  /* Color palette — one primary, one accent, restrained neutrals */
  --color-primary: #0a5c94;
  --color-primary-dark: #073f66;
  --color-accent: #b5762a;
  --color-text: #24282c;
  --color-text-muted: #5c6268;
  --color-background: #fbfaf8;
  --color-surface: #f2f0ec;
  --color-border: #ddd8d0;

  /* Typography */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Modular type scale, ratio 1.25, base 16px */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;

  /* Spacing scale, 8px base */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --content-max-width: 1100px;
  --content-measure: 70ch;
  --radius: 4px;

  /* Shadows — shared resting/hover elevation values */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.16);

  /* Motion */
  --transition-fast: 0.2s ease;
}

/* ==============
    Base Styles
   ============== */

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
}

body > section {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-top: 0;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--color-primary-dark);
}

/* Quiet link: neutral by default, primary color on hover/focus */
.link-quiet {
  color: inherit;
  text-decoration: none;
}

.link-quiet:hover,
.link-quiet:focus {
  color: var(--color-primary);
}

/* ==========================
    Site Header / Navigation
   ========================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary);
}

.site-header-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  color: #fff;
  text-decoration: none;
}

.site-brand:hover,
.site-brand:focus {
  color: #fff;
  opacity: 0.85;
}

/* Primary nav list */
.nav-menu {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  display: block;
  padding: var(--space-1) 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu > li.current-menu-item > a {
  color: #fff;
}

/* Dropdown submenus (depth 2), CSS-only via hover/focus */
.nav-menu .sub-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: var(--space-1) 0;
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu a {
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus,
.nav-menu .sub-menu li.current-menu-item > a {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

/* Mobile toggle — checkbox hack, no JS */
.nav-toggle-input {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-1);
}

.nav-toggle-label span {
  width: 24px;
  height: 2px;
  background-color: #fff;
}

@media (max-width: 950px) {
  .nav-toggle-label {
    display: flex;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-top: var(--space-2);
  }

  .nav-toggle-input:checked ~ .nav-menu {
    display: flex;
  }

  .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: transparent;
    padding-left: var(--space-3);
    display: none;
  }

  .nav-menu li:focus-within .sub-menu,
  .nav-menu li.current-menu-item .sub-menu {
    display: block;
  }
}

/* =============
    Site Footer
   ============= */

.site-footer {
  flex-shrink: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
}

.site-footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-footer-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.site-footer-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer-meta a {
  text-decoration: underline;
}

/* ===================
    Layout primitives
   =================== */

.site-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.content-section {
  padding: var(--space-6) 0;
}

.page-title {
  margin-bottom: var(--space-5);
}

/* ===========================================
    Entries (page.php, single.php, index.php)
   =========================================== */

.entry {
  max-width: var(--content-measure);
  margin: 0 auto;
}

.entry-summary {
  max-width: none; /* listing items use full container width */
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.entry-summary:last-child {
  border-bottom: none;
}

.entry-header {
  margin-bottom: var(--space-4);
}

.entry-summary-title {
  margin-bottom: var(--space-1);
}

.entry-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.entry-thumbnail {
  margin-bottom: var(--space-4);
}

.entry-thumbnail-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.entry-content,
.entry-excerpt {
  font-size: var(--text-base);
  line-height: 1.7;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

/* ======
    Hero
   ====== */

.hero {
  position: relative;
  min-height: 90vh;
  background-image:
    linear-gradient(to bottom, rgba(8, 16, 24, 0.65) 0%, rgba(8, 16, 24, 0.3) 25%, rgba(8, 16, 24, 0) 42%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.hero-inner {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-3);
}

.hero-title {
  font-size: var(--text-2xl);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  .hero {
    min-height: 70vh;
  }
  .hero-title {
    font-size: var(--text-lg);
  }
}

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-2);
  color: #fff;
  text-decoration: none;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll-cue-chevron {
  display: block;
  width: 16px;
  height: 16px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue {
    animation: none;
  }
}

/* ===============================
    Feature sections (front page)
   =============================== */

.feature-section {
  padding: var(--space-7) 0;
}

.feature-section:nth-of-type(even) {
  background-color: var(--color-surface);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-5);
}

.feature-text h2 {
  position: relative;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.feature-text h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
}

.feature-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.feature-section--reverse .feature-grid > .feature-text {
  order: 2;
}

.feature-section--reverse .feature-grid > .feature-image {
  order: 1;
}

@media (max-width: 700px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature-section--reverse .feature-grid > .feature-text,
  .feature-section--reverse .feature-grid > .feature-image {
    order: initial;
  }
}

/* =========
    Buttons
   ========= */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover,
.btn:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  color: #fff;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary);
  color: #fff;
}

/* =============================================
    Info card (e.g. bank details, contact info)
   ============================================= */

.info-card {
  max-width: 480px;
  margin: var(--space-4) auto;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}

.info-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}

.info-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.info-card dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.info-card dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ==================
    Media frame
   ==================
   Shared fixed-aspect-ratio image treatment with object-fit cropping and placeholder. */

.media-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-border);
}

.media-frame img,
.media-frame-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame--portrait {
  aspect-ratio: 3 / 4;
}

.media-frame--landscape {
  aspect-ratio: 4 / 3;
}

/* =========================
    Profile list (trustees)
   ========================= */

.profile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.profile-row-image {
  width: 160px;
}

.profile-row-name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.profile-row-bio {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.profile-row-bio > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .profile-row {
    grid-template-columns: 1fr;
  }

  .profile-row-image {
    width: 120px;
  }
}

/* ==================
    Beneficiary grid
   ================== */

.beneficiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.beneficiary-card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
}

.beneficiary-card-image {
  margin-bottom: var(--space-2);
  transition: box-shadow var(--transition-fast);
}

.beneficiary-card-name {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 600;
  margin: 0;
}

/* Hover/focus state excludes .beneficiary-card--static (non-clickable alumni entries) */
.beneficiary-card:not(.beneficiary-card--static):hover .beneficiary-card-image,
.beneficiary-card:not(.beneficiary-card--static):focus .beneficiary-card-image {
  box-shadow: var(--shadow-md);
}

.beneficiary-card:not(.beneficiary-card--static):hover .beneficiary-card-name,
.beneficiary-card:not(.beneficiary-card--static):focus .beneficiary-card-name {
  color: var(--color-primary);
}

.beneficiary-card--static {
  cursor: default;
}

.archive-group {
  margin-bottom: var(--space-6);
}

.archive-group-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* ==============================================
    Beneficiary profile (single-beneficiary.php)
   ============================================== */

.beneficiary-profile-header {
  margin-bottom: var(--space-5);
}

.beneficiary-profile-status {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: 0;
}

.beneficiary-profile-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 700px) {
  .beneficiary-profile-body {
    grid-template-columns: 1fr;
  }

  .beneficiary-profile-image {
    max-width: 220px;
  }
}

.beneficiary-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.beneficiary-fact {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.beneficiary-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.beneficiary-facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.beneficiary-facts dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
}

.beneficiary-facts dd p {
  margin-bottom: var(--space-2);
}

.beneficiary-facts dd p:last-child,
.beneficiary-facts dd ul:last-child,
.beneficiary-facts dd ol:last-child {
  margin-bottom: 0;
}

.beneficiary-facts dd ul,
.beneficiary-facts dd ol {
  padding-left: 1.2em;
}

/* customization for Uni W/H page */
.page-id-204 .entry {
  max-width: inherit;
}