@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

/* ========================================================================
   BecA Base Design System
   Shared typography, containers, heading styles, body text, cards, and CTA
   rules for custom BecA Drupal components.
   ======================================================================== */

:root {
  --beca-primary: #135AD5;
  --beca-accent: #07A5F6;
  --beca-heading-color: #12213a;
  --beca-body-color: #555;
  --beca-muted-color: #5b6472;
  --beca-surface: #ffffff;
  --beca-soft-surface: #F7F9FC;
  --beca-border: rgba(217, 217, 217, 1);
  --beca-container-max: 1240px;
  --beca-section-pad-top: 4rem;
  --beca-section-pad-bottom: 4rem;
  --beca-font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.beca-section,
.beca-1column-section,
.beca-2column-section,
.beca-2column-matrix,
.beca-flexwrap-matrix,
.bfc-section,
.beca-impacts,
.beca-hero6040-percent {
  font-family: var(--beca-font-family);
  color: var(--beca-body-color);
  box-sizing: border-box;
}

.beca-section *,
.beca-section *::before,
.beca-section *::after,
.beca-1column-section *,
.beca-1column-section *::before,
.beca-1column-section *::after,
.beca-2column-section *,
.beca-2column-section *::before,
.beca-2column-section *::after,
.beca-2column-matrix *,
.beca-2column-matrix *::before,
.beca-2column-matrix *::after,
.beca-flexwrap-matrix *,
.beca-flexwrap-matrix *::before,
.beca-flexwrap-matrix *::after,
.bfc-section *,
.bfc-section *::before,
.bfc-section *::after,
.beca-impacts *,
.beca-impacts *::before,
.beca-impacts *::after,
.beca-hero6040-percent *,
.beca-hero6040-percent *::before,
.beca-hero6040-percent *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.beca-container,
.beca-1column-section-inner,
.beca-2column-section-inner,
.beca-2column-matrix__inner,
.beca-flexwrap-matrix__inner,
.bfc-inner,
.beca-impacts__inner {
  width: 100%;
  max-width: var(--beca-container-max, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.beca-section-header,
.beca-1column-section-header,
.beca-2column-section-header,
.beca-2column-matrix__header,
.beca-flexwrap-matrix__header,
.bfc-header,
.beca-impacts__header {
  width: 100%;
  max-width: var(--beca-container-max, 1240px);
  margin: 0 auto 2.5rem;
  text-align: center;
}

.beca-eyebrow,
.beca-1column-section-eyebrow,
.beca-2column-section-eyebrow,
.beca-2column-matrix__eyebrow,
.beca-flexwrap-matrix__eyebrow,
.bfc-eyebrow,
.beca-impacts__eyebrow,
.beca-hero6040-percent__eyebrow {
  margin: 0 0 0.65rem;
  display: inline-block;
  position: relative;
  padding-left: 15px;
  color: var(--beca-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.beca-eyebrow::before,
.beca-1column-section-eyebrow::before,
.beca-2column-section-eyebrow::before,
.beca-2column-matrix__eyebrow::before,
.beca-flexwrap-matrix__eyebrow::before,
.bfc-eyebrow::before,
.beca-impacts__eyebrow::before,
.beca-hero6040-percent__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--beca-accent);
}

.beca-heading,
.beca-1column-section-heading,
.beca-2column-section-heading,
.beca-2column-matrix__heading,
.beca-flexwrap-matrix__heading,
.bfc-heading,
.beca-impacts__heading,
.beca-hero6040-percent__heading {
  margin: 0 0 clamp(0.55rem, 1vh, 0.85rem);
  color: var(--beca-heading-color);
  font-size: clamp(1.65rem, 2.65vw, 2.55rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
  text-shadow: none;
}

.beca-subheading,
.beca-1column-section-subheading,
.beca-2column-section-subheading,
.beca-2column-matrix__subheading,
.beca-flexwrap-matrix__subheading,
.bfc-subheading,
.beca-impacts__subheading,
.beca-hero6040-percent__subheading {
  width: 100%;
  max-width: var(--beca-container-max, 1240px);
  margin: 1rem auto 0;
  color: var(--beca-muted-color);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.62;
  text-wrap: pretty;
}

.beca-body,
.beca-1column-section-body,
.beca-2column-section-body,
.beca-2column-matrix__body,
.beca-flexwrap-matrix__body,
.beca-impacts__description {
  width: 100%;
  max-width: var(--beca-container-max, 1240px);
  color: var(--beca-body-color);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

.beca-body p,
.beca-body div,
.beca-1column-section-body p,
.beca-1column-section-body div,
.beca-2column-section-body p,
.beca-2column-section-body div,
.beca-2column-matrix__body p,
.beca-2column-matrix__body div,
.beca-flexwrap-matrix__body p,
.beca-flexwrap-matrix__body div {
  margin: 0 0 1rem;
}

.beca-body :last-child,
.beca-1column-section-body :last-child,
.beca-2column-section-body :last-child,
.beca-2column-matrix__body :last-child,
.beca-flexwrap-matrix__body :last-child {
  margin-bottom: 0;
}

.beca-content-heading,
.beca-1column-section-content-heading,
.beca-2column-section-content-heading,
.beca-2column-matrix__row-heading,
.beca-flexwrap-matrix__row-heading,
.bfc-card-title,
.beca-impacts__label {
  margin: 0 0 1rem;
  color: var(--beca-heading-color);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.beca-card,
.bfc-card,
.beca-impacts__card,
.beca-2column-matrix__row,
.beca-flexwrap-matrix__row {
  border: 1px solid rgba(19, 90, 213, .14);
  background: var(--beca-surface);
  box-shadow: 0 10px 30px rgba(15, 35, 55, .04);
  transition: box-shadow .22s ease, border-color .22s ease;
}

.beca-card:hover,
.bfc-card:hover,
.bfc-card:focus-within,
.beca-impacts__card:hover,
.beca-2column-matrix__row:hover,
.beca-flexwrap-matrix__row:hover {
  box-shadow: 0 20px 55px rgba(15, 35, 55, .13);
}

@media (max-width: 640px) {
  .beca-container,
  .beca-1column-section-inner,
  .beca-2column-section-inner,
  .beca-2column-matrix__inner,
  .beca-flexwrap-matrix__inner,
  .bfc-inner,
  .beca-impacts__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ------------------------------------------------------------------------
   BecA Base canonical typography enforcement
   These selectors intentionally include the component root class so Drupal
   theme h1/h2/p rules do not override BecA component typography.
   ------------------------------------------------------------------------ */
.beca-1column-section .beca-1column-section-eyebrow,
.beca-2column-section .beca-2column-section-eyebrow,
.beca-2column-matrix .beca-2column-matrix__eyebrow,
.beca-flexwrap-matrix .beca-flexwrap-matrix__eyebrow,
.bfc-section .bfc-eyebrow,
.beca-impacts .beca-impacts__eyebrow,
.beca-hero6040-percent .beca-hero6040-percent__eyebrow {
  margin: 0 0 .65rem !important;
  color: var(--beca-accent, #07A5F6) !important;
  font-family: var(--beca-font-family) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  position: relative !important;
  padding-left: 15px !important;
  display: inline-block !important;
}

.beca-1column-section .beca-1column-section-heading,
.beca-2column-section .beca-2column-section-heading,
.beca-2column-matrix .beca-2column-matrix__heading,
.beca-flexwrap-matrix .beca-flexwrap-matrix__heading,
.bfc-section .bfc-heading,
.beca-impacts .beca-impacts__heading,
.beca-hero6040-percent .beca-hero6040-percent__heading {
  margin: 0 0 clamp(0.55rem, 1vh, 0.85rem) !important;
  color: var(--beca-heading-color, #12213a) !important;
  font-family: var(--beca-font-family) !important;
  font-size: clamp(1.65rem, 2.65vw, 2.55rem) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.018em !important;
  text-wrap: balance !important;
  text-shadow: none !important;
}

.beca-1column-section .beca-1column-section-heading {
  width: 100% !important;
  text-align: center !important;
}

.beca-1column-section .beca-1column-section-header,
.beca-2column-section .beca-2column-section-header,
.bfc-section .bfc-header,
.beca-impacts .beca-impacts__header {
  width: 100% !important;
  max-width: var(--beca-container-max, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.beca-1column-section .beca-1column-section-subheading,
.beca-2column-section .beca-2column-section-subheading,
.beca-2column-matrix .beca-2column-matrix__subheading,
.beca-flexwrap-matrix .beca-flexwrap-matrix__subheading,
.bfc-section .bfc-subheading,
.beca-impacts .beca-impacts__subheading {
  width: 100% !important;
  max-width: var(--beca-container-max, 1240px) !important;
  margin: 1rem auto 0 !important;
  color: var(--beca-muted-color, #5b6472) !important;
  font-family: var(--beca-font-family) !important;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  text-wrap: pretty !important;
}

.beca-1column-section .beca-1column-section-body,
.beca-1column-section .beca-1column-section-content {
  width: 100% !important;
  max-width: var(--beca-container-max, 1240px) !important;
  font-family: var(--beca-font-family) !important;
}

@media (max-width: 640px) {
  .beca-1column-section .beca-1column-section-heading,
  .beca-2column-section .beca-2column-section-heading,
  .beca-2column-matrix .beca-2column-matrix__heading,
  .beca-flexwrap-matrix .beca-flexwrap-matrix__heading,
  .bfc-section .bfc-heading,
  .beca-impacts .beca-impacts__heading,
  .beca-hero6040-percent .beca-hero6040-percent__heading {
    font-size: clamp(1.55rem, 7.5vw, 2.15rem) !important;
    font-weight: 600 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.75rem !important;
  }
}