/* CLP Hub landing page (page-clp-hub.php): intro + state picker. */

.clp-hub {
  --clp-color-navy: #0b2265;
  --clp-color-muted: #4b5870;
  --clp-color-surface: #f5f7f9;
  --clp-color-line: #d1d9e5;
  --clp-color-white: #fff;
  --clp-font-regular: 400;
  --clp-font-semibold: 600;
  --clp-content-width: 960px;
  --clp-gutter: 24px;

  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: content-box;
  max-width: var(--clp-content-width);
  margin: 0 auto;
  padding: 64px var(--clp-gutter) 120px;
}

/* Intro (page title + editor content) */
.clp-hub-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* !important: the global heading rule sets color with !important. */
.clp-hub-title {
  color: var(--clp-color-navy) !important;
  font-size: 40px;
  font-weight: var(--clp-font-regular);
  line-height: 48px;
  margin: 0;
}

.clp-hub-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clp-hub-lead p,
.clp-hub-lead li {
  color: var(--clp-color-navy);
  font-size: 18px;
  font-weight: var(--clp-font-regular);
  line-height: 27px;
}

.clp-hub-lead p,
.clp-hub-lead ul {
  margin: 0;
}

.clp-hub-lead strong {
  font-weight: var(--clp-font-semibold);
}

.clp-hub-lead ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.clp-hub-lead li {
  position: relative;
  padding-left: 20px;
}

.clp-hub-lead li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  width: 12px;
  color: var(--clp-color-muted);
}

/* State picker card */
.clp-hub-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--clp-color-surface);
  border: 1px solid var(--clp-color-line);
  border-radius: 4px;
}

.clp-hub-picker-title {
  color: var(--clp-color-navy) !important;
  font-size: 28px;
  font-weight: var(--clp-font-semibold);
  line-height: 34px;
  margin: 0;
}

.clp-hub-picker-lead {
  color: var(--clp-color-navy);
  font-size: 18px;
  font-weight: var(--clp-font-regular);
  line-height: 27px;
  margin: 0;
}

.clp-hub-picker-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.clp-hub-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Native select restyled to the design; the OS renders the open option list. */
.clp-hub-select-wrap {
  position: relative;
  align-self: stretch;
}

.clp-hub-select {
  appearance: none;
  width: 100%;
  min-height: 59px;
  padding: 16px 48px 16px 16px;
  background: var(--clp-color-white);
  border: 1px solid var(--clp-color-line);
  border-radius: 4px;
  color: var(--clp-color-navy);
  font-family: inherit;
  font-size: 18px;
  font-weight: var(--clp-font-regular);
  line-height: 27px;
  cursor: pointer;
}

.clp-hub-select:focus-visible {
  outline: 2px solid var(--clp-color-navy);
  outline-offset: 2px;
}

.clp-hub-select-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* !important: the global button rule's :not() chain outranks this selector
   and forces its own font, spacing, casing, and outline. */
.clp-hub-submit {
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 24px !important;
  background: var(--clp-color-navy) !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--clp-color-white) !important;
  font-family: "Barlow", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 18px !important;
  font-weight: var(--clp-font-semibold) !important;
  line-height: 27px !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
}

/* The global button rule draws red corner accents with pseudo-elements. */
.clp-hub-submit::before,
.clp-hub-submit::after {
  display: none !important;
}

.clp-hub-submit:focus-visible {
  outline: 2px solid var(--clp-color-navy) !important;
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .clp-hub {
    gap: 40px;
    padding-top: 48px;
  }

  .clp-hub-title {
    font-size: 32px;
    line-height: 38px;
  }

  /* !important: the global mobile h2 rule sets font-size with !important. */
  .clp-hub-picker-title {
    font-size: 24px !important;
    line-height: 30px;
  }
}