/*
 * Saint Clair Advisory — local.css.php
 * Site-specific styles only. Global foundation: global.css.php
 */


/* =================================================================
   1. LOGO SVG
   ================================================================= */

.logo-svg {
  fill: #fff;
}
.logo-svg:hover {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 0.075em;
}
.logo-svg-black {
  fill: black;
}
.logo-svg-black:hover {
  fill: none;
  stroke: black;
}
#logo-header {
  min-width: 18px;
  max-width: 18px;
}

/* Override global min-width: 100px — keeps header row from wrapping */
.logo {
  min-width: auto;
  transition: min-width 0.25s;
}

@media (max-width: 768px) {
  .logo {
    min-width: auto;
  }
  .logo.logoVii {
    min-width: auto;
  }
  .logo.logoViv {
    min-width: auto;
  }
}

@media (min-width: 768px) {
  .headerFixer.fixedPosition .logo,
  .headerFixer.fixedPosition .logo.logoVii {
    min-width: auto;
  }
}


/* 1b. TOP BAR — now handled by shared .htTopBarVsc in style.css */


/* =================================================================
   2. TYPOGRAPHY OVERRIDES
   ================================================================= */

.eabDescrText,
.eabDescrText.eabDescrTextV {
  font-size: 1.4em;
}

@media (max-width: 576px) {
  .eabDescrText,
  .eabDescrText.eabDescrTextV {
    font-size: 1.1em;
  }
}


/* =================================================================
   3. HERO — ADVISORY VARIANT
   ================================================================= */

.sca-hero {
  min-height: 75vh;
  display: flex;
  align-items: center;
  background-color: #1A1445;
  position: relative;
}

.sca-hero__content {
  position: relative;
  z-index: 1;
}

.sca-hero__tagline {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #5A5670;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  max-width: 480px;
}

@media (max-width: 576px) {
  .sca-hero {
    min-height: 60vh;
    padding-top: 100px;
  }
  .sca-hero__tagline {
    font-size: 1rem;
  }
}


/* =================================================================
   4. GOLD RULE — SIGNATURE ELEMENT
   ================================================================= */

.sca-gold-rule {
  width: 48px;
  height: 1.5px;
  background-color: #CAAA63;
  border: none;
  margin: 0;
}


/* =================================================================
   5. SERVICE CARDS
   ================================================================= */

.sca-service {
  padding: 2rem 0;
}

.sca-service__icon {
  width: 56px;
  height: 56px;
  border: 1.5px solid #CAAA63;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.sca-service__icon svg {
  width: 24px;
  height: 24px;
  stroke: #CAAA63;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =================================================================
   6. DIRECTOR SECTION
   ================================================================= */

.sca-director {
  border-top: 1px solid #E8E6E2;
}

.sca-director__name {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #1A1445;
  margin-bottom: 0.5rem;
}

.sca-director__title {
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A5670;
}


/* =================================================================
   7. BACKGROUND COVER / PARALLAX
   ================================================================= */

.bgCover {
  background-size: cover;
  background-position: 50% 50%;
}

.bgHasParallax {
  background-attachment: scroll !important;
}

@media (min-width: 768px) {
  .bgHasParallax {
    background-attachment: fixed !important;
  }
}


/* =================================================================
   8. SCROLL DOT NAVIGATION
   ================================================================= */

.hmFullLinkingNav {
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  right: 10px;
}
.hmFullLinkingNav li {
  margin-top: 10px;
  margin-bottom: 10px;
}
.hmFullLinkingNav li.active a {
  background-color: #fff;
  border-color: #1A1445;
}
.hmFullLinkingNav a {
  pointer-events: auto;
  border-radius: 100%;
  background-color: #1A1445;
  border: 1px solid #fff;
  display: block;
  transition: background-color 0.3s ease;
  width: 10px;
  height: 10px;
}
.hmFullLinkingNav a:hover {
  background-color: #fff;
}