/**
 * DWF Presidents -- minimal, theme-first styling. Per Part 1 of the
 * Content & Style Guide, ordinary content (h2, p in the main column)
 * gets NO font-size/line-height/color here -- only the documented
 * exceptions (colored components) do. This is the direct fix for the
 * "text looks larger than usual" finding: the earlier sample set sizing
 * on ordinary elements it shouldn't have touched at all.
 *
 * No hardcoded page width anywhere in this file -- same rule as every
 * other plugin stylesheet in this project, learned from the family-pages
 * max-width bug.
 */

/**
 * Full width / no sidebar -- corrected 2026-08-06, second correction of the
 * same day. The previous two attempts (0.3.39-dev's alignfull, then
 * 0.3.40-dev's calc(50% - 50vw) viewport breakout) were both solving the
 * wrong problem. Both aimed for true 100vw, edge-to-edge browser width.
 * That's not actually what "full width, no sidebar" means on this site --
 * it means matching the SAME width the theme itself already uses for a
 * full-width single column, which on Memberlite is bounded by its own
 * .row container (max-width: 71em, centered, confirmed directly in
 * Memberlite's own compiled CSS -- see the masthead title banner, which
 * uses this exact .row > .medium-12.columns pattern already). 100vw
 * overshoots past that on any viewport wider than roughly 1140px, which is
 * exactly the "content is too wide" feedback -- our content was stretching
 * past where the site's own header, logo, and nav sit, not matching it.
 * (Flagged directly with green boxes marking where the theme places its
 * own edges, on the same round of feedback that found Congress/state/rep
 * pages -- a separate, still-open issue -- running too NARROW, stuck
 * inside a sidebar-width column because their alignfull technique does
 * nothing at all on this theme. Both problems, opposite directions, come
 * from the same root cause: neither technique was actually targeting the
 * theme's real container width.)
 *
 * This value (71em / 1136px, plus the 1.5rem side padding Memberlite's own
 * .columns class adds) is Memberlite-specific, not a universal constant --
 * shipped here as our own value rather than depending on the theme's .row
 * class directly, for the same reason as before: don't depend on a class
 * that isn't ours to keep control of. Memberlite is this project's
 * confirmed production child theme, so matching it exactly is the right
 * target. If the production theme ever changes, this number needs
 * updating to match -- it is not theme-agnostic the way a percentage-based
 * approach would be, and that trade-off is deliberate: matching the real
 * theme correctly beats a technique that's "universal" but wrong for the
 * one theme that actually matters.
 */
/**
 * Full width / no sidebar -- corrected 2026-08-06, third correction of the
 * same day, this one fixing the second correction's actual mistake rather
 * than just its symptom. 0.3.44 matched Memberlite's own .row container
 * (71em) exactly -- which fixed "too wide" as reported, but did it by
 * baking in one specific theme's own current CSS value. That's the wrong
 * kind of fix for this project: the Content & Style Guide is explicit that
 * an override is earned by cross-theme testing showing a real problem, not
 * by copying one theme's number, and the duplicate-title fix elsewhere in
 * this plugin family exists specifically because a Memberlite-only
 * assumption didn't hold on other themes. Measuring Memberlite's CSS and
 * hardcoding what we found is the same mistake in a new shape -- correct
 * today, silently wrong the day the theme changes or this runs anywhere
 * else.
 *
 * Genuinely theme-agnostic version, two layers instead of one:
 *
 * 1. .dwf-priv-fullbleed (below) does ONLY the viewport escape --
 *    width: 100vw with the calc(50% - 50vw) negative-margin technique.
 *    This is mathematically guaranteed to reach true viewport width
 *    regardless of what any theme's container does, because the math is
 *    anchored to the viewport itself, not to any parent's width. No theme
 *    knowledge required for this part to work correctly.
 *
 * 2. .dwf-pres-page (the inner div already inside it) caps that escaped
 *    band at a generic, deliberately-chosen max-width -- not measured
 *    from any theme, a plain design decision about how wide a full-width
 *    reference page should read on any screen. This is what actually
 *    fixes "too wide": instead of matching wherever one specific theme's
 *    header happens to sit, it caps at a reasonable width on every theme
 *    equally.
 *
 * Same honest limitation as before, still real: an ancestor with
 * overflow-x: hidden can still clip the escape. No fully theme-agnostic
 * guard exists against that from a child element's own CSS.
 */
.dwf-priv-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* The actual reading-width cap lives here, on the inner div, not on the
   escape wrapper above. 1320px is a plain design choice (not measured from
   any theme) -- roomy enough to read as genuinely full-width on typical
   screens, capped short of stretching edge-to-edge on very wide monitors.
   Side padding keeps text off the true screen edge on viewports narrower
   than the cap, where this is effectively the only width constraint in
   play. */
.dwf-pres-page {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

:root {
  --president: #1F3F6B;
  --president-tint: #4A6FA0; /* lighter tint of --president, for hover states -- computed to stay recognizably the same hue, not a new brand color */
  --president-tan: #a39784; /* reused from the quote component, not invented here -- keeps the medallion/carousel treatment visually tied to the rest of the page rather than introducing a fifth color */
  --president-wash: #faf9f6; /* same warm off-white already used for the facts sidebar */
}

/**
 * Directory grid heading -- documented exception to theme-first typography,
 * same basis as the quote component's explicit sizing: this is a designed
 * landing surface, not an ordinary content paragraph. Added 2026-08-06 as
 * part of the visual redesign; the H1 previously inherited whatever the
 * theme's default heading size was, with no deliberate scale relationship
 * to the page below it.
 */
.dwf-pres-directory .dwf-pres-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2em, 4vw, 2.75em);
  letter-spacing: -0.01em;
  color: var(--president);
  margin: 0 0 0.3em;
}
.dwf-pres-directory-intro {
  max-width: 760px;
  margin: 0 0 2.5em;
}

/**
 * Directory grid -- replaces the old flat wrapped row of 56px circles.
 * auto-fill/minmax gives a predictable, evenly-aligned grid at any width
 * without a breakpoint list to maintain -- adding president #48 someday
 * just adds another cell, no template change needed.
 */
.dwf-pres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.75em 1.25em;
  margin-top: 1em;
}
.dwf-pres-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1em 0.5em;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.dwf-pres-grid-card:hover,
.dwf-pres-grid-card:focus-visible {
  background: var(--president-wash);
  box-shadow: 0 6px 16px rgba(31, 63, 107, 0.12);
  transform: translateY(-3px);
}
.dwf-pres-grid-card:focus-visible {
  outline: 2px solid var(--president);
  outline-offset: 2px;
}
.dwf-pres-grid-portrait {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: 0.85em;
}
.dwf-pres-grid-portrait img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e2ddd3;
  display: block;
}
.dwf-pres-grid-card.current .dwf-pres-grid-portrait img {
  border: 3px solid var(--president);
}
/* The medallion -- the one deliberate signature element on this page,
   echoing an official seal/coin rather than a plain list number. Kept to
   this single spot so it stays a real accent, not a repeated pattern that
   would blend into wallpaper. */
.dwf-pres-grid-medallion {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--president);
  color: #fff;
  border: 2px solid #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.75em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/**
 * Explicit colors on all three, including !important -- added 2026-08-06
 * after directly observing president names render in an unstyled reddish
 * link color on a third test theme. Root cause: .dwf-pres-grid-name had NO
 * color set at all, so it fell back to whatever color the surrounding
 * .dwf-pres-grid-card anchor resolved to -- and many themes set that via
 * `a:link`/`a:visited` rules, which carry a pseudo-class and beat a plain
 * class selector like .dwf-pres-grid-card on specificity alone, regardless
 * of load order. term/party already had their own explicit colors (any
 * direct rule on an element always beats an inherited value, no specificity
 * contest needed there), which is exactly why only the name was visibly
 * wrong in that screenshot while the muted term/party text wasn't. Given
 * we now have direct proof of theme bleed-through in production rather
 * than a theoretical risk, !important here is a deliberate, scoped
 * safeguard for this one component -- not a general practice.
 */
.dwf-pres-grid-name {
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.25;
  color: #1a1a1a !important;
}
.dwf-pres-grid-term {
  font-size: 0.8em;
  color: #6b6b6b !important;
  margin-top: 0.2em;
}
.dwf-pres-grid-party {
  font-size: 0.75em;
  color: #8a8a8a !important;
  margin-top: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
  .dwf-pres-grid-card { transition: none; }
}

/**
 * Compact loop carousel -- the "All Presidents" widget at the bottom of
 * each individual president page. Single row by design: overflow-x lives
 * on the track only, never combined with flex-wrap on the same element
 * (that combination is what caused the old three-line wrap -- documented
 * here so a future edit doesn't reintroduce it by "simplifying" this back
 * to one div). Loop-scroll behavior (prev at the start jumps to the end,
 * next at the end jumps to the start, matching Google's people carousel)
 * lives in assets/js/president-carousel.js, progressively enhancing what
 * is already a working native horizontal-scroll strip without JS.
 */
.dwf-pres-nav-widget { margin-top: 3em; }
.dwf-pres-carousel {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.dwf-pres-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25em 0.25em 0.6em;
  flex: 1;
  min-width: 0;
  /* Hide the native scrollbar -- flagged directly ("hide the visible bar").
     The prev/next arrow buttons are the intended way to navigate; a visible
     OS scrollbar underneath them read as redundant/unfinished. Scrolling by
     touch, trackpad, or keyboard (the track is still focusable) keeps
     working exactly the same -- this only hides the visual bar itself. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.dwf-pres-carousel-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, other WebKit/Blink browsers */
}
@media (prefers-reduced-motion: reduce) {
  .dwf-pres-carousel-track { scroll-behavior: auto; }
}
.dwf-pres-carousel-item {
  flex: 0 0 72px;
  scroll-snap-align: start;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: 0.75em;
}
.dwf-pres-carousel-item img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}
.dwf-pres-carousel-item.current img { border-color: var(--president); }
/* Explicit color, same reasoning and fix as .dwf-pres-grid-name above --
   this span had the identical gap (no color of its own, relying on
   inheritance from the anchor) that caused the theme link-color bleed-
   through on the directory grid. Fixed here before it showed up as a
   second bug report on this widget too. */
.dwf-pres-carousel-item span {
  display: block;
  margin-top: 0.3em;
  line-height: 1.2;
  color: #1a1a1a !important;
}
.dwf-pres-carousel-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--president);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dwf-pres-carousel-arrow:hover { background: var(--president-wash); border-color: var(--president-tint); }
.dwf-pres-carousel-arrow:focus-visible { outline: 2px solid var(--president); outline-offset: 2px; }
.dwf-pres-carousel-arrow:disabled { opacity: 0.35; cursor: default; }

.dwf-pres-hero {
  display: flex;
  gap: 1.75em;
  align-items: flex-start;
}

.dwf-pres-hero .portrait {
  width: 150px;
  height: auto;
  border: 1px solid #ddd;
  flex-shrink: 0;
  /* 2026-08-17, per Eric: top of the portrait and the visual top of the
     h1 name weren't lining up, even with align-items: flex-start on the
     parent flex row. That property aligns the two elements' BOXES, not
     their visible content -- an h1's line-height leaves empty space
     above the glyphs themselves, so the box tops matched but the visible
     top of the letters sat noticeably lower than the portrait's top
     edge. Nudged the portrait down slightly to compensate. This value is
     a reasonable starting estimate based on typical heading line-height
     overhang, not measured against a live render -- flag if it needs
     further adjustment once seen on the actual page. */
  margin-top: 0.3em;
}

/* --- Quote, exact spec from Part 4: white background, flanking marks in
   the documented tan (#a39784), citation right-aligned. Explicit sizing
   here is correct -- this IS one of the documented exceptions.

   max-width was a fixed 680px before 2026-08-06 -- looked arbitrary and
   left visible empty space on wider layouts (flagged directly: "this quote
   should fill the space"). Changed to fill its actual container (the main
   content column in .dwf-pres-body-wrap, or the full page on the directory
   intro) instead of a number picked independent of where it's used.

   border/font-family reset added the same day: this is a real <blockquote>
   element, and several themes (OceanWP confirmed directly) apply their own
   default blockquote border/font styling that otherwise bleeds through --
   the Style Guide's spec for this component has no border at all, so this
   makes that explicit rather than leaving it to whatever the theme
   happens to default to. --- */
.dwf-pres-main .quote {
  background: #fff;
  max-width: 100%;
  margin: 1.5em 0 2em;
  border: none !important;
  font-family: inherit !important;
}
.dwf-pres-main .quote-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.dwf-pres-main .quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: .7;
  color: #a39784;
  flex-shrink: 0;
}
.dwf-pres-main .quote-text { flex: 1; min-width: 0; }
.dwf-pres-main .quote-text p {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}
.dwf-pres-main .quote-text cite {
  display: block;
  text-align: right;
  margin-top: 12px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
}

.dwf-pres-body-wrap {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5em;
  margin-top: 1em;
}

/* --- Right-column facts box: colored header bar, colored label text,
   colored accent dots -- all three, matching the established Quick
   Facts convention, not just the header alone. --- */
.dwf-pres-sidebar {
  background: #faf9f6;
  border: 1px solid #eee;
}
.dwf-pres-sidebar-header {
  background: var(--president);
  color: #fff;
  padding: 0.7em 1em;
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dwf-pres-facts { padding: 0.5em 1em 1em; margin: 0; }
.dwf-pres-fact {
  padding: 0.7em 0 0.7em 1.1em;
  border-bottom: 1px solid #eee;
  position: relative;
}
.dwf-pres-fact:last-child { border-bottom: none; }
.dwf-pres-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--president);
}
.dwf-pres-fact dt {
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.05em;
  color: var(--president);
  margin: 0 0 0.2em;
  font-weight: 700;
}
.dwf-pres-fact dd { margin: 0; font-size: 0.92em; }