/* SAPOR Contact Page: same design system as the sponsor page.
   Scoped to .sapor-contact-page (and the sapor-contact-wide body class,
   which only exists on this page) so it cannot affect the rest of the site. */

.sapor-contact-page{
  --blue:#0039B8;
  --blue-deep:#00297E;
  --blue-wash:rgba(0,57,184,0.06);
  --green:#39B54A;
  --green-deep:#2C9B3D;
  --ink:#12182A;
  --ink-soft:#4B5468;
  --ink-faint:#8891A3;
  --paper:#FFFFFF;
  --paper-dim:#F2F5FC;
  --line:#E1E6F2;
  --radius:10px;

  font-family:'Poppins', -apple-system, sans-serif;
  color:var(--ink);
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  padding:20px 20px;
  position:relative;
}
.sapor-contact-page, .sapor-contact-page *{ box-sizing:border-box; }
.sapor-contact-page h1,
.sapor-contact-page h2,
.sapor-contact-page h3{ font-family:'Poppins', sans-serif; font-weight:700; color:var(--ink); }
.sapor-contact-page h2{ font-size:26px; margin:18px 0 14px; }
.sapor-contact-page h3{ font-size:19px; }
.sapor-contact-page p{ color:var(--ink-soft); line-height:1.65; }
.sapor-contact-page a{ color:var(--blue); }
.sapor-contact-page a:focus-visible,
.sapor-contact-page summary:focus-visible{ outline:3px solid var(--green); outline-offset:3px; }

/* ---------- Full width, no sidebar, white background ----------
   Applies only to this page (the sapor-contact-wide body class is added by
   the plugin). It (1) turns the page background white so a boxed theme's
   colored sides disappear, (2) removes the box's side lines, (3) hides common
   sidebars, and (4) lets the content fill the theme's content area. It does
   not resize the theme's header or menu. */
html:has(body.sapor-contact-wide),
body.sapor-contact-wide,
body.sapor-contact-wide.custom-background{ background:#fff !important; background-image:none !important; }
body.sapor-contact-wide{ overflow-x:hidden; }

/* Remove the box's side lines (shadow/borders) on every wrapper that contains
   this page, without touching the header or menu layout. */
body.sapor-contact-wide *:has(.sapor-contact-page),
body.sapor-contact-wide #page,
body.sapor-contact-wide .site,
body.sapor-contact-wide .hfeed,
body.sapor-contact-wide .boxed-layout #page,
body.sapor-contact-wide #wrapper,
body.sapor-contact-wide .wrapper,
body.sapor-contact-wide #container,
body.sapor-contact-wide .page-wrap,
body.sapor-contact-wide .site-container{
  box-shadow:none !important; border-left:0 !important; border-right:0 !important; outline:0 !important;
}
body.sapor-contact-wide #page,
body.sapor-contact-wide .site{ background:#fff !important; }

body.sapor-contact-wide #secondary,
body.sapor-contact-wide #sidebar,
body.sapor-contact-wide .sidebar,
body.sapor-contact-wide aside.widget-area,
body.sapor-contact-wide .sidebar-primary,
body.sapor-contact-wide .sidebar-secondary,
body.sapor-contact-wide #sidebar-primary,
body.sapor-contact-wide #sidebar-secondary,
body.sapor-contact-wide .site-sidebar,
body.sapor-contact-wide .primary-sidebar,
body.sapor-contact-wide .secondary-sidebar,
body.sapor-contact-wide .widget-area-sidebar,
body.sapor-contact-wide .ast-sidebar,
body.sapor-contact-wide #left-sidebar,
body.sapor-contact-wide #right-sidebar{ display:none !important; }
body.sapor-contact-wide #primary,
body.sapor-contact-wide .content-area,
body.sapor-contact-wide #content-area,
body.sapor-contact-wide .site-main,
body.sapor-contact-wide #main,
body.sapor-contact-wide .main-content,
body.sapor-contact-wide .entry-content,
body.sapor-contact-wide .post-content{
  width:100% !important; max-width:none !important; float:none !important; box-sizing:border-box !important;
  margin-left:0 !important; margin-right:0 !important; overflow:visible !important;
}

/* The content itself: fills the container, with comfortable side padding. */
body.sapor-contact-wide .sapor-contact-page,
body.sapor-contact-wide .sapor-contact-page.alignfull{
  width:100%; max-width:none; left:auto; box-sizing:border-box; margin-left:0 !important; margin-right:0 !important;
  padding-left:clamp(20px, 3vw, 48px); padding-right:clamp(20px, 3vw, 48px);
}

/* ---------- Hero ---------- */
.sapor-contact-page .sapor-hero-grid{ display:block; }
.sapor-contact-page .sapor-hero-grid > *{ margin-block-start:0 !important; }
.sapor-contact-page .sapor-hero-text > *{ margin-block-start:0; }
.sapor-contact-page .sapor-kicker{
  font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.08em;
  font-size:13px; color:var(--green-deep); margin:0 0 6px;
}
.sapor-contact-page .sapor-hero-title{
  font-size:clamp(28px,4vw,40px); line-height:1.15; letter-spacing:-0.015em; margin:0 0 14px;
}
.sapor-contact-page .sapor-lede{ font-size:17px; margin:0 0 14px; }
/* Same two-thirds / one-third split as the sponsor page. */
@media (min-width:900px){
  .sapor-contact-page .sapor-hero-grid{
    display:grid !important; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:32px; align-items:start;
  }
}

/* Mailing address box (matches the "current sponsors" box) */
.sapor-contact-page .sapor-address{
  background:var(--paper-dim); border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--radius); padding:16px 18px; margin:0 0 8px;
}
.sapor-contact-page .sapor-address{ display:block !important; }
.sapor-contact-page .sapor-address > *{ margin:0 !important; }
.sapor-contact-page .sapor-box-title{
  font-family:'Oswald', sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:0.05em; font-size:15px; color:var(--blue); margin:0 0 8px !important;
}
.sapor-contact-page .sapor-address-text{ font-size:15px; line-height:1.55; color:var(--ink); }

/* ---------- Jump links ---------- */
.sapor-contact-page .sapor-jump{ display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; margin:18px 0 8px; }
.sapor-contact-page .sapor-jump > *{ margin:0 !important; }
.sapor-contact-page .wp-block-button__link{
  display:inline-block; cursor:pointer; border-radius:999px; font-weight:600; padding:12px 26px;
  text-decoration:none; line-height:1.2;
}
.sapor-contact-page .sapor-jump-link .wp-block-button__link{
  padding:9px 18px; border-radius:var(--radius); border:2px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:14.5px;
}
.sapor-contact-page .sapor-jump-link .wp-block-button__link:hover{ border-color:var(--blue); color:var(--ink); }
.sapor-contact-page .sapor-btn-blue .wp-block-button__link{
  background:var(--blue); color:#fff; border:2px solid var(--blue); padding:10px 20px; font-size:14.5px;
}
.sapor-contact-page .sapor-btn-blue .wp-block-button__link:hover,
.sapor-contact-page .sapor-btn-blue .wp-block-button__link:focus-visible{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* ---------- Who to contact ---------- */
.sapor-contact-page .sapor-topic-grid{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap:16px; align-items:stretch;
}
.sapor-contact-page .sapor-topic-grid > *{ margin:0 !important; }
.sapor-contact-page .sapor-topic{
  background:var(--blue-wash); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; display:flex !important; flex-direction:column; gap:8px;
}
.sapor-contact-page .sapor-topic > *{ margin:0 !important; }
.sapor-contact-page .sapor-topic-title{ font-size:17px; }
.sapor-contact-page .sapor-topic p{ font-size:14.5px; flex:1 1 auto; }
.sapor-contact-page .sapor-topic .wp-block-buttons{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px !important; }

/* ---------- People ---------- */
/* Wider cards: as many columns as fit at 340px minimum (two across in a
   typical 1000px content area). */
.sapor-contact-page .sapor-people-grid{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(min(340px,100%), 1fr)); gap:20px; align-items:start;
}
.sapor-contact-page .sapor-people-grid > *{ margin:0 !important; }
/* When a bio is opened, that card takes the whole row so long bios read comfortably. */
.sapor-contact-page .sapor-person:has(details[open]){ grid-column:1 / -1; }
.sapor-contact-page .sapor-person:has(details[open]) .sapor-bio p{ max-width:80ch; }
.sapor-contact-page .sapor-person{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:block;
}
.sapor-contact-page .sapor-person > *{ margin-block-start:0 !important; }
.sapor-contact-page .sapor-avatar{ margin:0 0 14px !important; width:96px; height:96px; }
.sapor-contact-page .sapor-avatar img{
  display:block; width:96px; height:96px; object-fit:cover; border-radius:50%;
  border:3px solid var(--paper-dim); background:var(--paper-dim);
}
.sapor-contact-page .sapor-person-name{ font-size:18px; margin:0 0 2px !important; line-height:1.25; }
.sapor-contact-page .sapor-role{
  font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.04em;
  font-size:13px; color:var(--green-deep) !important; margin:0 0 8px !important; line-height:1.4;
}
.sapor-contact-page .sapor-org{ font-size:14.5px; margin:0 0 4px !important; line-height:1.5; }
.sapor-contact-page .sapor-email{ font-size:14.5px; margin:0 0 10px !important; word-break:break-word; }
.sapor-contact-page .sapor-bio{ border-top:1px solid var(--line); padding-top:6px; margin:0 !important; }
.sapor-contact-page .sapor-bio summary{ cursor:pointer; font-weight:600; font-size:14px; color:var(--blue); padding:6px 0; }
.sapor-contact-page .sapor-bio p{ font-size:14px; line-height:1.6; margin:8px 0 0; }

/* ---------- Sponsor call to action ---------- */
.sapor-contact-page .sapor-cta-box{
  margin-top:28px; background:var(--paper-dim); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--radius); padding:22px 26px;
}
.sapor-contact-page .sapor-cta-box > *{ margin-block-start:0 !important; }
.sapor-contact-page .sapor-cta-title{ margin:0 0 6px !important; }
.sapor-contact-page .sapor-cta-box p{ margin:0 0 14px !important; max-width:62ch; }
.sapor-contact-page .sapor-cta-box .wp-block-buttons{ margin:0 !important; }

/* ---------- Tablet / mobile ---------- */
@media (max-width:620px){
  .sapor-contact-page{ padding:16px 16px; }
  .sapor-contact-page .sapor-jump{ gap:8px; }
  .sapor-contact-page .sapor-jump-link .wp-block-button__link{ padding:8px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .sapor-contact-page *{ scroll-behavior:auto !important; transition:none !important; }
}