/**
 * CMS Components Styles
 * Styles for HTML components inserted via the CMS editor.
 * Selectors use bumped specificity (tag + class) to override
 * global `.content p/a/span` rules in article views.
 */

/* LinkBanner - banner with button */
div.cms-link-banner {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 30px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 2.5rem 3rem !important;
  margin: 2.5rem 0 !important;
}

/* Background color utilities for LinkBanner */
div.cms-link-banner.cms-bg-blue {
  background-color: #3E5775 !important;
}

div.cms-link-banner.cms-bg-gold {
  background-color: #D5A14F !important;
}

div.cms-link-banner.cms-bg-olive {
  background-color: #657043 !important;
}

/* Banner text - override `.content p` */
.cms-link-banner p.cms-link-banner__text,
.cms-link-banner .cms-link-banner__text {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 120% !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Reset EditorJS span wrappers inside banner text */
.cms-link-banner p.cms-link-banner__text span,
.cms-link-banner .cms-link-banner__text span {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 120% !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Banner button - override `.content a` */
.cms-link-banner a.cms-link-banner__button,
.cms-link-banner .cms-link-banner__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Reset EditorJS span wrappers inside banner button */
.cms-link-banner a.cms-link-banner__button span,
.cms-link-banner .cms-link-banner__button span {
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.cms-link-banner a.cms-link-banner__button:hover,
.cms-link-banner .cms-link-banner__button:hover {
  background-color: #fff !important;
  color: #657043 !important;
}

.cms-link-banner a.cms-link-banner__button:hover span,
.cms-link-banner .cms-link-banner__button:hover span {
  color: #657043 !important;
}

/* Standalone Button - wrapper */
.cms-button-wrapper {
  margin: 1.5rem 0 !important;
}

/* Standalone button base (bumped specificity) */
a.cms-button,
button.cms-button,
.cms-button-wrapper a.cms-button,
.cms-button-wrapper button.cms-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 2px solid !important;
}

/* Reset EditorJS span wrappers inside standalone buttons */
a.cms-button span,
button.cms-button span,
.cms-button-wrapper a.cms-button span,
.cms-button-wrapper button.cms-button span {
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* White button (for dark background) */
a.cms-button.cms-button--white,
button.cms-button.cms-button--white,
.cms-button-wrapper a.cms-button.cms-button--white,
.cms-button-wrapper button.cms-button.cms-button--white {
  border-color: #fff !important;
  background: transparent !important;
  color: #fff !important;
}

a.cms-button.cms-button--white:hover,
button.cms-button.cms-button--white:hover,
.cms-button-wrapper a.cms-button.cms-button--white:hover,
.cms-button-wrapper button.cms-button.cms-button--white:hover {
  background-color: #fff !important;
  color: #657043 !important;
}

/* Green button (for light background) */
a.cms-button.cms-button--green,
button.cms-button.cms-button--green,
.cms-button-wrapper a.cms-button.cms-button--green,
.cms-button-wrapper button.cms-button.cms-button--green {
  border-color: #657043 !important;
  background: #657043 !important;
  color: #fff !important;
}

a.cms-button.cms-button--green:hover,
button.cms-button.cms-button--green:hover,
.cms-button-wrapper a.cms-button.cms-button--green:hover,
.cms-button-wrapper button.cms-button.cms-button--green:hover {
  background: #4a5230 !important;
  border-color: #4a5230 !important;
  color: #fff !important;
}

/* ViewLinks - bordered container with centered dark button */
div.cms-view-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #0C0C0C !important;
  border-radius: 50px !important;
  padding: 1.25rem 2rem !important;
  margin: 20px 0 !important;
}

a.cms-view-links__button,
.cms-view-links a.cms-view-links__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3E5775 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 150% !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
  border: none !important;
}

a.cms-view-links__button span,
.cms-view-links a.cms-view-links__button span {
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 150% !important;
  letter-spacing: 0 !important;
}

a.cms-view-links__button:hover,
.cms-view-links a.cms-view-links__button:hover {
  background: #2d3f57 !important;
}

/* Mobile adaptation */
@media (max-width: 768px) {
  div.cms-link-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 2.5rem 2rem !important;
  }
}