/* ==========================================================================
   DawnBecker.ca — 2026 redesign
   Bootstrap 5 + Montserrat / Fasthand / Playfair Display
   ========================================================================== */

:root {
  /* Brand palette — single purple hue, everything derived from --db-magenta */
  --db-magenta:      #6a2d97;
  --db-magenta-dark: #55246f;
  --db-magenta-lite: #8a45bd;
  --db-plum:         #6a2d97;
  --db-plum-lite:    #8a45bd;
  --db-navy:         #3d1c58;
  --db-body:         #222222;
  --db-page:         #fbf9fa;
  --db-cream:        #f7f2fa;
  --db-rule:         #e6dcf0;

  --db-nav-height:   76px;
}

/* --------------------------------------------------------------------------
   Base type
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* keeps anchor targets clear of the sticky nav */
  scroll-padding-top: var(--db-nav-height);
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--db-body);
  background: var(--db-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--db-navy);
  font-weight: 700;
}

a { text-decoration: none; }

/* Script accent face */
.script {
  font-family: 'Fasthand', cursive;
  font-weight: 400;
  color: var(--db-magenta);
  line-height: 1.2;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.title-rule {
  width: 56px;
  height: 3px;
  background: var(--db-magenta);
  border: 0;
  opacity: 1;
  margin: .75rem auto 2.5rem;
}

.title-rule-start { margin-left: 0; margin-right: auto; }

.lead-bold {
  font-weight: 700;
  color: var(--db-navy);
  font-size: 1.25rem;
  line-height: 1.6;
}

.section-pad { padding: 5rem 0; }

/* --------------------------------------------------------------------------
   Logo (text-built, no image)
   -------------------------------------------------------------------------- */
.brand-logo {
  display: inline-block;
  line-height: 1;
  padding: .35rem 0;
}

.brand-dawn {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--db-magenta);
  margin-bottom: -.28rem;
  margin-left: .1rem;
}

.brand-becker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: .01em;
  color: var(--db-navy);
}

.brand-tag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--db-navy);
  margin-top: .18rem;
}

.footer-logo .brand-becker { color: #fff; }
.footer-logo .brand-tag    { color: #fff; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.site-nav {
  background: #fff;
  min-height: var(--db-nav-height);
  box-shadow: 0 1px 0 rgba(27, 42, 74, .08);
  padding: .4rem 0;
}

.site-nav .nav-link {
  font-size: .93rem;
  font-weight: 600;
  color: var(--db-navy);
  padding: .5rem .85rem;
  position: relative;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus { color: var(--db-magenta); }

.site-nav .nav-link.active { color: var(--db-navy); }

.site-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .15rem;
  height: 2px;
  background: var(--db-magenta);
}

.site-nav .social-link {
  font-size: 1.15rem;
  color: var(--db-navy);
  padding: .5rem .3rem;
}
.site-nav .social-link:hover { color: var(--db-magenta); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-db {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: 2rem;
  border: 2px solid transparent;
  transition: all .25s ease;
  white-space: nowrap;
}

.btn-db-solid {
  background: var(--db-magenta);
  color: #fff;
}
.btn-db-solid:hover,
.btn-db-solid:focus {
  background: var(--db-magenta-dark);
  color: #fff;
}

.btn-db-plum {
  background: var(--db-plum);
  color: #fff;
}
.btn-db-plum:hover,
.btn-db-plum:focus {
  background: var(--db-plum-lite);
  color: #fff;
}

.btn-db-white {
  background: #fff;
  color: var(--db-magenta);
}
.btn-db-white:hover,
.btn-db-white:focus {
  background: var(--db-navy);
  color: #fff;
}

.btn-db-nav { padding: .55rem 1.35rem; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--db-plum);
  border: 0;
  background: none;
  padding: 0;
}
.link-arrow:hover { color: var(--db-magenta); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--db-nav-height));
  display: flex;
  align-items: center;
  background-image: url("../images/main-banner-2026.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Soft wash so the headline stays legible over the photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251, 249, 250, .7) 0%, rgba(251, 249, 250, .7) 34%, rgba(251, 249, 250, 0) 62%);
}

.hero > .container { position: relative; z-index: 1; }

.hero-title {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.12;
  color: var(--db-navy);
  margin-bottom: 1.25rem;
}

.hero-title .accent { color: var(--db-magenta); }

.hero-sub {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--db-navy);
  margin-bottom: 1.75rem;
}

@media (max-width: 991.98px) {
  .hero {
    min-height: 0;
    padding: 4rem 0 18rem;
    background-position: 70% bottom;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(251, 249, 250, .7) 0%, rgba(251, 249, 250, .7) 45%, rgba(251, 249, 250, 0) 85%);
  }
  .hero-title { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------
   Meet Dawn / letter
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(27, 42, 74, .16);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.rounded-photo {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(27, 42, 74, .16);
}

.script-heading { font-size: 3rem; margin-bottom: .25rem; }

/* --------------------------------------------------------------------------
   Icon grids (What I Bring / My Platform)
   -------------------------------------------------------------------------- */
.icon-grid { text-align: center; }

.icon-grid > [class*="col-"] { padding: .5rem 1.25rem; }

@media (min-width: 992px) {
  .icon-grid > [class*="col-"]:not(:last-child) {
    border-right: 1px solid var(--db-rule);
  }
}

.icon-circle {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.1rem;
  border: 2px solid var(--db-magenta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--db-magenta);
  font-size: 1.4rem;
}

.icon-grid p {
  font-size: .93rem;
  line-height: 1.55;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Quote band
   -------------------------------------------------------------------------- */
.quote-band {
  background: linear-gradient(100deg, var(--db-plum) 0%, var(--db-plum-lite) 100%);
  color: #fff;
  overflow: hidden;
}

.quote-mark {
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: .8;
  color: rgba(255, 255, 255, .55);
  display: block;
  margin-bottom: .5rem;
}

.quote-band .quote-copy {
  font-style: italic;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.75;
}

.quote-band .quote-name {
  font-style: normal;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.quote-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Photo sits on the right here, so fade its left edge into the purple */
.quote-band .quote-photo {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 100%);
}

@media (max-width: 991.98px) {
  /* columns stack here — no seam to hide, so drop the mask entirely */
  .quote-band .quote-photo {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Light quote card — same shape as the plum band, inverted */
.quote-light {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(27, 42, 74, .09);
}

/* Fade the photo's inner edge into the card so there's no hard vertical seam */
.quote-light .quote-photo {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 991.98px) {
  /* columns stack, so fade the bottom edge instead */
  .quote-light .quote-photo {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
  }
}

.quote-light .quote-mark { color: var(--db-magenta); }

.quote-light .quote-copy {
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--db-body);
}

.quote-light .quote-name {
  font-style: normal;
  font-weight: 700;
  color: var(--db-navy);
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Endorsement bar
   -------------------------------------------------------------------------- */
.endorse-bar {
  background: linear-gradient(90deg, var(--db-plum) 0%, var(--db-magenta-lite) 100%);
  color: #fff;
  padding: 2rem 0;
}

.endorse-bar .endorse-icon {
  width: 54px;
  height: 54px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.endorse-bar .endorse-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Endorsements page
   -------------------------------------------------------------------------- */
.page-head {
  background: linear-gradient(100deg, var(--db-plum) 0%, var(--db-plum-lite) 100%);
  color: #fff;
  padding: 3.5rem 0;
  text-align: center;
}
.page-head h1 { color: #fff; font-size: 2.6rem; }

.endorse-card {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--db-magenta);
  box-shadow: 0 8px 26px rgba(27, 42, 74, .08);
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.endorse-card p { font-size: 1rem; }

.endorse-card .attribution {
  font-weight: 700;
  color: var(--db-navy);
  margin-bottom: 0;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-content { border: 0; border-radius: 14px; }
.modal-header { border-bottom: 1px solid var(--db-rule); padding: 1.5rem 2rem; }
.modal-body { padding: 1.75rem 2rem 2.25rem; }
.modal-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--db-navy);
  color: rgba(255, 255, 255, .82);
  padding: 3.5rem 0 2.5rem;
  font-size: .92rem;
}

.site-footer h6 {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 1rem;
}

.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: #fff; }
.site-footer .accent-link { color: var(--db-magenta-lite); }

.site-footer .social-list a {
  font-size: 1.35rem;
  margin-left: .7rem;
}

.site-footer .copyright {
  font-size: .85rem;
  margin-top: 2.5rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .site-footer { text-align: center; }
  .site-footer .social-list { margin-top: 1.5rem; }
  .site-footer .social-list a { margin: 0 .35rem; }
  .brand-logo { display: inline-block; }
}