/*
Theme Name: URSI - Urban Renewal and Sustainability Initiative
Theme URI: https://ursinitiative.org
Author: Urban Renewal and Sustainability Initiative (URSI)
Author URI: https://ursinitiative.org
Description: The official WordPress theme for the Urban Renewal and Sustainability Initiative (URSI), built around the Climate Resilient Housing and Urban Sustainability Initiative. Ships with custom post types for Programs, Projects, Events, Partners and Leadership Team; working Contact and Partnership-inquiry forms; and an SEO- and accessibility-conscious template set compatible with Rank Math. Never invent statistics, testimonials, partners, or team members that have not been supplied.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
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: ursi
Tags: nonprofit, ngo, custom-colors, custom-menu, custom-logo, footer-widgets, translation-ready, block-styles, accessibility-ready, threaded-comments

This theme, like WordPress, is licensed under the GPL.

======================================================================
DESIGN SYSTEM: "Ripple"
Signature motif: concentric arcs, representing how one resilient home,
one restored public space, or one informed community moves outward and
strengthens the wider city. Used sparingly as a hero watermark and a
section divider - never as generic decoration.
====================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --color-ink: #1b2a4a;
  --color-ink-soft: #445068;
  --color-marigold: #e8a33d;
  --color-marigold-dark: #c9821f;
  --color-moss: #3f7d58;
  --color-paper: #f6f5f0;
  --color-paper-raised: #ffffff;
  --color-line: #dfe2df;
  --color-charcoal: #1c1f26;
  --color-error: #b3421e;
  --color-success: #2f6b46;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-card: 0.75rem;
  --radius-control: 0.5rem;

  --container-max: 1280px;
}

/* Editable via Customizer -> Brand Colors; these override the tokens
   above at runtime (see inc/customizer.php + wp_head inline style output). */

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-marigold-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: 0.85rem 1.4rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-control) 0;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 5rem 0; }
.section--tight { padding: 3.5rem 0; }
.section--dark { background: var(--color-ink); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--moss { background: var(--color-moss); color: #fff; }
.section--moss h2 { color: #fff; }
.section--raised { background: var(--color-paper-raised); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.section--relative { position: relative; overflow: hidden; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-moss);
}
.section--dark .eyebrow, .section--moss .eyebrow { color: var(--color-marigold); }

.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.flex-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--lg { padding: 0.95rem 1.85rem; font-size: 1rem; }
.btn--primary { background: var(--color-marigold); color: var(--color-ink); }
.btn--primary:hover { background: var(--color-marigold-dark); }
.btn--secondary { background: var(--color-ink); color: #fff; }
.btn--secondary:hover { background: var(--color-ink-soft); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--ghost:hover { border-color: var(--color-ink); }
.btn--on-dark.btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--on-dark.btn--ghost:hover { border-color: #fff; }
.btn--block { width: 100%; }

/* ==========================================================================
   5. HEADER & NAVIGATION (with dropdown submenus)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(246,245,240,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-logo { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
.site-logo img { height: 2.25rem; width: 2.25rem; }

.primary-nav { display: none; }
.primary-nav > ul { display: flex; gap: 1.85rem; }
.primary-nav > ul > li { position: relative; }
.primary-nav a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-weight: 500; color: var(--color-ink-soft); padding: 1.7rem 0; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { color: var(--color-ink); font-weight: 600; }

.primary-nav .menu-item-has-children > a::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.1rem;
  transition: transform 0.15s ease;
}
.primary-nav .menu-item-has-children:hover > a::after,
.primary-nav .menu-item-has-children:focus-within > a::after { transform: rotate(225deg); }

.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 15rem;
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  box-shadow: 0 12px 30px rgba(27,42,74,0.12);
  padding: 0.5rem;
  z-index: 600;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.primary-nav .sub-menu li { border: none; }
.primary-nav .sub-menu a { display: block; padding: 0.6rem 0.85rem; border-radius: 0.35rem; font-weight: 500; white-space: nowrap; }
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus { background: var(--color-paper); color: var(--color-ink); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-cta { display: none; }
.menu-toggle {
  display: inline-flex;
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: transparent;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
  padding: 1rem 1.5rem 1.5rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--color-line); }
.mobile-nav a { display: block; padding: 0.85rem 0; font-weight: 500; color: var(--color-ink); }
.mobile-nav .btn { margin-top: 1rem; }
.mobile-nav li { position: relative; }
.mobile-nav .menu-item-has-children > a { padding-right: 2.25rem; }
.mobile-nav .submenu-toggle {
  position: absolute; right: 0; top: 0.45rem;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--color-ink-soft);
}
.mobile-nav .submenu-toggle svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.mobile-nav .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav .sub-menu { display: none; padding: 0 0 0.5rem 1rem; }
.mobile-nav .sub-menu.is-open { display: block; }
.mobile-nav .sub-menu a { padding: 0.6rem 0; font-weight: 400; font-size: 0.92rem; }

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .menu-toggle, .mobile-nav { display: none !important; }
  .header-cta { display: inline-flex; }
}

/* ==========================================================================
   6. RIPPLE SIGNATURE MOTIF
   ========================================================================== */
.ripple-mark { position: absolute; pointer-events: none; z-index: 0; }
.ripple-mark--moss { color: var(--color-moss); }
.ripple-mark--white { color: rgba(255,255,255,0.5); }
.ripple-divider { display: block; width: 100%; height: auto; color: var(--color-line); }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5.5rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero__copy p.lede { font-size: 1.1rem; color: var(--color-ink-soft); max-width: 36rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero__media {
  aspect-ratio: 4/3; width: 100%;
  border-radius: var(--radius-card);
  background: var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft); font-size: 0.85rem; text-align: center; padding: 1.5rem;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; }
}

/* Simple sub-page header (About, Programs, Contact, etc.) */
.page-header { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--color-line); }
.page-header h1 { margin-bottom: 0.5rem; }
.breadcrumbs { font-size: 0.8rem; color: var(--color-ink-soft); margin-bottom: 0.75rem; }
.breadcrumbs a { color: var(--color-ink-soft); }
.breadcrumbs a:hover { color: var(--color-ink); }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper-raised);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--color-ink); }
a.card:hover { transform: translateY(-2px); }
.card__media {
  aspect-ratio: 4/3;
  background: var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft); font-size: 0.75rem; text-align: center; padding: 1rem;
}
.card__body { padding: 1.4rem; }
.card__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-moss); }
.card__title { font-size: 1.1rem; margin: 0.4rem 0 0.5rem; }
.card:hover .card__title { color: var(--color-marigold-dark); }
.card__excerpt { font-size: 0.9rem; color: var(--color-ink-soft); }
.card__link { display: inline-block; margin-top: 0.75rem; font-weight: 600; font-size: 0.9rem; }

.info-box { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 1.25rem; background: var(--color-paper-raised); }
.info-box strong { display: block; color: var(--color-ink); margin-bottom: 0.35rem; }

/* Media placeholder used wherever a real photo hasn't been uploaded yet.
   Deliberately an icon + short neutral label - never invented content. */
.media-placeholder {
  aspect-ratio: 4/3;
  background: var(--color-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  color: var(--color-ink-soft);
  border-radius: inherit;
}
.media-placeholder svg { width: 2rem; height: 2rem; opacity: 0.6; }
.media-placeholder span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   9. FOCUS AREA & APPROACH CARDS (homepage)
   ========================================================================== */
.focus-card { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper-raised); padding: 1.75rem; transition: border-color 0.15s ease, transform 0.15s ease; display: block; }
.focus-card:hover { border-color: var(--color-moss); transform: translateY(-2px); }
.focus-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(63,125,88,0.12); color: var(--color-moss); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.focus-card__icon svg { width: 1.4rem; height: 1.4rem; }
.focus-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.focus-card p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

.approach-card { border-top: 3px solid var(--color-marigold); background: var(--color-paper-raised); border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 1.75rem; box-shadow: 0 1px 2px rgba(27,42,74,0.06); }
.approach-card h3 { font-size: 1.05rem; }
.approach-card p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

/* ==========================================================================
   10. OPTION / VALUE CARDS
   ========================================================================== */
.option-card { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 1.5rem; transition: border-color 0.15s ease, background-color .15s ease; display:block; }
.option-card:hover { border-color: var(--color-ink); background: var(--color-paper-raised); }
.option-card h3:hover, .option-card:hover h3 { color: var(--color-marigold-dark); }

/* ==========================================================================
   11. FORMS
   ========================================================================== */
.ursi-form { max-width: 42rem; }
.ursi-form fieldset { border: none; padding: 0; margin: 0 0 1.5rem; }
.ursi-form legend { font-weight: 600; padding: 0; margin-bottom: 0.75rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-ink); }
.form-row { margin-bottom: 1.25rem; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-row--split { grid-template-columns: 1fr; } }
.ursi-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--color-ink); }
.ursi-form .required { color: var(--color-error); }
.ursi-form input[type=text], .ursi-form input[type=email], .ursi-form input[type=tel], .ursi-form select, .ursi-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-paper-raised);
}
.ursi-form input:focus, .ursi-form select:focus, .ursi-form textarea:focus { border-color: var(--color-ink); }
.ursi-form textarea { min-height: 8rem; resize: vertical; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--color-ink-soft); }
.checkbox-row input { margin-top: 0.2rem; }
.field-error { color: var(--color-error); font-size: 0.8rem; margin-top: 0.3rem; }
.form-notice { padding: 1rem 1.25rem; border-radius: var(--radius-control); font-size: 0.9rem; margin-bottom: 1.5rem; }
.form-notice--success { background: #eaf3ee; color: var(--color-success); border: 1px solid var(--color-success); }
.form-notice--error { background: #fbeae5; color: var(--color-error); border: 1px solid var(--color-error); }
/* Honeypot spam trap - hidden from real users, visible to bots that fill every field */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   12. PROJECT STATUS PILL
   ========================================================================== */
.status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(232,163,61,0.15); color: var(--color-marigold-dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   13. PARTNER LOGOS
   ========================================================================== */
.partner-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: center; }
@media (max-width: 900px) { .partner-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .partner-logo-grid { grid-template-columns: repeat(2, 1fr); } }
.partner-logo { border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-paper-raised); display: flex; align-items: center; justify-content: center; padding: 1.25rem; height: 6rem; }
.partner-logo img { max-height: 3rem; width: auto; }

/* ==========================================================================
   14. TEAM
   ========================================================================== */
.team-card { text-align: center; }
.team-card__photo { aspect-ratio: 1; border-radius: 50%; background: var(--color-line); margin: 0 auto 1rem; max-width: 10rem; display: flex; align-items:center; justify-content:center; color:var(--color-ink-soft); }
.team-card__photo svg { width: 2rem; height: 2rem; opacity: 0.6; }
.team-card__name { font-weight: 600; }
.team-card__role { font-size: 0.85rem; color: var(--color-moss); }

/* ==========================================================================
   15. DETAIL LISTS (program / project / event meta)
   ========================================================================== */
.detail-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media (max-width: 640px) { .detail-list { grid-template-columns: 1fr; } }
.detail-list dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-moss); }
.detail-list dd { margin: 0.25rem 0 0; font-weight: 600; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-ink); color: #fff; padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.9rem; max-width: 22rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.25rem 0 0; }
.footer-social a { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); }
.footer-social a:hover { color: var(--color-marigold); }
.footer-col-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.footer-col a:hover { color: var(--color-marigold); }
.footer-col p { font-size: 0.9rem; color: rgba(255,255,255,0.85); margin: 0 0 0.6rem; }
.footer-bottom { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; color: rgba(255,255,255,0.5); }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.max-w-prose { max-width: 42rem; }
.pill { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--color-line); font-size: 0.75rem; font-weight: 600; color: var(--color-ink-soft); }
.pill:hover { background: var(--color-ink); color: #fff; }
.pill.is-active { background: var(--color-ink); color: #fff; }
.wp-pagenavi, .pagination { display: flex; gap: 0.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 0.5rem 0.9rem; border: 1px solid var(--color-line); border-radius: var(--radius-control); font-size: 0.85rem; }
.pagination .current { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* WordPress core alignment classes kept intact for editor content */
.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }