/*
Theme Name: SRTA
Theme URI: https://srta.wp.mpisoft.com
Author: MPI Software / SRTA
Description: Block theme for the Shasta Regional Transportation Agency. Ships the SRTA design system (theme.json), header/footer template parts, section patterns, and block style variations so 100-150 pages can be built rapidly in Gutenberg without a page builder.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.3.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: srta
*/

/*
 * Most styling comes from theme.json (colors, type, spacing, element defaults).
 * This file holds ONLY the custom block style variations registered in functions.php
 * and a few component details that theme.json cannot express. It is loaded on the
 * front end AND in the editor (via add_editor_style), so both match.
 */

/* ----------------------------------------------------------------------------
 * Eyebrow label  ("POPULAR TASKS", "PROCUREMENT", ...)
 * Block style for core/paragraph -> "Eyebrow"
 * ------------------------------------------------------------------------- */
.is-style-srta-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

.is-style-srta-eyebrow::before {
  content: "";
  width: 20px;
  height: 1.5px;
  background: var(--wp--preset--color--secondary);
}

/* On dark sections the eyebrow text flips for contrast: gold passes AA
   against primary-deep (5.16:1) but not against plain primary (3.32:1), so
   plain primary gets white text instead. */
.has-primary-deep-background-color .is-style-srta-eyebrow {
  color: var(--wp--preset--color--secondary);
}

.has-primary-background-color .is-style-srta-eyebrow {
  color: var(--wp--preset--color--base);
}

/* Section rounding is applied per-section in the pattern markup (bids, meetings,
 * and contact get 24px on all corners; quick-links gets bottom-only) so the hero
 * and the plain white sections stay square. */

/* The footer template part inherits a 16px root block-gap; with the contact
 * section now coloured that gap reads as a white strip. Pull it flush. */
.wp-site-blocks>footer {
  margin-block-start: 0;
}

/* The header nav dropdown (.srta-nav-dropdown) is absolutely positioned and
   shifted by a negative `left` (set in header.js) to keep it fully on-screen
   for nav items positioned mid-row. Even fully on-screen, a negative offset
   like that can still inflate the page's own scrollable width in some
   browsers and trigger a phantom horizontal scrollbar — clip it here rather
   than fight the position math further. */
.wp-site-blocks {
  overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
 * Badge / status pill
 * Block style for core/paragraph -> "Badge"
 * ------------------------------------------------------------------------- */
.is-style-srta-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--wp--preset--color--primary-surface);
  color: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------------------------
 * Breadcrumbs (core/breadcrumbs)
 * Chevron separators (the icon-set glyph, not the block's default "/"), graphite
 * links with no underline, and a bold graphite-900 current page. The nav sets an
 * inline --separator, so the separator content is overridden directly (higher
 * specificity via the element selector) rather than through that variable.
 * ------------------------------------------------------------------------- */
/* Span the full width of the (alignwide) container instead of being capped at
   the constrained content width. */
nav.wp-block-breadcrumbs {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  font-size: var(--wp--preset--font-size--small) !important;
  /* 14px — beats .has-x-small-font-size, which WP emits with !important */
}

nav.wp-block-breadcrumbs ol {
  width: 100%;
  margin: 0;
  /* kill the UA list margin so the nav's box height is just the text line */
  display: flex;
  align-items: center;
}

nav.wp-block-breadcrumbs a {
  color: var(--wp--custom--graphite--600);
  text-decoration: none;
  font-weight: 500;
}

nav.wp-block-breadcrumbs a:hover,
nav.wp-block-breadcrumbs a:focus-visible {
  color: var(--wp--custom--graphite--900);
}

nav.wp-block-breadcrumbs [aria-current="page"] {
  color: var(--wp--custom--graphite--900);
  font-weight: 600;
}

nav.wp-block-breadcrumbs li:not(:last-child)::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin: 0 0.5em;
  opacity: 1;
  /* override the block's 0.7 */
  background-color: var(--wp--custom--graphite--500);
  -webkit-mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
  mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
}

/* Notice card category badge — Graphite chip (Figma spec). Scoped to the card
 * so the breadcrumb/bid/event badges keep the default pill. width/height from the
 * spec become min-* (px) so the chip hugs longer labels instead of clipping them. */
.srta-notice-card .is-style-srta-badge {
  margin-top: 16px;
  /* image -> badge (not specified; kept at 16px) */
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--wp--custom--graphite--100, #EEF2F3);
  color: var(--wp--custom--graphite--900);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
}

/* Status colour modifiers (set by the binding source via a class) */
.is-style-srta-badge.srta-status--open,
.is-style-srta-badge.srta-status--upcoming,
.is-style-srta-badge.srta-status--scheduled {
  background: var(--wp--custom--amber--100);
  color: var(--wp--custom--amber--900);
}

/* Concluded meetings — teal pill */
.is-style-srta-badge.srta-status--past {
  background: var(--wp--custom--teal--50);
  color: var(--wp--custom--teal--900);
}

.is-style-srta-badge.srta-status--closed,
.is-style-srta-badge.srta-status--canceled,
.is-style-srta-badge.srta-status--cancelled {
  background: var(--wp--custom--graphite--100);
  color: var(--wp--custom--graphite--700);
}

.is-style-srta-badge.srta-status--awarded {
  background: var(--wp--custom--green--100);
  color: var(--wp--custom--green--800);
}

/* Bid card status badge — neutral teal pill (overrides the per-status colours) */
.srta-bid-card__body .is-style-srta-badge.srta-status-pill {
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--300);
  color: var(--wp--custom--teal--900);
  border-radius: 6px;
  font-weight: 500;
  text-transform: none;
  /* font-size inherits the base badge 0.75rem (12px) */
}

/* Open bids stand out in green (closed/canceled/awarded keep the neutral teal).
   Higher specificity than the neutral override above; pill shape is inherited. */
.srta-bid-card__body .is-style-srta-badge.srta-status-pill.srta-status--open {
  background: var(--wp--custom--green--50);
  border-color: var(--wp--custom--green--300);
  color: var(--wp--custom--green--900);
}

/* Closed bids read as muted/graphite. */
.srta-bid-card__body .is-style-srta-badge.srta-status-pill.srta-status--closed {
  background: var(--wp--custom--graphite--50);
  border-color: var(--wp--custom--graphite--300);
  color: var(--wp--custom--graphite--900);
}

/* On a closed bid the left date chip picks up the same graphite-50 fill so the
   whole card reads as concluded. :has() scopes it from the card root since the
   status class lives on the badge deep inside the body. */
.is-style-srta-card:has(.srta-status-pill.srta-status--closed) .is-style-srta-date-chip {
  background: var(--wp--custom--graphite--50);
}

/* Bid category chip — always shown next to the status badge, neutral teal. */
.srta-bid-card__body .is-style-srta-badge.srta-bid-category {
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--300);
  color: var(--wp--custom--teal--900);
  border-radius: 6px;
  font-weight: 500;
  text-transform: none;
}

/* Document page meta row: a document with no Type or no fiscal year renders the
   bound paragraph empty, and for the badge that means a styled uppercase pill with
   nothing in it. Same fix as the bid-category chip below. */
.srta-doc-meta > p:empty {
  display: none;
}

/* Hide the chip if a bid has no category (binding renders an empty paragraph). */
.srta-bid-card__body .is-style-srta-badge.srta-bid-category:empty {
  display: none;
}

/* Bid number (font-size 14px comes from the "label" preset in the markup) */
.srta-bid-card__body .srta-bid-number {
  color: var(--wp--custom--graphite--800);
  font-weight: 500;
}

/* Card titles (bid) — graphite, overriding the teal link colour */
.srta-bid-card__body .wp-block-post-title,
.srta-bid-card__body .wp-block-post-title a,
.srta-bid-card__body .wp-block-post-title a:hover {
  color: var(--wp--custom--graphite--900);
}

/* Bid card titles use semi-bold (600) */
.srta-bid-card__body .wp-block-post-title,
.srta-bid-card__body .wp-block-post-title a {
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Card
 * Block style for core/group -> "Card"
 * ------------------------------------------------------------------------- */
.is-style-srta-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--custom--teal--900) 4%, transparent);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  height: 100%;
}

/* Bid cards — Teal-200 border */
.is-style-srta-card:has(.srta-bid-card__body) {
  border-color: var(--wp--custom--teal--200);
  /* #B8E5E8 */
}

/* Event/meeting cards — Graphite-300 border */
.is-style-srta-card.srta-meeting-card {
  border-color: var(--wp--custom--graphite--300);
  /* #C3D0D3 */
}

/* Quick-link cards: no underline on the link label */
.srta-quick-links a {
  text-decoration: none;
}

/* Make the whole quick-link card clickable, not just the text label.
   The link's stretched ::after covers the card it sits in. Also grow to
   match the tallest neighbor in the row - the column itself already
   stretches (flex align-items default), but the card inside doesn't fill
   it without an explicit height. */
.srta-quick-links .wp-block-column>.wp-block-group {
  position: relative;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.srta-quick-links .wp-block-column>.wp-block-group a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Mobile: 2x2 grid of quick-link cards, icon stacked above the centered
   label (desktop keeps the 4-across row with icon + label side by side). */
@media (max-width: 600px) {
  .srta-quick-links .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .srta-quick-links .wp-block-column>.wp-block-group {
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center;
  }

  .srta-quick-links .wp-block-column>.wp-block-group p {
    text-align: center;
  }
}

/* Interactive cards (task / quick-link) lift on hover */
.is-style-srta-card.srta-card--interactive:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--custom--teal--900) 10%, transparent);
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------------------------
 * Icon tile  (the rounded square behind each card icon)
 * Block style for core/group -> "Icon tile"
 * ------------------------------------------------------------------------- */
.is-style-srta-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--wp--preset--color--primary-surface);
  color: var(--wp--preset--color--primary);
}

.is-style-srta-icon-tile .wp-block-icon,
.is-style-srta-icon-tile svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

/* Inline icons (meta rows) fill their sized wrapper span */
.srta-inline-icon {
  flex-shrink: 0;
  /* keep the icon square; don't let a flex row squeeze its width */
}

.srta-inline-icon svg {
  width: 100%;
  height: 100%;
}

/* srta-event-info / srta-bid-info row icons (date, time, address, etc). */
.srta-inline-icon--row {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--custom--graphite--500);
}

/* srta-bid-info contact row icons (email, phone). */
.srta-inline-icon--contact {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--wp--custom--teal--600);
}

/* Contact name row icon — the name isn't a link (unlike email/phone), so it
   doesn't get the teal link tone; matches the name text's near-black shade. */
.srta-bid-info__contact-name-icon {
  color: var(--wp--custom--graphite--900);
}

/* Wide event/meeting card meta row icons (time, address) — same tone as
   --row, smaller size to fit the single-line wide layout. */
.srta-inline-icon--row-sm {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--wp--custom--graphite--500);
}

/* Quick links row icon (teal band, gold glyph). */
.srta-quick-links__icon {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  color: #F2B705;
}

/* ----------------------------------------------------------------------------
 * Date chip  (JUN / 3 / 2026)
 * Block style for core/group -> "Date chip"
 * ------------------------------------------------------------------------- */
/* One pill containing both the date and the CLOSES block */
.is-style-srta-date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre all pill contents horizontally */
  justify-content: flex-start;
  /* stack at the top, do not spread vertically */
  align-self: stretch;
  /* full height — equal to the rest of the card contents */
  width: fit-content;
  /* width hugs its contents, no wider */
  gap: 12px;
  /* space between the date and the closes part */
  padding: 12px 16px;
  /* 12px vertical, 16px horizontal — shared sidebar padding */
  border-radius: 12px;
  background: var(--wp--custom--teal--50);
  text-align: center;
  line-height: 1.05;
}

/* The date and CLOSES regions share the same centred flex column */
.is-style-srta-date-chip .srta-date-chip__date,
.is-style-srta-date-chip .srta-date-chip__closes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Teal date region (JUN / 3 / 2026) */
.is-style-srta-date-chip .srta-date-chip__date {
  gap: 0.3rem;
  /* shared with .srta-meeting-date: equal, even day↔month / day↔year spacing */
  padding: 0;
  /* outer .is-style-srta-date-chip owns the 12px/8px sidebar padding */
  font-weight: 600;
  /* semi-bold */
  color: var(--wp--custom--teal--900);
}

/* Tight line box on the big day number so the gap above (to month) and below
   (to year/weekday) reads symmetrically in both the bid and meeting chips. */
.is-style-srta-date-chip .srta-date-chip__day {
  font-size: 32px;
  line-height: 1;
}

/* Bids with no closing date leave the month/day/year bindings empty. Hide the
   teal date region so the chip shows only the "Closes / …" text (e.g.
   "Upon Contract") instead of an empty box. */
.is-style-srta-date-chip .srta-date-chip__date:has(.srta-date-chip__day:empty) {
  display: none;
}

/* Graphite "closes" region (CLOSES / 5:00 PM) */
.is-style-srta-date-chip .srta-date-chip__closes {
  gap: 0.1rem;
  padding: 0;
  /* outer .is-style-srta-date-chip owns the 12px/8px sidebar padding; 12px chip gap separates from the date region */
  font-weight: 500;
  /* medium */
  color: var(--wp--custom--graphite--600);
}

/* Uppercase mini-labels. Font sizes come from the markup presets:
   label = 14px (month/year/closes), xx-large = 32px (day). */
.is-style-srta-date-chip .srta-date-chip__month,
.is-style-srta-date-chip .srta-date-chip__closes-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* These are single-word labels. The trailing letter-spacing isn't counted by
     the chip's fit-content width, leaving the box ~1 letter too narrow and
     wrapping the last char (e.g. "CLOSE"/"S"). Keep them on one line. */
  white-space: nowrap;
}

.is-style-srta-date-chip .srta-date-chip__year {
  opacity: 0.85;
}

.is-style-srta-date-chip .srta-date-chip__closes-time {
  white-space: nowrap;
  /* keep "5:00 PM" on one line — drives the chip width */
}

/* When there's no concrete close date/time, the value is free text
   (e.g. "Upon Contract") — let it wrap instead of forcing a wide chip. */
.is-style-srta-date-chip:has(.srta-date-chip__day:empty) .srta-date-chip__closes-time {
  white-space: normal;
}

/* ----------------------------------------------------------------------------
 * Upcoming-meetings card — two-column layout: a full-height date rail on the
 * left, the meeting details stacked on the right.
 * ------------------------------------------------------------------------- */
/* Responsive card grid: 1 column on mobile, 2 up to 1024px, 3 above (desktop
   default, no override needed there). */
@media (max-width: 600px) {
  .srta-upcoming-meetings .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .srta-upcoming-meetings .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* The post <li> is the grid item (stretched to the equal row height). Make it a
   flex container so the card fills that height reliably — percentage heights
   (height:100%) don't resolve against stretched grid items in every browser,
   which left the card at content height and the body with nothing to grow into. */
.wp-block-post:has(> .srta-meeting-card) {
  display: flex;
}

.srta-meeting-card {
  flex-direction: row;
  align-items: stretch;
  /* override WP flex default (center) so the rail runs full height */
  padding: var(--wp--preset--spacing--35);
  /* fixed 20px, overrides the base card clamp */
}

.srta-meeting-card__body {
  flex: 1;
  /* take the remaining width beside the date rail */
  min-width: 0;
  align-self: stretch;
  /* fill the full card height so margin-top:auto on the buttons can pin them down */
}

/* Status pill sits at the top-left of the body column */
.srta-meeting-card__body>.srta-status-pill {
  align-self: flex-start;
}

/* Meeting card meta (Time / Address): label above value, beside the icon */
.srta-meeting-card__body .srta-meta-label {
  font-size: var(--wp--preset--font-size--x-small);
  /* 12px */
  font-weight: 400;
  color: var(--wp--custom--graphite--600);
}

.srta-meeting-card__body .srta-meta-value {
  font-size: var(--wp--preset--font-size--small);
  /* 14px */
  font-weight: 500;
  color: var(--wp--custom--graphite--800);
}

/* Meeting card title: 18px, semi-bold, graphite-900 */
.srta-meeting-card__body .wp-block-post-title,
.srta-meeting-card__body .wp-block-post-title a {
  font-size: var(--wp--preset--font-size--large);
  /* 18px */
  font-weight: 600;
  color: var(--wp--custom--graphite--900);
  /* #1F2A2E */
}

/* Meeting status pill label: medium weight, 12px, no uppercase, rounded corners */
.srta-meeting-card__body .srta-status-pill {
  font-weight: 500;
  font-size: var(--wp--preset--font-size--x-small);
  /* 12px */
  text-transform: none;
  border-radius: 0.375rem;
  /* 6px */
}

/* Meeting status pill colours: bordered tokens per status.
   A future meeting ("Scheduled" / "Upcoming" — same state) is teal. */
.srta-meeting-card__body .srta-status-pill.srta-status--scheduled,
.srta-meeting-card__body .srta-status-pill.srta-status--upcoming {
  background: var(--wp--custom--teal--50);
  /* #EBF7F8 */
  border: 1px solid var(--wp--custom--teal--300);
  /* #94D8DD */
  color: var(--wp--custom--teal--900);
  /* #00464C */
}

/* A meeting that has already happened ("Concluded") — graphite pill,
   matching the closed-bid badge on the Bid Postings cards. */
.srta-meeting-card__body .srta-status-pill.srta-status--past {
  background: var(--wp--custom--graphite--50);
  /* #F6F8F8 */
  border: 1px solid var(--wp--custom--graphite--300);
  /* #C3D0D3 */
  color: var(--wp--custom--graphite--900);
  /* #1F2A2E */
}

/* Concluded meeting — the whole left date sidebar reads graphite too (the
   default chip is teal). :has() scopes it from the card root since the status
   class lives on the badge inside the body. Scheduled stays teal. */
.is-style-srta-card:has(.srta-status-pill.srta-status--past) .srta-meeting-date {
  background: var(--wp--custom--graphite--50);
  /* #F6F8F8 */
  color: var(--wp--custom--graphite--900);
  /* day number + base */
}

.is-style-srta-card:has(.srta-status-pill.srta-status--past) .srta-meeting-date .srta-date-chip__month {
  color: var(--wp--custom--graphite--900);
  /* #1F2A2E */
}

.is-style-srta-card:has(.srta-status-pill.srta-status--past) .srta-meeting-date .srta-date-chip__year {
  color: var(--wp--custom--graphite--600);
  /* #4F666C */
}

/* Keep the stacked meeting buttons in a single column. WordPress defaults the
   buttons wrapper to flex-wrap:wrap, which — in a fixed-height card — spills the
   second button into a new column (side by side). Force nowrap to prevent that. */
/* The content block grows to fill the body, pushing the buttons to the bottom. */
.srta-meeting-card__content {
  flex: 1;
}

.srta-meeting-card__body .wp-block-buttons.is-layout-flex {
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  /* never grow — stay the buttons' natural height so only the content grows */
  padding-top: var(--wp--preset--spacing--30);
  /* 16px between the divider and the first button */
  border-top: 1px solid var(--wp--preset--color--border);
  /* divider line between the body content and the buttons */
}

/* The vertical doc-button group is a flex child of the card body, which
   left-aligns it to content width — so the width:100% buttons inside only fill
   that narrow box. Stretch the container so they span the full card. Targets the
   group wherever it appears (home pattern + event archive/single templates). */
.wp-block-buttons.is-layout-flex:has(.srta-doc-btn) {
  align-self: stretch;
  width: 100%;
}

/* Shared layout for the stacked document buttons (View Agenda / Download Packet /
   View Minutes / secondary docs) — full-width, small radius; padding/line-height/
   border (and therefore height) come from the shared Filled/Outlined box-metrics
   rules below, which every .srta-doc-btn pairs with one of. Stacking + full width
   come from the markup (vertical wp:buttons + width:100). Colour comes from the
   is-style-* variant; which document each button is — and whether it disables/
   hides when its file is missing — comes from the server-driven srta-*-button
   identity class (see srta_apply_conditional_classes). */
.srta-doc-btn .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  /* 8px between icon and label */
  width: 100%;
  border-radius: 0.375rem;
  /* radius-s (6px) */
}

/* Left-aligned date stack that hugs its width and fills the card height.
   Typography matches the bid card's date region (semi-bold teal-900, tight
   gap; month/year small + uppercase, day xxx-large from the markup presets). */
.is-style-srta-date-chip.srta-meeting-date {
  align-items: center;
  /* centre the date stack horizontally */
  align-self: stretch;
  /* full card height */
  width: fit-content;
  /* only as wide as the date needs */
  text-align: center;
  gap: 0.125rem;
  /* spacing between the day number and the month / weekday lines */
  padding: 12px 16px;
  /* 12px vertical, 16px horizontal — matches the bid sidebar */
  font-weight: 600;
  /* semi-bold */
  color: var(--wp--custom--teal--900);
}

.is-style-srta-date-chip.srta-meeting-date .srta-date-chip__month {
  color: var(--wp--custom--teal--900);
  /* #00464C */
  font-size: 12px;
  font-weight: 600;
}

.is-style-srta-date-chip.srta-meeting-date .srta-date-chip__year {
  color: var(--wp--custom--teal--800);
  /* #005E65 — teal-600 on teal-50 measured 3.84:1, below AA (WCAG 2.1 AA audit, 2026-07-23) */
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
  /* override the .srta-date-chip__year 0.85 default */
}

/* ----------------------------------------------------------------------------
 * Event/Bid/Job information card — single-event, single-bid and single-job
 * detail panel: a teal-600 header bar over a stacked meta list. Values
 * resolve from post meta via the srta/field bindings; the header is static.
 * Shared chrome between srta/event-info, srta/bid-info and srta/job-info
 * (same component, three post types).
 * ------------------------------------------------------------------------- */
.srta-event-info,
.srta-bid-info,
.srta-job-info {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  overflow: hidden;
  /* clips the header's square top corners to the card's own
    radius — the header no longer needs to duplicate border-radius/negative
    margin to fake it, which is what let the card's own border peek through
    above the title whenever the two roundings didn't line up pixel-for-pixel. */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--custom--teal--900) 4%, transparent);
}

/* Top row: full-bleed teal band, 10px inner padding, teal-700 line separating
   it from the body below. */
.srta-event-info__header,
.srta-bid-info__header,
.srta-job-info__header {
  /* teal-700, not teal-600: white title text needs 4.5:1 and teal-600 only
     reaches 4.21:1 (WCAG 2.1 AA audit, 2026-07-23). */
  background: var(--wp--custom--teal--700);
  /* #00767E */
  border-bottom: 1px solid var(--wp--custom--teal--800);
  /* #005E65 */
  padding: 10px;
}

.srta-event-info__title,
.srta-bid-info__title,
.srta-job-info__title {
  margin: 0;
  color: var(--wp--preset--color--base);
  /* white */
  font-size: 16px;
  font-weight: 600;
}

/* Body: 20px inner padding around the stacked rows */
.srta-event-info__body,
.srta-bid-info__body,
.srta-job-info__body {
  padding: 20px;
}

/* Each meta row: 20px icon beside a label-over-value stack, divided by a hairline */
.srta-event-info__row,
.srta-bid-info__row,
.srta-job-info__row {
  padding-block: 16px;
}

.srta-event-info__row:first-child,
.srta-bid-info__row:first-child,
.srta-job-info__row:first-child {
  padding-top: 0;
}

.srta-event-info__row:last-child,
.srta-bid-info__row:last-child,
.srta-job-info__row:last-child {
  padding-bottom: 0;
}

.srta-event-info__row+.srta-event-info__row,
.srta-bid-info__row+.srta-bid-info__row,
.srta-job-info__row+.srta-job-info__row {
  border-top: 1px solid var(--wp--preset--color--border);
}

.srta-event-info .srta-meta-label,
.srta-bid-info .srta-meta-label,
.srta-job-info .srta-meta-label {
  font-size: var(--wp--preset--font-size--x-small);
  /* 12px */
  font-weight: 400;
  color: var(--wp--custom--graphite--600);
}

.srta-event-info .srta-meta-value,
.srta-bid-info .srta-meta-value,
.srta-job-info .srta-meta-value {
  font-size: var(--wp--preset--font-size--small);
  /* 14px */
  font-weight: 500;
  color: var(--wp--custom--graphite--900);
}

/* Job info card: Apply button pinned under the last hairline row. */
.srta-job-info__apply {
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--border);
}

.srta-job-info__apply .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* Bid info card: Contact section sits under the last hairline row, its two
   rows (email/phone) styled as plain icon+link lines rather than meta rows. */
.srta-bid-info__contact {
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--border);
}

.srta-bid-info__contact-row {
  margin-top: 0.1rem;
}

.srta-contact-link.wp-block-button {
  margin: 0;
}

.srta-contact-link .wp-block-button__link {
  padding: 0;
  background: none;
  color: var(--wp--custom--teal--700);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  text-align: left;
}

.srta-contact-link .wp-block-button__link:hover {
  background: none;
  color: var(--wp--custom--teal--800);
  text-decoration: underline;
}

/* Status bar — "This bid/job is open/closed/…" + Print, above the title.
   Shared by srta/bid-actions (.srta-bid-status-bar) and srta/job-actions
   (.srta-job-status-bar). */
.srta-bid-status-bar,
.srta-job-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--50);
  /* 32px — matches .srta-bid-notice */
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
  background: var(--wp--custom--graphite--50);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
}

.srta-bid-status-bar__label,
.srta-job-status-bar__label {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  color: var(--wp--custom--graphite--900);
  font-weight: 600;
}

.srta-bid-status-bar__icon,
.srta-job-status-bar__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--wp--custom--graphite--600);
}

.srta-bid-status-bar__icon svg,
.srta-job-status-bar__icon svg {
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------------------
 * Link with trailing arrow
 * Block style for core/paragraph / core/button -> "Arrow link"
 * ------------------------------------------------------------------------- */
.is-style-srta-arrow-link a,
a.is-style-srta-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
}

.is-style-srta-arrow-link a::after,
a.is-style-srta-arrow-link::after {
  content: "\2197";
  transition: transform 0.15s ease;
}

.is-style-srta-arrow-link a:hover::after,
a.is-style-srta-arrow-link:hover::after {
  transform: translate(2px, -2px);
}

/* ----------------------------------------------------------------------------
 * Button variations (core/button block styles)
 * Defaults (teal) come from theme.json elements.button.
 * ------------------------------------------------------------------------- */

/* Shared hover/focus transition for every button variant — every hand-rolled
   button elsewhere on the site (search submit, share buttons, staff sort)
   already animates background/border/color on hover; these were the one
   button family still snapping instantly. */
.wp-block-button__link {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Shared keyboard-focus ring for every button variant (default, gold, teal,
   outline*, link) — matches the branded focus-visible treatment already used
   on nav/search/checkbox controls elsewhere, rather than leaving buttons on
   the plain browser default. is-style-srta-outline-light overrides this below
   since it sits on dark backgrounds, where a teal ring reads at low contrast. */
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * Colour system: one formula per shape, reused for every colour.
 *   Filled   = base-600 bg  / base-800(or -700 for amber) bg on hover / a
 *              light shade bg when disabled — always white text.
 *   Outlined = base text+border / darker text+border + a light tinted bg on
 *              hover / a light shade text+border when disabled. The border
 *              is `currentColor` throughout, so a colour only ever needs to
 *              set `color` — the border follows automatically.
 * Teal + Amber have both shapes; Graphite/Green/Red are outline-only (no
 * filled use case exists today). Green/Red are reserved for future
 * success/destructive states — nothing uses them yet.
 * ------------------------------------------------------------------------- */

/* Filled — same box metrics as Outlined below (padding/line-height/border-
   width) so a filled and an outlined button sitting side by side always
   compute to the same height, with no hardcoded height anywhere. The border
   is transparent (filled buttons don't want a visible ring) — it only
   reserves the same 1px of box space Outlined's real border takes up.
   Teal keeps white text (bg is dark enough to pass AA contrast); amber uses
   dark ink text instead, since amber is a light/bright hue and darkening it
   enough for white text to pass 4.5:1 would push it out of its recognizable
   "amber" range (see WCAG 2.1 AA audit, 2026-07-23). */
.wp-block-button.is-style-srta-fill-teal .wp-block-button__link,
.wp-block-button.is-style-srta-fill-amber .wp-block-button__link {
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 10px 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

.wp-block-button.is-style-srta-fill-teal .wp-block-button__link {
  color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-srta-fill-amber .wp-block-button__link {
  color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-srta-fill-teal .wp-block-button__link {
  background-color: var(--wp--custom--teal--700, #00767E);
}

.wp-block-button.is-style-srta-fill-teal .wp-block-button__link:hover {
  background-color: var(--wp--custom--teal--800, #005E65);
}

.wp-block-button.is-style-srta-fill-teal.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-fill-teal .wp-block-button__link.srta-btn--disabled {
  background-color: var(--wp--custom--teal--300, #94D8DD);
  opacity: 1;
}

.wp-block-button.is-style-srta-fill-amber .wp-block-button__link {
  background-color: var(--wp--custom--amber--600, #E6A200);
}

.wp-block-button.is-style-srta-fill-amber .wp-block-button__link:hover {
  background-color: var(--wp--custom--amber--700, #CC9000);
}

.wp-block-button.is-style-srta-fill-amber.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-fill-amber .wp-block-button__link.srta-btn--disabled {
  background-color: var(--wp--custom--amber--200, #FFE199);
  opacity: 1;
}

/* Outlined — shared box metrics; each colour only sets `color` below (the
   currentColor border follows it automatically, base and hover alike). */
.wp-block-button.is-style-srta-outline-teal .wp-block-button__link,
.wp-block-button.is-style-srta-outline-amber .wp-block-button__link,
.wp-block-button.is-style-srta-outline-graphite .wp-block-button__link,
.wp-block-button.is-style-srta-outline-green .wp-block-button__link,
.wp-block-button.is-style-srta-outline-red .wp-block-button__link {
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid currentColor;
  padding: 10px 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Teal outline — colour doesn't shift on hover, only the tinted bg appears. */
.wp-block-button.is-style-srta-outline-teal .wp-block-button__link {
  color: var(--wp--custom--teal--700, #00767E);
}

.wp-block-button.is-style-srta-outline-teal .wp-block-button__link:hover {
  background-color: var(--wp--custom--teal--50, #EBF7F8);
}

.wp-block-button.is-style-srta-outline-teal.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-teal .wp-block-button__link.srta-btn--disabled {
  color: var(--wp--custom--teal--300, #94D8DD);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-amber .wp-block-button__link {
  color: var(--wp--custom--amber--800, #996C00);
}

.wp-block-button.is-style-srta-outline-amber .wp-block-button__link:hover {
  color: var(--wp--custom--amber--900, #664800);
  background-color: var(--wp--custom--amber--50, #FFF8E6);
}

.wp-block-button.is-style-srta-outline-amber.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-amber .wp-block-button__link.srta-btn--disabled {
  color: var(--wp--custom--amber--200, #FFE199);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-graphite .wp-block-button__link {
  color: var(--wp--custom--graphite--600);
}

.wp-block-button.is-style-srta-outline-graphite .wp-block-button__link:hover {
  color: var(--wp--custom--graphite--700);
  background-color: var(--wp--custom--graphite--50);
}

.wp-block-button.is-style-srta-outline-graphite.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-graphite .wp-block-button__link.srta-btn--disabled {
  color: var(--wp--custom--graphite--300);
  opacity: 1;
}

/* section-nav's raw <a> links reuse this class outside a wp:button wrapper —
   they need their own border since the shared outline rule above only
   targets .wp-block-button__link. */
a.is-style-srta-outline-graphite {
  border: 1px solid var(--wp--custom--graphite--600);
}

/* Subtle outline family — a lighter, decoupled border (doesn't follow
   currentColor like the regular outline family above) + darker 900 text, for
   dense persistent chrome (e.g. the section-nav sidebar) where the ordinary
   600-border outline reads too heavy repeated down a long list. Shared box
   metrics; each colour only sets its own border/text/hover/disabled shades. */
.wp-block-button.is-style-srta-outline-teal-subtle .wp-block-button__link,
.wp-block-button.is-style-srta-outline-amber-subtle .wp-block-button__link,
.wp-block-button.is-style-srta-outline-graphite-subtle .wp-block-button__link,
.wp-block-button.is-style-srta-outline-green-subtle .wp-block-button__link {
  background-color: transparent;
  padding: 10px 20px;
  line-height: 1.3;
  letter-spacing: 0;
}

.wp-block-button.is-style-srta-outline-teal-subtle .wp-block-button__link {
  border: 1px solid var(--wp--custom--teal--200);
  color: var(--wp--custom--teal--900);
}

.wp-block-button.is-style-srta-outline-teal-subtle .wp-block-button__link:hover {
  border-color: var(--wp--custom--teal--300);
  background-color: var(--wp--custom--teal--50);
}

.wp-block-button.is-style-srta-outline-teal-subtle.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-teal-subtle .wp-block-button__link.srta-btn--disabled {
  border-color: var(--wp--custom--teal--100);
  color: var(--wp--custom--teal--300);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-amber-subtle .wp-block-button__link {
  border: 1px solid var(--wp--custom--amber--200);
  color: var(--wp--custom--amber--900);
}

.wp-block-button.is-style-srta-outline-amber-subtle .wp-block-button__link:hover {
  border-color: var(--wp--custom--amber--300);
  background-color: var(--wp--custom--amber--50);
}

.wp-block-button.is-style-srta-outline-amber-subtle.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-amber-subtle .wp-block-button__link.srta-btn--disabled {
  border-color: var(--wp--custom--amber--100);
  color: var(--wp--custom--amber--300);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-graphite-subtle .wp-block-button__link {
  border: 1px solid var(--wp--custom--graphite--200);
  color: var(--wp--custom--graphite--900);
}

.wp-block-button.is-style-srta-outline-graphite-subtle .wp-block-button__link:hover {
  border-color: var(--wp--custom--graphite--300);
  background-color: var(--wp--custom--graphite--50);
}

.wp-block-button.is-style-srta-outline-graphite-subtle.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-graphite-subtle .wp-block-button__link.srta-btn--disabled {
  border-color: var(--wp--custom--graphite--100);
  color: var(--wp--custom--graphite--300);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-green-subtle .wp-block-button__link {
  border: 1px solid var(--wp--custom--green--200);
  color: var(--wp--custom--green--900);
}

.wp-block-button.is-style-srta-outline-green-subtle .wp-block-button__link:hover {
  border-color: var(--wp--custom--green--300);
  background-color: var(--wp--custom--green--50);
}

.wp-block-button.is-style-srta-outline-green-subtle.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-green-subtle .wp-block-button__link.srta-btn--disabled {
  border-color: var(--wp--custom--green--100);
  color: var(--wp--custom--green--300);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-green .wp-block-button__link {
  color: var(--wp--custom--green--800);
}

.wp-block-button.is-style-srta-outline-green .wp-block-button__link:hover {
  color: var(--wp--custom--green--900);
  background-color: var(--wp--custom--green--50);
}

.wp-block-button.is-style-srta-outline-green.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-green .wp-block-button__link.srta-btn--disabled {
  color: var(--wp--custom--green--300);
  opacity: 1;
}

.wp-block-button.is-style-srta-outline-red .wp-block-button__link {
  color: var(--wp--custom--red--800);
}

.wp-block-button.is-style-srta-outline-red .wp-block-button__link:hover {
  color: var(--wp--custom--red--900);
  background-color: var(--wp--custom--red--50);
}

.wp-block-button.is-style-srta-outline-red.srta-btn--disabled .wp-block-button__link,
.wp-block-button.is-style-srta-outline-red .wp-block-button__link.srta-btn--disabled {
  color: var(--wp--custom--red--300);
  opacity: 1;
}

/* Contact CTA buttons (Call / Email) — fill the available width up to 350px,
   always equal width and equal height. */
.srta-cta-buttons {
  width: 350px;
  max-width: 100%;
}

.srta-cta-buttons .wp-block-button {
  width: 100%;
}

/* Padding/line-height/border (and therefore height) come from the shared
   Filled/Outlined box-metrics rules above — this only sets the full width
   and the smaller 14px size specific to this CTA stack. */
.srta-cta-buttons .wp-block-button__link {
  width: 100%;
  font-size: 14px;
}

/* Outline on dark/teal backgrounds (hero, CTA) */
.wp-block-button.is-style-srta-outline-light .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--base);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.wp-block-button.is-style-srta-outline-light .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-srta-outline-light .wp-block-button__link:focus-visible {
  outline-color: var(--wp--preset--color--base);
}

/* ----------------------------------------------------------------------------
 * Bid card action buttons (View RFP = is-style-srta-fill-teal, Download
 * Documents = is-style-srta-outline-teal). Colour, padding, line-height and
 * border (and therefore height) come entirely from the shared Filled/
 * Outlined box-metrics rules above — this only sets the smaller 14px size
 * specific to bid cards.
 * ------------------------------------------------------------------------- */
.srta-bid-card__body .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Mobile: "View RFP" / "Download Documents" stack full-width instead of
   sitting side by side (desktop keeps the row, unchanged). */
@media (max-width: 600px) {
  .srta-bid-card__body .wp-block-buttons {
    flex-direction: column;
  }

  .srta-bid-card__body .wp-block-buttons .wp-block-button,
  .srta-bid-card__body .wp-block-buttons .wp-block-button__link {
    width: 100%;
  }
}

/* Home page "View All ..." section CTAs (Current bids & opportunities,
   Reports & publications, Upcoming meetings, Latest notices): on mobile the
   button next to the heading moves below the cards instead (desktop
   position is unchanged). Implemented as two copies of the same button,
   toggled by breakpoint, since the heading and the cards live in separate
   DOM branches that can't be reordered with CSS alone. */
/* !important throughout: core's own global styles include ancestor-combinator
   rules like "body .is-layout-flex{display:flex}", which outrank a plain
   single-class selector regardless of source order and were silently
   defeating a plain display:none/flex here. */
.srta-section-cta--bottom {
  display: none !important;
}

/* All "View All ..." buttons: white background on both desktop and mobile
   (the outline-amber style's own background-color:transparent otherwise
   wins by specificity). */
.srta-section-cta .wp-block-button__link {
  background-color: var(--wp--preset--color--base) !important;
}

@media (max-width: 781px) {
  .srta-section-cta--top {
    display: none !important;
  }

  .srta-section-cta--bottom {
    display: flex !important;
    margin-top: var(--wp--preset--spacing--40);
  }

  /* Full width only on mobile; desktop stays content-sized. */
  .srta-section-cta .wp-block-button {
    width: 100%;
  }

  .srta-section-cta .wp-block-button__link {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Reports & Publications: the document cards use a fixed CSS grid (doesn't
   auto-stack like a flex columns block). Responsive columns to match
   Upcoming Meetings' pattern: 1 up to 640px, 2 up to 1024px, 4 above
   (desktop default, no override needed there). */
@media (max-width: 640px) {
  .srta-reports-publications .wp-block-post-template {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .srta-reports-publications .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* The card has height:100% (for equal-height rows), but a percentage height
   inside a CSS Grid auto-sized row is unsafe in Safari - the row's size and
   the card's size fight each other and the card overflows past its own row
   into the next one. Tried making the <li> a flex container instead (like
   the meeting card) so the child stretches via flex alignment rather than
   a percentage - that made it worse (nested grid > flex auto-sizing has
   its own bugs and threw the row heights off completely). Dropping the
   card back to auto height below 1024px is the only combination that's
   actually held up; equal-height rows only apply at the 4-column desktop
   width now. */
@media (max-width: 1024px) {
  .srta-reports-publications .wp-block-post-template .wp-block-srta-card {
    height: auto !important;
  }
}

/* Colored/tinted home-page sections: fixed 32px top/bottom padding on
   mobile instead of the larger desktop preset/clamp values (unchanged). */
@media (max-width: 600px) {

  .srta-hero,
  .srta-quick-links,
  .srta-procurement-bids,
  .srta-upcoming-meetings,
  .srta-contact-cta {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Inline text-link button (document / notice "View ..." actions) */
.wp-block-button.is-style-srta-link .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  padding: 0;
  font-weight: 600;
}

.wp-block-button.is-style-srta-link .wp-block-button__link::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.25rem;
  /* small gap between label and arrow icon */
  transition: transform 0.15s ease;
}

.wp-block-button.is-style-srta-link .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary-deep);
}

.wp-block-button.is-style-srta-link .wp-block-button__link:hover::after {
  transform: translate(2px, -2px);
}

/* Disabled button look for "Agenda Not Yet Available" / "Packet Pending".
   Target the inner link (the class sits on the outer .wp-block-button), so the
   style lands on the button itself — not as an extra outer box around it. */
.wp-block-button.is-style-srta-disabled .wp-block-button__link,
.srta-btn--disabled .wp-block-button__link {
  opacity: 0.5;
  /* dim the button's own styling instead of greying it out */
  pointer-events: none;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
 * Header / navigation
 * ------------------------------------------------------------------------- */
.srta-header {
  /* teal-700, not teal-600: white nav text needs 4.5:1 against this
     background and teal-600 only reaches 4.21:1 (WCAG 2.1 AA audit, 2026-07-23). */
  background: var(--wp--custom--teal--700, #00767E);
  color: var(--wp--preset--color--base);
  position: relative;
}

/* Teal-400 hairline under the header, limited to the content width (wideSize),
   centered — matches the alignwide content edges, not the full-bleed bar.
   Shared with .srta-hero::after below, which draws the same hairline between
   the hero and the quick-links row so they read as one hero band. */
.srta-header::after,
.srta-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
  max-width: var(--wp--style--global--wide-size);
  height: 1px;
  background: var(--wp--custom--teal--400);
}

/* The hairline only belongs on the home page's header/hero seam, at any
   viewport width; every other page's header sits flush with no border
   underneath it. (Previously also force-hidden below 600px regardless of
   page, which suppressed it on the home page in mobile view too.) */
body:not(.home) .srta-header::after {
  display: none;
}

/* Remove the default root gap so the hero sits flush under the header */
.wp-site-blocks>main {
  margin-block-start: 0;
}

.srta-hero {
  position: relative;
}

/* Hero CTA override: "Find Meetings & Agendas" (outline-graphite) needs a
   solid white fill on the hero's photo background — outline-graphite's own
   transparent default would let the photo show through. Text is darkened to
   graphite-800 (vs. the shared recipe's graphite-600) for more contrast
   against the hero photo; hover deepens further to graphite-900/graphite-100
   fill, repeated explicitly since it'd otherwise tie in specificity with the
   base rule and risk losing to source order.
   "View Bids & Opportunities" needs no colour override — is-style-srta-fill-
   amber's own base/hover colours already match. */
.srta-hero .wp-block-button.is-style-srta-outline-graphite .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--custom--graphite--800);
}

.srta-hero .wp-block-button.is-style-srta-outline-graphite .wp-block-button__link:hover {
  background-color: var(--wp--custom--graphite--100);
  color: var(--wp--custom--graphite--900);
}

/* Hero title: 40px on desktop (the "huge" preset, unchanged), 24px on mobile.
   Hero subtitle: desktop "x-large" preset unchanged, 16px on mobile. */
@media (max-width: 600px) {
  .srta-hero h1.wp-block-heading {
    font-size: 24px !important;
  }

  .srta-hero p.has-x-large-font-size {
    font-size: 16px !important;
  }

  /* Stack the "View Bids & Opportunities" / "Find Meetings & Agendas" CTAs
     full-width instead of side by side. */
  .srta-hero .wp-block-buttons {
    flex-direction: column;
  }

  .srta-hero .wp-block-buttons .wp-block-button {
    width: 100%;
  }

  .srta-hero .wp-block-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ----------------------------------------------------------------------------
 * Type scale (h1-h6) — desktop + mobile
 * Overrides the theme.json defaults (which give h1/h2 the same 32px and only
 * step down from h3) with a real hierarchy, and a mobile scale that eases off
 * toward ~0.9 at the bottom (h5/h6) so small headings don't shrink past
 * legibility. h1 must always render bigger than h2, on every page — a strict
 * size hierarchy, not one relying on color/weight to read as different.
 *   level   desktop  mobile  ratio
 *   h1      32px     24px    0.75
 *   h2      24px     18px    0.75
 *   h3      20px     16px    0.80
 *   h4      18px     15px    0.83
 *   h5      16px     14px    0.88
 *   h6      14px     13px    0.93
 * Scoped to plain headings (.wp-block-heading / .wp-block-post-title with no
 * explicit fontSize) — anything with a "has-*-font-size" utility class (e.g.
 * the homepage hero's fontSize:"huge") keeps winning since that class ships
 * with !important. */
h1.wp-block-heading,
h1.wp-block-post-title,
h1.wp-block-query-title {
  font-size: 32px;
}

h2.wp-block-heading,
h2.wp-block-post-title,
h2.wp-block-query-title {
  font-size: 24px;
}

h3.wp-block-heading,
h3.wp-block-post-title {
  font-size: 20px;
}

h4.wp-block-heading,
h4.wp-block-post-title {
  font-size: 18px;
}

h5.wp-block-heading,
h5.wp-block-post-title {
  font-size: 16px;
}

h6.wp-block-heading,
h6.wp-block-post-title {
  font-size: 14px;
}

/* h1/h2 headings use Teal 700 instead of the default Ink heading color.
   .wp-block-query-title (archive/search/taxonomy page titles) included —
   it's a separate block from core/heading and core/post-title.
   Home page only: h2 uses Graphite 900 instead — see the `.home` override
   below (`.home` is WordPress's body class for is_front_page(), independent
   of whether the front page shows a static page or the latest posts). */
h1.wp-block-heading,
h1.wp-block-post-title,
h1.wp-block-query-title,
h2.wp-block-heading,
h2.wp-block-post-title,
h2.wp-block-query-title {
  color: var(--wp--custom--teal--700, #00767E);
}

.home h2.wp-block-heading,
.home h2.wp-block-post-title,
.home h2.wp-block-query-title {
  color: var(--wp--custom--graphite--900, #1F2A2E);
}

/* Home page runs one step up from the sitewide type scale above (40/32/24
   vs the sitewide 32/24/20) — the hero's h1 already gets there on its own
   via its explicit "huge" fontSize (has-huge-font-size ships !important, so
   it doesn't need a rule here); h2/h3 don't have an explicit fontSize on any
   home section heading, so they need it set here instead. */
.home h2.wp-block-heading,
.home h2.wp-block-post-title,
.home h2.wp-block-query-title {
  font-size: 32px;
}

.home h3.wp-block-heading,
.home h3.wp-block-post-title {
  font-size: 24px;
}

@media (max-width: 600px) {

  .home h2.wp-block-heading,
  .home h2.wp-block-post-title,
  .home h2.wp-block-query-title {
    font-size: 24px;
  }

  .home h3.wp-block-heading,
  .home h3.wp-block-post-title {
    font-size: 20px;
  }
}

@media (max-width: 600px) {

  h1.wp-block-heading,
  h1.wp-block-post-title,
  h1.wp-block-query-title {
    font-size: 24px;
  }

  h2.wp-block-heading,
  h2.wp-block-post-title,
  h2.wp-block-query-title {
    font-size: 18px;
  }

  h3.wp-block-heading,
  h3.wp-block-post-title {
    font-size: 16px;
  }

  h4.wp-block-heading,
  h4.wp-block-post-title {
    font-size: 15px;
  }

  h5.wp-block-heading,
  h5.wp-block-post-title {
    font-size: 14px;
  }

  h6.wp-block-heading,
  h6.wp-block-post-title {
    font-size: 13px;
  }
}

/* Page title -> body gap (archive-bid, archive-event, page-section,
   page-notify-me): 40/32/32/24px on desktop, unified to 24px on mobile. The
   inline style="margin-bottom:var(...)" set per-block by the editor always
   outranks a plain selector, hence !important. */
@media (max-width: 600px) {
  .srta-page-title {
    margin-bottom: 24px !important;
  }
}

/* Home page on mobile: 24px edge gutter on desktop (the theme's global root
   padding) shrinks to 12px, everywhere on the page (header, hero, quick
   links, popular tasks, current bids, ...) since they all size their
   horizontal padding off this same custom property. */
@media (max-width: 600px) {
  body.home {
    --wp--style--root--padding-left: 12px;
    --wp--style--root--padding-right: 12px;
  }
}

.srta-header .srta-logo {
  margin: 0;
}

.srta-header .srta-logo a {
  /* The <a> stays inline by default even though its <img> child is block,
     leaving a phantom gap underneath from the <a>'s own inline line box. */
  display: block;
}

.srta-header .srta-logo img {
  display: block;
  width: 209.85px;
  height: auto;
  /* native 630×173 ratio → ≈57.6px tall, per design */
}

/* Keep logo, nav and search on a single row; let the nav take the slack so
   the search field no longer wraps to a second line. */
.srta-header .srta-header-bar {
  flex-wrap: nowrap;
  gap: 1.5rem;
}

/* Wraps the mobile search toggle + the nav (whose hamburger is its only
   visible child on mobile) so the two buttons sit right next to each other
   instead of being pulled apart by the space-between header-bar layout. */
.srta-header .srta-header-bar>.srta-nav-group {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 4px;
}

.srta-header .srta-nav-group>.wp-block-navigation {
  flex: 0 1 auto;
  min-width: 0;
}

.srta-header .srta-header-bar>.srta-search {
  flex: 0 0 auto;
}

/* Between 640px and 1279px the inline search field and the hamburger are
   both visible (nav is still collapsed there) — put the field to the left
   of the hamburger instead of the default DOM order (search after nav).
   Push the nav-group after search instead of pulling search before
   everything (order:-1 on search also jumped it ahead of the logo, since
   order compares across all header-bar children, not just its neighbor).

   The nav-group's own flex-grow (needed elsewhere to push a lone hamburger
   to the far right) would otherwise swallow all the free space *inside*
   itself, stranding the hamburger far from the search field. Stop it
   growing here and put the auto-margin on the search field instead, so all
   the slack collapses into one gap before the search+hamburger pair and
   the two sit right next to each other.

   Desktop (>=1280px, full link row) and phone (<640px, icon only) keep
   their existing behavior. */
@media (min-width: 640px) and (max-width: 1279px) {
  .srta-header .srta-header-bar>.srta-nav-group {
    order: 1;
    flex: 0 0 auto;
  }

  .srta-header .srta-header-bar>.srta-search {
    margin-left: auto;
  }
}

.srta-header .wp-block-navigation a {
  color: var(--wp--preset--color--base);
  font-weight: 500;
}

/* Underline rather than a colour swap on hover: gold (secondary) doesn't
   pass 4.5:1 against this header background at any shade in range, and a
   text-decoration change avoids a color-only affordance either way. */
.srta-header .wp-block-navigation a:hover {
  text-decoration: underline;
}

/* Mobile (overlay) menu — repeats the header's own paddings/feel instead of
   the Navigation block's generic defaults:
   - Outer padding matches the header exactly (16px top/bottom via
     spacing-30, left/right via the same root-padding var the header's own
     horizontal gutter uses) so the injected logo lands at the same inset.
   - Core adds ~56px of top padding on the content wrapper to clear the
     close button underneath it; drop that back to the same 16px as
     everything else and let the logo and close button share one row
     instead (logo left, close button top-right), mirroring the header's
     own logo-left/toggle-right layout. */
.srta-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--25) var(--wp--style--root--padding-right) var(--wp--preset--spacing--25) var(--wp--style--root--padding-left) !important;
}

.srta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0 !important;
  /* This is itself a flex container (column, when open), and
     .wp-block-navigation__container/__responsive-close/__responsive-dialog/
     __responsive-container-content all set "gap: inherit" - so it was
     adding its own inherited 1.5rem gap between the logo/divider/link list
     on top of their explicit margins below. Zero it out so those margins
     are the only spacing. */
  gap: 0 !important;
}

/* Links: 16px text, horizontal padding (not just vertical) so the tap
   target isn't flush against the text, and a tighter vertical rhythm than
   the desktop nav's 24px inline gap (too spacious stacked vertically).
   Full width so the whole row is tappable, not just the text. */
.srta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 4px;
}

.srta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}

.srta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 12px 8px;
}

/* Mobile menu — enlarge the open (hamburger) and close buttons' hit areas
   without changing the visible icon size (24px svg + 12px padding ≈ 48px
   target), matching the search toggle's tap target next to it. */
.srta-header .wp-block-navigation__responsive-container-open,
.srta-header .wp-block-navigation__responsive-container-close {
  padding: 12px;
}

/* The close button is moved by srta_customize_mobile_navigation() out of
   its default absolute-positioned spot into the flex row below, alongside
   the logo - undo core's position:absolute so it behaves as a normal flex
   item and align-items can center it against the logo for real. */
.srta-header .wp-block-navigation__responsive-container-close {
  position: static;
}

/* Logo + close button row, injected at the top of the mobile overlay (see
   srta_customize_mobile_navigation in functions.php) - mirrors the header's
   own logo-left/toggle-right layout, with the two genuinely centered
   against each other via align-items instead of a guessed offset. */
.srta-header .srta-nav-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 var(--wp--preset--spacing--25) 0;
  /* same 12px as the header's own top/bottom padding */
}

.srta-header .srta-nav-overlay-logo {
  display: block;
  width: 209.85px;
  height: auto;
  margin: 0;
}

/* Hairline divider below the logo row, matching the same Teal-400 hairline
   used between the header and hero band. */
.srta-header .srta-nav-overlay-divider {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--wp--custom--teal--400);
  margin: 0 0 var(--wp--preset--spacing--25) 0;
  /* 12px below, matching the row's own margin-bottom above */
  opacity: 1;
}

/* The same markup is reused as the desktop menu container, so hide the
   logo/close row and divider again above the mobile breakpoint to avoid a
   duplicate logo (the close button inside is moot there too - the overlay
   can never open at that width since the hamburger itself is hidden). */
@media (min-width: 1280px) {

  .srta-header .srta-nav-overlay-header,
  .srta-header .srta-nav-overlay-divider {
    display: none;
  }
}

/* Search field — Teal-400 pill, Teal-300 border (per design spec) */
.srta-header .srta-search .wp-block-search__inside-wrapper {
  background: var(--wp--custom--teal--400);
  border: 1px solid var(--wp--custom--teal--300);
  border-radius: 8px;
  /* radius-s */
  padding: 8px 12px;
  gap: 8px;
  min-height: 40px;
}

.srta-header .wp-block-search__input {
  border: none;
  background: transparent;
  color: var(--wp--custom--teal--900);
}

.srta-header .srta-search .wp-block-search__input::placeholder {
  color: var(--wp--custom--teal--900);
  opacity: 1;
}

/* Icon-only submit, moved to the LEFT of the placeholder, same Teal-900 color
   (teal-700 measured 2.44:1 against the teal-400 field background, below the
   4.5:1 AA minimum — WCAG 2.1 AA audit, 2026-07-23) */
.srta-header .srta-search .wp-block-search__button {
  order: -1;
  margin-left: 0;
  /* core adds a left margin for button-inside; icon now leads, so drop it */
  background: transparent;
  color: var(--wp--custom--teal--900);
  fill: currentColor;
  padding: 0;
  min-width: 1.25rem;
}

.srta-header .srta-search .wp-block-search__button .search-icon {
  fill: currentColor;
}

/* Header search: icon-only below 640px (the inline field doesn't fit
   next to the logo/hamburger at phone width); the real inline field takes
   over at 640px and up, independent of the nav's own 1280px breakpoint
   below. */
@media (max-width: 639px) {
  .srta-header .srta-header-bar>.srta-search {
    display: none;
  }
}

/* The inline nav row (6 links) needs real room, so the full
   horizontal nav only shows at 1280px and up; below that (all the way down
   to phone width) it's the hamburger + search icon instead. Core's
   Navigation block only offers a fixed 600px hamburger threshold, so we
   extend it ourselves: force the hamburger open button to stay visible and
   hide the inline link list in the 601-1279px gap core doesn't cover.
   At/below 600px core's own rules already do this. Clicking the hamburger
   still opens the same styled overlay (its CSS isn't gated by width). */
@media (min-width: 601px) and (max-width: 1279px) {
  .srta-header .srta-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .srta-header .srta-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* Header nav dropdown — a top-level link with children (see
   srta_add_nav_dropdown() in functions.php) gets an extra panel injected
   right before its </li>: an "Open the X page" link, then a row of the
   section's direct children. Hidden by default (also covers its presence
   inside the mobile overlay's link list, where a tap should just go
   straight to the section page) and only enabled at the same >=1280px
   breakpoint where the inline link row itself is visible. */
.srta-nav-dropdown {
  display: none;
}

@media (min-width: 1280px) {
  .srta-header .srta-nav .wp-block-navigation-item.srta-has-dropdown {
    position: relative;
  }

  .srta-header .srta-nav .wp-block-navigation-item.srta-has-dropdown:hover .srta-nav-dropdown,
  .srta-header .srta-nav .wp-block-navigation-item.srta-has-dropdown:focus-within .srta-nav-dropdown {
    display: block;
  }

  .srta-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* header.js sets an inline left offset to keep the panel on-screen */
    /* Bridges the gap to the link above so hovering across it doesn't
       drop the :hover state before reaching the panel. */
    padding-top: 12px;
    z-index: 30;
  }

  .srta-nav-dropdown__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    background: var(--wp--custom--teal--100);
    border-radius: 24px;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--55);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--custom--teal--900) 12%, transparent);
    /* max-width alone would include the padding in a border-box context,
       but this element isn't one by default — without this the panel
       measured 880px (800 + the 40px horizontal padding on each side)
       instead of the intended 800px cap. */
    box-sizing: border-box;
    /* An auto-width box sizes to its content's max-content width by
       default; without this it can end up narrower than the children grid
       actually wants (shrinking toward the CTA line's width instead), so
       pin it to max-content explicitly, then let max-width below clamp it. */
    width: max-content;
    max-width: 800px;
  }

  /* Higher specificity than ".srta-header .wp-block-navigation a" (2
     classes + a tag) is needed here, or that rule's white/500 wins over
     these regardless of source order. */
  .srta-header .srta-nav .srta-nav-dropdown__cta {
    color: var(--wp--custom--amber--900);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .srta-header .srta-nav .srta-nav-dropdown__cta:hover {
    color: var(--wp--custom--amber--900);
    text-decoration: underline;
  }

  .srta-nav-dropdown__children {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--55);
    row-gap: var(--wp--preset--spacing--40);
  }

  .srta-header .srta-nav .srta-nav-dropdown__child {
    color: var(--wp--custom--teal--800);
    font-weight: 700;
    text-decoration: none;
    /* Long titles wrap inside their own grid cell instead of forcing that
       column (and the whole 800px-capped panel) wider. */
    white-space: normal;
  }

  .srta-header .srta-nav .srta-nav-dropdown__child:hover {
    color: var(--wp--custom--teal--900);
    text-decoration: underline;
  }
}

/* Mobile search toggle — sits next to the hamburger button; opens the
   full-width search bar rendered just below the header (see header.html and
   assets/js/header.js). Hidden once the inline field takes over at 640px. */
.srta-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 12px;
  margin: 0;
  cursor: pointer;
  color: var(--wp--custom--teal--50);
}

.srta-search-toggle svg {
  display: block;
}

@media (min-width: 640px) {
  .srta-search-toggle {
    display: none;
  }
}

/* Full-width mobile search bar, toggled open below the header. */
.srta-mobile-search-bar {
  background: var(--wp--custom--teal--700);
  padding: 12px var(--wp--preset--spacing--40);
}

.srta-mobile-search-bar[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .srta-mobile-search-bar {
    display: none !important;
  }
}

.srta-mobile-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--custom--teal--400);
  border: 1px solid var(--wp--custom--teal--300);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
}

.srta-mobile-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--wp--custom--teal--900);
  font-size: 16px;
}

.srta-mobile-search-input::placeholder {
  color: var(--wp--custom--teal--900);
  opacity: 1;
}

.srta-mobile-search-input:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-mobile-search-submit {
  display: flex;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--wp--custom--teal--900);
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.srta-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.srta-footer a:hover {
  color: var(--wp--preset--color--secondary);
}

.srta-footer .srta-footer__col-title {
  font-size: var(--wp--preset--font-size--x-small);
  /* 12px */
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--teal--300);
  /* #94D8DD = rgba(148, 216, 221, 1) */
}

/* 16px between items in the footer link lists (core/list ignores blockGap). */
.srta-footer .wp-block-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Keep each footer link on a single line. */
.srta-footer .wp-block-list li {
  white-space: nowrap;
}

/* Below 1024px: just logo, contact info, and Social Media, stacked full
   width in that order (already the DOM order, so no reordering needed).
   Agency/Programs/Resources are hidden entirely on mobile. At 1024px and
   up it's the original 5-across desktop row, untouched. */
@media (max-width: 1024px) {
  .srta-footer .wp-block-columns {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
  }

  .srta-footer .wp-block-columns>.wp-block-column {
    width: 100%;
  }

  .srta-footer .wp-block-columns>.wp-block-column:nth-child(3),
  .srta-footer .wp-block-columns>.wp-block-column:nth-child(4),
  .srta-footer .wp-block-columns>.wp-block-column:nth-child(5) {
    display: none;
  }
}

/* Force white brand logos. WordPress colours each icon via its per-service class
   (.wp-social-link-facebook, etc.), so override fill/colour/background with
   !important to beat those brand rules. */
.srta-social-icons a,
.srta-social-icons a svg {
  color: var(--wp--preset--color--base) !important;
  fill: var(--wp--preset--color--base) !important;
  background: none !important;
}

.srta-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 20x20 icons (CSS overrides the svg width/height attributes) */
.srta-social-icons a svg {
  width: 20px;
  height: 20px;
}

.srta-social-icons a:hover,
.srta-social-icons a:hover svg {
  color: var(--wp--preset--color--secondary) !important;
  fill: var(--wp--preset--color--secondary) !important;
}

/* ----------------------------------------------------------------------------
 * Carousel (srta/carousel) — minimal base; Swiper supplies layout/behaviour
 * ------------------------------------------------------------------------- */
.wp-block-srta-carousel {
  position: relative;
}

.wp-block-srta-carousel .swiper {
  overflow: hidden;
  border-radius: 12px;
}

.wp-block-srta-carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-srta-carousel .swiper-pagination {
  position: static;
  margin-top: 0.85rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.wp-block-srta-carousel .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--wp--preset--color--border);
  opacity: 1;
  border-radius: 999px;
  transition: width 0.2s ease, background 0.2s ease;
}

.wp-block-srta-carousel .swiper-pagination-bullet-active {
  width: 26px;
  background: var(--wp--custom--teal--600, #008992);
}

.wp-block-srta-carousel .swiper-button-prev,
.wp-block-srta-carousel .swiper-button-next {
  color: var(--wp--preset--color--primary);
}

/* Respect reduced-motion: Swiper transitions are also disabled in view.js */
@media (prefers-reduced-motion: reduce) {

  .wp-block-srta-carousel .swiper-pagination-bullet,
  .wp-block-srta-carousel .swiper-slide {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------------
 * Small helpers
 * ------------------------------------------------------------------------- */
.srta-muted {
  color: var(--wp--preset--color--muted);
}

/* Section subtitle / lead paragraph (sits under the section heading). No
   pattern using this class sets an explicit fontSize (all inherit the 16px
   paragraph default), so !important isn't needed here — confirmed across
   all 13 current usages. */
.srta-subtitle {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
}

/* Notice list rows (legacy horizontal layout) */
.srta-notice-row {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Notice cards (image · badge · title · summary · link) */
.srta-notice-grid {
  gap: var(--wp--preset--spacing--40);
}

.srta-notice-card {
  align-items: flex-start;
  text-align: left;
  /* Gaps are driven by per-element margin-top below (consistent across pages),
   * so neutralise the inline flex blockGap (16px homepage / 12px archive). */
  gap: 0;
  /* Grid rows stretch each <li> to the tallest card already (grid default),
   * but the card itself still sizes to its own content unless told to fill
   * that height — so do that, then pin the link to the bottom of whatever
   * space is left over. */
  height: 100%;
}

/* Home page only: cards sit on the section's teal-100 background, so they
   need their own white surface to read as cards. */
.srta-latest-notices .srta-notice-card {
  background-color: var(--wp--preset--color--base);
  border-radius: 12px;
  padding: 12px;
}

/* Fixed-ratio image cap so cards line up regardless of source dimensions */
.srta-notice-card__image {
  width: 100%;
  margin: 0;
}

.srta-notice-card__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
}

.srta-notice-card h3 {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  margin: 20px 0 0;
  /* badge -> title */
}

/* Clamp the summary so uneven blurbs keep the cards aligned */
.srta-notice-card p.srta-muted {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 0 0;
  /* title -> summary */
}

.srta-notice-card .srta-notice-card__link {
  margin-top: auto;
  /* pins the link to the card's bottom, growing to fill any leftover height */
  padding-top: 20px;
  /* keeps a floor gap above the link when there's no leftover space to grow into */
}

/* Latest Notices (home page only — the archive page keeps a normal stacked
   grid): horizontal scroll-snap carousel on mobile, next card peeking at the
   edge. Dot indicators are built by assets/js/notices-carousel.js, one per
   rendered card, and track the current slide as the user scrolls. */
@media (max-width: 600px) {
  .srta-latest-notices .srta-notice-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .srta-latest-notices .srta-notice-grid::-webkit-scrollbar {
    display: none;
  }

  .srta-latest-notices .srta-notice-grid>li {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

.srta-notice-dots {
  display: none;
}

@media (max-width: 600px) {
  .srta-notice-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--wp--preset--spacing--40);
  }

  .srta-notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp--custom--graphite--300);
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .srta-notice-dot.is-active {
    width: 10px;
    height: 10px;
    background: var(--wp--custom--teal--600, #008992);
  }
}

/* ----------------------------------------------------------------------------
 * Sidebar + content layout  (.srta-sidebar-layout)
 * The standard two-column page shell: a fixed 248px section-nav rail beside a
 * flexible body that fills the rest of the 1240px content width. Used by the
 * section pages, the Agenda Center, Notify Me, and the bid/meeting archives.
 *   248 (rail) + 66 (gap) + 926 (body) = 1240 at full width.
 * The gap is expressed in vw so it reads as 66px on a 1440px display and eases
 * down gracefully on narrower ones (floored at 32px).
 * ------------------------------------------------------------------------- */
.wp-block-columns.srta-sidebar-layout {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(2rem, 4.58vw, 66px);
  /* 66px / 1440px ≈ 4.58vw */
}

.srta-sidebar-layout>.wp-block-column:first-child {
  flex: 0 0 248px;
  width: 248px;
  max-width: 248px;
}

.srta-sidebar-layout>.wp-block-column:last-child {
  flex: 1 1 auto;
  min-width: 0;
  /* let the body shrink within the row instead of overflowing */
  max-width: 926px;
}

/* Stack on tablet/phone: the section nav rides above the content. */
@media (max-width: 781px) {
  .wp-block-columns.srta-sidebar-layout {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--50);
  }

  .srta-sidebar-layout>.wp-block-column:first-child,
  .srta-sidebar-layout>.wp-block-column:last-child {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Separator block (<hr>): full width, 1px, same colour as every other hairline
 * divider on the site (the theme's "Border" preset). Core ships its own
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`
 * for the default style — same selector (and this file loads after core's),
 * so this has to repeat that exact chain to actually win, not just match on
 * the bare class.
 *
 * height: 0 + border-top (not height: 1px + background-color) so any override
 * that recolours a specific divider via border-top only has to touch colour —
 * never height too. Mixing the two mechanisms is what previously produced a
 * visible 2px line wherever an override added its own border-top on top of
 * this rule's inherited height: 1px. */
.wp-block-separator:not(.is-style-dots) {
  height: 0;
  margin-top: 16px;
  margin-bottom: 16px;
  border: none;
  border-top: 1px solid var(--wp--preset--color--border);
  opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 100%;
}

/* Bullet/numbered lists in page content: marker sits outside the text (the
 * standard hanging-indent look). No margin here — the browser's own UA
 * padding-inline-start on <ul>/<ol> already reserves room for the outside
 * marker, so an added margin just doubled up the indent. */
.wp-block-post-content .wp-block-list {
  list-style-position: outside;
}

/* Breadcrumbs bar + hamburger toggle for the section nav rail.
 * On mobile the rail (Home/Calendar/.../Social Networking) is hidden behind a
 * hamburger button to the left of the breadcrumb trail; the toggle JS
 * (header.js) adds/removes .is-nav-open on the .srta-sidebar-layout row. */
.srta-breadcrumbs-bar {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--25);
  /* 12px to "Home" */
}

.srta-sidenav-toggle {
  display: none;
}

@media (max-width: 781px) {
  .srta-sidenav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    border-radius: 8px;
    background: var(--wp--custom--teal--50);
    color: var(--wp--preset--color--primary);
    cursor: pointer;
  }

  .srta-sidebar-layout>.wp-block-column:first-child {
    display: none;
  }

  .srta-sidebar-layout.is-nav-open>.wp-block-column:first-child {
    display: block;
  }
}

/* ----------------------------------------------------------------------------
 * Popular tasks section
 * ------------------------------------------------------------------------- */
/* Constrain the section content to 1240px */
.srta-popular-tasks .alignwide {
  max-width: 1240px;
}

/* 20px gap between cards in the horizontal row */
.srta-popular-tasks .wp-block-columns {
  gap: 20px;
}

/* Responsive columns: 1 up to 640px, 2 (three even rows of 2) from 641px to
   1024px, 3 (two even rows of 3) above 1024px - a proper grid at every tier
   instead of all 6 crammed into one row on desktop. Grid instead of
   flex-wrap so the rows wrap evenly regardless of content width. */
@media (max-width: 640px) {
  .srta-popular-tasks .wp-block-columns {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }

  .srta-popular-tasks .wp-block-column {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .srta-popular-tasks .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .srta-popular-tasks .wp-block-column {
    width: auto;
  }
}

@media (min-width: 1025px) {
  .srta-popular-tasks .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .srta-popular-tasks .wp-block-column {
    width: auto;
  }
}

/* The card has height:100% (for equal-height rows), but a percentage height
   inside an auto-sized CSS Grid row (now used at every width above 640px)
   or auto-sized flex item (the single-column mobile tier) is unsafe in
   Safari - the row/item's size and the card's size fight each other and
   the card overflows past its own box into the next one. Dropping the
   card back to auto height everywhere is the combination that's actually
   held up (see the long version of this comment on the Reports &
   Publications grid) - there's no longer a single row for equal-height
   rows to apply to anyway, every row is already even (2+2+2 or 3+3). */
.srta-popular-tasks .wp-block-srta-card {
  height: auto !important;
}

/* Popular-tasks cards: teal-tinted border. Layout, footer divider and spacing
   now come from the srta/card block, so only the border colour is overridden. */
.srta-popular-tasks .is-style-srta-card {
  border-color: var(--wp--custom--teal--200);
}

/* Card title */
.srta-popular-tasks .is-style-srta-card h3 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 18px !important;
  line-height: 120%;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------------------
 * Generic card grid  (.srta-card-grid)
 * A stack of full-width srta/card tiles for page body content — e.g. the
 * Planning page's links to Regional Transportation Plan, Area and Corridor
 * Plans, etc. Every card spans the full content width and stacks vertically,
 * at every breakpoint (desktop and mobile alike) — unlike the homepage's
 * multi-column Popular Tasks grid, this one is intentionally always 1-up.
 * ------------------------------------------------------------------------- */
.srta-card-grid.wp-block-columns {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
}

.srta-card-grid>.wp-block-column {
  width: 100%;
  flex-basis: 100%;
}

/* Percentage height inside an auto-sized flex column fights the column for
   space (the same Safari gotcha as Popular Tasks) — auto height instead. */
.srta-card-grid .wp-block-srta-card {
  height: auto !important;
}

/* Teal-200 border for these cards (vs. the default neutral card border). */
.srta-card-grid .is-style-srta-card {
  border-color: var(--wp--custom--teal--200, #B8E5E8);
}

/* Hairline divider above the action buttons in the bid card (srta/bid-card). */
.srta-bid-card__body .srta-bid-card__divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--wp--custom--graphite--300);
  margin-block: 8px;
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * Wide event card  (srta/event-card-wide — meetings/calendar archive)
 * Full-width row: time + address on one flex line that wraps when narrow, no
 * meta labels, and agenda/packet/Share buttons laid out horizontally.
 * ------------------------------------------------------------------------- */

/* Fill the row: the post wrapper is display:flex, so the card (a flex item)
   otherwise shrinks to its content width and hugs the left. Stretch it full-width. */
.wp-block-post:has(> .srta-event-card--wide) {
  display: block;
}

.srta-event-card--wide {
  width: 100%;
}

/* Date + address on one line; address wraps below when the row runs out of space. */
.srta-event-card--wide .srta-meeting-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  /* row-gap when wrapped / column-gap between items */
}

.srta-event-card--wide .srta-meeting-meta-row .srta-meta-value {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--custom--graphite--800);
}

/* Drop a meta item (icon + value) when its bound value is empty — e.g. an event
   with no time should not show a lone clock icon. */
.srta-event-card--wide .srta-meeting-meta:has(.srta-meta-value:empty) {
  display: none;
}

/* Buttons run horizontally in the wide card — undo the stacked, full-width,
   divider-topped column the base meeting card forces on them. */
.srta-event-card--wide .srta-meeting-card__body .wp-block-buttons.is-layout-flex {
  flex-direction: row;
  flex-wrap: wrap;
  align-self: flex-start;
  width: auto;
  padding-top: 0;
  border-top: 0;
}

/* Wide-card actions are plain link buttons (is-style-srta-link) laid out in a
   row: "More Details" with the standard trailing arrow, "Share" with a leading
   share glyph. Colour, padding and the arrow come from is-style-srta-link; only
   the row alignment and the card's lighter 500 weight live here. */

/* This row lists a board's full meeting history, often stretching back years
   before video recordings existed — showing "Video Not Yet Available" on
   every older row is noise here, unlike the single meeting page where it's
   the only doc action being checked. Hide rather than grey out. */
.srta-event-card--wide .srta-video-button.srta-btn--disabled {
  display: none;
}

/* Badge -> title gap: 20px (8px margin + the body's 12px flex gap). */
.srta-event-card--wide .srta-meeting-card__body>.srta-status-pill {
  margin-bottom: 8px;
}

/* Title -> meta rows below: keep it at the body's 12px flex gap (drop any
   default block margin the post-title would otherwise add on top). */
.srta-event-card--wide .srta-meeting-card__body .wp-block-post-title {
  margin-block: 0;
}

/* Full-width divider above the action links. height:0 so only the
   border-top renders (core's separator styles otherwise add their own
   height on top of the border, stacking to a visible 2px line). */
.srta-event-card--wide .srta-meeting-card__body .srta-event-card__divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--wp--custom--graphite--300);
  margin-block: 8px;
  opacity: 1;
}

.srta-event-card--wide .srta-meeting-actions {
  align-items: center;
  /* keep both action links on one baseline row */
}

.srta-event-card--wide .srta-meeting-actions .wp-block-button__link {
  width: auto;
  font-weight: 500;
  line-height: 1;
  /* drop the line-box slack that left the share glyph sitting low */
}

/* Share: leading share glyph, no trailing arrow. Shared by the wide + narrow
   cards (the narrow card pairs it with a full-width outline button instead). */
.srta-share-button {
  line-height: 1;
  /* collapse the wrapper's line box so the masked glyph leaves no slack below */
}

.srta-share-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  /* 8px between icon and label */
}

/* Drop the link style's trailing arrow — this one leads with an icon instead.
   (Outscopes .is-style-srta-link's ::after, hence the extra classes.) */
.wp-block-button.is-style-srta-link.srta-share-button .wp-block-button__link::after {
  content: none;
}

.srta-share-button .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("assets/icons/share.svg") no-repeat center / contain;
  mask: url("assets/icons/share.svg") no-repeat center / contain;
}

/* Share popover: clicking .srta-share-button opens this instead of navigating
   to the permalink (assets/js/event-share.js). Reuses the same visual
   language + .srta-share-btn icon buttons as the single-event sidebar's
   .srta-share-card (patterns/event-share.php). */
.srta-share-wrap {
  position: relative;
}

.srta-share-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--wp--custom--teal--900) 14%, transparent);
}

.srta-share-popover[hidden] {
  display: none;
}

.srta-share-popover__title {
  margin: 0 0 var(--wp--preset--spacing--25);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  color: var(--wp--custom--graphite--900);
}

.srta-share-popover__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ----------------------------------------------------------------------------
 * Search forms  (srta/calendar-search — meetings archive; srta/bid-search —
 * Bid Postings archive; srta/agenda-search — Agenda Center; srta/document-search
 * — Document Center). Same anatomy, so they share these rules.
 * Tokens only: primary-surface panel, white fields, graphite text, teal submit.
 * ------------------------------------------------------------------------- */
.srta-cal-search,
.srta-bid-search,
.srta-agenda-search,
.srta-doc-search {
  box-sizing: border-box;
  /* fold padding + border into the constrained max-width
                             so the panel's edge lines up with the cards/toolbar */
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  /* 16px between rows */
  background: var(--wp--preset--color--primary-surface);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--40);
  /* 24px */
}

/* Calendar (meetings) search sits between the toolbar and the month nav —
   hold a 32px gap down to the paginator below it. */
.srta-cal-search {
  background: var(--wp--custom--teal--50);
  /* teal-50 panel (overrides the shared primary-surface) */
  margin-bottom: var(--wp--preset--spacing--50);
  /* 32px to the month nav */
}

/* Bid Postings search sits below the teal-50 notify notice — match its
   lighter teal fill so the two panels read as a set. */
.srta-bid-search {
  background: var(--wp--custom--teal--50);
  margin-bottom: var(--wp--preset--spacing--50);
  /* 32px gap to the results (replaces the removed spacer) */
}

/* Agenda Center search matches the same teal-50 fill as the other search panels. */
.srta-agenda-search {
  background: var(--wp--custom--teal--50);
  margin-bottom: var(--wp--preset--spacing--50);
  /* 32px gap down to the board tables */
}

/* Document Center search matches the same teal-50 fill + result gap as bids. */
.srta-doc-search {
  background: var(--wp--custom--teal--50);
  margin-bottom: var(--wp--preset--spacing--50);
}

.srta-cal-search__field,
.srta-bid-search__field,
.srta-agenda-search__field,
.srta-doc-search__field {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  /* 8px label -> control */
  flex: 1;
  min-width: 0;
}

.srta-cal-search__label,
.srta-bid-search__label,
.srta-agenda-search__label,
.srta-doc-search__label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--custom--graphite--800);
}

/* Multiple controls on one line; wrap when narrow. */
.srta-cal-search__row,
.srta-bid-search__row,
.srta-agenda-search__row,
.srta-doc-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

/* The Agenda Center row holds four controls; keep them on one line on desktop
   and let each shrink rather than wrap until the viewport is genuinely narrow. */
.srta-agenda-search__row>.srta-agenda-search__field {
  flex: 1 1 12rem;
}

.srta-cal-search__input,
.srta-bid-search__input,
.srta-agenda-search__input,
.srta-doc-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  /* 10px / 14px — same vertical padding on input/date/select */
  font-size: var(--wp--preset--font-size--medium);
  font-family: inherit;
  color: var(--wp--custom--graphite--900);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--graphite--300);
  border-radius: 8px;
  line-height: 1.5;
  /* 1.5 × 16px = 24px (whole px) — avoids the sub-pixel rounding
                       that left <select> ~1px off from <input> at line-height 1.4 */
}

.srta-cal-search__input::placeholder,
.srta-bid-search__input::placeholder,
.srta-agenda-search__input::placeholder,
.srta-doc-search__input::placeholder {
  color: var(--wp--custom--graphite--600);
}

.srta-cal-search__input:focus,
.srta-bid-search__input:focus,
.srta-agenda-search__input:focus,
.srta-doc-search__input:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary);
}

/* Native select chevron kept; just align sizing with the other fields. */
.srta-cal-search__select,
.srta-bid-search__select,
.srta-agenda-search__select,
.srta-doc-search__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* <input type="date"> renders ~2px taller than the text input/select because
   its shadow-DOM value wrapper + spin button carry default padding/height.
   Zero the inner parts so the date fields match the rest of the row across
   Chrome, Edge and Safari. (Chrome's excess is the wrapper padding; Safari's is
   the inner-spin-button height + per-field padding. We avoid the common
   margin-bottom:-2px trick because it over-shrinks the field in Chrome.) */
.srta-cal-search__input::-webkit-datetime-edit,
.srta-bid-search__input::-webkit-datetime-edit,
.srta-agenda-search__input::-webkit-datetime-edit,
.srta-cal-search__input::-webkit-datetime-edit-fields-wrapper,
.srta-bid-search__input::-webkit-datetime-edit-fields-wrapper,
.srta-agenda-search__input::-webkit-datetime-edit-fields-wrapper,
.srta-cal-search__input::-webkit-datetime-edit-text,
.srta-bid-search__input::-webkit-datetime-edit-text,
.srta-agenda-search__input::-webkit-datetime-edit-text,
.srta-cal-search__input::-webkit-datetime-edit-day-field,
.srta-bid-search__input::-webkit-datetime-edit-day-field,
.srta-agenda-search__input::-webkit-datetime-edit-day-field,
.srta-cal-search__input::-webkit-datetime-edit-month-field,
.srta-bid-search__input::-webkit-datetime-edit-month-field,
.srta-agenda-search__input::-webkit-datetime-edit-month-field,
.srta-cal-search__input::-webkit-datetime-edit-year-field,
.srta-bid-search__input::-webkit-datetime-edit-year-field,
.srta-agenda-search__input::-webkit-datetime-edit-year-field {
  padding: 0;
}

.srta-cal-search__input::-webkit-inner-spin-button,
.srta-bid-search__input::-webkit-inner-spin-button,
.srta-agenda-search__input::-webkit-inner-spin-button {
  height: auto;
}

.srta-cal-search__check,
.srta-bid-search__check {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--custom--graphite--900);
  cursor: pointer;
}

/* Custom box so the border is controllable (a native checkbox ignores `border`
   and is painted by the OS). Border matches the text/date/select fields. */
.srta-cal-search__check input,
.srta-bid-search__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--wp--custom--graphite--500);
  border-radius: 4px;
  background: var(--wp--preset--color--base);
  cursor: pointer;
}

.srta-cal-search__check input:checked,
.srta-bid-search__check input:checked {
  background-color: var(--wp--custom--teal--600, #008992);
  border-color: var(--wp--custom--teal--600, #008992);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.72rem;
}

.srta-cal-search__check input:focus-visible,
.srta-bid-search__check input:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-cal-search__submit,
.srta-bid-search__submit,
.srta-agenda-search__submit,
.srta-doc-search__submit {
  align-self: flex-start;
  padding: 0.625rem 1.5rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  font-family: inherit;
  color: var(--wp--preset--color--base);
  background: var(--wp--custom--teal--700, #00767E);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.srta-cal-search__submit:hover,
.srta-bid-search__submit:hover,
.srta-agenda-search__submit:hover,
.srta-doc-search__submit:hover {
  background: var(--wp--custom--teal--900);
}

.srta-cal-search__submit:focus-visible,
.srta-bid-search__submit:focus-visible,
.srta-agenda-search__submit:focus-visible,
.srta-doc-search__submit:focus-visible {
  outline: 2px solid var(--wp--custom--teal--900);
  outline-offset: 2px;
}

/* Calendar, Agenda Center, Bid Postings and Document Center search buttons all
   use the brand teal-600 rather than the darker default --primary. */
.srta-cal-search__submit,
.srta-agenda-search__submit,
.srta-bid-search__submit,
.srta-doc-search__submit {
  background: var(--wp--custom--teal--600);
}

/* Agenda Center: Search sits beside a secondary Reset (a link back to the
   unfiltered page, only rendered when a filter is active). */
.srta-agenda-search__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  /* 16px between the two buttons */
  flex-wrap: wrap;
}

/* Match the two controls box-for-box. Reset is an <a> and Search is a <button>,
   which disagree on two things by default: the anchor inherits the body's
   line-height (theme.json, 1.6) while the button uses the UA's `normal` (~1.2),
   and the shared submit rule sets border:0 against Reset's 1px outline. Left
   alone, Reset renders ~7px taller. So pin an explicit line-height on both and
   give Search a transparent border. align-self:auto undoes the shared rule's
   flex-start, which would top-pin Search inside this row. */
.srta-agenda-search__actions .srta-agenda-search__submit,
.srta-agenda-search__reset {
  line-height: 1.25;
  box-sizing: border-box;
}

.srta-agenda-search__actions .srta-agenda-search__submit {
  align-self: auto;
  border: 1px solid transparent;
}

.srta-agenda-search__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  font-family: inherit;
  color: var(--wp--custom--teal--700, #00767E);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--teal--600);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.srta-agenda-search__reset:hover,
.srta-agenda-search__reset:focus {
  color: var(--wp--preset--color--base);
  background: var(--wp--custom--teal--900);
  border-color: var(--wp--custom--teal--900);
  text-decoration: none;
}

.srta-agenda-search__reset:focus-visible {
  outline: 2px solid var(--wp--custom--teal--900);
  outline-offset: 2px;
}

@media (max-width: 600px) {

  .srta-cal-search__submit,
  .srta-agenda-search__submit,
  .srta-bid-search__submit,
  .srta-doc-search__submit {
    align-self: stretch;
    width: 100%;
    text-align: center;
  }

  /* Stack Search over Reset so both keep a full-width tap target. */
  .srta-agenda-search__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--wp--preset--spacing--20);
  }

  .srta-agenda-search__reset {
    text-align: center;
  }
}

/* Bid Postings search: "Show me" and "Sort by" stack one below the other on
   mobile instead of sharing a row. */
@media (max-width: 600px) {
  .srta-bid-search__row {
    flex-direction: column;
  }

  .srta-bid-search__row>.srta-bid-search__field {
    flex-basis: auto;
    width: 100%;
  }
}

/* Mobile: Start/End date share a row; the Calendar select drops to its own
   line below them instead of squeezing onto the end of that row. */
@media (max-width: 600px) {

  .srta-cal-search__row>.srta-cal-search__field:nth-child(1),
  .srta-cal-search__row>.srta-cal-search__field:nth-child(2) {
    flex: 1 1 calc(50% - var(--wp--preset--spacing--15));
  }

  .srta-cal-search__row>.srta-cal-search__field:nth-child(3) {
    flex: 1 1 100%;
  }
}

/* ----------------------------------------------------------------------------
 * Calendar toolbar  (srta/calendar-toolbar — above the search form)
 * Left: List/Week/Month view switcher. Right: Notify / Print / Subscribe.
 * ------------------------------------------------------------------------- */
.srta-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--15);
  /* 4px to the search form below */
}

/* View switcher (segmented buttons) */
.srta-cal-views {
  display: flex;
  gap: var(--wp--preset--spacing--20);
}

.srta-cal-views__btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--base);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.srta-cal-views__btn:hover {
  border-color: var(--wp--preset--color--primary);
}

.srta-cal-views__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-cal-views__btn.is-active {
  background: var(--wp--custom--teal--50);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--custom--graphite--900);
}

/* Right-side actions (icon + label) */
.srta-cal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}

.srta-cal-action {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  cursor: pointer;
}

.srta-cal-action:hover {
  color: var(--wp--custom--teal--900);
}

.srta-cal-action__icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}

.srta-cal-action__icon svg {
  width: 100%;
  height: 100%;
}

/* The toolbar is screen navigation — hide it when printing the calendar. */
@media print {
  .srta-cal-toolbar {
    display: none;
  }
}

/* Mobile: List/Week/Month share the full width equally. */
@media (max-width: 600px) {
  .srta-cal-views {
    width: 100%;
  }

  .srta-cal-views__btn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ----------------------------------------------------------------------------
 * Month navigation  (srta/calendar-month-nav)
 * "‹ June 2026 ›" stepper on the left, "N events this month" count on the
 * right, sitting between the search card and the event list.
 * ------------------------------------------------------------------------- */
.srta-cal-monthnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Search mode shows only the count — keep it right-aligned like the stepper view. */
.srta-cal-monthnav--results {
  justify-content: flex-end;
}

.srta-cal-monthnav__group {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

.srta-cal-monthnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--wp--custom--graphite--500);
  border-radius: 10px;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
}

.srta-cal-monthnav__btn:hover {
  border-color: var(--wp--preset--color--primary);
}

.srta-cal-monthnav__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.srta-cal-monthnav__label {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  color: var(--wp--custom--graphite--900);
}

.srta-cal-monthnav__count {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--custom--graphite--600);
}

/* The month stepper is screen navigation — hide it when printing the calendar. */
@media print {
  .srta-cal-monthnav__group {
    display: none;
  }
}

/* Mobile: the prev/next + label group spans the full row — the label soaks up
   the available space (centered) while the prev/next buttons stay square. */
@media (max-width: 600px) {
  .srta-cal-monthnav__group {
    width: 100%;
  }

  .srta-cal-monthnav__btn {
    flex: 0 0 2.25rem;
  }

  .srta-cal-monthnav__label {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* The "N events this month" / "N results" count reads as an odd, disconnected
   line above the event list on narrow screens (especially the "0 events"
   empty state) — drop it on mobile, in both the month-browse and
   search-results states. */
@media (max-width: 600px) {
  .srta-cal-monthnav__count {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
 * Agenda Center  (srta/agenda-toolbar + srta/agenda-search + srta/agenda-table)
 * A table view of the meetings (event CPT) grouped by board / committee. The
 * search card reuses the shared search-form rules above; these rules add the
 * right-aligned action row and the grouped tables below it.
 * ------------------------------------------------------------------------- */

/* Notify Me / Print row — same actions as the calendar toolbar, pushed right. */
.srta-agenda-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--40);
}

/* One board / committee card — a light-teal header bar (collapse toggle + year
 * tabs) above a bordered, rounded table. */
.srta-agenda-group {
  margin-top: var(--wp--preset--spacing--35);
}

.srta-agenda-group:first-child {
  margin-top: 0;
}

/* Header bar. */
.srta-agenda-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--35);
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
  margin-bottom: var(--wp--preset--spacing--15);
}

.srta-agenda-group__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.2;
}

/* Board name + collapse toggle (the whole left side is the click target). */
.srta-agenda-group__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--wp--custom--graphite--900);
  cursor: pointer;
}

.srta-agenda-group__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--primary);
  transition: transform 0.15s ease;
}

.srta-agenda-group__chevron svg {
  width: 100%;
  height: 100%;
}

.srta-agenda-group__toggle[aria-expanded="false"] .srta-agenda-group__chevron {
  transform: rotate(-90deg);
}

/* Year tabs (latest 3 + a "More" dropdown for older years). */
.srta-agenda-years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}

.srta-agenda-year {
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 10px;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.srta-agenda-year:hover {
  border-color: var(--wp--preset--color--primary);
}

.srta-agenda-year.is-active {
  background: var(--wp--custom--teal--100);
  border-color: var(--wp--custom--teal--300);
  color: var(--wp--custom--graphite--900);
}

.srta-agenda-years__more {
  position: relative;
}

.srta-agenda-years__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 7rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31, 42, 46, 0.12);
  /* Boards go back to 2001, so "More" can hold 20+ years — roughly 800px of
     menu unchecked. Cap it around 8 rows (~33px each) and scroll the rest;
     60vh keeps it inside the viewport on short screens and on mobile, where
     the header sits low on the page. */
  max-height: min(280px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.srta-agenda-years__menu[hidden] {
  display: none;
}

.srta-agenda-years__menu .srta-agenda-year {
  width: 100%;
  /* Don't let the height cap above squash the rows — overflow and scroll. */
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  text-align: left;
}

.srta-agenda-years__menu .srta-agenda-year:hover {
  background: var(--wp--preset--color--primary-surface);
}

/* ----------------------------------------------------------------------------
 * Default content tables (core/table) — the site-wide look for any wp:table on
 * a static page: teal header bar, zebra body rows, hairline dividers, rounded
 * "card" corners. Header labels are centred; body cells left-aligned (kept at
 * zero specificity via :where so an editor's explicit per-cell alignment wins).
 *
 * Selectors are prefixed with `figure.wp-block-table` (specificity 0,1,2+) so
 * they beat WordPress's core block-supports defaults, which set 1px cell
 * borders, a 3px thead underline and .5em padding at 0,1,1.
 * -------------------------------------------------------------------------- */
figure.wp-block-table {
  overflow-x: auto;
  /* wide tables scroll on small screens */
  border-radius: 12px;
  /* rounded card; overflow clips corners */
  border: 1px solid var(--wp--custom--graphite--200, #DDE5E7);
}

figure.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wp--preset--color--base, #fff);
  font-size: var(--wp--preset--font-size--medium);
}

figure.wp-block-table thead {
  border-bottom: 0;
  /* override core's 3px thead underline */
}

figure.wp-block-table thead th {
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--wp--custom--teal--800, #005E65);
  background: var(--wp--custom--teal--700, #00767E);
  color: var(--wp--preset--color--base, #fff);
  font-weight: 700;
}

figure.wp-block-table tbody td {
  padding: 0.85rem 1.25rem;
  border: 0;
  vertical-align: middle;
}

/* Zebra striping: light on odd body rows, white (table bg) on even. */
figure.wp-block-table tbody tr:nth-child(odd) td {
  background: var(--wp--custom--graphite--50, #F6F8F8);
}

/* Hairline column divider between body cells (header dividers are the th's own
   teal-700 border, collapsed between adjacent header cells). */
figure.wp-block-table tbody td+td {
  border-left: 1px solid var(--wp--custom--graphite--100, #EEF2F3);
}

/* Hairline row dividers between body rows (header/body edge is the teal itself). */
figure.wp-block-table tbody tr+tr td {
  border-top: 1px solid var(--wp--custom--graphite--100, #EEF2F3);
}

/* Alignment at zero specificity so per-cell "has-text-align-*" classes win. */
:where(figure.wp-block-table thead th) {
  text-align: center;
}

:where(figure.wp-block-table tbody td) {
  text-align: left;
}

/* Table card. */
.srta-agenda-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
}

.srta-agenda-table-wrap[hidden] {
  display: none;
}

.srta-agenda-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--medium);
}

.srta-agenda-table thead th {
  padding: var(--wp--preset--spacing--30);
  text-align: left;
  font-weight: 600;
  color: var(--wp--custom--teal--800);
  background: var(--wp--custom--teal--50, #EBF7F8);
  border-bottom: 1px solid var(--wp--custom--teal--200);
  white-space: nowrap;
}

.srta-agenda-table thead th+th {
  border-left: 1px solid var(--wp--custom--teal--200);
}

.srta-agenda-table tbody td+td {
  border-left: 1px solid var(--wp--custom--graphite--200);
}

.srta-agenda-table tbody td {
  padding: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--custom--graphite--200);
  vertical-align: middle;
}

.srta-agenda-table tbody tr:first-child td {
  border-top: 0;
}

/* Icon + action + media columns: narrow and centred. */
.srta-agenda-c-icon,
.srta-agenda-c-action,
.srta-agenda-c-media {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.srta-agenda-table thead th.srta-agenda-c-icon,
.srta-agenda-table thead th.srta-agenda-c-action,
.srta-agenda-table thead th.srta-agenda-c-media {
  text-align: center;
}

/* Agenda cell: meeting date, title link, posted timestamp. */
.srta-agenda-date {
  display: block;
  color: var(--wp--custom--graphite--900);
}

.srta-agenda-title {
  display: block;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  text-decoration: none;
}

.srta-agenda-title:hover {
  text-decoration: underline;
}

.srta-agenda-posted {
  display: block;
  color: var(--wp--custom--graphite--600);
  font-size: var(--wp--preset--font-size--small);
}

/* Minutes and Agenda buttons — same pill for both (icon + label); each shows
   its disabled state when that document isn't attached yet. */
.srta-agenda-download {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--custom--graphite--500);
  border-radius: 10px;
  background: var(--wp--preset--color--base);
  color: var(--wp--custom--graphite--900);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.srta-agenda-download__icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}

.srta-agenda-download__icon svg {
  width: 100%;
  height: 100%;
}

.srta-agenda-download:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

.srta-agenda-download.is-disabled {
  color: var(--wp--custom--graphite--300);
  border-color: var(--wp--custom--graphite--100);
  pointer-events: none;
}

/* Agenda action button as a dropdown (Agenda PDF + Amended Agenda, when
   attached): same pill as .srta-agenda-download, plus a chevron that flips
   when the menu is open, and the menu itself anchored to the pill. */
.srta-agenda-dropdown {
  position: relative;
  display: inline-block;
}

.srta-agenda-dropdown__toggle {
  font: inherit;
  cursor: pointer;
}

.srta-agenda-dropdown__chevron {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.15s ease;
}

.srta-agenda-dropdown__chevron svg {
  width: 100%;
  height: 100%;
}

.srta-agenda-dropdown__toggle[aria-expanded="true"] .srta-agenda-dropdown__chevron {
  transform: rotate(180deg);
}

.srta-agenda-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 11rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31, 42, 46, 0.12);
  text-align: left;
}

.srta-agenda-dropdown__menu[hidden] {
  display: none;
}

.srta-agenda-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--wp--custom--graphite--900);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.srta-agenda-dropdown__item:hover {
  background: var(--wp--preset--color--primary-surface);
  color: var(--wp--preset--color--primary);
}

.srta-agenda-dropdown__item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

.srta-agenda-dropdown__item-icon svg {
  width: 100%;
  height: 100%;
}

/* On phones the year tabs drop under the title; the table itself scrolls. */
@media (max-width: 600px) {
  .srta-agenda-group__head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Phones: each row becomes a stacked card instead of a scrolling table —
   date/title/posted up top, then Minutes and Agenda as full-width icon+label
   rows, separated by a divider (mirrors the data-label attributes already on
   each <td> in agenda-table.php, just never styled for this width before). */
@media (max-width: 600px) {
  .srta-agenda-table-wrap {
    overflow-x: visible;
  }

  .srta-agenda-table,
  .srta-agenda-table thead,
  .srta-agenda-table tbody,
  .srta-agenda-table tr,
  .srta-agenda-table td {
    display: block;
    width: auto;
  }

  .srta-agenda-table thead {
    display: none;
  }

  .srta-agenda-table tr {
    padding: 10px 20px;
    border-top: 1px solid var(--wp--custom--graphite--200);
  }

  .srta-agenda-table tbody tr:first-child {
    border-top: 0;
  }

  /* .srta-agenda-table tbody td (desktop, above) outranks a plain "td" selector
     on specificity alone — match it here so this actually wins on mobile. */
  .srta-agenda-table tbody td {
    padding: 0;
    border: 0 !important;
    text-align: left !important;
    white-space: normal;
  }

  .srta-agenda-title {
    font-weight: 600;
  }

  .srta-agenda-c-main {
    margin-bottom: 12px;
  }

  /* The Minutes and Agenda pills both become full-width icon + label rows
     instead of a compact pill; their own vertical padding creates the gap
     between them (no separate spacer margin). */
  .srta-agenda-download {
    width: 100%;
    justify-content: flex-start;
    gap: var(--wp--preset--spacing--25);
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
  }

  .srta-agenda-download__icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* No doc yet for this row — drop the placeholder instead of showing a
     disabled pill with nothing to click. */
  .srta-agenda-download.is-disabled {
    display: none;
  }

  /* The Agenda dropdown's toggle inherits the full-width row look above; the
     wrapper needs to stretch to match, and the menu widens to the row instead
     of the compact desktop pill. */
  .srta-agenda-dropdown {
    display: block;
    width: 100%;
  }

  .srta-agenda-dropdown__menu {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Print: drop the screen-only search/actions; keep the agenda tables. */
@media print {

  .srta-agenda-toolbar,
  .srta-agenda-search {
    display: none;
  }
}

/* Visually-hidden helper for accessible labels (block themes don't ship core's). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

/* ----------------------------------------------------------------------------
 * Narrow event card  (srta/event-card-narrow)
 * Home-card content, but no date rail: the date sits under the title in teal,
 * with full-width "More Details" + "Share" buttons.
 * ------------------------------------------------------------------------- */
.is-style-srta-card.srta-event-card--narrow {
  flex-direction: column;
  align-items: stretch;
  padding: var(--wp--preset--spacing--40);
  /* 24px */
}

.srta-event-card--narrow .srta-event-card__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  color: var(--wp--custom--graphite--900);
}

/* Date line that replaces the rail — teal 700, 16px, medium weight. */
.srta-event-card__date {
  margin: 0;
  color: var(--wp--custom--teal--700);
  font-size: 16px;
  font-weight: 500;
}

/* Needs the compound .wp-block-separator.srta-narrow-divider selector to
   out-specificity the global `.wp-block-separator:not(.is-style-dots)` rule
   above — a bare .srta-narrow-divider class alone loses that fight
   regardless of source order. */
.wp-block-separator.srta-narrow-divider {
  width: 100%;
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--wp--custom--graphite--300);
  opacity: 1;
}

/* Meta rows (Time / Address): label above value beside the icon. The value
   column needs min-width: 0 to actually shrink/wrap inside the narrow
   (~360px) side panel instead of overflowing the card — a flex item's
   default min-width is its content's width, not the available space. */
.srta-event-card--narrow .srta-meeting-meta {
  min-width: 0;
}

.srta-event-card--narrow .srta-meeting-meta>.wp-block-group {
  min-width: 0;
}

.srta-event-card--narrow .srta-meta-label {
  margin: 0;
  /* core/paragraph's global 20px bottom margin would otherwise stack on the 2px flex gap */
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 400;
  color: var(--wp--custom--graphite--600);
}

.srta-event-card--narrow .srta-meta-value {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--custom--graphite--800);
  overflow-wrap: break-word;
}

/* Stacked, full-width buttons — specificity beats .srta-share-button's
   inline-flex link override (both are 2-class selectors, so relying on
   source order alone is fragile). */
.srta-event-card--narrow .wp-block-buttons {
  flex-direction: column;
  align-items: stretch;
}

.srta-event-card--narrow .wp-block-button {
  width: 100%;
}

/* Identical box metrics on both buttons so they match height (More Details =
   is-style-srta-fill-teal, no border + default padding/font-size otherwise;
   Share = is-style-srta-outline-graphite, already 1px bordered) — same fix as
   .srta-bid-card__body's View RFP / Download Documents pair above. */
.srta-event-card--narrow .srta-event-card__actions .wp-block-button__link {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.3;
}

/* Teal has no border by default — add a transparent one so its box matches the
   Share button's real 1px border (leaving Share's own border colour alone). */
.srta-event-card--narrow .srta-event-card__actions .is-style-srta-fill-teal .wp-block-button__link {
  border: 1px solid transparent;
}

/* Bid Postings — inline "sign up for notifications" notice (pattern
   srta/bid-notify). A thin primary-surface band under the page title; shares
   the search panel's primary-surface fill, teal-200 border and 16px radius so
   the notice and filter card read as one family. Tokens only. */
/* Selected-category heading above the bid results (srta/bid-results-heading).
   Shared with the Document Center's "All Documents" heading (archive-document.html). */
.srta-bid-results-title,
.srta-doc-results-title {
  margin: 0 0 var(--wp--preset--spacing--40);
  /* 24px to the results */
  color: var(--wp--custom--teal--700);
  font-size: 24px;
  font-weight: 600;
}

.srta-bid-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--50);
  /* 32px — uniform gap below the title */
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
}

/* Mobile: card margin/gaps drop one or two steps on the spacing scale
   (roughly a 0.7x reduction), same idea as the type scale — padding stays as
   on desktop; icon-to-label gaps (8px) are already tight enough to leave
   alone. */
@media (max-width: 600px) {
  .srta-bid-notice {
    gap: var(--wp--preset--spacing--25);
    /* 16px -> 12px */
    margin-bottom: var(--wp--preset--spacing--40);
    /* 32px -> 24px */
  }

  .srta-bid-notice__actions {
    gap: var(--wp--preset--spacing--30);
    /* 24px -> 16px */
  }
}

.srta-bid-notice__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--wp--custom--teal--700);
}

.srta-bid-notice__icon svg {
  width: 24px;
  height: 24px;
}

/* Mobile: drop the standalone bell icon — only the Notify Me / Subscribe
   buttons keep their icons. */
@media (max-width: 600px) {
  .srta-bid-notice__icon {
    display: none;
  }
}

.srta-bid-notice__text {
  margin: 0;
  flex: 1;
  /* take the middle, pushing the action links to the right edge */
  min-width: 12rem;
  /* wrap the actions below on a narrow band rather than crush the text */
  color: var(--wp--custom--graphite--800);
  font-size: var(--wp--preset--font-size--medium);
}

.srta-bid-notice__text a {
  font-weight: 600;
}

/* Notify Me / Subscribe links inserted into the band (right side). */
.srta-bid-notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  /* 24px between the two links */
  flex: 0 0 auto;
}

.srta-bid-notice__action {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  /* 8px icon -> label */
  font-weight: 600;
  color: var(--wp--custom--teal--700);
  text-decoration: none;
  white-space: nowrap;
}

.srta-bid-notice__action:hover {
  color: var(--wp--custom--teal--900);
}

.srta-bid-notice__action-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}

.srta-bid-notice__action-icon svg {
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------------------
 * Site search results  (templates/search.html)
 * A single list of srta/card tiles — pages, documents, meetings, bids and
 * notices together — above which srta/search-filters renders one button per post
 * type that has matches. Documents dominate the site by volume, so those buttons
 * (and their counts) are how a visitor gets to the 20 matching pages behind the
 * 200 matching documents; includes/site-search.php does the query side.
 *
 * Same segmented-button recipe as .srta-cal-views and .srta-staff-views, with
 * two additions those two don't need: the row wraps (there can be one button per
 * post type, not three), and each button carries a result count.
 * ------------------------------------------------------------------------- */
/* The page's own search field. core/search ships a squared-off wrapper with its
   own grey border, which reads as a mistake next to the 8px-radius submit button
   sitting inside it and the rounded type buttons directly below — round the
   wrapper to the same 10px as those buttons (its 4px padding nests the 8px
   button neatly inside) and give it the graphite hairline every other form field
   on the site uses (.srta-doc-search__input and friends). */
.srta-page-search .wp-block-search__inside-wrapper {
  padding: 4px;
  border: 1px solid var(--wp--custom--graphite--300);
  border-radius: 10px;
  background: var(--wp--preset--color--base);
}

.srta-page-search .wp-block-search__input {
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--wp--custom--graphite--900);
}

/* Focus ring on the wrapper rather than the bare input, so the whole field —
   not a rectangle inset inside it — shows focus. The input's own outline is
   dropped only because this replaces it. */
.srta-page-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--primary);
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-page-search .wp-block-search__input:focus {
  outline: none;
}

.srta-search-views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--30);
}

.srta-search-views__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--base);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.srta-search-views__btn:hover {
  border-color: var(--wp--preset--color--primary);
}

.srta-search-views__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-search-views__btn.is-active {
  background: var(--wp--custom--teal--50);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--custom--graphite--900);
}

/* The result count rides inside the button, one step quieter than its label. */
.srta-search-views__count {
  font-weight: 500;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .srta-search-views__btn {
    padding: 0.5rem 0.875rem;
    font-size: var(--wp--preset--font-size--small);
  }
}

/* ── Empty states ────────────────────────────────────────────────────
   A centered teal-50 card with an icon chip, message, and optional CTA.
   Used by archive-bid.html's query-no-results (pattern srta/bid-empty),
   archive-document.html's (srta/document-empty), the Employment page's
   open-positions list (srta/employment-empty, which omits the CTA), and the
   Agenda Center / Notify Me tables' no-results states (srta/agenda-empty,
   srta/notify-empty), and the site search page's (srta/search-empty). */
.srta-bid-empty,
.srta-employment-empty,
.srta-document-empty,
.srta-search-empty,
.srta-agenda-empty,
.srta-notify-empty {
  text-align: center;
  background: var(--wp--custom--teal--50);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

/* Employment/Agenda/Notify empty states: same vertical rhythm as bid-empty's
   horizontal padding, but a fixed 32px top/bottom (not the clamp() bid-empty uses). */
.srta-employment-empty,
.srta-agenda-empty,
.srta-notify-empty {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

/* Rounded icon chip: teal-100 fill, teal-700 stroke. */
.srta-bid-empty__icon,
.srta-employment-empty__icon,
.srta-document-empty__icon,
.srta-search-empty__icon,
.srta-agenda-empty__icon,
.srta-notify-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--wp--preset--spacing--40);
  border-radius: 14px;
  background: var(--wp--custom--teal--100);
  color: var(--wp--custom--teal--700);
}

.srta-bid-empty__icon svg,
.srta-employment-empty__icon svg,
.srta-document-empty__icon svg,
.srta-search-empty__icon svg,
.srta-agenda-empty__icon svg,
.srta-notify-empty__icon svg {
  width: 28px;
  height: 28px;
}

.srta-bid-empty__title,
.srta-employment-empty__title,
.srta-document-empty__title,
.srta-search-empty__title,
.srta-agenda-empty__title,
.srta-notify-empty__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  color: var(--wp--custom--teal--900);
}

/* Two-class selector so this reliably beats the sitewide h3.wp-block-heading
   type-scale rule regardless of stylesheet order. */
.srta-employment-empty .srta-employment-empty__title {
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .srta-employment-empty .srta-employment-empty__title {
    font-size: 18px;
  }
}

.srta-bid-empty__text,
.srta-employment-empty__text,
.srta-document-empty__text,
.srta-search-empty__text,
.srta-agenda-empty__text,
.srta-notify-empty__text {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--wp--custom--graphite--800);
  font-size: var(--wp--preset--font-size--large);
}

/* bid-empty keeps a gap before its CTA; the rest have no CTA. */
.srta-bid-empty__text {
  margin-bottom: var(--wp--preset--spacing--40);
  font-size: 16px;
}

.srta-document-empty__text,
.srta-search-empty__text,
.srta-agenda-empty__text,
.srta-notify-empty__text {
  font-size: 16px;
}

.srta-employment-empty__text {
  font-size: 16px;
  font-weight: 400;
}

.srta-bid-empty .wp-block-buttons {
  justify-content: center;
}

.srta-bid-empty__btn .wp-block-button__link {
  background-color: var(--wp--custom--teal--700);
  color: var(--wp--preset--color--base);
}

.srta-bid-empty__btn .wp-block-button__link:hover {
  background-color: var(--wp--custom--teal--800);
}

/* ── Contact directory card ──────────────────────────────────────────
   Staff Directory page (pattern srta/contact-card). Address on top, then a
   3-up phone / fax / email row, all driven by the site-wide contact info
   (Settings → Contact Info). teal-50 fill, teal-200 hairline, graphite-600
   labels, teal-800 values. */
.srta-contact-card {
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--55);
}

.srta-contact-card__top {
  padding-bottom: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--custom--teal--200);
}

.srta-contact-card__map {
  margin-top: var(--wp--preset--spacing--30);
  border-radius: 12px;
  overflow: hidden;
  /* clip the iframe to the rounded corners */
}

.srta-contact-card__map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

.srta-contact-card__map-link {
  margin: var(--wp--preset--spacing--20) 0 0;
}

.srta-contact-card__map-link a {
  color: var(--wp--custom--teal--700);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  text-decoration: none;
}

.srta-contact-card__map-link a:hover {
  text-decoration: underline;
}

.srta-contact-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
  .srta-contact-card__grid {
    grid-template-columns: 1fr;
  }
}

.srta-contact-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--25);
}

.srta-contact-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--wp--custom--teal--600);
}

.srta-contact-card__icon svg {
  width: 100%;
  height: 100%;
}

.srta-contact-card__label {
  margin-top: var(--wp--preset--spacing--15);
  margin-bottom: var(--wp--preset--spacing--20);
  color: var(--wp--custom--graphite--600);
  font-size: var(--wp--preset--font-size--x-small);
  /* 12px */
  font-weight: 400;
  line-height: 1.3;
}

.srta-contact-card__value {
  margin: 0;
  color: var(--wp--custom--teal--800);
  font-size: var(--wp--preset--font-size--small);
  /* 14px */
  font-weight: 500;
  line-height: 1.5;
}

.srta-contact-card__value a {
  color: inherit;
  text-decoration: none;
}

.srta-contact-card__value a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * Staff directory  (srta/staff-directory — the Directory page)
 * An editable list of the staff CPT: circular avatar (photo or initials),
 * name (mailto), role, email and phone, with department tabs and a "Sort by"
 * dropdown above the list.
 * ------------------------------------------------------------------------- */
.srta-staff__head {
  margin-bottom: var(--wp--preset--spacing--20);
}

.srta-staff__heading {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.2;
}

/* Toolbar: department tabs (left) + sort dropdown (right) — same layout as
   the calendar toolbar (.srta-cal-toolbar). */
.srta-staff-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Department tabs — same segmented-button recipe as .srta-cal-views. */
.srta-staff-views {
  display: flex;
  gap: var(--wp--preset--spacing--20);
}

.srta-staff-views__btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--base);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.srta-staff-views__btn:hover {
  border-color: var(--wp--preset--color--primary);
}

.srta-staff-views__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}

.srta-staff-views__btn.is-active {
  background: var(--wp--custom--teal--50);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--custom--graphite--900);
}

.srta-staff__sortform {
  margin: 0;
  display: flex;
  gap: var(--wp--preset--spacing--20);
}

/* Sort dropdown — same look as the search selects. */
.srta-staff-sort {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  font-size: var(--wp--preset--font-size--medium);
  font-family: inherit;
  color: var(--wp--custom--graphite--900);
  background-color: var(--wp--preset--color--base);
  background-image: url("assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  border: 1px solid var(--wp--custom--graphite--300);
  border-radius: 8px;
  line-height: 1.4;
  cursor: pointer;
}

.srta-staff-sort:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary);
}

.srta-staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.srta-staff-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.srta-staff-row__person {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-width: 0;
}

/* Circular avatar — photo or initials chip. */
.srta-staff-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.srta-staff-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--custom--teal--50);
  color: var(--wp--custom--teal--700);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
  letter-spacing: 0.02em;
}

.srta-staff-row__id {
  min-width: 0;
}

.srta-staff-row__name {
  margin: 0;
  font-weight: 600;
}

.srta-staff-row__name a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.srta-staff-row__name a:hover {
  text-decoration: underline;
}

.srta-staff-row__role {
  margin: 0.15rem 0 0;
  color: var(--wp--custom--graphite--600, var(--wp--custom--graphite--800));
  font-size: var(--wp--preset--font-size--small);
}

.srta-staff-row__contact {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  min-width: 0;
}

.srta-staff-row__contact a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  word-break: break-word;
}

.srta-staff-row__contact a:hover {
  text-decoration: underline;
}

.srta-staff-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--wp--preset--color--primary);
}

.srta-staff-row__icon svg {
  width: 100%;
  height: 100%;
}

/* Stack into a card per person on narrow screens. */
@media (max-width: 700px) {
  .srta-staff-row {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
  }

  .srta-staff-row__contact {
    padding-left: calc(56px + var(--wp--preset--spacing--30));
  }
}

/* Mobile: department tabs share the full width equally (mirrors .srta-cal-views). */
@media (max-width: 600px) {
  .srta-staff-views {
    width: 100%;
  }

  .srta-staff-views__btn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ----------------------------------------------------------------------------
 * Staff bio page (templates/single-staff.html, pattern srta/staff-bio).
 * Ported from the original CivicPlus layout: name/role/contact/back-link in
 * a left column, photo (or placeholder) in a right column. Contact rows
 * reuse .srta-staff-row__contact/__icon from the directory listing.
 * ------------------------------------------------------------------------- */
.srta-staff-bio__name {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--custom--teal--700);
}

.srta-staff-bio__role {
  margin: 0 0 var(--wp--preset--spacing--40);
  color: var(--wp--custom--graphite--900);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
}

.srta-staff-bio__contact {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--40);
}

.srta-staff-bio__body {
  margin-bottom: var(--wp--preset--spacing--40);
  color: var(--wp--custom--graphite--800);
}

.srta-staff-bio__divider {
  margin: 0 0 var(--wp--preset--spacing--30);
  border: 0;
  border-top: 1px solid var(--wp--preset--color--border);
}

/* Portrait photo — fixed aspect so the placeholder box matches a real photo's
   footprint exactly (no layout shift once a photo is added later). */
.srta-staff-bio__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: var(--wp--custom--graphite--100);
}

.srta-staff-bio__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--custom--graphite--400);
}

.srta-staff-bio__photo--placeholder svg {
  width: 35%;
  height: 35%;
}

@media (max-width: 600px) {
  .srta-staff-bio__photo {
    max-width: 220px;
    margin: 0 auto var(--wp--preset--spacing--40);
  }
}

/* ----------------------------------------------------------------------------
 * Notify Me  (srta/notify-intro + srta/notify-lists + srta/notify-subscribe)
 * A catalog of subscription lists grouped into collapsible sections, plus the
 * "Stay informed" banner and the opt-in form. See includes/notify.php.
 * ------------------------------------------------------------------------- */

/* "Stay informed" banner: bare icon + copy on the left, button on the right.
   Pale teal-50 surface with a hairline border (not the saturated primary-surface). */
.srta-notify-banner {
  gap: var(--wp--preset--spacing--40);
  background: var(--wp--custom--teal--50);
  border: 1px solid var(--wp--custom--teal--200);
}

/* Let the copy take the remaining width so the CTA stays on the right.
   flex-basis:0 keeps the line from breaking on the text's natural width. */
.srta-notify-banner>.wp-block-group {
  flex: 1 1 0;
  min-width: 0;
}

.srta-notify-banner h2 {
  margin: 0 0 8px;
  color: var(--wp--preset--color--contrast);
}

.srta-notify-banner p {
  margin: 0;
}

/* Bare bell glyph — no rounded tile behind it. */
.srta-notify-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--wp--preset--color--primary);
}

.srta-notify-banner__icon svg {
  width: 100%;
  height: 100%;
}

/* Teal CTA button in the banner — filled pill with a leading login glyph. */
.srta-notify-banner__cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: var(--wp--preset--spacing--20);
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  background: var(--wp--custom--teal--700, #00767E);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-decoration: none;
}

.srta-notify-banner__cta:hover {
  background: var(--wp--custom--teal--800, #005E65);
  color: var(--wp--preset--color--base);
}

.srta-notify-banner__cta-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
}

.srta-notify-banner__cta-icon svg {
  width: 100%;
  height: 100%;
}

/* The three how-it-works steps stay equal height, contents left-aligned with
   the icon tile on top. */
.srta-notify-steps .wp-block-column>.is-style-srta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--wp--preset--spacing--25);
  /* 12px baseline between title and body; icon->title tops up to 20px via
     the h3's own margin-top below. */
  height: 100%;
  border-color: var(--wp--custom--teal--200);
  padding: var(--wp--preset--spacing--35);
}

/* 32px gap down to the notify-lists sections below (matches the 32px
   margin-top already set on this block from the banner above). */
.srta-notify-steps {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* The "constrained" layout WP applies to this group's children forces
   `margin-left/right: auto !important`, which re-centers the (narrow) icon
   tile regardless of the flex-start above — beat it explicitly on desktop. */
@media (min-width: 601px) {
  .srta-notify-steps .wp-block-column>.is-style-srta-card>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 600px) {
  .srta-notify-steps .wp-block-column>.is-style-srta-card {
    align-items: center;
    text-align: center;
  }
}

/* Paler icon tiles inside the step cards, matching the design. */
.srta-notify-steps .is-style-srta-icon-tile {
  background: var(--wp--custom--teal--50);
}

.srta-notify-steps h3 {
  margin: var(--wp--preset--spacing--20) 0 0;
  /* 8px extra + the 12px card gap = 20px icon->title */
  color: var(--wp--custom--graphite--900);
  font-weight: 600;
}

.srta-notify-steps p {
  margin: 0;
}

/* One collapsible section (a notify_group). Like the Agenda page: a standalone
   rounded teal header bar sitting above a separate, bordered table card. */
.srta-notify-section {
  margin-bottom: var(--wp--preset--spacing--35);
}

.srta-notify-section__head {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--35);
  background: var(--wp--preset--color--primary-surface);
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
  margin-bottom: var(--wp--preset--spacing--15);
  color: var(--wp--preset--color--primary-deep);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle; we draw our own chevron. */
.srta-notify-section__head::-webkit-details-marker {
  display: none;
}

.srta-notify-section__title {
  font-size: var(--wp--preset--font-size--large);
  flex: 1 1 auto;
}

.srta-notify-section__count {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

.srta-notify-section__chevron {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--primary);
  transition: transform 0.2s ease;
}

.srta-notify-section__chevron svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.srta-notify-section[open] .srta-notify-section__chevron {
  transform: rotate(180deg);
}

/* The rows form a separate bordered, rounded table card (mirrors
   .srta-agenda-table-wrap). */
.srta-notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wp--custom--teal--200);
  border-radius: 16px;
  overflow: hidden;
}

/* Each row is a two-cell table line: content cell + a bordered Subscribe cell.
   Stretch so the vertical divider spans the full row height. */
.srta-notify-item {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-top: 1px solid var(--wp--custom--graphite--100);
}

.srta-notify-item:first-child {
  border-top: 0;
}

.srta-notify-item__body {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
}

.srta-notify-item__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

.srta-notify-item__desc {
  margin: 0.2rem 0 0;
  font-size: var(--wp--preset--font-size--small);
}

/* Subscribe cell — bare teal label + envelope icon, divided from the content by
   a left border so the rows read as a table column. */
.srta-notify-subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  flex-shrink: 0;
  width: 9.5rem;
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
  border-left: 1px solid var(--wp--custom--graphite--100);
  background: none;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.srta-notify-subscribe-btn:hover {
  background: var(--wp--custom--teal--50);
  color: var(--wp--preset--color--primary-deep);
}

.srta-notify-subscribe-btn__icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
}

.srta-notify-subscribe-btn__icon svg {
  width: 100%;
  height: 100%;
}

/* The opt-in form card. Override the .is-style-srta-card height:100% — as a lone
   child of a stretched column it would otherwise balloon to the full column
   height instead of sizing to its content. */
.srta-notify-subscribe {
  height: auto;
  scroll-margin-top: var(--wp--preset--spacing--50);
}

.srta-notify-subscribe__title {
  margin-top: 0;
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--wp--preset--color--primary-deep);
}

.srta-notify-subscribe__intro {
  margin-top: 0;
}

/* Fluent Form fields inside the opt-in card: legible input + placeholder text
   (Fluent Forms defaults are smaller than the rest of the page). */
.srta-notify-subscribe .ff-el-form-control {
  font-size: var(--wp--preset--font-size--medium);
}

/* Graphite-300 borders on Fluent Form fields (Notify Me + Contact), matching
   the search/sort form fields. The plugin sets the border via
   `.ff-default .ff-el-form-control` (0,2,0); .frm-fluent-form (on the form
   element) matches that specificity and the theme CSS loads after the plugin. */
.frm-fluent-form .ff-el-form-control {
  border-color: var(--wp--custom--graphite--300);
}

.srta-notify-subscribe .ff-el-form-control::placeholder {
  font-size: var(--wp--preset--font-size--medium);
}

/* Contact page form: match placeholder/input text to the body font size,
   same as the Notify Me opt-in form above. */
.srta-contact-form .ff-el-form-control,
.srta-contact-form .ff-el-form-control::placeholder {
  font-size: var(--wp--preset--font-size--medium);
}

/* The core "constrained" layout caps every unaligned child (the intro
   paragraph and this shortcode block's rendered form) at the content-size
   preset and centers each with auto margins, leaving them narrower than the
   container with visible side gutters. Let them fill the full width instead. */
.srta-contact-form>* {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.srta-notify-subscribe__placeholder {
  padding: var(--wp--preset--spacing--30);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 10px;
  background: var(--wp--preset--color--primary-surface);
}

.srta-notify-subscribe__placeholder p {
  margin: 0;
}

.srta-notify-subscribe__note {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  margin-top: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--primary-surface);
  border-radius: 8px;
  font-size: var(--wp--preset--font-size--small);
}

.srta-notify-subscribe__note-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--wp--preset--color--primary);
}

.srta-notify-subscribe__note-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}


/* Stack each subscription row on phones: text over a full-width Subscribe cell. */
@media (max-width: 600px) {
  .srta-notify-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .srta-notify-banner__cta {
    width: 100%;
    justify-content: center;
  }

  .srta-notify-item {
    flex-direction: column;
    align-items: stretch;
  }

  .srta-notify-subscribe-btn {
    width: auto;
    justify-content: flex-start;
    border-left: none;
    border-top: 1px solid var(--wp--custom--graphite--100);
  }
}

/* ----------------------------------------------------------------------------
 * Single event detail (templates/single-event.html)
 * Title + "Return to calendar" link, the action row (Add to calendar / Print /
 * View map), the documents block inside the info card, and the share card.
 * ------------------------------------------------------------------------- */

/* Teal-700 page title + back-link, matching the calendar-event design (and
   the sitewide h1/h2 teal-700 rule above). Shared with the bid and job
   detail pages (srta-bid-title/srta-job-title) — same look, different post type. */
.srta-event-title,
.srta-bid-title,
.srta-job-title {
  color: var(--wp--custom--teal--700);
  font-size: 2rem;
  /* 32px */
  font-weight: 600;
}

@media (max-width: 600px) {

  .srta-event-title,
  .srta-bid-title,
  .srta-job-title {
    font-size: 24px;
  }
}

.srta-back-link {
  margin: 0;
}

.srta-back-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
}

.srta-back-link a::before {
  content: "\2190";
  /* ← */
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.srta-back-link a:hover {
  color: var(--wp--preset--color--primary-deep);
}

.srta-back-link a:hover::before {
  transform: translateX(-2px);
}

.srta-event-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  /* 16px */
  font-weight: 400;
  color: var(--wp--custom--graphite--800);
  /* #2A3A3F */
}

/* Action row */
.srta-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.srta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--custom--graphite--700);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--graphite--600);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.srta-action-btn:hover {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--custom--teal--50);
  color: var(--wp--custom--graphite--700);
}

.srta-action-btn__icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--wp--custom--graphite--700);
}

.srta-action-btn__icon svg {
  width: 100%;
  height: 100%;
}

/* Add-to-calendar dropdown (native <details>) */
.srta-cal-menu {
  position: relative;
}

.srta-cal-menu>summary {
  list-style: none;
  /* hide the default disclosure triangle */
}

.srta-cal-menu>summary::-webkit-details-marker {
  display: none;
}

.srta-cal-menu__caret {
  display: inline-flex;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.1rem;
  color: var(--wp--custom--graphite--700);
  transition: transform 0.15s ease;
}

.srta-cal-menu__caret svg {
  width: 100%;
  height: 100%;
}

.srta-cal-menu[open] .srta-cal-menu__caret {
  transform: rotate(180deg);
}

.srta-cal-menu__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--custom--teal--900) 12%, transparent);
}

.srta-cal-menu__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wp--custom--graphite--900);
  text-decoration: none;
}

.srta-cal-menu__opt:hover {
  background: var(--wp--custom--teal--50);
}

.srta-cal-menu__opt .srta-action-btn__icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* Document buttons appended inside the Event information card body */
.srta-event-info__docs {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--border);
}

.srta-event-content {
  margin-top: 1.5rem;
}

/* Share this event card */
.srta-share-card {
  padding: 20px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--graphite--300);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--custom--teal--900) 4%, transparent);
}

.srta-share-card__title {
  margin: 0 0 0.9rem;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  color: var(--wp--custom--graphite--900);
}

.srta-share-card__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.srta-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--wp--custom--graphite--600);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--custom--graphite--500);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.srta-share-btn:hover {
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--custom--teal--50);
}

.srta-share-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.srta-share-card__copied {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* Keep the printed event clean: drop the chrome around the content. */
@media print {

  .srta-event-actions,
  .srta-share-card,
  .srta-section-nav,
  .srta-back-link {
    display: none !important;
  }
}

/* Keep the copied-confirmation truly hidden until JS reveals it (the class rule
   above would otherwise win over the [hidden] attribute's display:none). */
.srta-share-card__copied[hidden] {
  display: none;
}

/* Drop an event-info/bid-info meta row whose value is empty (e.g. an event with
   no time, or a bid missing a scraped date/qualifications value), so the card
   never shows a stray label with nothing beside it. Same for a bid's email/phone
   contact row when that field wasn't set. */
.srta-event-info__row:has(.srta-meta-value:empty),
.srta-bid-info__row:has(.srta-meta-value:empty),
.srta-bid-info__contact-row:has(.wp-block-button__link[href="#"]),
.srta-bid-info__contact-row:has(.srta-bid-info__contact-name:empty) {
  display: none;
}

/* If neither contact row has a real link, drop the "Contact" label too. */
.srta-bid-info__contact:not(:has(.srta-bid-info__contact-row .wp-block-button__link:not([href="#"]))) {
  display: none;
}

/* On the event detail card, drop the secondary document buttons when their file
   isn't attached yet — no "Packet Pending" / "Minutes Pending" placeholders, only
   the documents that actually exist. (The disabled class is added server-side by
   srta_apply_conditional_classes.) The teal Agenda button keeps its own state as
   the primary call-to-action. */
.srta-event-info__docs .srta-packet-button.srta-btn--disabled,
.srta-event-info__docs .srta-minutes-button.srta-btn--disabled {
  display: none;
}

/* On the event detail card, the document buttons use the same text size/weight as
   the site's primary buttons (home page) — 16px / 600 — rather than the compact
   14px used on the archive meeting cards. Drop the fixed 36px height so the larger
   label sits comfortably with home-button padding. */
.srta-event-info__docs .wp-block-button .wp-block-button__link {
  height: auto;
  padding: 0.7rem 1.25rem;
  font-size: var(--wp--preset--font-size--medium);
  /* 16px, matches the button element default */
  font-weight: 600;
  line-height: 1.3;
}

/* ----------------------------------------------------------------------------
 * Query pagination (Bid Postings + Calendar archives)
 * Turn the bare page numbers / prev / next links into bordered pill buttons.
 * ------------------------------------------------------------------------- */
.wp-block-query-pagination {
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  /* 8px between buttons */
}

/* Every clickable cell — page numbers and the prev/next links — shares the
   pill-button shape. */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.5rem;
  /* keep single digits square-ish */
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--wp--custom--graphite--500);
  border-radius: 10px;
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--custom--graphite--800);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination a.wp-block-query-pagination-next:hover {
  background: var(--wp--custom--teal--50);
  border-color: var(--wp--custom--teal--700, #00767E);
  color: var(--wp--custom--teal--800);
}

/* Prev/Next show a chevron icon instead of "Previous Page" / "Next Page".
   The label text is kept in the markup for screen readers but hidden visually
   (font-size:0); the chevron pseudo-element keeps its own size. It inherits the
   link colour via currentColor masking, matching the rest of the icon set. */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  font-size: 0;
  /* hide the "Previous Page" / "Next Page" text, keep it for a11y */
  /* The chevron is wider than a single digit, so trim the side padding and let
     the 2.5rem min-width keep these square — visually matching the number buttons. */
  padding: 0;
}

.wp-block-query-pagination-previous::after,
.wp-block-query-pagination-next::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.wp-block-query-pagination-previous::after {
  -webkit-mask-image: url("assets/icons/chevron-left.svg");
  mask-image: url("assets/icons/chevron-left.svg");
}

.wp-block-query-pagination-next::after {
  -webkit-mask-image: url("assets/icons/chevron-right.svg");
  mask-image: url("assets/icons/chevron-right.svg");
}

/* The current page is the solid teal button. */
.wp-block-query-pagination .page-numbers.current {
  background: var(--wp--custom--teal--700, #00767E);
  border-color: var(--wp--custom--teal--700, #00767E);
  color: var(--wp--preset--color--base, #fff);
  font-weight: 600;
}

/* The "…" gap is text, not a button. */
.wp-block-query-pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 0.25rem;
  border: none;
  background: none;
  color: var(--wp--custom--graphite--500);
}