/*
Theme Name: Pocosin Developers
Theme URI: https://example.org
Author: Pocosin Developers
Author URI: https://example.org
Description: Custom WordPress theme built from the Pocosin Developers sample site. Leadership team, gallery photos, and "what we develop" feature rows are all editable from the WordPress dashboard as custom post types. Placeholder theme — replace branding, colors, and content before publishing.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pocosin-developers
*/

/* =========================================================
   Pocosin Developers — sample site stylesheet
   Editorial/corporate real-estate layout — deliberately different
   structure from a typical centered-card nonprofit template.
   Placeholder branding: swap colors/fonts to match real brand.
   ========================================================= */

:root {
  --forest: #20402f;
  --forest-dark: #122318;
  --clay: #b5652f;
  --clay-dark: #8f4d22;
  --sand: #e8dcc8;
  --sand-light: #f3ecdf;
  --paper: #faf7f1;
  --ink: #20241f;
  --ink-soft: #4c5650;
  --border: #ded2ba;
  --max-width: 1240px;
  --font-head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--forest);
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Placeholder notice banner ---------- */
.placeholder-banner {
  background: var(--sand);
  color: var(--forest-dark);
  text-align: center;
  font-size: 0.82rem;
  padding: 8px 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Utility top bar ---------- */
.top-bar {
  background: var(--forest-dark);
  color: rgba(243,236,223,0.75);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.top-bar a { text-decoration: none; }
.top-bar a:hover { color: var(--sand-light); }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--forest);
}

.brand img { width: 38px; height: 38px; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brand-text span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clay);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--forest);
  border-radius: 0;
  color: var(--forest);
  font-size: 1.3rem;
  padding: 6px 10px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links a {
  display: inline-block;
  padding: 4px 2px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  color: var(--clay);
  border-bottom-color: var(--clay);
}

.nav-links a.contact-link {
  background: var(--forest);
  color: var(--sand-light);
  padding: 9px 18px;
  border-bottom: none;
}

.nav-links a.contact-link:hover { background: var(--forest-dark); color: var(--sand-light); }

/* WordPress adds "current-menu-item" / "current_page_item" to the <li> of
   whichever nav item matches the page currently being viewed. */
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a {
  color: var(--clay);
  border-bottom-color: var(--clay);
}

/* Form submission notices (contact page) */
.form-message {
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border-left: 3px solid;
}
.form-message.success {
  background: rgba(32,64,47,0.08);
  border-color: var(--forest);
  color: var(--forest-dark);
}
.form-message.error {
  background: rgba(181,101,47,0.1);
  border-color: var(--clay);
  color: var(--clay-dark);
}

/* Honeypot field — hidden from real visitors, left open for spam bots */
.pd-hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Buttons: sharp, uppercase, arrow suffix ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 0;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn::after { content: "\2192"; font-size: 1rem; }

.btn-primary { background: var(--clay); color: var(--sand-light); border-color: var(--clay); }
.btn-primary:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

.btn-forest { background: var(--forest); color: var(--sand-light); border-color: var(--forest); }
.btn-forest:hover { background: var(--forest-dark); border-color: var(--forest-dark); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(0,0,0,0.06); }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Split hero ---------- */
.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

.split-hero .text-panel {
  background: var(--forest-dark);
  color: var(--sand-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px;
}

.split-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--clay);
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(243,236,223,0.25);
  display: inline-block;
  max-width: fit-content;
}

.split-hero h1 {
  color: var(--sand-light);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  max-width: 14ch;
}

.split-hero p {
  max-width: 42ch;
  font-size: 1.02rem;
  color: rgba(243,236,223,0.85);
}

.split-hero .image-panel { overflow: hidden; }
.split-hero .image-panel img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* ---------- Stats band ---------- */
.stats-band {
  background: var(--forest);
  color: var(--sand-light);
}

.stats-band .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 40px;
  padding-bottom: 40px;
}

.stats-band .stat {
  text-align: center;
  padding: 0 20px;
  border-left: 1px solid rgba(243,236,223,0.2);
}

.stats-band .stat:first-child { border-left: none; }

.stats-band .stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--clay);
  text-transform: uppercase;
}

.stats-band .stat span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,236,223,0.75);
}

/* ---------- Editorial statement (About) ---------- */
.statement {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.statement .label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--clay);
  font-weight: 700;
  margin-bottom: 18px;
  display: block;
}

.statement p.lede {
  font-family: var(--font-head);
  text-transform: none;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--forest);
  line-height: 1.35;
  margin-bottom: 22px;
}

.statement p { color: var(--ink-soft); }

/* ---------- Section basics ---------- */
section { padding: 72px 0; }
section.alt { background: var(--sand-light); }
section.dark { background: var(--forest-dark); color: var(--sand-light); }
section.dark h2 { color: var(--sand-light); }

.section-heading { max-width: 68ch; margin: 0 auto 48px; }
.section-heading.center { text-align: center; }
.section-heading p { color: var(--ink-soft); text-transform: none; letter-spacing: normal; }
.section-heading .label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--clay);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}

/* ---------- Feature rows (What We Develop) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--border);
}

.feature-row:last-child { border-bottom: 1px solid var(--border); }

.feature-row.reverse { grid-template-columns: 1.1fr 0.9fr; }
.feature-row.reverse .feature-media { order: 2; }
.feature-row.reverse .feature-text { order: 1; }

.feature-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.feature-index {
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--clay);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: block;
}

.feature-text h3 { font-size: 1.5rem; margin-bottom: 12px; }
.feature-text p { color: var(--ink-soft); text-transform: none; letter-spacing: normal; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--clay);
  color: var(--sand-light);
  text-align: center;
}

.cta-band h2 { color: var(--sand-light); }
.cta-band p { color: rgba(243,236,223,0.9); max-width: 56ch; margin: 0 auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-outline { border-color: var(--sand-light); color: var(--sand-light); }

/* ---------- Page header (non-hero pages) ---------- */
.page-header {
  background: var(--forest-dark);
  color: var(--sand-light);
  padding: 64px 0 48px;
}

.page-header .label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--clay);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.page-header h1 { color: var(--sand-light); margin-bottom: 10px; max-width: 20ch; }
.page-header p { color: var(--sand); max-width: 62ch; text-transform: none; letter-spacing: normal; }

/* ---------- Leadership rows (Board Members) ---------- */
.leadership-list { border-top: 1px solid var(--border); }

.leadership-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.leadership-row img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.leadership-row .name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}

.leadership-row h3 { margin: 0; font-size: 1.25rem; text-transform: none; letter-spacing: normal; }

.leadership-row .role {
  color: var(--clay);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.leadership-tag {
  display: inline-block;
  border: 1px solid var(--forest);
  color: var(--forest);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.leadership-row p.bio { color: var(--ink-soft); max-width: 68ch; margin-bottom: 0; }

/* ---------- Gallery: filter pills + masonry ---------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.filter-pill {
  border: 1px solid var(--forest);
  background: transparent;
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.filter-pill:hover { background: var(--sand); }

.filter-pill.is-active {
  background: var(--forest);
  color: var(--sand-light);
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}

.masonry-item {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  grid-row: span 1;
}

.masonry-item.tall { grid-row: span 2; }
.masonry-item.wide { grid-column: span 4; }

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.masonry-item:hover img { transform: scale(1.05); }

.masonry-item .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(18,35,24,0.9), rgba(18,35,24,0));
  color: var(--sand-light);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 30px 14px 12px;
}

.masonry-item.is-hidden { display: none; }

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-cloud span {
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
}

/* ---------- Contact split layout ---------- */
.contact-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.contact-split .info-panel {
  background: var(--forest-dark);
  color: var(--sand-light);
  padding: 56px 48px;
}

.contact-split .info-panel h2 { color: var(--sand-light); }

.info-item {
  padding: 18px 0;
  border-top: 1px solid rgba(243,236,223,0.18);
}

.info-item:last-child { border-bottom: 1px solid rgba(243,236,223,0.18); }

.info-item .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--clay);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.info-item p { margin: 0; color: rgba(243,236,223,0.9); }

.contact-split .form-panel {
  background: var(--paper);
  padding: 56px 48px;
}

form.contact-form { display: grid; gap: 18px; }

.form-row { display: grid; gap: 6px; }

.form-row label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--forest);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--clay);
  outline-offset: 1px;
}

.two-field { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-note { font-size: 0.78rem; color: var(--ink-soft); }

.note-box {
  background: rgba(181,101,47,0.1);
  border-left: 3px solid var(--clay);
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 20px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-dark);
  color: var(--sand-light);
  padding: 48px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(243,236,223,0.15);
}

.footer-grid h4 {
  color: var(--clay);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.footer-grid p, .footer-grid a {
  color: rgba(243,236,223,0.85);
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-grid a:hover { color: var(--sand); }

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.footer-bottom {
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(243,236,223,0.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split-hero { grid-template-columns: 1fr; min-height: auto; }
  .split-hero .image-panel img { min-height: 260px; }
  .stats-band .container { grid-template-columns: 1fr; gap: 20px; }
  .stats-band .stat { border-left: none; border-top: 1px solid rgba(243,236,223,0.2); padding-top: 20px; }
  .stats-band .stat:first-child { border-top: none; padding-top: 0; }
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-media, .feature-row.reverse .feature-text { order: unset; }
  .contact-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .masonry-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry-item.wide { grid-column: span 2; }
}

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

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 28px 20px;
    display: none;
    gap: 4px;
  }

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

  .leadership-row { grid-template-columns: 90px 1fr; }
  .leadership-row img { width: 90px; height: 90px; }

  .two-field { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .split-hero .text-panel { padding: 44px 24px; }
  .contact-split .info-panel, .contact-split .form-panel { padding: 40px 24px; }
}