/* Brand overrides for Pico v2.x.
   Color palette matches DLK-Sites and DLK-HRDB-Web-Portal so all three apps stay visually consistent.
   v2 namespaces all CSS vars under --pico-*.
   The selector below mirrors Pico's own light-theme selector exactly so specificity matches
   and source order (this file loads after pico.min.css) wins. */

:host(:not([data-theme=dark])),
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-primary: #379e37;
  --pico-primary-background: #379e37;
  --pico-primary-border: #379e37;
  --pico-primary-underline: rgba(55, 158, 55, 0.5);
  --pico-primary-hover: #308b30;
  --pico-primary-hover-background: #308b30;
  --pico-primary-hover-border: #308b30;
  --pico-primary-hover-underline: #308b30;
  --pico-primary-focus: rgba(55, 158, 55, 0.375);
  --pico-primary-inverse: #fff;

  --pico-secondary: #0093a3;
  --pico-secondary-background: #0093a3;
  --pico-secondary-border: #0093a3;
  --pico-secondary-underline: rgba(0, 147, 163, 0.5);
  --pico-secondary-hover: #007c89;
  --pico-secondary-hover-background: #007c89;
  --pico-secondary-hover-border: #007c89;
  --pico-secondary-hover-underline: #007c89;
  --pico-secondary-focus: rgba(0, 147, 163, 0.375);
  --pico-secondary-inverse: #fff;

  --pico-del-color: #d60041;

  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-spacing: 0.8rem;
}

/* Brand-aligned alert blocks, ported from the sibling repos. */

.alert-danger {
  background-color: #d60041;
  color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  font-weight: 600;
}

.alert-secondary {
  background-color: #0093a3;
  color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  font-weight: 600;
}

.alert-warning {
  background-color: #f0ad4e;
  color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  font-weight: 600;
}

/* Form layout */

main.container {
  max-width: 900px;
}

form section {
  margin-bottom: 2.5rem;
}

form section > h2 {
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--pico-primary);
  padding-bottom: 0.25rem;
}

form section > p.section-help {
  color: var(--pico-muted-color);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Multi-column field grids inside sections.
   We use a 3-track row grid (labels in row 1, inputs in row 2, field errors in
   row 3) and have each <label> span all rows via subgrid. This keeps every input
   on the same baseline even when a label like "Years Attended" wraps to two
   lines. The error track exists because validation injects a block-level
   <small class="field-error"> after the input, inside the label — without its
   own track, a subgrid drops that extra item into the last track, painting it
   over the input and blocking clicks.

   Because these labels are grid containers, every element child becomes its own
   grid item (inline elements are blockified). Label text that includes markup —
   e.g. an optional-marker <small> — must be wrapped in a single <span> so it
   stays one grid item in the text row. */

.field-grid-2,
.field-grid-3,
.field-grid-4 {
  display: grid;
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  row-gap: 0;
}

.field-grid-2 { grid-template-columns: 1fr 1fr; }
.field-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.field-grid-4 { grid-template-columns: 2fr 1fr 1fr 2fr; }

.field-grid-2 > label,
.field-grid-3 > label,
.field-grid-4 > label {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .field-grid-2,
  .field-grid-3,
  .field-grid-4 {
    display: block;
  }
  .field-grid-2 > label,
  .field-grid-3 > label,
  .field-grid-4 > label {
    display: block;
    grid-row: auto;
  }
}

/* Availability schedule grid (shift × Mon-Fri). One block per selected program. */

.availability {
  display: grid;
  grid-template-columns: max-content repeat(5, 1fr);
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.availability .avail-cell {
  text-align: center;
}

.availability .avail-cell input[type="checkbox"] {
  margin: 0;
}

.availability .avail-header {
  font-weight: 600;
  text-align: center;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

.availability .shift-label label {
  margin-bottom: 0;
  font-weight: 600;
}

/* Programs-of-interest checkbox group */

.program-select {
  margin-bottom: 1rem;
}

.program-select label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.5rem;
  margin-bottom: 0.25rem;
}

.program-select label input[type="checkbox"] {
  margin: 0;
}

/* Per-program availability block */

.availability-block {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0.75rem 1rem 0.5rem;
  margin-bottom: 0.75rem;
  background: var(--pico-card-background-color);
}

.availability-block > h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.availability-block .availability {
  margin-bottom: 0;
}

/* Inline link-styled button (for "View shift times" trigger inside body text) */

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: auto;
  color: var(--pico-primary);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  display: inline;
}

.link-button:hover {
  color: var(--pico-primary-hover);
  background: none;
}

/* Repeating row sections (education, employment, training, references). */

.repeating-section .row {
  position: relative;
  padding: 0.75rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  margin-bottom: 0.75rem;
  background: var(--pico-card-background-color);
}

.repeating-section .row-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--pico-del-color);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  width: auto;
  margin: 0;
}

.repeating-section .row-remove:hover {
  background: rgba(214, 0, 65, 0.1);
}

.repeating-section .add-row {
  background: transparent;
  color: var(--pico-secondary);
  border: 1px dashed var(--pico-secondary);
  width: 100%;
  margin-top: 0.25rem;
}

.repeating-section .add-row:hover {
  background: rgba(0, 147, 163, 0.08);
  color: var(--pico-secondary-hover);
  border-color: var(--pico-secondary-hover);
}

.repeating-section .add-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Honeypot — visually and assistively hidden but still focusable for the bot. */

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Conditional reveal containers — hidden by default. */

.conditional-reveal[hidden] {
  display: none;
}

/* Optional-field marker (inverse marking: required by default, optional is labeled) */

.optional-marker {
  color: var(--pico-muted-color);
  font-weight: normal;
  font-size: 0.75em;
  margin-left: 0.35rem;
  font-style: italic;
}

/* Per-field inline error message. Appears below an invalid input. */

.field-error {
  display: block;
  color: var(--pico-del-color);
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.field-error[hidden] {
  display: none;
}

/* Submit-time summary banner with a bulleted list of issues. */

#form-summary-errors {
  margin-bottom: 1.5rem;
}

#form-summary-errors ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

#form-summary-errors li {
  margin: 0.15rem 0;
}

#form-summary-errors a {
  color: #fff;
  text-decoration: underline;
}

#form-summary-errors a:hover {
  text-decoration: none;
}

/* Tighten Pico's invalid-input styling on selects (Pico's default green/red
   icon stack can look noisy on selects inside grids). */
[aria-invalid="true"] {
  --pico-form-element-border-color: var(--pico-del-color);
}

/* Y/N inline radio groups. */

.yn-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.yn-row > .yn-question {
  flex: 1;
  min-width: 0;
}

.yn-row > .yn-choices {
  display: flex;
  gap: 1rem;
}

.yn-row label {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Submit area */

.submit-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

button.submit-button {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.05rem;
}

/* Draft-restored toast */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pico-secondary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 0.9rem;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.toast.fade {
  opacity: 0;
}

/* Submitting spinner — ported verbatim from DLK-HRDB-Web-Portal. */

form.is-submitting {
  position: relative;
}

form.is-submitting::before {
  position: absolute;
  content: "";
  top: -0.5em;
  right: -0.5em;
  left: -0.5em;
  bottom: -0.5em;
  background: rgba(0, 0, 0, 0.2)
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K")
    no-repeat 50% 50% / 1em 1em;
  z-index: 1;
}

/* Sticky footer */

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header { flex: 0 0 auto; }
main { flex: 1 0 auto; }
footer { flex: 0 0 auto; }