/*
 * Your global styles here
 *
 * CTA in CMS News body: use <a class="cta-button" href="...">Label</a>
 * (Document-level rules can target lightning-formatted-rich-text output.)
 *
 * You cant @import LWC globalStyles.css here. If updating - Define site-wide tokens on
 * :root and use var(--name) below; keep values in sync with
 * lwc/globalStyles/globalStyles.css :host { ... }. if needed
 */

:root {
  --sf-brand-primary: #c50637;
  --sf-brand-secondary: #9d072e;
  --cta-button-bg: #b92d41;
  --cta-button-bg-hover: #9c2637;
  --cta-button-text: #ffffff;
  --cta-focus-ring: #ffb3c0;
}

/*
 * !important: DXP / SLDS set strong defaults on anchors (blue, underline,
 * transparent bg, :visited). These overrides win without changing every theme hook.
 */
a.cta-button,
a.cta-button:link,
a.cta-button:visited,
a.cta-button:active {
  display: inline-block !important;
  box-sizing: border-box;
  padding: 12px 30px !important;
  background-color: var(--cta-button-bg) !important;
  color: var(--cta-button-text) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration: none !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

a.cta-button:hover,
a.cta-button:focus,
a.cta-button:focus:hover {
  background-color: var(--cta-button-bg-hover) !important;
  color: var(--cta-button-text) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

a.cta-button:focus-visible {
  outline: 2px solid var(--cta-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Rich-text / DXP wrappers (extra specificity if theme targets `a` inside these) */
.slds-rich-text-editor__output a.cta-button:link,
.slds-rich-text-editor__output a.cta-button:visited,
.slds-rich-text-zone a.cta-button:link,
.slds-rich-text-zone a.cta-button:visited {
  background-color: var(--cta-button-bg) !important;
  color: var(--cta-button-text) !important;
  text-decoration: none !important;
}

.slds-rich-text-editor__output a.cta-button:hover,
.slds-rich-text-editor__output a.cta-button:focus,
.slds-rich-text-zone a.cta-button:hover,
.slds-rich-text-zone a.cta-button:focus {
  background-color: var(--cta-button-bg-hover) !important;
  color: var(--cta-button-text) !important;
  text-decoration: none !important;
}

html,
body {
    height: 100%;
}

html {
    background: white;
}

body {
    margin: 0;
}