/**
 * The existing implementation of cards is a mix between layoutable (can be
 * styled in layout builder configuration) and dynamic content (e.g. the card
 * markup is done in CKEditor content). Ideally, we should use Layout Builder
 * for ease of reconfiguration of the styles.
 *
 * In the interim, this CSS will style both approaches (simple classes and
 * complex selector chains). But moving forward, the simple classes (the ones
 * that are prefixed "pdc-") should be used in conjunction with core Layout
 * Builder and friends.
 */

.pdc-card {
  border: 1px solid var(--pdc-color-13);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 4px 4px 4px rgba(56, 63, 89, 0.25);
  padding: 50px 15px 15px;
  line-height: 2.4rem;
  background: url(../../images/octopus.png) repeat no-repeat;
  margin-bottom: 30px;

  /* Hack to ensure all misbehaving floated elements are contained in the card. */
  overflow: hidden;
}

.pdc-card-title {
  font-size: 2.4rem;
  line-height: 2.8rem;

  /* Adjust the fixed spacing applied to all headings. */
  margin: 0 0 1.6rem;
  padding: 0;
}

.pdc-card-subtitle {
  /* Subtitle is meant to stick to the title */
  margin: 0;

  /* Unset h2/h3 global styles. */
  display: block;
  font-size: 1.8rem;
  line-height: 1.8rem;
  padding: revert;
}

.pdc-card-actions {
  background: var(--pdc-color-12);

  /* Unset list style. Equivalent to list-style-none. */
  list-style: none;
  margin: 0;
  padding: 1.6rem 0.8rem 0.8rem;
}

.pdc-card-action {
  margin-bottom: 0;
}

.pdc-card-action-link {
  display: block;
  padding: 0 0.8rem 1.3rem;
  /* Spacing for link text wrapping to appear closer than next card action  */
  line-height: 2.4rem;
}

@media (min-width: 768px) {
  .pdc-card {
    padding: 50px 30px 30px;
  }

  .pdc-card-wide .pdc-card-actions {
    columns: 2;
  }

  .pdc-card-wide .pdc-card-action {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Workarounds */
/* @todo Remove this after a future refactor. */

/* Contrary to popular convention, <p> should NOT lose their bottom margins. */
.pdc-card p {
  margin-bottom: revert;
}

/** Revert the h2 and h3 styles back to Bootstrap's original sizing. */
.pdc-card .field--name-body h2,
.pdc-card .field--name-body h3 {
  padding: 0;
  margin-bottom: 10px;
}

/* Remove the orange underline applied to all h2 and h3. */
.pdc-card-title::before,
.pdc-card-title::after,
.pdc-card-subtitle::before,
.pdc-card-subtitle::after,
.pdc-card .field--name-body h2::after,
.pdc-card .field--name-body h2::before,
.pdc-card .field--name-body h3::after,
.pdc-card .field--name-body h3::before {
  content: "";
  display: none;
}

/* Style for main links where the landing page card is not used as a card. */
.pdc-card-main-action-link,
.pdc-card-main-action-links {
  display: inline-block;
  margin-top: 30px;
  clear: both;
  margin-bottom: 30px;
  background-color: #006800;
  padding: 17px 28px;
  border-radius: 4px;
  width: fit-content;
  color: #fff !important;
  font-size: 2.2rem;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.pdc-card-main-action-link:hover,
.pdc-card-main-action-links:hover {
  background: #0b354d;
  transition: 0.5s ease;
}

.block-candidate-search-form-block form,
.block-committee-search-form-block form {
  margin-top: 1em;
  margin-bottom: 1em;
}

/**
 * Another instance of the landing page block not used as a landing page block.
 * @see https://pdc.wa.gov/political-disclosure-reporting-data
 *
 * If these appearances are to belong to the landing page block type, these
 * (i.e. stacked, wide 2-col actions, and the committees/candidates variant)
 * should be "displays" of the same type, configured with different classes.
 *
 * But this would mean a rework of the existing blocks and some cleanup, which
 * will take time. Work around for now.
 */
.pdc-card-alt .pdc-card-actions {
  padding: 0;
  background: none;
}

.pdc-card-alt .pdc-card-action-link {
  padding: 0;
  line-height: 1.5;
}

/**
 * Need to ensure all the PDC card wrappers are sized in order to make the
 * grey box action links fill the column space.
 */
.block-block-content .pdc-card {
  display: flex;
  flex-flow: column nowrap;
}

.block-block-content .pdc-card .layout,
.block-block-content .pdc-card .layout__region {
  height: 100%;
}

.block-block-content .pdc-card .layout__region {
  display: flex;
  flex-direction: column;
}

.block-block-content .pdc-card .field--name-field-subsection-link {
  flex-grow: 1;
  background-color: var(--pdc-color-12);
}