/*
Theme Name: ACCO South Sudan
Theme URI: https://acco-ssd.org
Author: ACCO South Sudan
Author URI: https://acco-ssd.org
Description: Custom block theme for the Anglican Communion Church Organization (ACCO) South Sudan. Brand colors sampled from the official ACCO seal. Built for accessibility (WCAG AA) and low-bandwidth performance.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acco
Tags: block-theme, full-site-editing, accessibility-ready, non-profit
*/

/* ====== Base ====== */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
  outline: 3px solid var(--wp--preset--color--acco-gold);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--wp--preset--color--acco-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ====== Header ====== */
.acco-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #ECEEF4;
}
.acco-header-row > * {
  min-width: 0;
}
.acco-header .wp-block-navigation {
  min-width: 0;
  flex-shrink: 1;
}
.acco-header .wp-block-buttons {
  flex-shrink: 0;
}
.acco-header .acco-logo-link {
  flex-shrink: 0;
}
.acco-header .wp-block-navigation a {
  font-weight: 500;
  font-size: 0.87rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.acco-header .wp-block-navigation a:hover {
  color: var(--wp--preset--color--acco-gold-dark, #8a6d14);
}
.acco-logo-link img {
  height: 92px;
  width: auto;
  display: block;
}
@media (max-width: 781px) {
  .acco-logo-link img { height: 64px; }
}

/* Buttons: shared refinement */
.wp-block-button__link {
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* Donate button (gold) */
.acco-btn-donate .wp-element-button,
.wp-element-button.acco-btn-donate,
.acco-btn-donate a {
  background-color: var(--wp--preset--color--acco-gold) !important;
  color: var(--wp--preset--color--acco-navy) !important;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(203, 162, 44, 0.35);
}
.acco-btn-donate .wp-element-button:hover,
.acco-btn-donate a:hover {
  background-color: var(--wp--preset--color--gold-light) !important;
  box-shadow: 0 4px 16px rgba(203, 162, 44, 0.45);
}

/* Outline-on-dark button */
.acco-btn-outline .wp-element-button,
.acco-btn-outline a {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
  border-radius: 8px;
}
.acco-btn-outline .wp-element-button:hover,
.acco-btn-outline a:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #fff !important;
}

/* ====== Mobile overlay menu ====== */
/* Scoped to the open overlay only — desktop dropdowns are untouched. */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 4.75rem 1.75rem 2.5rem !important;
  overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  text-align: left !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0.15rem;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
}
/* Top-level items become gold uppercase section headers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 1.1rem;
  padding: 0.2rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
  margin-top: 0;
}
/* Child links: indented, white, behind a gold rail */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: 0.9rem;
  margin-left: 0.15rem;
  border-left: 2px solid rgba(203, 162, 44, 0.45);
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.95rem;
  margin-top: 0;
  padding: 0.32rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--gold-light);
}

/* ====== Hero ====== */
.acco-hero {
  position: relative;
}
.acco-hero h1 {
  text-shadow: 0 2px 18px rgba(10, 16, 40, 0.45);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.acco-hero p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.94;
}

/* ====== Stats band ====== */
.acco-stat-number {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--acco-gold);
  line-height: 1.1;
}
.acco-stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}
/* hairline dividers between stat columns on desktop */
@media (min-width: 782px) {
  .acco-stat-number { border-left: 1px solid rgba(255, 255, 255, 0.16); }
  .wp-block-column:first-child > .acco-stat-number { border-left: none; }
}

/* ====== Cards ====== */
.acco-card {
  background: #fff;
  border: 1px solid #ECEEF4;
  border-radius: 12px;
  padding: 1.6rem;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  height: 100%;
  box-shadow: 0 1px 2px rgba(20, 30, 70, 0.04);
}
.acco-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--acco-gold);
  margin-bottom: 0.9rem;
}
.acco-card:hover {
  box-shadow: 0 14px 32px rgba(20, 30, 70, 0.12);
  transform: translateY(-4px);
  border-color: #DEE2EE;
}
.acco-card h3 {
  margin-top: 0;
  font-size: 1.12rem;
  line-height: 1.3;
}
.acco-card h3 a {
  text-decoration: none;
  color: var(--wp--preset--color--acco-blue);
}
.acco-card h3 a:hover { color: var(--wp--preset--color--acco-gold-dark, #8a6d14); text-decoration: underline; }

/* Person card (leadership) */
.acco-person-card {
  background: #fff;
  border: 1px solid #ECEEF4;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 1px 2px rgba(20, 30, 70, 0.04);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.acco-person-card:hover {
  box-shadow: 0 14px 32px rgba(20, 30, 70, 0.12);
  transform: translateY(-3px);
}
.acco-person-card .acco-person-photo {
  aspect-ratio: 1 / 1;
  background: var(--wp--preset--color--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--mid-grey);
  font-size: 0.9rem;
}
.acco-person-card .acco-person-body { padding: 1.25rem; }
.acco-person-role {
  color: var(--wp--preset--color--acco-gold-dark, #8a6d14);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ====== Verse pull-quote ====== */
.acco-verse {
  border-left: 3px solid var(--wp--preset--color--acco-gold);
  background: var(--wp--preset--color--off-white);
  border-radius: 0 12px 12px 0;
  padding: 1.4rem 1.9rem;
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--acco-navy);
}

/* ====== Safeguarding red box ====== */
.acco-alert-box {
  border: 2px solid var(--wp--preset--color--crest-red);
  border-left-width: 8px;
  background: #fdf3f3;
  border-radius: 8px;
  padding: 1.5rem;
}
.acco-alert-box h3, .acco-alert-box h2 {
  color: var(--wp--preset--color--crest-red-dark);
  margin-top: 0;
}

/* ====== Footer ====== */
.acco-footer {
  background: var(--wp--preset--color--acco-navy);
  color: #fff;
}
.acco-footer a { color: #dfe4f5; text-decoration: none; }
.acco-footer a:hover { color: var(--wp--preset--color--gold-light); text-decoration: underline; }
.acco-footer h4 {
  color: var(--wp--preset--color--acco-gold);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.acco-footer li {
  margin-bottom: 0.15rem;
}
.acco-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  color: #c9cfe6;
}

/* ====== Tables (mandate, PSEA, legal status) ====== */
.wp-block-table.acco-table table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table.acco-table th {
  background: var(--wp--preset--color--acco-blue);
  color: #fff;
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wp-block-table.acco-table td {
  border: 1px solid #ECEEF4;
  padding: 0.75rem 1rem;
  vertical-align: top;
  font-size: 0.95rem;
}
.wp-block-table.acco-table tr:nth-child(even) td {
  background: var(--wp--preset--color--off-white);
}

/* ====== Photos ====== */
.acco-photo img {
  width: 100%;
  height: auto;
}
.acco-photo figcaption {
  color: var(--wp--preset--color--mid-grey);
  font-size: 0.78rem;
  text-align: right;
  margin-top: 0.35rem;
}

/* ====== Horizontal photo gallery (scrolls sideways) ====== */
.acco-hscroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.acco-hscroll > figure,
.acco-hscroll > .wp-block-image {
  flex: 0 0 auto;
  width: min(320px, 78vw);
  margin: 0;
  scroll-snap-align: start;
}
.acco-hscroll img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.acco-hscroll figcaption {
  color: var(--wp--preset--color--mid-grey);
  font-size: 0.78rem;
  margin-top: 0.3rem;
  text-align: left;
}
/* slim gold scrollbar */
.acco-hscroll::-webkit-scrollbar { height: 8px; }
.acco-hscroll::-webkit-scrollbar-track { background: var(--wp--preset--color--off-white); border-radius: 4px; }
.acco-hscroll::-webkit-scrollbar-thumb { background: var(--wp--preset--color--acco-gold); border-radius: 4px; }
.acco-hscroll { scrollbar-color: var(--wp--preset--color--acco-gold) var(--wp--preset--color--off-white); scrollbar-width: thin; }

/* ====== Operational footprint map + state pills ====== */
.acco-map svg,
.acco-map img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 860px;
  margin: 0 auto;
}
.acco-state-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 1.5rem 0 0.5rem;
}
.acco-state-pill {
  background: #DCE6FA;
  color: var(--wp--preset--color--acco-blue);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ====== Misc ====== */
.acco-section-eyebrow {
  color: var(--wp--preset--color--acco-gold-dark, #8a6d14);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.acco-divider-gold {
  background: var(--wp--preset--color--acco-gold) !important;
  height: 4px !important;
  width: 72px;
  border: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .acco-card, .acco-card:hover { transition: none; transform: none; }
}

/* ECSS affiliation lockup */
.acco-affiliation {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.acco-affiliation img {
  height: 80px;
  width: auto;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
}
.acco-affiliation span {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #dfe4f5;
}
.acco-affiliation strong {
  color: var(--wp--preset--color--gold-light);
}