/*
 * Argyle Library Integration — Sidebar Stylesheet
 * Version: 1.9.1
 *
 * SCOPE: All rules are prefixed with `.argyle-library-page` or `.alr-*`.
 * This stylesheet MUST NOT affect any non-library page styles.
 *
 * Layout:
 *   Desktop (≥ 768px): flex row — sidebar left (280px fixed) + content right (fluid)
 *   Mobile  (< 768px): stacked — review banner, sidebar (collapsible), content
 *
 * Accessibility:
 *   - Sidebar nav has aria-label
 *   - Mobile toggle has aria-expanded, aria-controls
 *   - Current page link has aria-current="page"
 *   - Sufficient color contrast (WCAG AA)
 *   - Focus styles visible
 */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */

.argyle-library-page {
  --alr-primary:       #1a5276;  /* Deep library navy */
  --alr-primary-dark:  #154360;
  --alr-primary-light: #ebf5fb;
  --alr-accent:        #2e86c1;  /* Link/active blue */
  --alr-text:          #2c3e50;
  --alr-text-muted:    #5d6d7e;
  --alr-border:        #d5e8f0;
  --alr-bg-sidebar:    #f4f8fb;
  --alr-bg-active:     #d6eaf8;
  --alr-nav-hover:     #e8f4fb;
  --alr-sidebar-width: 280px;
  --alr-gap:           2rem;
  --alr-banner-bg:     #fff3cd;
  --alr-banner-text:   #664d03;
  --alr-banner-border: #ffc107;
}

/* ─── Review Banner ──────────────────────────────────────────────────────── */

.alr-review-banner {
  background-color: var(--alr-banner-bg);
  border-left: 4px solid var(--alr-banner-border);
  color: var(--alr-banner-text);
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0 3px 3px 0;
  display: block;
}

/* ─── Layout Container ───────────────────────────────────────────────────── */

.argyle-library-page .alr-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--alr-gap);
  width: 100%;
  box-sizing: border-box;
}

/* Content area */
.argyle-library-page .alr-content {
  flex: 1 1 0%;
  min-width: 0; /* Prevent flex overflow */
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

.argyle-library-page .alr-sidebar {
  flex: 0 0 var(--alr-sidebar-width);
  width: var(--alr-sidebar-width);
  min-width: var(--alr-sidebar-width);
  background-color: var(--alr-bg-sidebar);
  border: 1px solid var(--alr-border);
  border-radius: 4px;
  font-size: 0.9rem;
  /* Stick to top as user scrolls — useful for long pages */
  position: sticky;
  top: 2rem;
  align-self: flex-start;
}

.argyle-library-page .alr-sidebar-inner {
  padding: 1rem 0;
}

/* Brand header in sidebar */
.argyle-library-page .alr-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0.75rem;
  border-bottom: 2px solid var(--alr-primary);
  margin-bottom: 0.25rem;
}

.argyle-library-page .alr-sidebar-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.argyle-library-page .alr-sidebar-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--alr-primary);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ─── Mobile Toggle Button ───────────────────────────────────────────────── */

.argyle-library-page .alr-mobile-toggle {
  display: none; /* Hidden on desktop */
}

/* ─── Navigation List (Nested) ───────────────────────────────────────────── */

.argyle-library-page .alr-nav {
  padding: 0.25rem 0;
}

/* Root list */
.argyle-library-page .alr-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Root items */
.argyle-library-page .alr-nav-list .alr-nav-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--alr-border);
}

.argyle-library-page .alr-nav-list .alr-nav-item:last-child {
  border-bottom: none;
}

/* All nav links */
.argyle-library-page .alr-nav-link {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--alr-text);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.35;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-left: 3px solid transparent;
}

.argyle-library-page .alr-nav-link:hover {
  background-color: var(--alr-nav-hover);
  color: var(--alr-accent);
  border-left-color: var(--alr-accent);
}

.argyle-library-page .alr-nav-link:focus-visible {
  outline: 2px solid var(--alr-accent);
  outline-offset: -2px;
}

/* Current page link */
.argyle-library-page .alr-nav-link.alr-nav-current-link {
  background-color: var(--alr-bg-active);
  color: var(--alr-primary-dark);
  font-weight: 600;
  border-left-color: var(--alr-primary);
  padding-left: 1.1rem;
}

/* Parent link when a child is active */
.argyle-library-page .alr-nav-link.alr-nav-active-parent {
  font-weight: 600;
  color: var(--alr-primary);
}

/* ─── Parent rows (link + toggle button side by side) ─────────────────────── */

.argyle-library-page .alr-nav-parent-row {
  display: flex;
  align-items: stretch;
}

/* The section link fills remaining space */
.argyle-library-page .alr-nav-parent-row .alr-nav-link {
  flex: 1 1 auto;
  min-width: 0;
}

/* Expand/collapse toggle button */
.argyle-library-page .alr-nav-toggle {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  background: none;
  border: none;
  border-left: 1px solid var(--alr-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alr-text-muted);
  font-size: 0.75rem;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.argyle-library-page .alr-nav-toggle:hover {
  background-color: var(--alr-nav-hover);
  color: var(--alr-accent);
}

.argyle-library-page .alr-nav-toggle:focus-visible {
  outline: 2px solid var(--alr-accent);
  outline-offset: -2px;
}

/* Arrow icon — points right (closed), down (open) */
.argyle-library-page .alr-nav-toggle-icon::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s ease;
}

.argyle-library-page .alr-nav-has-children.alr-nav-open > .alr-nav-parent-row .alr-nav-toggle-icon::before {
  transform: rotate(90deg);
}

/* Also flip aria-expanded on the button */
.argyle-library-page .alr-nav-toggle[aria-expanded="true"] .alr-nav-toggle-icon::before {
  transform: rotate(90deg);
}

/* ─── Child list (submenu) ────────────────────────────────────────────────── */

.argyle-library-page .alr-nav-children {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: rgba(255,255,255,0.5);
  border-top: 1px solid var(--alr-border);
}

.argyle-library-page .alr-nav-children[hidden] {
  display: none;
}

.argyle-library-page .alr-nav-children .alr-nav-item {
  border-bottom: 1px solid color-mix(in srgb, var(--alr-border) 70%, transparent);
}

.argyle-library-page .alr-nav-children .alr-nav-item:last-child {
  border-bottom: none;
}

/* Child links: indented, slightly smaller */
.argyle-library-page .alr-nav-children .alr-nav-link {
  padding-left: 1.6rem;
  font-size: 0.8125rem;
  color: var(--alr-text-muted);
}

.argyle-library-page .alr-nav-children .alr-nav-link:hover {
  color: var(--alr-accent);
  padding-left: 1.8rem;
  background-color: var(--alr-nav-hover);
  border-left-color: var(--alr-accent);
}

.argyle-library-page .alr-nav-children .alr-nav-link.alr-nav-current-link {
  color: var(--alr-primary-dark);
  background-color: var(--alr-bg-active);
  border-left-color: var(--alr-primary);
  padding-left: 1.75rem;
  font-weight: 600;
}

/* Legacy selectors — keep for backwards compat with any cached pages */
.argyle-library-page .alr-nav-list li.alr-nav-current a {
  background-color: var(--alr-bg-active);
  color: var(--alr-primary-dark);
  font-weight: 600;
  border-left-color: var(--alr-primary);
}

/* ─── Sidebar Info Panel ─────────────────────────────────────────────────── */

.argyle-library-page .alr-sidebar-info {
  border-top: 1px solid var(--alr-border);
  margin-top: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.8rem;
  color: var(--alr-text-muted);
}

.argyle-library-page .alr-sidebar-info strong {
  display: block;
  color: var(--alr-text);
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.argyle-library-page .alr-sidebar-info strong:first-child {
  margin-top: 0;
}

.argyle-library-page .alr-sidebar-info p {
  margin: 0.2rem 0 0.5rem;
  line-height: 1.4;
}

.argyle-library-page .alr-sidebar-info a {
  color: var(--alr-accent);
  text-decoration: none;
}

.argyle-library-page .alr-sidebar-info a:hover {
  text-decoration: underline;
}

/* Director title line */
.argyle-library-page .alr-director-title {
  font-size: 0.75rem;
  color: var(--alr-text-muted);
  font-style: italic;
}

/* Unconfirmed warning flag (admin-only, inside review mode) */
.argyle-library-page .alr-unconfirmed-flag {
  font-size: 0.7rem;
  color: #856404;
  opacity: 0.9;
}

/* Hours list */
.argyle-library-page .alr-hours-list {
  list-style: none;
  margin: 0.2rem 0 0.5rem;
  padding: 0;
}

.argyle-library-page .alr-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
  border-bottom: 1px dotted var(--alr-border);
  gap: 0.5rem;
}

.argyle-library-page .alr-hours-list li:last-child {
  border-bottom: none;
}

.argyle-library-page .alr-hours-list li span:first-child {
  font-weight: 600;
  min-width: 36px;
}

/* ─── Mobile Styles (< 768px) ────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Stack layout vertically */
  .argyle-library-page .alr-layout {
    flex-direction: column;
    align-items: stretch; /* was flex-start (desktop default) — causes content column to shrink to its widest child's max-content width instead of filling 100% of the viewport, producing horizontal overflow on mobile. */
    gap: 1rem;
  }

  .argyle-library-page .alr-content {
    width: 100%;
    max-width: 100%;
  }

  /* Sidebar becomes full-width */
  .argyle-library-page .alr-sidebar {
    flex: none;
    width: 100%;
    min-width: 0;
    position: static;
  }

  /* Show mobile toggle */
  .argyle-library-page .alr-mobile-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--alr-primary);
    color: #ffffff;
    border: none;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    gap: 0.5rem;
  }

  .argyle-library-page .alr-mobile-toggle:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: -3px;
  }

  .argyle-library-page .alr-toggle-arrow {
    font-size: 1.1rem;
    transition: transform 0.25s ease;
    display: inline-block;
  }

  /* When nav is open: rotate arrow */
  .argyle-library-page .alr-mobile-toggle[aria-expanded="true"] .alr-toggle-arrow {
    transform: rotate(180deg);
  }

  /* Nav hidden by default on mobile */
  .argyle-library-page .alr-nav {
    display: none;
    border-top: 1px solid var(--alr-border);
  }

  /* Nav shown when toggle is open */
  .argyle-library-page .alr-nav.is-open {
    display: block;
  }

  /* Brand hidden on mobile (toggle replaces it) */
  .argyle-library-page .alr-sidebar-brand {
    display: none;
  }

  /* Info panel always visible on mobile */
  .argyle-library-page .alr-sidebar-info {
    display: block;
  }

  /* Mobile: nested section toggle — full-height hit target */
  .argyle-library-page .alr-nav-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  /* Mobile: child links slightly wider indent */
  .argyle-library-page .alr-nav-children .alr-nav-link {
    padding-left: 2rem;
  }
  .argyle-library-page .alr-nav-children .alr-nav-link.alr-nav-current-link {
    padding-left: 2.15rem;
  }
}

/* ─── Content Visual Fixes ───────────────────────────────────────────────
 *
 * The theme sizes headings and type for full-width single-column layouts.
 * Library pages use a two-column layout (sidebar 280px + content ~856px)
 * so the same type scale produces oversized headings that wrap awkwardly.
 *
 * All rules are scoped under .argyle-library-page to isolate library pages.
 * Staff can still edit all content in the block editor — these are purely
 * presentational overrides applied by the plugin stylesheet.
 *
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Page title (WordPress renders "Private: Page Title — Private Review")
   Hide it inside library pages — staff see the "Private Review" banner
   instead. The block content opens with its own contextual heading. ── */
.argyle-library-page .entry-title,
.argyle-library-page .page-title,
.argyle-library-page .wp-block-post-title {
  display: none;
}

/* ── Heading scale ──────────────────────────────────────────────────────
   Theme default: H2 = 48px, H3 = 36px.
   At 856px content width those wrap badly and dominate the column.
   Target: H2 = 26px / H3 = 20px — clear hierarchy, no awkward breaks.
   Line-height and margin-top are also reset for consistent rhythm. ── */
.argyle-library-page .alr-content h2,
.argyle-library-page .alr-content .wp-block-heading[data-level="2"] {
  font-size: 1.5rem;      /* 24px at 16px root, scales via rem */
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.argyle-library-page .alr-content h2:first-child,
.argyle-library-page .alr-content > .wp-block-heading:first-child {
  margin-top: 0;         /* No top gap on the very first heading */
}

.argyle-library-page .alr-content h3 {
  font-size: 1.15rem;    /* ~18-19px — clearly subheading, not section-title */
  line-height: 1.35;
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
}

.argyle-library-page .alr-content h4 {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

/* ── Tagline paragraph (centered intro above H2 on Home) ──────────────── */
.argyle-library-page .alr-content .has-text-align-center.wp-block-paragraph:first-child,
.argyle-library-page .alr-content > p.has-text-align-center:first-of-type {
  font-size: 0.95rem;
  font-weight: normal;
  font-style: italic;
  color: var(--alr-text-muted);
  margin-bottom: 0.25rem;
  margin-top: 0;
}

/* ── Body text ─────────────────────────────────────────────────────────── */
.argyle-library-page .alr-content p {
  font-size: 1rem;       /* 16px — readable, not oversized */
  line-height: 1.7;
  max-width: 68ch;       /* Comfortable line length */
  margin-top: 0;
  margin-bottom: 0.9rem;
}

/* Paragraphs inside tables, buttons, groups: don't constrain width */
.argyle-library-page .alr-content td p,
.argyle-library-page .alr-content th p,
.argyle-library-page .alr-content .wp-block-button p,
.argyle-library-page .alr-content .wp-block-group p {
  max-width: none;
}

.argyle-library-page .alr-content ul,
.argyle-library-page .alr-content ol {
  font-size: 1rem;
  line-height: 1.65;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
}

.argyle-library-page .alr-content li {
  margin-bottom: 0.25rem;
}

/* ── Separators ────────────────────────────────────────────────────────── */
.argyle-library-page .alr-content .wp-block-separator {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-sizing: border-box;
  border: none;
  border-top: 1px solid var(--alr-border);
  height: 0;
  background: none;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.argyle-library-page .alr-content .wp-block-buttons {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.argyle-library-page .alr-content .wp-block-button__link {
  font-size: 0.875rem !important;  /* 14px — compact, professional */
  padding: 0.45rem 1rem !important;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Accessibility fix: darken orange to #b16208 so white text hits 4.55:1 (WCAG AA).
     Eliminates the navy-on-orange complementary-color vibration. */
  background-color: #b16208 !important;
  color: #ffffff !important;
}

.argyle-library-page .alr-content .wp-block-button__link:hover,
.argyle-library-page .alr-content .wp-block-button__link:focus {
  background-color: #8f4e06 !important;
  color: #ffffff !important;
}

/* Outline buttons: match solid style so all library CTAs look the same */
.argyle-library-page .alr-content .wp-block-button.is-style-outline .wp-block-button__link {
  font-size: 0.875rem !important;
  padding: 0.45rem 1rem !important;
  background-color: #b16208 !important;
  color: #ffffff !important;
  border-color: #b16208 !important;
}

.argyle-library-page .alr-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.argyle-library-page .alr-content .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: #8f4e06 !important;
  color: #ffffff !important;
  border-color: #8f4e06 !important;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.argyle-library-page .alr-content .wp-block-table {
  font-size: 0.95rem;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  overflow-x: auto;
  display: block;
}

.argyle-library-page .alr-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  display: table;
}

.argyle-library-page .alr-content .wp-block-table td,
.argyle-library-page .alr-content .wp-block-table th {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--alr-border);
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.5;
}

.argyle-library-page .alr-content .wp-block-table thead th {
  background-color: var(--alr-primary-light);
  font-weight: 700;
  color: var(--alr-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.argyle-library-page .alr-content .wp-block-table tbody tr:nth-child(even) {
  background-color: #f9fbfd;
}

/* ── Columns (What We Offer grid, etc.) ────────────────────────────────── */
.argyle-library-page .alr-content .wp-block-columns {
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.argyle-library-page .alr-content .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}

/* Column headings and links inside columns */
.argyle-library-page .alr-content .wp-block-column h3,
.argyle-library-page .alr-content .wp-block-column .wp-block-heading {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.argyle-library-page .alr-content .wp-block-column p {
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: none;
  margin-bottom: 0.5rem;
}

.argyle-library-page .alr-content .wp-block-column a {
  font-size: inherit;
  font-weight: 700;
  color: var(--alr-accent);
}

/* ── Resource / link lists (strong+link in li, e.g. Online Resources page) ───── */
/* The <strong><a>Name</a></strong><br>Description pattern inside list items */
.argyle-library-page .alr-content li > strong:first-child,
.argyle-library-page .alr-content li > strong:first-child a {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--alr-primary);
  text-decoration: none;
  display: inline;
}

.argyle-library-page .alr-content li > strong:first-child a:hover {
  color: var(--alr-accent);
  text-decoration: underline;
}

/* Description text after the <br> */
.argyle-library-page .alr-content li {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
}

/* ── Group blocks (callout boxes, location, etc.) ──────────────────────── */
.argyle-library-page .alr-content .wp-block-group.has-background {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.argyle-library-page .alr-content .wp-block-group h3 {
  margin-top: 0;
}

/* ── Hours table on Home page ──────────────────────────────────────────── */
/* The hours table has no header — first column = day, second = time */
.argyle-library-page .alr-content .wp-block-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
  width: 120px;
}

/* ── Unconfirmed flag — only show to admins ────────────────────────────── */
.argyle-library-page .alr-sidebar-info em[style*="856404"] {
  font-size: 0.7rem;
  opacity: 0.85;
}

/* ── Placeholder / review text ─────────────────────────────────────────── */
/* Make unresolved bracketed placeholders clearly visible as warnings */
.argyle-library-page .alr-content p:has(> em:only-child),
.argyle-library-page .alr-content .wp-block-paragraph em {
  /* Normal italic — don't flag all italics; placeholder styling handled by content */
}

/* ─── High contrast / print ─────────────────────────────────────────────── */

/* ─── Tablet breakpoint (768–1024px) ────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .argyle-library-page {
    --alr-sidebar-width: 230px;
    --alr-gap: 1.25rem;
  }

  .argyle-library-page .alr-content h2 {
    font-size: 1.35rem;
  }

  .argyle-library-page .alr-content h3 {
    font-size: 1.05rem;
  }

  .argyle-library-page .alr-content p {
    max-width: none; /* Full width on tablet — narrower than max-width */
  }

  /* Tables: allow horizontal scroll on tablet if needed */
  .argyle-library-page .alr-content .wp-block-table {
    overflow-x: auto;
  }

  /* Columns: stack to 2 at tablet if 4-up */
  .argyle-library-page .alr-content .wp-block-columns:has(.wp-block-column:nth-child(4)) {
    flex-wrap: wrap;
  }
  .argyle-library-page .alr-content .wp-block-columns:has(.wp-block-column:nth-child(4)) .wp-block-column {
    flex-basis: calc(50% - 0.75rem);
    flex-grow: 0;
  }
}

/* ─── Mobile content ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .argyle-library-page .alr-content h2 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
  }

  .argyle-library-page .alr-content h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
  }

  .argyle-library-page .alr-content p {
    font-size: 0.95rem;
    max-width: none;
  }

  /* Full-width buttons on mobile */
  .argyle-library-page .alr-content .wp-block-buttons {
    flex-direction: column;
  }

  .argyle-library-page .alr-content .wp-block-button {
    width: 100%;
  }

  .argyle-library-page .alr-content .wp-block-button__link {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Tables: horizontal scroll on mobile */
  .argyle-library-page .alr-content .wp-block-table {
    overflow-x: auto;
    display: block;
  }

  /* Columns: stack to single column on mobile */
  .argyle-library-page .alr-content .wp-block-columns {
    flex-direction: column;
    gap: 1rem;
  }

  .argyle-library-page .alr-content .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  .argyle-library-page .alr-content .wp-block-separator {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .argyle-library-page .alr-content .wp-block-group.has-background {
    padding: 0.75rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .argyle-library-page .alr-nav-list li a {
    transition: none;
  }
  .argyle-library-page .alr-toggle-arrow {
    transition: none;
  }
}

/* ─── Fluent Forms: required field asterisks & submit button ─────────────── */

/* Required asterisks — already added by FF's .asterisk-right class, but make sure they show */
.argyle-library-page .alr-content .ff-el-input--label.asterisk-right label::after {
  content: ' *';
  color: #c0392b;
  font-weight: 700;
}

/* Submit button — override FF default grey with a solid, prominent style */
.argyle-library-page .alr-content #fluentform_23 .ff-btn-submit,
.argyle-library-page .alr-content #fluentform_23 button[type=submit] {
  display: inline-block;
  width: auto;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: #ffffff !important;
  background-color: #2c5f2e !important;  /* forest green — library authority */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.argyle-library-page .alr-content #fluentform_23 .ff-btn-submit:hover,
.argyle-library-page .alr-content #fluentform_23 button[type=submit]:hover {
  background-color: #1e4620 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.22);
}

.argyle-library-page .alr-content #fluentform_23 .ff-btn-submit:focus,
.argyle-library-page .alr-content #fluentform_23 button[type=submit]:focus {
  outline: 3px solid #6aab6c;
  outline-offset: 2px;
}

/* Validation error styling — make required field errors visible */
.argyle-library-page .alr-content .ff-el-is-error input,
.argyle-library-page .alr-content .ff-el-is-error select,
.argyle-library-page .alr-content .ff-el-is-error textarea {
  border-color: #c0392b !important;
}

.argyle-library-page .alr-content .error.text-danger {
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY BOARD PAGE — Board member table
   Added in v1.6.0
   ═══════════════════════════════════════════════════════════════════════════ */

.argyle-library-page .alr-content .alr-board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.argyle-library-page .alr-content .alr-board-table th {
  background: var(--alr-primary);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.argyle-library-page .alr-content .alr-board-table td {
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--alr-border);
  color: var(--alr-text);
}

.argyle-library-page .alr-content .alr-board-table tbody tr:nth-child(even) td {
  background: var(--alr-primary-light);
}

.argyle-library-page .alr-content .alr-board-table tbody tr:hover td {
  background: #e8f0f7;
}

.argyle-library-page .alr-content .alr-board-table a {
  color: var(--alr-accent);
  text-decoration: none;
}

.argyle-library-page .alr-content .alr-board-table a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .argyle-library-page .alr-content .alr-board-table thead {
    display: none;
  }
  .argyle-library-page .alr-content .alr-board-table tr {
    display: block;
    border-bottom: 2px solid var(--alr-border);
    margin-bottom: 0.5rem;
  }
  .argyle-library-page .alr-content .alr-board-table td {
    display: block;
    border-bottom: none;
    padding: 0.3rem 0.5rem;
  }
  .argyle-library-page .alr-content .alr-board-table td:first-child {
    font-weight: 700;
    background: var(--alr-primary-light);
    padding-top: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTORY PAGE — VERTICAL TIMELINE (flexbox alternating sides)
   Rebuilt in v1.9.0 — matches Kenan-Flagler style layout.
   Each item occupies a full-width row; content alternates left/right.
   JS (library-sidebar.js) wraps children in .alr-item-inner.
   Scope: .argyle-library-page .alr-timeline and children
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Era Headers — span full width ─────────────────────────────────────────── */

.argyle-library-page .alr-content .alr-era-header {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--alr-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--alr-accent);
  padding-bottom: 0.4rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  width: 100%;
}

/* ─── Timeline container ────────────────────────────────────────────────────── */

.argyle-library-page .alr-timeline {
  position: relative;
  padding: 2rem 0 3rem;
  margin: 1rem 0 2rem;
}

/* Centered vertical line */
.argyle-library-page .alr-timeline::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--alr-border);
  z-index: 0;
}

/* ─── Timeline item — full-width flex row ─────────────────────────────────── */

/* Each item owns its full row; no two items share vertical space */
.argyle-library-page .alr-timeline-item {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 4rem;
  z-index: 1;
  box-sizing: border-box;
}

/* Center-line dot — always dead-center on the vertical line */
.argyle-library-page .alr-timeline-item::before {
  content: '';
  position: absolute;
  left: calc(50% - 12px);
  top: 0.9rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Alternating dots: odd = blue (accent), even = grey */
.argyle-library-page .alr-timeline-item:nth-of-type(odd)::before {
  background: var(--alr-accent);
  border: 1px solid var(--alr-accent);
}

.argyle-library-page .alr-timeline-item:nth-of-type(even)::before {
  background: #e0e0e0;
  border: 1px solid var(--alr-border);
}

/* ─── .alr-item-inner — the visible card (JS-injected wrapper) ──────────────── */

.argyle-library-page .alr-timeline-item .alr-item-inner {
  width: 44%;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--alr-border);
  border-radius: 6px;
  box-sizing: border-box;
  transition: box-shadow 0.15s ease;
}

.argyle-library-page .alr-timeline-item .alr-item-inner:hover {
  box-shadow: 0 2px 12px rgba(26,82,118,0.1);
}

/* ─── ODD items — card on the LEFT ──────────────────────────────────────────── */

.argyle-library-page .alr-timeline-item:nth-of-type(odd) {
  justify-content: flex-start;
}

.argyle-library-page .alr-timeline-item:nth-of-type(odd) .alr-item-inner {
  /* 44% card + 6% gap = 50% → card right edge meets the center line */
  margin-right: 6%;
  text-align: left;
}

/* Featured: accent border on the right edge (faces center line) */
.argyle-library-page .alr-timeline-item:nth-of-type(odd).alr-featured .alr-item-inner {
  border-right: 3px solid var(--alr-accent);
  background: var(--alr-primary-light);
}

/* ─── EVEN items — card on the RIGHT ─────────────────────────────────────────── */

.argyle-library-page .alr-timeline-item:nth-of-type(even) {
  justify-content: flex-end;
}

.argyle-library-page .alr-timeline-item:nth-of-type(even) .alr-item-inner {
  /* 6% gap + 44% card = 50% → card left edge meets the center line */
  margin-left: 6%;
  text-align: left;
}

/* Featured: accent border on the left edge (faces center line) */
.argyle-library-page .alr-timeline-item:nth-of-type(even).alr-featured .alr-item-inner {
  border-left: 3px solid var(--alr-accent);
  background: var(--alr-primary-light);
}

/* ─── Typography ─────────────────────────────────────────────────────────────── */

.argyle-library-page .alr-timeline-item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--alr-primary);
  margin-top: 0;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.argyle-library-page .alr-timeline-item p {
  font-size: 0.875rem;
  color: var(--alr-text);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ─── Images ─────────────────────────────────────────────────────────────────── */

/* Images sit at top of card, full card width — no float */
.argyle-library-page .alr-timeline-item .wp-block-image {
  float: none !important;
  margin: 0 0 0.75rem 0 !important;
  max-width: 100% !important;
  border-radius: 4px;
  overflow: hidden;
}

.argyle-library-page .alr-timeline-item .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

/* ─── Responsive — Mobile (<768px) — single column, line on left ──────────────── */

@media (max-width: 767px) {
  .argyle-library-page .alr-timeline::before {
    left: 0.75rem;
    transform: none;
  }

  /* All items stack left; card takes remaining width after the line */
  .argyle-library-page .alr-timeline-item,
  .argyle-library-page .alr-timeline-item:nth-of-type(odd),
  .argyle-library-page .alr-timeline-item:nth-of-type(even) {
    justify-content: flex-end;
    margin-bottom: 1.5rem;
  }

  .argyle-library-page .alr-timeline-item .alr-item-inner,
  .argyle-library-page .alr-timeline-item:nth-of-type(odd) .alr-item-inner,
  .argyle-library-page .alr-timeline-item:nth-of-type(even) .alr-item-inner {
    width: calc(100% - 2.25rem);
    margin-left: 0;
    margin-right: 0;
  }

  /* Dot aligned to the left line */
  .argyle-library-page .alr-timeline-item::before {
    left: 0;
    width: 16px;
    height: 16px;
    top: 0.85rem;
  }

  .argyle-library-page .alr-era-header {
    font-size: 0.95rem;
    margin-top: 2rem;
  }

  .argyle-library-page .alr-timeline-item .wp-block-image img {
    max-height: 160px;
  }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .argyle-library-page .alr-timeline::before,
  .argyle-library-page .alr-timeline-item::before {
    display: none;
  }
  .argyle-library-page .alr-timeline-item,
  .argyle-library-page .alr-timeline-item:nth-of-type(odd),
  .argyle-library-page .alr-timeline-item:nth-of-type(even) {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  .argyle-library-page .alr-timeline-item .alr-item-inner {
    width: 100%;
    margin: 0;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}