/**
 * Stichting Gast – Public page chrome (header, footer, layout).
 *
 * Loaded only on public contribution pages via gasttheme_civicrm_buildForm().
 *
 * Color values are intentionally hardcoded rather than using CSS variables,
 * because this file is loaded after the Riverlea stream variables are applied
 * and the values are stable brand constants.
 *
 * Light mode palette:
 *   bg-content:    #f8f6f6    (card/content background)
 *   bg-frame:      #e9e5df    (page/footer background)
 *   border:        #d9d5d0    (card borders)
 *   border-hover:  #c2b8b4    (card hover borders, input borders)
 *   text-primary:  #333333
 *   text-muted:    #888888    (descriptions, footer text)
 *   accent-orange: #e37126    (links)
 *   accent-yellow: #fbcc30    (active cards, buttons, dividers)
 *   accent-brown:  #4a1c22    (headings, card primary text)
 *   active-bg:     #fff9e6    (selected card background)
 *
 * Dark mode palette:
 *   bg-page:       #1c1917
 *   bg-content:    #232019
 *   bg-card:       #2c2922
 *   bg-active:     #2d2515
 *   border:        #3d3830
 *   border-hover:  #6b6560
 *   text-primary:  #f0ece8
 *   text-muted:    #9b9490
 */


/* ==========================================================================
   Page background
   ========================================================================== */

html,
body,
.crm-standalone {
  background-color: #e9e5df;
}


/* ==========================================================================
   CiviCRM container overrides
   ========================================================================== */

#crm-container {
  & #crm-main-content-wrapper {
    background-color: #f8f6f6;
    border: 2px solid #d9d5d0;
    border-radius: 8px;
    padding: 28px 32px;
    margin-bottom: 16px;

    & form {
      background-color: transparent;
      box-shadow: none;
      border: none;
    }
  }

  & .crm-contribution-main-form-block,
  & .crm-block.crm-contribution-main-form-block {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }

  /* Remove CiviCRM's focus highlight backgrounds. */
  & .crm-section {
    &:focus-within,
    &.crm-section-focus,
    &:has(:focus) {
      background-color: transparent;
    }
  }

  & fieldset {
    &:focus-within {
      background-color: transparent;
    }

    & legend {
      display: none;
    }
  }

  & .price-set-row:focus-within {
    background-color: transparent;
  }

  &.crm-public {
    display: flex;
    flex-direction: column;

    & > .gast-page-header {
      order: -2;
    }

    & > .crm-page-title-wrapper {
      order: -1;
    }

    & .crm-page-title {
      color: #4a1c22;
      font-size: 24px;
      margin-top: 0;
      margin-bottom: 16px;
    }

    & .crm-submit-buttons {
      display: flex;
      margin-bottom: 1rem;

      & .crm-button,
      & [type="submit"],
      & input[type="submit"] {
        background-color: #fbcc30;
        color: #333333;
        border-color: #fbcc30;
        font-weight: bold;
        flex: 1;
        max-width: none;
        padding: 24px 28px;

        &:hover {
          background-color: #e9bb20;
          border-color: #e9bb20;
        }
      }

      & .crm-button .crm-i {
        width: auto;
        min-width: 0;
        padding: 0;
        margin-right: 6px;

        &.fa-check::before {
          content: "\f004";
          font-weight: 900;
        }
      }
    }

    & .messages,
    & .help {
      padding: 12px 16px;
      margin-bottom: 16px;
      border-radius: 6px;
    }
  }
}


/* ==========================================================================
   Links — orange on public pages, grey in footer
   ========================================================================== */

#crm-container.crm-public #crm-main-content-wrapper a {
  color: #e37126;
  text-decoration: underline;

  &:hover {
    color: #c55e1a;
  }
}

/* Footer link overrides (same specificity, source order wins over orange). */
#crm-container #crm-main-content-wrapper .gast-page-footer__contact a {
  color: #888888;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

#crm-container #crm-main-content-wrapper .gast-page-footer__links a {
  color: #888888;
  text-decoration: underline;
}


/* ==========================================================================
   Selection cards (shared)
   Both amount cards and recurring frequency cards use the same radio + label
   pattern: a hidden <input type=radio> followed by a <label class="gast-card">.
   ========================================================================== */

/* Hide radio buttons; the label becomes the clickable card. */
.gast-card__radio,
.crm-section.contribution_amount-section .contribution_amount-content input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Card chrome (label styled as a card). */
.gast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 12px 10px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #d9d5d0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  font-weight: normal;

  &:hover {
    border-color: #c2b8b4;
  }
}

/* Active/checked card state. */
input[type=radio]:checked + .gast-card {
  border-color: #fbcc30;
  background-color: #fff9e6;

  & .gast-card__primary-text {
    text-decoration: underline;
  }
}

.gast-card__primary-text {
  font-size: 18px;
  font-weight: bold;
  color: #4a1c22;
  line-height: 1.2;
  margin-bottom: 4px;
}

.gast-card__desc {
  font-size: 11px;
  color: #888888;
  line-height: 1.3;
}


/* ==========================================================================
   Amount selection cards (section-specific)
   ========================================================================== */

.crm-section.contribution_amount-section {
  & .contribution_amount-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  & .price-set-row {
    flex: 1 1 200px;
    height: 80px;
    margin: 0;
    overflow: hidden;
  }

  & .price-set-option-content {
    display: block;
    height: 100%;
  }

  & .crm-option-label-pair {
    position: relative;
    height: 100%;
  }
}

.gast-amount-card__input {
  margin-top: 8px;
  width: auto !important;
  min-width: 0 !important;
  align-self: stretch;
  border: 1px solid #c2b8b4;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  background: #ffffff;
}


/* ==========================================================================
   Recurring contribution section
   Contains frequency cards, interval/installments inputs, and mandate summary.
   ========================================================================== */

/* Remove CiviCRM's default section padding. */
#crm-container .crm-section.is_recur-section {
  padding-left: 0;
  padding-right: 0;
}

/* Shared sub-section header style. */
.gast-recur-section__header,
.gast-recur-interval__header,
.gast-recur-installments__header,
.gast-recur-summary__header {
  font-weight: bold;
  margin-bottom: 8px;
}

/* ── Frequency cards ── */

.gast-recur-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  /* Cards within this container get fixed height and flexible width. */
  & .gast-card {
    flex: 1 1 200px;
    max-width: none;
    height: 80px;
  }
}

/* ── Interval and installments inputs ── */

/* Side-by-side wrapper for interval + installments rows. */
.gast-recur-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}

.gast-recur-interval,
.gast-recur-installments {
  margin-top: 2rem;
}

/* Shared input style for interval and installments fields. */
.gast-recur-interval__input,
.gast-recur-installments__input {
  border: 1px solid #c2b8b4;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  box-sizing: border-box;
  background: #ffffff;
}

/* ── Mandate summary ── */

.gast-recur-summary__header {
  margin-top: 2rem;
}

.gast-recur-summary {
  font-size: var(--crm-font-size);
  color: #4a1c22;
  font-style: italic;
  padding: 10px 14px;
  background-color: #fff9e6;
  border-left: 3px solid #fbcc30;
  border-radius: 4px;
}


/* ==========================================================================
   Newsletter / group checkbox
   ========================================================================== */

.crm-section table.form-layout-compressed {
  box-shadow: none;
  border: none;

  & tr {
    border-bottom: none;
  }
}

.group-wrapper .crm-form-checkbox {
  margin-right: 6px;
}


/* ==========================================================================
   Branded header
   ========================================================================== */

.gast-page-header {
  width: 100%;
  max-width: var(--crm-f-form-width);
  margin-inline: auto;
  padding: 20px 0 0;
  box-sizing: border-box;

  & .gast-page-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
  }

  & .gast-page-header__logo {
    display: block;
    border-radius: 8px;
    width: 60px;
    height: auto;
  }

  & .gast-page-header__title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #4a1c22;
  }

  & .gast-page-header__divider {
    height: 3px;
    background-color: #fbcc30;
    margin-bottom: 20px;
  }
}


/* ==========================================================================
   Branded footer
   ========================================================================== */

.gast-page-footer {
  margin: 0 -32px -28px;
  padding: 16px 32px;
  background-color: #e9e5df;
  border-radius: 0 0 8px 8px;

  & .gast-page-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  }

  & .gast-page-footer__contact,
  & .gast-page-footer__registration {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #888888;
    line-height: 1.6;
  }

  & .gast-page-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  & .gast-page-footer__registration {
    text-align: right;
    white-space: nowrap;
  }
}


/* ==========================================================================
   Thank You page adjustments
   ========================================================================== */

.crm-contribution-thankyou-form-block {
  & .header-dark {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  & .amount_display-group {
    margin-bottom: 16px;
  }
}


/* ==========================================================================
   Dark mode overrides
   Mirrors the warm dark palette from streams/gast/_dark.css.
   Required because this file hardcodes colors rather than using CSS variables.
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  /* ── Page background ── */

  html,
  body,
  .crm-standalone {
    background-color: #1c1917;
  }

  #crm-container {
    & #crm-main-content-wrapper {
      background-color: #232019;
      border-color: transparent;
    }
  }

  /* ── Container overrides ── */

  #crm-container.crm-public {
    & .crm-page-title {
      color: #e37126;
    }

    & .crm-submit-buttons {
      & .crm-button,
      & [type="submit"],
      & input[type="submit"] {
        background-color: #fbcc30;
        color: #1c1917;
        border-color: #fbcc30;

        &:hover {
          background-color: #e9bb20;
          border-color: #e9bb20;
        }
      }
    }
  }

  /* ── Links ── */

  #crm-container.crm-public #crm-main-content-wrapper a {
    color: #e37126;

    &:hover {
      color: #f09356;
    }
  }

  #crm-container #crm-main-content-wrapper .gast-page-footer__contact a,
  #crm-container #crm-main-content-wrapper .gast-page-footer__links a {
    color: #9b9490;
  }

  /* ── Selection cards (shared) ── */

  .gast-card {
    background: #2c2922;
    border-color: #3d3830;
    color: #f0ece8;

    &:hover {
      border-color: #6b6560;
    }
  }

  input[type=radio]:checked + .gast-card {
    border-color: #fbcc30;
    background-color: #2d2515;
  }

  .gast-card__primary-text {
    color: #fbcc30;
  }

  .gast-card__desc {
    color: #9b9490;
  }

  /* ── Form inputs (amount, interval, installments) ── */

  .gast-amount-card__input,
  .gast-recur-interval__input,
  .gast-recur-installments__input {
    background: #2c2922;
    border-color: #6b6560;
    color: #f0ece8;
  }

  /* ── Mandate summary ── */

  .gast-recur-summary {
    color: #f0ece8;
    background-color: #2d2515;
    border-left-color: #fbcc30;
  }

  /* ── Header ── */

  .gast-page-header {
    & .gast-page-header__title {
      color: #e37126;
    }
  }

  /* ── Footer ── */

  .gast-page-footer {
    background-color: #161311;

    & .gast-page-footer__contact,
    & .gast-page-footer__registration {
      color: #9b9490;
    }
  }
}


/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 480px) {
  /* Allow the form to shrink below 400px (Riverlea's clamp minimum). */
  #crm-container.crm-public {
    --crm-f-form-width: 100%;
    --crm-f-input-width: 100%;
  }

  #crm-container #crm-main-content-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-bottom: 0;
  }

  #crm-container.crm-public {
    & > .gast-page-header,
    & > .crm-page-title-wrapper {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  .gast-page-footer {
    margin-left: -16px;
    margin-right: -16px;

    & .gast-page-footer__inner {
      flex-wrap: wrap;
    }

    & .gast-page-footer__links {
      flex-basis: 100%;
      order: 1;
    }
  }
}