/*
Theme Name: DCPC
Theme URI: https://dmvphilosophy.com/
Author: DC Philosophy Consortium
Description: Theme for the DC Philosophy Consortium. Two blues on the logo's near-white ground, Playfair Display and Montserrat, and a Metro-line motif. Page layouts are offered as patterns when you create a new page.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.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: dcpc
*/

/* Tokens (match theme.json palette) */
:root {
	--ground: #FEFEFC;
	--navy: #061D4D;
	--royal: #0B43A8;
	--bright: #3473DA;
	--panel: #EEF2F8;
	--tint: #DDE7F6;
	--ink: #0F1B33;
	--muted: #586174;
	--on-navy-accent: #7DA5E8;
	--on-navy-muted: #C3D2EA;
	--on-navy: #FEFEFC;
	--rule: #D5DCE8;
	--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--body: Montserrat, Arial, "Helvetica Neue", sans-serif;
	--step-1: 1.1875rem;
	--step-2: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	--step-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	--step-4: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--measure: 64ch;
	--section-y: clamp(3.5rem, 8vw, 6rem);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
a:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* Top-level page sections sit flush; each section sets its own spacing */
.site-main { padding-top: 0; padding-bottom: 0; }
.site-main > .wp-block-post-content > *,
.site-main > * { margin-block-start: 0; margin-block-end: 0; }

/* ---------- Menu bar ---------- */
.site-header-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.site-nav { background: var(--ground); border-bottom: 1px solid var(--rule); }
.site-nav .nav-row { padding-block: 0.6rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--navy); min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand span { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.main-nav { gap: clamp(1rem, 2.4vw, 2rem); font-size: 0.9375rem; font-weight: 500; }
.main-nav .wp-block-navigation-item__content { position: relative; padding-block: 0.6rem; color: var(--navy); text-decoration: none; white-space: nowrap; }
.main-nav .wp-block-navigation-item__content:hover { color: var(--royal); }
.main-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--royal); font-weight: 600; }
.main-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 50%; bottom: -0.15rem; width: 9px; height: 9px; margin-left: -4.5px;
	border-radius: 50%; border: 2.5px solid var(--bright); background: var(--ground); box-sizing: border-box;
}
.main-nav .nav-cta > .wp-block-navigation-item__content {
	background: var(--navy); color: var(--on-navy); padding: 0.55rem 1.15rem; border-radius: 999px; font-weight: 600;
}
.main-nav .nav-cta > .wp-block-navigation-item__content:hover { background: var(--royal); color: var(--on-navy); }
.main-nav .nav-cta.current-menu-item > .wp-block-navigation-item__content { color: var(--on-navy); }
.main-nav .nav-cta.current-menu-item > .wp-block-navigation-item__content::after { display: none; }
/* Phone menu (WordPress's overlay) */
.main-nav .wp-block-navigation__responsive-container-open { color: var(--navy); }
.main-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ground); color: var(--navy); padding: 1.25rem max(20px, env(safe-area-inset-left, 0px)); }
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; }
.main-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; align-items: stretch !important; width: 100%; }
.main-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.main-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.9rem 0 !important; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
.main-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after { left: auto; right: 0.25rem; bottom: auto; top: 50%; margin: -4.5px 0 0; }
.main-nav .is-menu-open .nav-cta > .wp-block-navigation-item__content { margin-top: 1rem; text-align: center; border-bottom: 0; padding: 0.9rem 1rem !important; }
@media (max-width: 900px) and (min-width: 600px) { .main-nav { gap: 0.9rem; font-size: 0.875rem; } .brand span { display: none; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--muted); }
.site-footer .footer-row { padding-block: 2rem 2.5rem; gap: 1rem 2rem; align-items: center; }
.footer-id { display: flex; align-items: center; gap: 1rem; }
.footer-id img { width: 64px; height: 64px; }
.footer-id strong { display: block; color: var(--navy); font-weight: 600; font-size: 0.9375rem; }
.site-footer p { margin: 0; }

/* ---------- Shared pieces ---------- */
.eyebrow {
	display: flex; align-items: center; gap: 0.7rem;
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal);
}
.eyebrow::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--bright); background: var(--ground); flex: none; box-sizing: border-box; }
.lede { color: var(--muted); font-size: var(--step-1); max-width: var(--measure); }
.note { color: var(--muted); font-size: 0.9375rem; max-width: var(--measure); }

.wp-block-buttons { gap: 0.875rem; }
.wp-block-button__link { display: inline-flex; align-items: center; transition: background-color .15s ease, color .15s ease; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: 0.8rem 1.5rem; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--panel); color: var(--navy); border-color: var(--navy); }

.dcpc-section { padding-block: var(--section-y); }
.dcpc-section + .dcpc-section { border-top: 1px solid var(--rule); }
.dcpc-section > .wp-block-heading { margin-block-start: 1rem; }
.dcpc-section > .wp-block-columns, .dcpc-section > .formats { margin-block-start: clamp(2rem, 4vw, 3rem); }
.dcpc-intro { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem); }
.dcpc-intro h1 { max-width: 22ch; }
.dcpc-section > * { margin-left: 0 !important; margin-right: auto !important; }

/* ---------- Home ---------- */
.dcpc-hero { text-align: center; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.dcpc-hero > * { margin-left: auto !important; margin-right: auto !important; }
.dcpc-hero .hero-logo { max-width: 960px; margin-block: 0; }
.dcpc-hero .hero-logo img { width: 100%; }
.dcpc-hero .tagline { font-family: var(--display); font-size: clamp(1.25rem, 0.55rem + 2.5vw, 2.125rem); color: var(--navy); line-height: 1.15; margin-top: clamp(0.5rem, 2vw, 1.25rem); }
.dcpc-hero .tagline strong { font-weight: 700; }
.dcpc-hero .lede { max-width: 62ch; }
.dcpc-hero .lede + .lede { margin-top: 0.6rem; }
.dcpc-hero .members-title { font-size: var(--step-2); margin-top: clamp(2rem, 4vw, 2.75rem); }
.dcpc-hero .members-sub { color: var(--muted); font-size: 0.9375rem; margin-top: 0.25rem; }
.members { gap: 1rem clamp(1.5rem, 4vw, 3.5rem); margin-top: 1rem !important; }
.member { gap: 0.4rem; min-width: 11rem; padding: 0.5rem; border-radius: 8px; align-items: center; }
.member:hover { background: var(--panel); }
.member .member-logo { margin: 0; }
.member .member-logo img { height: 64px; width: auto; }
.member-name { margin: 0; font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.member-name a { color: var(--royal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.member-name a::after { content: " \2197"; display: inline-block; margin-left: 0.15em; text-decoration: none; }
.member:hover .member-name a { color: var(--navy); text-decoration-thickness: 2px; }

.dcpc-banner { background: var(--navy); margin-top: clamp(0.5rem, 2vw, 1rem); padding-block: clamp(1.25rem, 3vw, 2rem); }
.dcpc-banner h2 { color: var(--on-navy); font-size: var(--step-3); margin: 0; }

.dcpc-involved { padding-block: clamp(1rem, 2vw, 1.5rem) var(--section-y); }
.involved-cols { gap: clamp(2rem, 5vw, 4rem); }
.involved-text { color: var(--muted); font-size: var(--step-1); max-width: var(--measure); }
.involved-text strong { color: var(--navy); font-weight: 600; }
.involved-text.chairs { color: var(--ink); margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.contact-card { background: var(--panel); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2rem); }
.contact-card > * { margin: 0; }
.contact-card > * + * { margin-top: 0.35rem; }
.card-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); margin-bottom: 0.5rem !important; }
.card-name { font-family: var(--display); font-size: var(--step-2); color: var(--navy); }
.card-role { color: var(--muted); }
.card-email { margin-top: 0.75rem !important; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- About ---------- */
.trio { gap: clamp(1.5rem, 3vw, 2.5rem); }
.trio > .wp-block-column { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.trio > .wp-block-column > * + * { margin-top: 0.5rem; }
.isnot { gap: clamp(1.25rem, 3vw, 2.5rem); }
.isnot .is-panel { background: var(--panel); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.isnot .is-not { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.isnot .list-title { font-family: var(--body); font-size: var(--step-1); font-weight: 600; letter-spacing: 0.02em; }
.isnot .is-not .list-title { color: var(--muted); }
ul.dots, ul.rings { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0.9rem; }
ul.dots li, ul.rings li { position: relative; padding-left: 1.6rem; }
ul.dots li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--bright); }
ul.rings li { color: var(--muted); }
ul.rings li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); opacity: 0.6; box-sizing: border-box; }

/* ---------- Events: the Metro line ---------- */
.metro-line { position: relative; gap: 0 !important; }
.metro-line::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 3px; background: var(--bright); }
.metro-line .stop { position: relative; padding-top: 3rem; padding-right: clamp(1rem, 3vw, 2.5rem); }
.metro-line .stop::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ground); border: 6px solid var(--navy); box-sizing: border-box; }
.metro-line .stop:first-child::before { box-shadow: 0 0 0 4px var(--ground), 0 0 0 7px var(--bright); }
.metro-line .stop > * { margin: 0; }
.metro-line .stop > * + * { margin-top: 0.6rem; }
.metro-line .when { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); }
.metro-line .meta { font-size: 0.8125rem; color: var(--muted); margin-top: 1rem !important; }
.tag { display: inline-block; margin-right: 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--tint); color: var(--navy); padding: 0.3rem 0.7rem; border-radius: 999px; }
.dcpc-section > .note { margin-top: clamp(2rem, 4vw, 3rem); }
.formats { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.format-card { background: var(--panel); border-radius: 6px; padding: 1.5rem; }
.format-card > * { margin: 0; }
.format-card > * + * { margin-top: 0.4rem; }
.format-card h3 { font-size: var(--step-1); }

/* ---------- Participating Institutions: navy band ---------- */
.dcpc-band { background: var(--navy); color: var(--on-navy-muted); padding-block: var(--section-y); }
.dcpc-band .eyebrow { color: var(--on-navy-accent); }
.dcpc-band .eyebrow::before { border-color: var(--on-navy-accent); background: var(--navy); }
.dcpc-band h2, .dcpc-band h3 { color: var(--on-navy); }
.asks { counter-reset: ask; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem) !important; }
.asks > .wp-block-column { counter-increment: ask; border-top: 1px solid rgba(195, 210, 234, 0.35); padding-top: 1.25rem; }
.asks > .wp-block-column::before { content: counter(ask); display: block; font-family: var(--display); font-size: 2.75rem; line-height: 1; color: var(--on-navy-accent); margin-bottom: 0.9rem; }
.asks h3 { font-size: var(--step-2); }
.asks > .wp-block-column > * + * { margin-top: 0.5rem; }
.extras { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; gap: 0.75rem 2.5rem; }
.nodues { font-family: var(--display); font-size: var(--step-3); color: var(--on-navy); margin: 0; }
.extras-text { max-width: 58ch; margin: 0; }

/* ---------- Survey ---------- */
.survey-frame { background: var(--panel); border-radius: 8px; padding: clamp(0.5rem, 2vw, 1.25rem); margin-top: 1.75rem; }
.survey-frame iframe { display: block; width: 100%; max-width: 760px; height: 2900px; margin: 0 auto; border: 0; background: var(--ground); }

/* ---------- Posts (news, later) ---------- */
.dcpc-posts { padding-block: var(--section-y); }

@media (max-width: 781px) {
	.formats { grid-template-columns: 1fr !important; }
	.involved-text.chairs { margin-top: 2rem; }
	.metro-line::before { left: 13px; right: auto; top: 16px; bottom: 16px; width: 6px; height: auto; }
	.metro-line .stop { padding-top: 0; padding-left: 3.25rem; padding-right: 0; }
	.metro-line .stop + .stop { margin-top: 2.5rem; }
}