:root{
  --phid-purple: #540C78;
  --phid-purple-deep: #3A0855;
  --phid-ink: #1A0F22;
  --phid-gold: #CC9030;
  --phid-gold-light: #E0B15A;
  --phid-lavender: #EFE9F7;
  --font-display: 'Anton', 'Inter', sans-serif;
  --font-script: 'Permanent Marker', cursive;
  --font-body: 'Inter', -apple-system, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body, p, li, a, span { font-family: var(--font-body); }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Scroll reveal ---------- */
.phid-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.phid-reveal.phid-in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .phid-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hide default theme footer (replaced by .phid-footer) ---------- */
#colophon, .ast-small-footer, .ast-footer-overlay { display: none !important; }

/* ---------- Content galleries (Chapter Lineage, Mandated Programs) ----------
   These pages' gallery markup is hand-written (plain <figure><img></figure>
   pairs, no wp-block-image/columns-N classes), so it doesn't get WP core's
   built-in gallery column CSS — each image rendered at full container width
   and stacked vertically for thousands of pixels. Force a real grid instead
   of depending on markup that was never actually there. */
.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1em;
}
.wp-block-gallery figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(26,15,34,.08);
}
.wp-block-gallery figure img {
  width: 100%;
  height: 260px !important;
  object-fit: cover !important;
  display: block;
  transition: transform .5s var(--ease-out-expo);
}
.wp-block-gallery figure:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery figure img { transition: none; }
}

/* ---------- One-time homepage intro (see phidelta-brand.php wp_body_open) ---------- */
#phid-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--phid-purple-deep);
  perspective: 1000px;
  opacity: 1;
  transition: opacity .5s ease;
}
#phid-intro img {
  width: clamp(110px, 18vw, 200px);
  height: auto;
  opacity: 0;
  transform: scale(0.6) rotateY(25deg);
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#phid-intro.phid-intro-play img {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
}
#phid-intro.phid-intro-fade {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #phid-intro, #phid-intro img { transition: none !important; }
}

/* ---------- Header / Nav ---------- */
#masthead, .main-header-bar, .ast-above-header, .ast-below-header-bg {
  background-color: var(--phid-purple) !important;
  border: none !important;
}
.main-header-bar { padding: 0.4em 0; }
.main-header-menu a, .ast-header-navigation a, .menu-link {
  color: #F5EAD6 !important;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .15s ease;
}
.main-header-menu a:hover, .ast-header-navigation a:hover {
  color: var(--phid-gold-light) !important;
}
/* Animated underline on desktop nav links, instead of a flat color swap only. */
body:not(.ast-header-break-point) .main-header-menu a.menu-link {
  position: relative;
  padding-bottom: 3px;
}
body:not(.ast-header-break-point) .main-header-menu a.menu-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--phid-gold-light);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out-expo);
}
body:not(.ast-header-break-point) .main-header-menu a.menu-link:hover::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.ast-header-break-point) .main-header-menu a.menu-link::after { transition: none; }
}
.custom-logo { max-height: 60px; width: auto; }
.site-header .ast-container { display: flex; align-items: center; flex-wrap: wrap; }
/* Logo-only header — site title text kept in the DOM (screen readers / SEO still
   get the site name) but visually hidden, since the crest + nav already make it
   obvious whose site this is. This also removes the long title text that was
   forcing a broken one-word-per-line wrap in Astra's mobile header layout. */
.site-header .site-title {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Astra's default header grid splits logo/nav into a fixed 50/50 column pair,
   which forces a 5-item nav into a half-width box and wraps it onto two rows
   with a dropdown-style shadow/background. Give the logo column only the
   width its content needs and let nav take the rest, on one row.
   Scoped to `body:not(.ast-header-break-point)` (Astra's own JS-toggled class for
   "not in mobile header mode") — `.main-header-menu` is the same element/class used
   for both the desktop row and the mobile dropdown, so unscoped rules here previously
   broke the mobile stacked-list layout too. */
.main-header-bar .ast-container { max-width: 1400px; }
body:not(.ast-header-break-point) .main-header-bar .ast-builder-grid-row-has-sides.ast-builder-grid-row-no-center {
  grid-template-columns: auto 1fr !important;
  align-items: center;
  /* Without an explicit width, this grid row shrinks to fit its own content
     instead of filling `.ast-container` — which left the `1fr` nav column
     computing against that shrunk row instead of the real available width. */
  width: 100%;
}
body:not(.ast-header-break-point) .site-header-primary-section-left { width: auto !important; max-width: 460px; }
/* Right column must fill the grid's `1fr` track (not shrink to its content) —
   otherwise `justify-content: flex-end` on the nav below has no extra space
   to push against and the nav just hugs the logo instead of the right edge. */
body:not(.ast-header-break-point) .site-header-primary-section-right { width: 100%; }

/* Mobile-only: float the crest dead-center over the header bar (inspired by
   themotherpearl.org), leaving the hamburger toggle where it already is on
   the right. Desktop keeps the logo inline at the left — user preferred the
   existing desktop nav layout as-is. */
body.ast-header-break-point .main-header-bar .ast-builder-grid-row-has-sides {
  position: relative;
  /* Taking the logo out of flow below (position:absolute) would otherwise let
     this row's `auto`-sized first column collapse to 0 width, dragging the
     hamburger-toggle column (and the toggle itself) left into the same spot
     as the now-centered logo. Lock both columns so removing the logo from
     flow can't reshuffle anything else. */
  grid-template-columns: 50% 50% !important;
}
body.ast-header-break-point .site-header-primary-section-left {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* With the logo above taken out of grid flow entirely, the toggle's section
   becomes the *only* remaining grid item and gets auto-placed into column 1
   (source order), not 2 — which put the hamburger back near center instead
   of the right edge. Pin it to column 2 explicitly. */
body.ast-header-break-point .site-header-primary-section-right {
  grid-column: 2;
}

body:not(.ast-header-break-point) .main-header-menu {
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  width: 100%;
  justify-content: flex-end;
  column-gap: 2em;
}

/* Mobile menu toggle + dropdown panel — Astra's classes vary by version, so target broadly */
.ast-mobile-menu-trigger-minimal .astra-icon,
.ast-mobile-menu-buttons svg,
.ast-button-wrap svg,
.menu-toggle-icon,
button.menu-toggle {
  color: #F5EAD6 !important;
  fill: #F5EAD6 !important;
}
/* The global `svg { max-width:100%; height:auto }` reset (for content images) lets this
   icon collapse to 0 width when its flex ancestors are tight, e.g. on narrow viewports
   after the header was given content-based (not fixed) column widths. Pin its size. */
button.menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}
.ast-mobile-popup-drawer, .ast-mobile-header-wrap, #ast-mobile-header-wrap {
  background-color: var(--phid-purple) !important;
}
.ast-mobile-popup-drawer .main-header-menu a,
.ast-mobile-header-wrap .main-header-menu a {
  color: #F5EAD6 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ---------- Full-bleed breakout ----------
   Astra's content column is boxed (max-width:1200px) even though it doesn't show on
   viewports narrower than that. Sections that should span true edge-to-edge on any
   screen size (hero, page header bands) need to break out of that box explicitly.
   `!important` is required here: Astra's own dynamic CSS includes
   `.entry-content[data-ast-blocks-layout] > * { max-width: ...; margin-left: auto }`,
   a class+attribute selector with higher specificity than a single class, which
   silently wins over this rule (and re-boxes the "full-bleed" element) without it. */
.phid-full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---------- Page header (non-Home pages) ---------- */
.phid-page-header {
  background: linear-gradient(155deg, var(--phid-purple) 0%, var(--phid-ink) 115%);
  color: #fff;
  text-align: center;
  padding: clamp(4em, 11vw, 6.5em) 1.5em clamp(3em, 8vw, 5em);
}
.phid-page-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .85em;
  color: var(--phid-gold-light);
  margin: 0 0 .9em;
}
.phid-page-title {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(2.2em, 6vw, 3.6em);
  line-height: 1.05;
  margin: 0;
}

/* ---------- Page header photo slideshow variant (Lineage) ----------
   Same `.phid-page-header` band, but with a crossfading photo slideshow behind
   the title instead of a flat gradient. Cycling is handled by a small script
   in phidelta-brand.php (wp_footer) that toggles `.is-active` between
   `.phid-header-slide`s every ~4.5s; it no-ops entirely under
   prefers-reduced-motion, leaving just the first photo showing, static. */
.phid-page-header-slideshow {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 46vw, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
}
.phid-header-slides { position: absolute; inset: 0; }
.phid-header-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default: centered. This band is wider/shorter than the source photos, so
     cover has to crop top and bottom to fill it — centered works fine for
     Lineage's slideshow (group photos with the subject roughly centered).
     History's single reunion photo needed a top bias instead (see override
     below) since centering cropped into people's heads there. */
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.phid-header-slide.is-active { opacity: 1; }
/* History (page-id-6): its single reunion photo needs a top-anchored crop —
   centered cropped into people's heads, since that photo has less headroom
   than Lineage's slides. Scoped by WP's page-id body class rather than
   changing the shared `.phid-header-slide` default (which Lineage relies on). */
body.page-id-6 .phid-header-slide { object-position: center top; }
/* Officers page (page-id-88), live site only: at some point this page got
   switched into Elementor's page-builder rendering mode (wraps post_content
   in a "Text Editor" widget inside Elementor's own flex container), which
   none of the other pages use. That wrapper's .e-con-inner adds 10px of
   padding above/below the content, leaving a visible white gap between the
   site header and .phid-page-header's full-bleed purple band. Zeroed here
   rather than reverting the page out of Elementor mode, to avoid touching
   the live page's editor state. */
body.page-id-88 .e-con-inner { padding: 0 !important; }
.phid-page-header-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(84,12,120,.82) 0%, rgba(26,15,34,.88) 100%);
}
.phid-page-header-slideshow .phid-page-title,
.phid-page-header-slideshow .phid-page-eyebrow {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .phid-header-slide { transition: none; }
}

/* ---------- Program / info card grid (Mandated Programs) ---------- */
.phid-programs-intro {
  max-width: 1200px;
  margin: 3.5em auto 0;
  padding: 0 1.5em;
  text-align: center;
}
.phid-programs-intro > p { color: #334155; font-size: 1.1em; line-height: 1.75; margin: 0; }
/* The four gallery photos previously sat raw under the header with no intro
   copy and no width constraint of their own — inheriting whatever the theme's
   default content width happened to be instead of matching the 1200px the
   card grid below uses, and with no text explaining why they're there. Wrap
   them in the same width/padding as the rest of the page so they align, and
   let .phid-programs-intro's copy give them a reason to exist right there. */
.phid-programs-gallery {
  max-width: 1200px;
  margin: 2em auto 0;
  padding: 0 1.5em;
}
.phid-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5em;
  max-width: 1200px;
  margin: 2.5em auto 4em;
  padding: 0 1.5em;
}
.phid-program-card {
  background: #fff;
  border: 1px solid rgba(26,15,34,.07);
  border-radius: 16px;
  padding: 1.75em 1.75em 1.5em;
  box-shadow: 0 1px 3px rgba(26,15,34,.05);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.phid-program-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px rgba(26,15,34,.1); }
.phid-program-index {
  font-family: var(--font-display);
  color: var(--phid-gold);
  font-size: 1.3em;
  letter-spacing: .02em;
  display: block;
  margin-bottom: .4em;
}
.phid-program-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--phid-purple);
  font-size: 1.05em;
  margin: 0 0 .5em;
  line-height: 1.3;
}
.phid-program-card p {
  color: #475569;
  font-size: .92em;
  line-height: 1.6;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .phid-program-card { transition: none; }
}

/* ---------- Readable content wrapper (History prose, build notes) ---------- */
.phid-content {
  max-width: 760px;
  margin: 3.5em auto;
  padding: 0 1.5em;
}
.phid-content h2 {
  font-family: var(--font-display);
  color: var(--phid-purple);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.5em, 3vw, 2em);
  line-height: 1.1;
  margin: 0 0 .6em;
}
.phid-content p { color: #334155; font-size: 1.05em; line-height: 1.75; margin: 0 0 1.5em; }
.phid-content figure { margin: 2.5em 0 0; }
.phid-content img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(26,15,34,.12);
  display: block;
}
.phid-build-note {
  max-width: 900px;
  margin: 2em auto 4em;
  padding: 0 1.5em;
  color: #64748b;
  font-size: .85em;
  line-height: 1.6;
}

/* ---------- Founders grid ---------- */
.phid-founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75em;
  max-width: 1200px;
  margin: 3em auto 4em;
  padding: 0 1.5em;
}
.phid-founder-card {
  background: #fff;
  border: 1px solid rgba(26,15,34,.07);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(26,15,34,.05);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.phid-founder-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px rgba(26,15,34,.1); }
.phid-founder-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
.phid-founder-body { padding: 1.5em 1.5em 1.75em; }
.phid-founder-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--phid-purple);
  font-size: 1.05em;
  margin: 0 0 .9em;
  line-height: 1.3;
}
.phid-founder-card ul { list-style: none; margin: 0; padding: 0; }
.phid-founder-card li {
  color: #475569;
  font-size: .88em;
  line-height: 1.55;
  padding: .5em 0;
  border-top: 1px solid rgba(26,15,34,.06);
}
.phid-founder-card li:first-child { border-top: none; padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .phid-founder-card { transition: none; }
}

/* ---------- Officers ---------- */
/* Plain intro line under a plain header (no photo anywhere on this page —
   every officer, including Basileus and Vice Basileus, is just a card in the
   grid below; rank is shown by listing order only). Matches the plain
   intro-paragraph pattern already used on Mandated Programs. */
.phid-officers-intro {
  max-width: 700px;
  margin: 3em auto 0;
  padding: 0 1.5em;
  text-align: center;
}
.phid-officers-intro > p { color: #334155; font-size: 1.1em; line-height: 1.75; margin: 0; }

.phid-officers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  max-width: 1000px;
  margin: 3em auto 3em;
  padding: 0 1.5em;
}
@media (max-width: 900px) {
  .phid-officers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .phid-officers-grid { grid-template-columns: 1fr; }
}
/* Same card for every officer, everyone in one grid. Two outline colors mark
   the two exceptions: gold for Basileus/Vice Basileus (the chapter's actual
   top two, .phid-officer-card--lead) and purple for Ronald Anderson
   (.phid-officer-card--external) — a different, separately-elected role at
   another chapter, not a rank within this one, so it gets the brand's other
   accent color rather than gold. Everyone else stays plain. */
.phid-officer-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(26,15,34,.08);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.phid-officer-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(26,15,34,.12); }
.phid-officer-card--lead {
  border: 3px solid var(--phid-gold);
  box-shadow: 0 4px 16px rgba(204,144,48,.22);
}
.phid-officer-card--external {
  border: 3px solid var(--phid-purple);
  box-shadow: 0 4px 16px rgba(84,12,120,.18);
}
.phid-officer-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom: 3px solid var(--phid-gold);
}
.phid-officer-card--lead img,
.phid-officer-card--external img { border-bottom: none; }
.phid-officer-card-body { padding: 1.1em 1.25em 1.4em; }
.phid-officer-card h3 {
  font-family: var(--font-display);
  color: var(--phid-purple);
  text-transform: uppercase;
  font-size: 1.15em;
  margin: 0 0 .35em;
  line-height: 1.15;
}
.phid-officer-position {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--phid-gold);
  font-size: .72em;
  margin: 0 0 .5em;
}
.phid-officer-term { color: #64748b; font-size: .85em; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .phid-officer-card { transition: none; }
}

/* ---------- Lineage list ---------- */
.phid-lineage-list {
  list-style: none;
  margin: 2.5em auto 0;
  padding: 0 1.5em;
  max-width: 900px;
}
.phid-lineage-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1em;
  padding: 1em 0;
  border-bottom: 1px solid rgba(26,15,34,.08);
}
.phid-lineage-badge {
  font-family: var(--font-display);
  color: var(--phid-gold);
  font-size: 1.05em;
  flex-shrink: 0;
  min-width: 3em;
}
.phid-lineage-list li:first-child .phid-lineage-badge { color: var(--phid-purple); }
.phid-lineage-name { color: var(--phid-purple); font-weight: 600; }
.phid-lineage-current {
  display: inline-block;
  background: var(--phid-purple);
  color: #fff;
  font-size: .68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25em .6em;
  border-radius: 4px;
  margin-left: .75em;
  vertical-align: middle;
}

/* ---------- Contact ---------- */
.phid-contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2em;
  max-width: 1100px;
  margin: 3em auto 2.5em;
  padding: 0 1.5em;
}
.phid-contact-card {
  background: #fff;
  border: 1px solid rgba(26,15,34,.07);
  border-radius: 18px;
  padding: 2em;
  box-shadow: 0 1px 3px rgba(26,15,34,.05);
}
.phid-contact-card h2 {
  font-family: var(--font-display);
  color: var(--phid-purple);
  text-transform: uppercase;
  font-size: 1.3em;
  margin: 0 0 .9em;
}
.phid-contact-card a { color: var(--phid-purple); font-weight: 600; }
.phid-form-placeholder {
  background: var(--phid-lavender);
  border-radius: 12px;
  padding: 1.5em;
  color: #64748b;
  font-size: .9em;
  line-height: 1.6;
}
.phid-contact-info-row { margin-bottom: 1.25em; }
.phid-contact-info-row:last-child { margin-bottom: 0; }
.phid-contact-info-row p { color: #334155; margin: 0; line-height: 1.6; }
.phid-contact-info-label {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72em;
  color: var(--phid-gold);
  display: block;
  margin-bottom: .35em;
}
@media (max-width: 700px) {
  .phid-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- WPForms — "Get Connected" form ----------
   WPForms' own "modern" theme ships generic default styling (its CSS custom
   properties set a plain black/grey palette regardless of site theme). These
   rules bring it into the phid-* system so it reads as part of the contact
   card, not a plugin embed. */
/* WPForms' own stylesheet loads after this file but includes selectors like
   `div.wpforms-container-full .wpforms-field-label` and
   `div.wpforms-container-full button[type="submit"]` — the extra `div`/`[type]`
   component edges out our plain two-class selectors at equal specificity, the
   same "one more selector component wins regardless of source order" pattern
   already hit with Astra elsewhere in this file. !important settles it. */
.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
  font-family: var(--font-body);
  font-weight: 600 !important;
  color: var(--phid-purple) !important;
  font-size: .95em;
  margin-bottom: .5em;
}
.wpforms-container .wpforms-field-sublabel {
  font-family: var(--font-body);
  font-weight: 500;
  color: #64748b !important;
  font-size: .78em;
}
.wpforms-container .wpforms-required-label { color: var(--phid-gold) !important; }
.wpforms-container .wpforms-field { margin-bottom: 1.4em; }
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea {
  font-family: var(--font-body);
  width: 100%;
  border: 1px solid rgba(26,15,34,.16) !important;
  border-radius: 12px !important;
  padding: .85em 1em !important;
  font-size: .98em;
  color: var(--phid-ink) !important;
  background: #fff !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpforms-container textarea { min-height: 140px; resize: vertical; }
.wpforms-container input:focus,
.wpforms-container textarea:focus {
  outline: none;
  border-color: var(--phid-gold) !important;
  box-shadow: 0 0 0 3px rgba(204,144,48,.18);
}
.wpforms-container .wpforms-submit-container { margin-top: .5em; }
.wpforms-container button.wpforms-submit,
.wpforms-container button.wpforms-submit[type="submit"] {
  font-family: var(--font-body);
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82em !important;
  background: var(--phid-purple) !important;
  color: #fff !important;
  border: none !important;
  padding: .95em 2.2em !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.wpforms-container button.wpforms-submit:not(:hover):not(:active),
.wpforms-container button.wpforms-submit[type="submit"]:not(:hover):not(:active) {
  background: var(--phid-purple) !important;
  color: #fff !important;
}
.wpforms-container button.wpforms-submit:hover {
  background: var(--phid-purple-deep) !important;
  transform: translateY(-1px);
}
.wpforms-container label.wpforms-error,
.wpforms-container .wpforms-error {
  color: #B3261E;
  font-size: .85em;
  margin-top: .35em;
}
.wpforms-container input.wpforms-field-required.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: #B3261E; }
.wpforms-container .wpforms-confirmation-container-full {
  background: var(--phid-lavender);
  border-radius: 12px;
  padding: 1.5em;
  color: var(--phid-purple);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .wpforms-container input, .wpforms-container textarea, .wpforms-container button.wpforms-submit {
    transition: none;
  }
}

/* ---------- Hero ---------- */
/* Full-bleed photo with the headline overlaid directly on it via a bottom
   gradient scrim, instead of the photo and a separate solid-color band
   stacked on top of each other — the current pattern for editorial/premium
   photo heroes, and a better use of the actual photo. */
.phid-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 76vh, 760px);
  overflow: hidden;
  background: linear-gradient(160deg, var(--phid-purple) 0%, var(--phid-ink) 120%);
}
.phid-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* object-position: top — this hero band is much wider/shorter than the source
   photo's own aspect ratio, so object-fit:cover has to crop top and bottom to
   fill it. Centered (the default) crops evenly from both sides, which cuts
   into the group's heads; anchoring to the top keeps everyone's head fully
   in frame and crops from the bottom (steps/background) instead. */
.phid-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.phid-hero-band {
  position: relative;
  z-index: 1;
  width: 100%;
  background: linear-gradient(180deg, rgba(26,15,34,0) 0%, rgba(26,15,34,.6) 40%, rgba(26,15,34,.94) 100%);
  color: #fff;
  text-align: center;
  padding: 7em 1.5em 3em;
}
.phid-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .85em;
  color: var(--phid-gold-light);
  margin: 0 0 .8em;
}
.phid-headline-wrap { position: relative; display: inline-block; }
.phid-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4em, 6vw, 4.2em);
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
}
.phid-bolt {
  position: absolute;
  width: clamp(50px, 6vw, 90px);
  top: -10%;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  pointer-events: none;
}

/* ---------- Officers teaser (Home) ---------- */
.phid-officers-teaser {
  background: #fff;
  padding: 5.5em 1.5em;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3em;
  align-items: center;
}
.phid-officers-teaser-photo img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(26,15,34,.14);
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  object-position: center 20%;
}
.phid-officers-teaser-body .phid-section-heading { text-align: left; }
.phid-officers-teaser-body .phid-section-heading::after { margin: .55em 0 0; }
.phid-officers-teaser-body p {
  color: #334155;
  font-size: 1.05em;
  line-height: 1.7;
  margin: 0 0 1.5em;
  max-width: 46ch;
}
.phid-cta-button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82em;
  background: var(--phid-purple);
  color: #fff !important;
  text-decoration: none !important;
  padding: .9em 1.8em;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.phid-cta-button:hover { background: var(--phid-purple-deep); transform: translateY(-1px); }
@media (max-width: 900px) {
  .phid-officers-teaser { grid-template-columns: 1fr; padding: 3.5em 1.25em; gap: 2em; }
  .phid-officers-teaser-body .phid-section-heading { text-align: center; }
  .phid-officers-teaser-body .phid-section-heading::after { margin: .55em auto 0; }
  .phid-officers-teaser-body { text-align: center; }
  .phid-officers-teaser-body p { margin-left: auto; margin-right: auto; }
}

/* ---------- Achievements ---------- */
.phid-achievements { background: var(--phid-lavender); padding: 5.5em 1.5em; }
.phid-section-heading {
  font-family: var(--font-display);
  color: var(--phid-purple);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.6em, 3.2vw, 2.2em);
  margin: 0 0 .35em;
}
.phid-section-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: .55em auto 0;
  background: var(--phid-gold);
  border-radius: 2px;
}
.phid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75em;
  max-width: 1200px;
  margin: 2.5em auto 0;
}
.phid-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(26,15,34,.06);
  box-shadow: 0 1px 3px rgba(26,15,34,.05);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.phid-card:hover { transform: translateY(-6px); box-shadow: 0 20px 32px rgba(26,15,34,.14); }
.phid-card img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .5s var(--ease-out-expo); }
.phid-card:hover img { transform: scale(1.04); }
.phid-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98em;
  color: var(--phid-purple);
  margin: 0;
  padding: 1.1em 1.2em 1.3em;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  .phid-card, .phid-card img { transition: none; }
}

/* ---------- Achievement flip cards ---------- */
.phid-flip-card {
  height: 320px;
  perspective: 1200px;
}
.phid-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--ease-out-expo);
  transform-style: preserve-3d;
}
.phid-flip-card:hover .phid-flip-inner,
.phid-flip-card:focus-within .phid-flip-inner {
  transform: rotateY(180deg);
}
.phid-flip-front, .phid-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(26,15,34,.06);
  box-shadow: 0 1px 3px rgba(26,15,34,.05);
  background: #fff;
}
.phid-flip-front img { width: 100%; height: 190px; object-fit: cover; display: block; }
.phid-flip-front h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98em;
  color: var(--phid-purple);
  margin: 0;
  padding: 1.1em 1.2em 1.3em;
  line-height: 1.35;
}
.phid-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--phid-purple) 0%, var(--phid-ink) 120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75em;
  text-align: center;
}
.phid-flip-back p {
  color: #fff;
  font-size: .92em;
  line-height: 1.6;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .phid-flip-inner { transition: none; }
}
/* Hover requires a pointing device; touch devices get a tap-to-flip fallback
   via a small script (see phidelta-brand.php) that toggles this class. */
.phid-flip-card.phid-flip-tapped .phid-flip-inner { transform: rotateY(180deg); }

/* ---------- New Member Presentation ---------- */
.phid-new-members { background: var(--phid-purple); padding: 5.5em 1.5em; }
.phid-new-members .phid-section-heading { color: var(--phid-gold-light); }
.phid-masonry {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  gap: 12px;
  max-width: 1100px;
  margin: 2.5em auto 0;
}
.phid-masonry a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.phid-masonry img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out-expo);
}
.phid-masonry a:hover img { transform: scale(1.06); }
.phid-masonry a:nth-child(1) { grid-column: span 3; grid-row: span 3; }
.phid-masonry a:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.phid-masonry a:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.phid-masonry a:nth-child(4) { grid-column: span 2; grid-row: span 3; }
.phid-masonry a:nth-child(5) { grid-column: span 2; grid-row: span 2; }
@media (prefers-reduced-motion: reduce) {
  .phid-masonry img { transition: none; }
}

/* ---------- Membership Requirements ---------- */
.phid-membership { background: #fff; padding: 5.5em 1.5em; max-width: 760px; margin: 0 auto; }
.phid-membership .phid-section-heading { text-align: left; }
.phid-membership .phid-section-heading::after { margin: .55em 0 0; }
.phid-checklist { list-style: none; margin: 0; padding: 0; }
.phid-checklist li {
  color: var(--phid-purple);
  font-weight: 600;
  padding: .6em 0 .6em 2em;
  position: relative;
  border-bottom: 1px solid #eee;
}
.phid-checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: .6em;
  color: var(--phid-gold);
  font-weight: 800;
}

/* ---------- Footer ---------- */
.phid-footer { background: var(--phid-ink); color: rgba(255,255,255,.78); padding: 4.5em 1.5em 2em; margin-top: 0; }
.phid-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1fr;
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}
.phid-footer h4 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82em;
  color: var(--phid-gold-light);
  margin: 0 0 1em;
}
.phid-footer a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .2s ease; }
.phid-footer a:hover { color: var(--phid-gold-light); }
.phid-footer ul { list-style: none; margin: 0; padding: 0; }
.phid-footer ul li { margin-bottom: .5em; }
.phid-footer-form p { font-size: .92em; line-height: 1.5; margin: 0 0 1.2em; }
.phid-footer-cta {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82em;
  background: var(--phid-gold-light); color: var(--phid-ink) !important;
  padding: .8em 1.6em; border-radius: 999px; transition: background .2s ease, transform .2s ease;
}
.phid-footer-cta:hover { background: #fff; color: var(--phid-ink) !important; transform: translateY(-1px); }
.phid-form-note { font-size: .8em; opacity: .85; }
.phid-social-ig { display: inline-flex; color: rgba(255,255,255,.78); transition: color .2s ease; }
.phid-social-ig:hover { color: var(--phid-gold-light); }
.phid-footer-copy { text-align: center; opacity: .85; font-size: .85em; margin-top: 2.5em; }
.phid-footer-credit { text-align: center; opacity: .65; font-size: .78em; margin-top: .5em; }
.phid-footer-credit a { color: inherit; text-decoration: underline; }
.phid-footer-credit a:hover { opacity: .85; }

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 900px) {
  .phid-footer-inner { grid-template-columns: 1fr 1fr; }
  .phid-hero-photo { max-height: 460px; }
  /* The hero photo is a wide group shot (2400x1018) with people spread almost
     edge-to-edge and big gaps between clusters — cover-cropping it to fill a
     narrow, tall mobile frame zooms in enough that it shows only the ~1-2
     people who happen to land in the center slice, with everyone else cropped
     off. Contain shows the whole photo instead, letterboxed on .phid-hero's
     purple background above — anchored to the top (object-position already
     set that way), so it reads as "full photo, fading into the gradient/
     tagline below" rather than a gap. */
  .phid-hero-photo img { object-fit: contain; }
  .phid-hero-band { padding: 2.5em 1.25em 3em; }
  .phid-achievements, .phid-new-members, .phid-membership { padding: 3em 1.25em; }
  .phid-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25em; }
  .phid-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  .phid-masonry a:nth-child(n) { grid-column: span 1 !important; grid-row: span 2 !important; }
}

/* Phone */
@media (max-width: 560px) {
  .phid-hero-photo { max-height: 340px; }
  .phid-hero-band { padding: 2em 1em 2.5em; }
  .phid-tagline { font-size: 1em; }
  .phid-headline { font-size: clamp(1.8em, 9vw, 2.6em); }
  .phid-bolt { width: clamp(38px, 12vw, 60px); }
  .phid-section-heading { font-size: 1.5em; }
  .phid-achievements, .phid-new-members, .phid-membership { padding: 2.5em 1em; }
  .phid-grid { grid-template-columns: 1fr; }
  .phid-card img { height: 220px; }
  .phid-masonry {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 10px;
  }
  .phid-masonry a:nth-child(n) { grid-column: span 1 !important; grid-row: span 1 !important; }
  .phid-footer-inner { grid-template-columns: 1fr; text-align: center; }
  .phid-social-ig { justify-content: center; }
  .custom-logo { max-height: 40px; }
}