/*
Theme Name: Musungu Peter
Description: Editable block theme preserving the Musungu Peter website, with a native WordPress blog.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: musungu-peter
License: GPL-2.0-or-later
*/

    :root {
      --dark: #111b18;
      --dark-soft: #1b2924;
      --cream: #f7f4ec;
      --muted: #a9b5ad;
      --gold: #d6a94a;
      --green: #8dbb70;
      --line: rgba(255,255,255,.12);
      --light-line: rgba(17,27,24,.12);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--cream);
      color: var(--dark);
      font-family: "DM Sans", sans-serif;
      line-height: 1.6;
    }

    h1, h2, h3, .logo {
      font-family: "Syne", sans-serif;
      line-height: 1.05;
    }

    a { color: inherit; text-decoration: none; }

    .container {
      width: min(1160px, calc(100% - 40px));
      margin: auto;
    }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      background: rgba(17,27,24,.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
    }

    nav {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      color: white;
      font-size: 1.2rem;
      letter-spacing: -.04em;
    }

    .logo span { color: var(--gold); }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      color: var(--muted);
      font-size: .9rem;
    }

    .nav-links a:hover { color: white; }

    .menu-btn {
      display: none;
      background: none;
      border: 0;
      color: white;
      font-size: 1.7rem;
      cursor: pointer;
    }

    .hero {
      min-height: 100vh;
      padding: 150px 0 80px;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      align-items: center;
      gap: 70px;
      color: white;
      background:
        radial-gradient(circle at 85% 20%, rgba(214,169,74,.22), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(141,187,112,.14), transparent 30%),
        var(--dark);
    }

    .eyebrow {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .72rem;
      font-weight: 700;
      margin-bottom: 22px;
    }

    .hero h1 {
      font-size: clamp(3.5rem, 8vw, 7.5rem);
      max-width: 800px;
      letter-spacing: -.08em;
    }

    .hero h1 em {
      color: var(--green);
      font-style: normal;
    }

    .hero-copy {
      max-width: 570px;
      color: var(--muted);
      font-size: 1.08rem;
      margin-top: 28px;
    }

    .actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 36px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 13px 20px;
      border-radius: 999px;
      font-weight: 700;
      font-size: .9rem;
      transition: .25s ease;
    }

    .btn-primary {
      background: var(--gold);
      color: var(--dark);
    }

    .btn-primary:hover { background: #ecc568; transform: translateY(-2px); }

    .btn-outline {
      color: white;
      border: 1px solid var(--line);
    }

    .btn-outline:hover { border-color: white; }

    .hero-card {
      min-height: 430px;
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(145deg, rgba(255,255,255,.12), transparent 55%),
        rgba(255,255,255,.04);
      transform: rotate(2deg);
    }

    .hero-card:hover { transform: rotate(0deg); }

    .monogram {
      width: 84px;
      height: 84px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--gold);
      color: var(--dark);
      font: 800 2rem "Syne", sans-serif;
    }

    .hero-card h2 {
      font-size: 2.2rem;
      letter-spacing: -.06em;
    }

    .hero-card p { color: var(--muted); }

    section { padding: 110px 0; }

    .section-label {
      color: #61715c;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-weight: 700;
      font-size: .72rem;
      margin-bottom: 18px;
    }

    .section-title {
      font-size: clamp(2.3rem, 5vw, 4.7rem);
      letter-spacing: -.07em;
      max-width: 780px;
    }

    .about-grid {
      margin-top: 55px;
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px;
      align-items: start;
    }

    .big-number {
      font: 800 7rem "Syne", sans-serif;
      color: var(--gold);
      letter-spacing: -.1em;
    }

    .about-grid p {
      font-size: 1.15rem;
      color: #506059;
      max-width: 650px;
    }

    .about-grid p + p { margin-top: 20px; }

    .values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 70px;
      background: var(--light-line);
      border: 1px solid var(--light-line);
    }

    .value {
      padding: 30px;
      background: var(--cream);
    }

    .value h3 { font-size: 1.45rem; margin-bottom: 12px; }

    .value p { color: #64736b; font-size: .95rem; }

    .dark-section {
      color: white;
      background: var(--dark);
    }

    .dark-section .section-label { color: var(--gold); }

    .projects {
      margin-top: 55px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .project {
      padding: 30px;
      min-height: 250px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--dark-soft);
      transition: .25s ease;
    }

    .project:hover { transform: translateY(-5px); border-color: var(--gold); }

    .project-number {
      color: var(--gold);
      font-size: .8rem;
      margin-bottom: 48px;
    }

    .project h3 { font-size: 1.8rem; margin-bottom: 12px; }

    .project p { color: var(--muted); }

    .vision {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center;
    }

    .vision blockquote {
      font: 600 clamp(2rem, 4vw, 4rem) "Syne", sans-serif;
      letter-spacing: -.07em;
    }

    .vision-copy { color: #64736b; font-size: 1.1rem; }

    .vision-list {
      list-style: none;
      margin-top: 30px;
    }

    .vision-list li {
      padding: 16px 0;
      border-bottom: 1px solid var(--light-line);
      display: flex;
      gap: 14px;
    }

    .vision-list li::before {
      content: "↗";
      color: var(--gold);
      font-weight: 700;
    }

    .contact {
      padding-bottom: 120px;
      text-align: center;
    }

    .contact .section-title { margin: auto; }

    .contact p {
      max-width: 570px;
      margin: 24px auto 0;
      color: #64736b;
    }

    footer {
      color: var(--muted);
      background: var(--dark);
      padding: 28px 0;
      font-size: .85rem;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    .socials { display: flex; gap: 20px; }
    .socials a:hover { color: white; }

    @media (max-width: 780px) {
      .container { width: min(100% - 28px, 600px); }

      .menu-btn { display: block; }

      .nav-links {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        padding: 20px;
        background: var(--dark);
        flex-direction: column;
        gap: 18px;
        border-bottom: 1px solid var(--line);
      }

      .nav-links.open { display: flex; }

      .hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding-top: 130px;
      }

      .hero-card { min-height: 310px; }

      .about-grid,
      .vision { grid-template-columns: 1fr; gap: 30px; }

      .values,
      .projects { grid-template-columns: 1fr; }

      .big-number { font-size: 5rem; }

      section { padding: 80px 0; }

      .footer-inner { flex-direction: column; }
    }
  
/* WordPress integration and blog layouts. */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-group { box-sizing: border-box; }
.site-header .header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header .main-navigation { color:var(--muted); font-size:.9rem; height:auto; }
.site-header .wp-block-navigation__container { gap:28px; }
.site-header .wp-block-navigation a:hover { color:white; }
.wp-block-navigation__responsive-container.is-menu-open { background:var(--dark); color:white; padding:32px; }
body.admin-bar .site-header { top:32px; }
.page-main { margin:0; }
.page-main .actions .wp-block-button { display:inline-flex; }
.page-main .wp-block-button__link { font-family:inherit; }
.page-main .actions { justify-content:flex-start; }
.contact .actions { justify-content:center; }
.hero-card p:last-child { margin-top:18px; }
.contact .btn-outline { color:var(--dark); border-color:var(--light-line); }
.vision .wp-block-quote { border:0; padding:0; }
.vision .wp-block-quote p { font:inherit; }
.blog-intro,.article-layout { padding-top:150px; padding-bottom:90px; }
.blog-intro > p:not(.section-label) { margin:24px 0 48px; color:#506059; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:40px 0; list-style:none; }
.post-card { height:100%; overflow:hidden; border:1px solid var(--light-line); border-radius:20px; background:#fffdf7; display:flex; flex-direction:column; }
.post-card .wp-block-post-featured-image { margin:0; }
.post-card .wp-block-post-featured-image img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.post-card-body { padding:26px; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.wp-block-post-terms { color:#596c48; font-size:.78rem; font-weight:700; }
.wp-block-post-terms a:hover { text-decoration:underline; }
.wp-block-post-date,.wp-block-post-author-name { color:#64736b; font-size:.85rem; }
.post-card .wp-block-post-title { font-size:1.6rem; letter-spacing:-.045em; }
.post-card .wp-block-post-excerpt { color:#506059; }
.post-card .wp-block-read-more { margin-top:auto; }
.wp-block-query-pagination { gap:20px; padding-top:20px; }
.wp-block-query-pagination-numbers > * { padding:8px; }
.article-layout { max-width:840px; }
.article-layout > .wp-block-post-title { font-size:clamp(2.4rem,6vw,4.7rem); letter-spacing:-.06em; margin:22px 0; }
.article-meta { gap:18px; margin-bottom:32px; }
.article-layout > .wp-block-post-featured-image { margin:0 0 40px; }
.article-layout > .wp-block-post-featured-image img { border-radius:20px; }
.article-layout .wp-block-post-content { font-size:1.12rem; line-height:1.85; overflow-wrap:anywhere; }
.article-layout .wp-block-post-content > * + * { margin-top:24px; }
.article-layout .wp-block-post-content h2,.article-layout .wp-block-post-content h3 { margin-top:42px; line-height:1.2; }
.article-layout .wp-block-post-content ul,.article-layout .wp-block-post-content ol { padding-left:1.5em; }
.article-layout .wp-block-post-content a { text-decoration:underline; }
.article-layout .wp-block-post-content blockquote { border-left:3px solid var(--gold); padding-left:24px; }
.article-cta { margin:56px 0; padding:36px; border-radius:20px; background:var(--dark); color:white; }
.article-cta h2 { font-size:2rem; }
.article-cta p { color:var(--muted); margin:18px 0 24px; }
.related-posts { padding:0; }
.related-posts h2 { font-size:2rem; }
.related-posts .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
a:focus-visible,button:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
img { max-width:100%; height:auto; }
[id] { scroll-margin-top:100px; }
@media(max-width:1000px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:780px) { .blog-grid,.related-posts .blog-grid { grid-template-columns:1fr; } .blog-intro,.article-layout { padding-top:120px; } .article-cta { padding:26px; } body.admin-bar .site-header { top:46px; } }
@media(max-width:600px) { body.admin-bar .site-header { position:absolute; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

.wp-block-post-template.blog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1000px) { .wp-block-post-template.blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:780px) { .wp-block-post-template.blog-grid { grid-template-columns:1fr; } }


/* Refined controls and finishing touches. */
.btn, .wp-block-button__link, .wp-block-read-more {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:50px; padding:13px 24px; border:1px solid transparent;
  border-radius:999px; font-family:inherit; font-size:.92rem;
  font-weight:700; line-height:1.4; text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn::after, .wp-block-button__link::after, .wp-block-read-more::after {
  content:""; width:17px; height:17px; flex:none;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s ease;
}
.btn-primary, .wp-block-button__link, .wp-block-read-more {
  color:var(--dark); background:linear-gradient(135deg,#e5bc63,var(--gold));
  box-shadow:0 4px 14px rgba(214,169,74,.16);
}
.wp-block-button.btn-primary, .wp-block-button.btn-outline { background:transparent; box-shadow:none; border:0; }
.btn-outline, .wp-block-button.btn-outline > .wp-block-button__link {
  color:#fff; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.3); box-shadow:none;
}
.contact .btn-outline, .contact .wp-block-button.btn-outline > .wp-block-button__link {
  color:var(--dark); background:transparent; border-color:rgba(17,27,24,.25);
}
@media(hover:hover) {
  .btn:hover, .wp-block-button__link:hover, .wp-block-read-more:hover {
    transform:translateY(-3px); background:#ecc568; color:var(--dark);
    box-shadow:0 9px 24px rgba(214,169,74,.24);
  }
  .btn-outline:hover, .wp-block-button.btn-outline > .wp-block-button__link:hover {
    color:#fff; background:rgba(255,255,255,.1); border-color:var(--gold); box-shadow:none;
  }
  .contact .btn-outline:hover, .contact .wp-block-button.btn-outline > .wp-block-button__link:hover {
    color:var(--dark); background:rgba(214,169,74,.12); border-color:var(--gold);
  }
  .btn:hover::after, .wp-block-button__link:hover::after, .wp-block-read-more:hover::after { transform:translateX(3px); }
}
.btn:active, .wp-block-button__link:active, .wp-block-read-more:active { transform:translateY(0); box-shadow:none; }
a:focus-visible, button:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.actions { row-gap:12px; }
.project, .hero-card, .post-card { transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.project:hover { box-shadow:0 16px 36px rgba(0,0,0,.16); }
.post-card:hover { border-color:rgba(214,169,74,.6); box-shadow:0 12px 30px rgba(17,27,24,.07); }
.post-card:focus-within { border-color:var(--gold); }
.hero-card { box-shadow:0 24px 60px rgba(0,0,0,.16); }
.value { border-top:3px solid transparent; }
.value:hover { border-top-color:var(--gold); }
::selection { background:var(--gold); color:var(--dark); }
[id] { scroll-margin-top:100px; }
.skip-link { position:fixed; top:12px; left:16px; z-index:100; padding:12px 18px; background:var(--gold); color:var(--dark); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.menu-btn { width:46px; height:46px; border:1px solid var(--line); border-radius:12px; }
@media(max-width:480px) { .actions { flex-direction:column; align-items:stretch; } .actions .btn, .actions .wp-block-button, .actions .wp-block-button__link { width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none!important; } }

.wp-block-button.btn-primary:hover, .wp-block-button.btn-outline:hover { transform:none; background:transparent; }

/* Keep the hero aligned with the page at every viewport width. */
.hero {
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,70px);
  padding-inline:max(20px,calc((100% - 1160px) / 2));
  min-height:100svh;
}
.hero > .container { width:100%; min-width:0; margin-inline:0; }
.about-grid > *, .vision > *, .projects > *, .values > *, .footer-inner > * { min-width:0; }
.project h3, .value h3, .hero-copy, .vision-copy { overflow-wrap:anywhere; }
.socials { flex-wrap:wrap; }
@media(max-width:780px) {
  .container { width:min(calc(100% - 28px),600px); }
  .hero { grid-template-columns:minmax(0,1fr); padding-inline:14px; }
  .hero > .container { width:min(100%,600px); margin-inline:auto; }
  .hero-card, .hero-card:hover { transform:none; }
  .nav-links { max-height:calc(100dvh - 76px); overflow-y:auto; }
}
@media(max-width:360px) {
  .hero h1 { font-size:3.1rem; }
  .hero-card,.project,.value { padding:24px; }
  .hero-card h2 { font-size:2rem; }
}

.post-card, .post-card-body, .wp-block-post-template > li { min-width:0; }
.post-card .wp-block-post-title { overflow-wrap:anywhere; }
.wp-block-query-pagination { flex-wrap:wrap; }
.article-layout .wp-block-post-content pre { max-width:100%; overflow-x:auto; }
.article-layout .wp-block-post-content .wp-block-table { overflow-x:auto; }
@media(max-width:780px) {
  .main-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display:none; }
  .main-navigation .wp-block-navigation__responsive-container-open { display:flex; min-width:46px; min-height:46px; align-items:center; justify-content:center; }
  .site-header .header-inner { gap:16px; }
}