/*
Theme Name: USPAACC Advocacy Modern
Theme URI: https://uspaaccadvocacy.com/
Author: USPAACC
Author URI: https://uspaacc.com/
Description: A modern, responsive advocacy website for the U.S. Pan Asian American Chamber of Commerce Education Foundation.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: uspaacc-advocacy
*/

:root {
  --background: #f7f8fb;
  --foreground: #14213d;
  --card: #ffffff;
  --card-foreground: #14213d;
  --popover: #ffffff;
  --popover-foreground: #14213d;
  --primary: #002a7e;
  --primary-foreground: #ffffff;
  --secondary: #eaf3fb;
  --secondary-foreground: #002a7e;
  --muted: #eef1f6;
  --muted-foreground: #55627a;
  --accent: #016bb7;
  --accent-foreground: #ffffff;
  --destructive: #fc0714;
  --border: #dce2ec;
  --input: #dce2ec;
  --ring: #016bb7;
  --chart-1: #016bb7;
  --chart-2: #fc0714;
  --chart-3: #460073;
  --chart-4: #ff7800;
  --chart-5: #ffeb32;
  --radius: 0.85rem;
  --navy: #002a7e;
  --blue: #016bb7;
  --red: #fc0714;
  --purple: #460073;
  --ink: #14213d;
  --dark-purple: #210632;
  --surface: #f7f8fb;
  --line: #dce2ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, Montserrat, Gotham, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

body.admin-bar .site-header { top: 32px; }
.wp-site-blocks { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 42, 126, 0.1);
  display: grid;
  gap: 2rem;
  grid-template-columns: auto 1fr auto;
  min-height: 82px;
  padding: 0 5vw;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { align-items: center; display: flex; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.brand-word { color: var(--red); font-size: 1.45rem; }
.brand-divider { background: var(--blue); height: 25px; margin: 0 0.7rem; width: 2px; }
.brand-unit { color: var(--navy); font-size: 1rem; letter-spacing: 0.01em; }
.main-nav { display: flex; gap: clamp(1rem, 2.3vw, 2.3rem); justify-content: center; }
.main-nav a { color: #34415a; font-size: 0.88rem; font-weight: 700; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--blue); }
.header-cta, .button { align-items: center; display: inline-flex; font-weight: 750; gap: 0.55rem; justify-content: center; }
.header-cta { background: var(--navy); border-radius: 999px; color: white; font-size: 0.86rem; padding: 0.76rem 1.15rem; }

.hero { min-height: min(760px, calc(100vh - 82px)); overflow: hidden; position: relative; }
.hero > img { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.hero-overlay {
  background: linear-gradient(90deg, rgba(10, 21, 55, 0.94) 0%, rgba(10, 21, 55, 0.78) 40%, rgba(10, 21, 55, 0.24) 72%, rgba(10, 21, 55, 0.08) 100%), linear-gradient(0deg, rgba(0, 42, 126, 0.42), transparent 48%);
  inset: 0;
  position: absolute;
}
.hero::after { background: var(--red); bottom: 0; content: ""; height: 6px; left: 0; position: absolute; width: 22%; }
.hero-content { color: white; max-width: 760px; padding: clamp(7rem, 12vh, 9rem) 5vw 6rem; position: relative; z-index: 2; }
.eyebrow { color: var(--blue); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.19em; margin: 0 0 1rem; text-transform: uppercase; }
.eyebrow.light { color: #8fd2ff; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; }
h1 { font-size: clamp(3.25rem, 7.2vw, 6.6rem); margin-bottom: 1.65rem; max-width: 11ch; }
h2 { color: var(--navy); font-size: clamp(2.35rem, 4.5vw, 4.6rem); margin-bottom: 1.4rem; }
h3 { line-height: 1.25; }
.hero-copy { color: rgba(255, 255, 255, 0.88); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.55; max-width: 650px; }
.hero-actions, .closing-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }
.button { border: 1px solid transparent; border-radius: 999px; font-size: 0.93rem; min-height: 50px; padding: 0.8rem 1.45rem; }
.button.primary { background: var(--red); color: white; }
.button.secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.42); color: white; }
.button:hover, .button:focus-visible, .header-cta:hover, .header-cta:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.hero-caption { bottom: 1.6rem; color: rgba(255, 255, 255, 0.75); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; position: absolute; right: 5vw; text-transform: uppercase; z-index: 3; }

.section { margin: 0 auto; max-width: 1380px; padding: clamp(5.5rem, 10vw, 9rem) 5vw; }
.section-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 0.9fr 1.5fr; margin-bottom: 4rem; }
.section-heading .eyebrow { align-self: start; }
.section-heading h2 { margin-bottom: 0; }
.section-heading.compact { display: block; max-width: 800px; }
.section-heading.compact p:not(.eyebrow) { color: #5d687c; font-family: Georgia, "Times New Roman", serif; font-size: 1.14rem; max-width: 670px; }

.mission { background: white; max-width: none; }
.mission > * { margin-left: auto; margin-right: auto; max-width: 1240px; }
.mission-grid { display: grid; gap: clamp(3rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); }
.mission-copy { color: #47536a; column-gap: 2.2rem; columns: 2; }
.mission-copy .lead { color: var(--ink); column-span: all; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.5; margin-bottom: 2rem; }
.mission-callout { align-self: start; background: var(--dark-purple); border-radius: 1.2rem; color: white; padding: clamp(2rem, 4vw, 3.3rem); }
.mission-callout svg,
.callout-icon { color: #8fd2ff; margin-bottom: 1.6rem; }
.callout-icon { font-size: 2rem; font-weight: 800; line-height: 1; }
.mission-callout h3 { font-size: 1.45rem; margin-bottom: 1rem; }
.mission-callout p { color: rgba(255, 255, 255, 0.76); margin-bottom: 0; }

.priorities { padding-bottom: clamp(6rem, 10vw, 10rem); }
.priority-grid { background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); }
.priority-grid article { background: white; min-height: 290px; padding: 2.2rem; }
.priority-grid svg { color: var(--red); height: 30px; margin-bottom: 3.5rem; width: 30px; }
.priority-number { color: var(--red); display: block; font-size: 0.78rem; font-weight: 850; letter-spacing: 0.14em; margin-bottom: 3.5rem; }
.priority-grid h3 { color: var(--navy); font-size: 1.18rem; margin-bottom: 0.65rem; }
.priority-grid p { color: #647086; font-size: 0.94rem; margin-bottom: 0; }

.feature { background: var(--navy); display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: 1.05fr 0.95fr; max-width: none; padding-left: 0; padding-right: 5vw; }
.feature-image { min-height: 600px; }
.feature-image img { height: 100%; object-fit: cover; width: 100%; }
.feature-copy { align-self: center; color: white; max-width: 610px; }
.feature-copy h2 { color: white; }
.feature-copy > p:not(.eyebrow):not(.photo-caption) { color: rgba(255, 255, 255, 0.84); font-family: Georgia, "Times New Roman", serif; font-size: 1.24rem; }
.photo-caption { border-top: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.62); font-size: 0.78rem; line-height: 1.55; margin-top: 2rem; padding-top: 1.4rem; }

.record { max-width: 1180px; }
.record-block, .archive { border-top: 1px solid var(--line); }
.record-block { display: grid; gap: 4rem; grid-template-columns: 230px 1fr; padding: 3rem 0 5rem; }
.record-label { align-items: start; display: flex; gap: 1rem; }
.record-label > span { color: var(--red); font-size: 0.75rem; font-weight: 850; }
.record-label p { color: var(--navy); font-weight: 800; margin-bottom: 0.1rem; }
.record-label small, .archive small { color: #718098; display: block; font-size: 0.78rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { display: grid; gap: 1.4rem; grid-template-columns: 16px 1fr; padding: 0 0 2.7rem; position: relative; }
.timeline-item:not(:last-child)::before { background: var(--line); bottom: -2px; content: ""; left: 7px; position: absolute; top: 14px; width: 1px; }
.timeline-marker { background: white; border: 3px solid var(--blue); border-radius: 50%; height: 15px; margin-top: 0.35rem; position: relative; width: 15px; z-index: 1; }
.timeline-content { max-width: 750px; }
.timeline-date { color: var(--navy); font-size: 0.88rem; font-weight: 850; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.timeline-content > p:not(.timeline-date) { color: #4e5a70; margin-bottom: 0.45rem; }
.text-link { align-items: center; color: var(--blue); display: inline-flex; font-size: 0.82rem; font-weight: 800; gap: 0.3rem; }
.archive summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 2rem 0; }
.archive summary::-webkit-details-marker { display: none; }
.archive summary b { color: var(--navy); font-size: 1.08rem; }
.summary-action { color: var(--blue); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.archive[open] .summary-action::after { content: " −"; }
.archive:not([open]) .summary-action::after { content: " +"; }
.archive .timeline { margin-left: 270px; padding: 0 0 4rem; }

.closing-cta { align-items: center; background: var(--dark-purple); color: white; display: flex; gap: 3rem; justify-content: space-between; padding: clamp(4rem, 8vw, 7rem) 5vw; }
.closing-cta h2 { color: white; font-size: clamp(2.3rem, 4.3vw, 4.25rem); margin-bottom: 0; max-width: 850px; }
.closing-actions { flex: 0 0 auto; margin-top: 0; }
.button.white { background: white; color: var(--dark-purple); }
.button.outline { border-color: rgba(255, 255, 255, 0.42); color: white; }

.site-footer { background: #16031f; color: rgba(255, 255, 255, 0.72); display: grid; gap: 3rem; grid-template-columns: 1.4fr 0.7fr 0.7fr; padding: 4.5rem 5vw 2.2rem; }
.footer-brand { align-items: baseline; color: white; display: flex; font-size: 0.95rem; font-weight: 800; gap: 0.75rem; }
.site-footer a { display: block; font-size: 0.88rem; margin: 0.25rem 0; }
.site-footer a:hover, .site-footer a:focus-visible { color: white; }
.footer-label { color: white; font-size: 0.75rem; font-weight: 850; letter-spacing: 0.14em; margin-bottom: 0.8rem; text-transform: uppercase; }
.copyright { border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.72rem; grid-column: 1 / -1; margin: 1rem 0 0; padding-top: 1.5rem; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .mission-grid, .feature, .section-heading { grid-template-columns: 1fr; }
  .priority-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { padding: 0 5vw 5rem; }
  .feature-image { margin: 0 -5vw; min-height: 480px; }
  .feature-copy { max-width: 760px; }
  .record-block { gap: 2rem; grid-template-columns: 1fr; }
  .archive .timeline { margin-left: 0; }
  .closing-cta { align-items: flex-start; flex-direction: column; }
  .site-footer { grid-template-columns: 1.3fr 1fr 1fr; }
}

@media (max-width: 680px) {
  body.admin-bar .site-header { top: 46px; }
  .site-header { min-height: 70px; padding: 0 1rem; }
  .brand-word { font-size: 1.12rem; }
  .brand-divider { height: 20px; margin: 0 0.45rem; }
  .brand-unit { font-size: 0.8rem; }
  .header-cta { font-size: 0.75rem; padding: 0.65rem 0.85rem; }
  .header-cta svg { display: none; }
  .hero { min-height: 710px; }
  .hero > img { object-position: 55% center; }
  .hero-overlay { background: linear-gradient(90deg, rgba(10, 21, 55, 0.94), rgba(10, 21, 55, 0.68)); }
  .hero-content { padding: 7rem 1.2rem 5rem; }
  h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
  .hero-caption { bottom: 1rem; right: 1rem; }
  .section { padding: 5.2rem 1.2rem; }
  .mission-copy { columns: 1; }
  .priority-grid { grid-template-columns: 1fr; }
  .priority-grid article { min-height: 0; }
  .priority-grid svg { margin-bottom: 2rem; }
  .priority-number { margin-bottom: 2rem; }
  .feature { padding: 0 1.2rem 5rem; }
  .feature-image { margin: 0 -1.2rem; min-height: 360px; }
  .archive summary { gap: 1rem; }
  .closing-cta { padding: 4.5rem 1.2rem; }
  .closing-actions, .closing-actions .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; padding: 3.5rem 1.2rem 2rem; }
  .copyright { grid-column: 1; }
}

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