/* ============================================================
   PSMFC Theme - Custom Overrides for FMP Amendment Database
   Layered on top of USWDS 3.x
   ============================================================ */

/* -- Variables ------------------------------------------------ */
:root {
  --psmfc-ink: #162e51;
  --psmfc-ink-deep: #0f243e;
  --psmfc-ocean: #1b6a8f;
  --psmfc-sky: #dcebf7;
  --psmfc-foam: #eef5fb;
  --psmfc-sand: #f8f3e8;
  --psmfc-line: #d2ddea;
  --psmfc-border: #7d98b7;
  --psmfc-card-shadow: 0 6px 18px rgba(17, 43, 75, 0.08);

  --fmp-bsai: #1b2b3a;
  --fmp-goa: #1e5799;
  --fmp-crab: #a94400;
  --fmp-scallop: #2b7a4b;
  --fmp-salmon: #9f2759;
  --fmp-arctic: #1b6a8f;
}

html,
body {
  background:
    radial-gradient(circle at 12% -5%, #f8fbff 0%, transparent 38%),
    radial-gradient(circle at 92% 0%, #f4f8ff 0%, transparent 36%), #fcfdff;
}

body {
  color: #1b1b1b;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading-xl,
.font-heading-lg,
.font-heading-2xl {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}

a {
  color: #005ea2;
}

a:hover,
a:focus {
  color: #1a4480;
}

.usa-button {
  background-color: var(--psmfc-ink);
}

.usa-button:hover,
.usa-button:focus {
  background-color: var(--psmfc-ink-deep);
}

.usa-input,
.usa-select {
  border-width: 2px;
}

.usa-input:focus,
.usa-select:focus,
.usa-button:focus,
a:focus {
  outline: 0.25rem solid #ffbe2e;
  outline-offset: 0.1rem;
}

/* -- Layout Width Override ----------------------------------- */
.grid-container {
  max-width: 90rem;
}

/* -- Site Header --------------------------------------------- */
.psmfc-header {
  background: linear-gradient(110deg, #112f4f 0%, #173f67 62%, #1b5c82 100%);
  color: #fff;
  border-bottom: 1px solid #355a82;
}

.psmfc-header__inner {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
}

.psmfc-header__brand-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  text-decoration: none;
}

.psmfc-header__brand-link:hover,
.psmfc-header__brand-link:focus {
  color: #fff;
  text-decoration: none;
}

.psmfc-header__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.psmfc-header__site-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.psmfc-header__org-name {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  white-space: normal;
  line-height: 1.2;
}

@media (max-width: 63.99em) {
  .psmfc-header__site-name {
    font-size: 1.25rem;
  }

  .psmfc-header__org-name {
    font-size: 0.8rem;
  }
}

/* -- Skip Nav (USWDS override for header color) -------------- */
.usa-skipnav {
  background-color: var(--psmfc-ink);
  color: #fff;
}

/* -- Main Content Area ---------------------------------------- */
#main-content {
  min-height: 60vh;
  padding-bottom: 3rem;
}

#main-content:focus,
#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

/* -- Search / Home Page -------------------------------------- */
.search-hero {
  background: linear-gradient(180deg, #eff5fb 0%, #e7f0f9 100%);
  border-bottom: 1px solid #c8d8e9;
  box-shadow: inset 0 -1px 0 rgba(22, 46, 81, 0.08);
}

.search-hero .usa-input,
.search-hero .usa-select {
  border-color: #5a7592;
  background-color: #fff;
}

.search-hero .usa-button {
  margin-right: 0;
}

.search-hero__keyword-input,
.search-hero__search-button {
  min-height: 3.5rem;
  font-size: 1.125rem;
}

.search-hero__keyword-input {
  height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.search-hero__search-button {
  height: 3.5rem;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-hero h1 {
  color: var(--psmfc-ink);
  max-width: 42rem;
  line-height: 1.15;
}

.search-hero .usa-label {
  color: #1a3d67;
  font-weight: 700;
}

.amendment-results-toolbar {
  background: #f4f8fc;
  border: 1px solid var(--psmfc-border);
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
}

.amendment-sort {
  min-width: 12rem;
  margin-right: 0;
}

.amendment-page-size {
  min-width: 4rem;
  margin-right: 0;
}

.amendment-toolbar-form {
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.amendment-toolbar-form .usa-label {
  font-weight: 700;
  color: #1a3d67;
}

.amendment-toolbar-form .amendment-page-size + .usa-label {
  margin-left: 0.75rem;
}

.usa-pagination {
  margin-bottom: 0.5rem;
}

.usa-pagination__button {
  border-radius: 0.25rem;
}

.usa-pagination__button:hover {
  background-color: #e8f1fb;
}

.usa-pagination__button.usa-current,
.usa-pagination__button.usa-current:hover {
  background-color: var(--psmfc-ink);
  border-color: var(--psmfc-ink);
  color: #fff;
}

.usa-pagination__link {
  border-radius: 0.25rem;
}

.usa-pagination__link:hover {
  background-color: #e8f1fb;
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .amendment-search-form .search-hero__search-button {
    margin-top: 0.625rem;
  }

  .amendment-search-form .grid-row + .grid-row {
    margin-top: 0.875rem;
  }

  .amendment-search-form
    .grid-row
    > [class*="grid-col-"]
    + [class*="grid-col-"] {
    margin-top: 0.625rem;
  }

  .amendment-search-form
    .grid-row.grid-gap-1
    > [class*="grid-col-"]
    + [class*="grid-col-"] {
    margin-top: 0;
  }
}

@media (max-width: 39.99em) {
  .search-hero {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .search-hero h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .search-hero__keyword-input,
  .search-hero__search-button {
    min-height: 3rem;
    font-size: 1rem;
  }

  .search-hero__keyword-input,
  .search-hero__search-button {
    height: 3rem;
  }

  .amendment-search-form .search-hero__search-button {
    margin-top: 0.625rem;
  }

  .amendment-search-form .grid-row + .grid-row {
    margin-top: 0.875rem;
  }

  .amendment-search-form
    .grid-row
    > [class*="grid-col-"]
    + [class*="grid-col-"] {
    margin-top: 0.625rem;
  }

  .amendment-results-toolbar {
    padding: 0.875rem;
  }

  .amendment-toolbar-form {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .amendment-toolbar-form .amendment-page-size + .usa-label {
    margin-left: 0.375rem;
  }

  .amendment-sort {
    min-width: 9rem;
  }

  .amendment-page-size {
    min-width: 6.5rem;
  }

  .usa-pagination__list {
    justify-content: center;
    row-gap: 0.35rem;
  }

  .usa-pagination__item {
    margin-bottom: 0;
  }
}

.amendment-pagination__chevron {
  display: inline-block;
  font-weight: 700;
  margin-inline: 0.25rem;
}

/* -- FMP Badges / Tags --------------------------------------- */
/*
  Use via: <span class="usa-tag fmp-tag fmp-tag--bsai">BSAI</span>
  The usa-tag base class provides padding/font-size;
  fmp-tag modifier overrides the background color per FMP.
*/
.fmp-tag {
  color: #fff !important;
  letter-spacing: 0.02em;
}

.fmp-tag--bsai {
  background-color: var(--fmp-bsai) !important;
}
.fmp-tag--goa {
  background-color: var(--fmp-goa) !important;
}
.fmp-tag--crab {
  background-color: var(--fmp-crab) !important;
}
.fmp-tag--scallop {
  background-color: var(--fmp-scallop) !important;
}
.fmp-tag--salmon {
  background-color: var(--fmp-salmon) !important;
}
.fmp-tag--arctic {
  background-color: var(--fmp-arctic) !important;
}

/* -- Amendment Result Card ----------------------------------- */
.amendment-card {
  position: relative;
  border: 1px solid var(--psmfc-border);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: var(--psmfc-card-shadow);
  padding: 3.5rem 1rem 1rem 1rem;
  margin-bottom: 1.25rem;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.amendment-card:hover {
  box-shadow: 0 9px 22px rgba(17, 43, 75, 0.12);
  transform: translateY(-1px);
  border-color: #5d7fa6;
}

.amendment-card__header {
  margin-bottom: 0.5rem;
}

.amendment-card__fmp-corner {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.25rem 0rem 0.375rem 0rem;
  min-width: 4.2rem;
  text-align: center;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.amendment-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.125rem;
  color: var(--psmfc-ink);
  line-height: 1.25;
}

.amendment-card__subtitle {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.625rem;
  color: #20406d;
}

.amendment-card__summary {
  color: #1b1b1b;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Date row */
.amendment-card__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-size: 0.875rem;
  color: #565c65;
  margin-bottom: 0;
}

.amendment-card__date-label {
  font-weight: 700;
  display: block;
  color: #1b1b1b;
}

/* Sibling amendments chips */
.amendment-card__siblings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.375rem 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.amendment-card__siblings-label {
  width: 100%;
  font-weight: 700;
  color: #1b1b1b;
  margin-right: 0;
  margin-bottom: 0.125rem;
}

.sibling-chip {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--psmfc-line);
  border-radius: 10rem;
  font-size: 0.8125rem;
  color: #1b1b1b;
  text-decoration: none;
  background: #f4f8fc;
}

.sibling-chip:hover {
  background: #e4effb;
  border-color: #005ea2;
  text-decoration: none;
}

.amendment-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.amendment-resource-link {
  display: inline-block;
  color: var(--psmfc-ink);
  text-decoration: underline;
  font-weight: 600;
}

.amendment-resource-link__icon {
  margin-left: 0.25rem;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  line-height: 1;
  vertical-align: text-bottom;
}

.amendment-resource-link:hover,
.amendment-resource-link:focus {
  color: var(--psmfc-ink-deep);
}

@media (max-width: 39.99em) {
  .amendment-card {
    padding: 1rem;
  }

  .amendment-card__header {
    padding-left: 0;
    margin-top: 2rem;
  }
}

/* -- FMP Filter Bar & Chips (home page) --------------------- */
.fmp-filter-bar {
  border-top: 1px solid var(--psmfc-line);
  padding-top: 1rem;
}

.fmp-filter-bar__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--psmfc-ink);
  margin: 0;
  margin-right: 0.25rem;
  white-space: nowrap;
}

.fmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--psmfc-border);
  border-radius: 1.25rem;
  background: #fff;
  color: #1b1b1b;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.fmp-chip:hover {
  border-color: #005ea2;
  background: #edf4fb;
  color: #005ea2;
}

.fmp-chip:focus-visible {
  outline: 2px solid #005ea2;
  outline-offset: 2px;
}

.fmp-chip.is-selected {
  background: #0b4778;
  border-color: #0b4778;
  color: #fff;
  box-shadow: 0 1px 3px rgba(11, 71, 120, 0.3);
}

.fmp-chip.is-selected:hover {
  background: #002d5f;
  border-color: #002d5f;
}

.fmp-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.fmp-chip.is-selected .fmp-chip__count {
  background: rgba(255, 255, 255, 0.2);
}

/* -- Amendment Detail Page ----------------------------------- */
/* Overview sidebar card */
.amendment-overview {
  border: 1px solid var(--psmfc-border);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: var(--psmfc-card-shadow);
  overflow: hidden;
}

.amendment-overview__header {
  background: linear-gradient(
    180deg,
    rgba(236, 244, 252, 0.95) 0%,
    rgba(228, 239, 249, 0.95) 100%
  );
  border-bottom: 1px solid var(--psmfc-line);
  padding: 0.625rem 1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--psmfc-ink);
}

.amendment-overview__body {
  padding: 1rem;
}

.amendment-overview__row {
  margin-bottom: 0.875rem;
}

.amendment-overview__label {
  font-weight: 700;
  font-size: 0.875rem;
  color: #1b1b1b;
  display: block;
  margin-bottom: 0.125rem;
}

.amendment-overview__value {
  font-size: 0.9375rem;
  color: #1b1b1b;
  line-height: 1.45;
}

/* Document links list */
.amendment-doc-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.amendment-doc-links li + li {
  margin-top: 0.5rem;
}

.amendment-doc-links a {
  font-size: 0.875rem;
}

.amendment-detail__header {
  border-bottom: 1px solid var(--psmfc-line);
  padding-bottom: 1rem;
}

.amendment-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--psmfc-ink);
  background-color: var(--psmfc-foam);
  border: 1px solid var(--psmfc-line);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
}

.amendment-back-link:hover,
.amendment-back-link:focus {
  color: var(--psmfc-ink-deep);
  background-color: var(--psmfc-sky);
  text-decoration: none;
}

.amendment-back-link__arrow {
  font-size: 1rem;
  line-height: 1;
}

.amendment-detail__content > h2,
.amendment-detail__content .font-heading-lg {
  color: var(--psmfc-ink);
}

@media (min-width: 64em) {
  .amendment-overview {
    position: sticky;
    top: 1rem;
  }
}

/* -- Footer --------------------------------------------------- */
.usa-footer {
  border-top: 3px solid #50749a;
}

.usa-footer__secondary-section {
  background: #f0f4f8;
}

.usa-footer__logo-heading {
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0 0 0.125rem;
  color: var(--psmfc-ink);
}

.usa-footer__logo-subheading {
  font-size: 0.875rem;
  color: #505961;
  margin: 0;
}

/* -- Utility -------------------------------------------------- */
.text-base-dark {
  color: #374151;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .amendment-card,
  .fmp-chip,
  .search-results--loading {
    transition: none;
  }
}

/* ── AJAX search loading state ─────────────────────────────────── */
.search-results--loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}