/* ==========================================================================
   GRIFFIN ADVISERS — Squarespace Custom CSS
   Paste into Design → Custom CSS. Built incrementally as components are
   finalized in the mockup. Font-family/size/weight/letter-spacing are
   intentionally left untouched everywhere — those stay under Style Editor
   control. Only color, shape, spacing, and icon glyphs are set here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   Requires Font Awesome loaded on the site (client's FA7 Pro kit script in
   Site Header Code Injection). chevron-right glyph = f054.
   -------------------------------------------------------------------------- */

:root {
  --ga-espresso: #16140F;
  --ga-bone: #F5F2EC;
  --ga-brass: #B59059;
}

/* Button colors inherit the site's own theme variables (set per section in
   Design → Site Styles → Buttons). Each falls back to a Griffin brand color
   only if the theme variable is unset, so switching a section's color theme
   in Squarespace re-colors buttons automatically — no hardcoded overrides. */

/* Primary button — filled, high-contrast, works on any section background.
   Bone fill + Espresso text + Brass circular chevron node, matches the
   mockup's "Schedule a Consultation" style used across dark and light sections. */
#siteWrapper .sqs-block-button a.sqs-button-element--primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--primaryButtonBackgroundColor, var(--ga-bone)) !important;
  color: var(--primaryButtonTextColor, var(--ga-espresso)) !important;
  border: 1px solid var(--primaryButtonBorderColor, transparent) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 13px 6px 13px 26px !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#siteWrapper .sqs-block-button a.sqs-button-element--primary:hover {
  transform: translateY(-2px);
  color: var(--primaryButtonTextColor, var(--ga-espresso)) !important;
}

/* Chevron node — circular brass badge with FA chevron-right. Brass bg +
   Espresso icon are both fixed brand values (not tied to theme variables),
   so contrast is guaranteed inside the badge regardless of section theme —
   this is safer than inheriting --primaryButtonTextColor, which some themes
   may set to a color too close to Brass. See the per-theme override block
   below if a theme ever needs a different badge treatment. */
#siteWrapper .sqs-block-button a.sqs-button-element--primary::after {
  content: "\f054";
  font-family: "Font Awesome 7 Pro"; /* verify exact family name against the client's FA Kit output — Pro kits sometimes register as "Font Awesome 6 Pro" depending on version pinned in the kit */
  font-weight: 900; /* solid style */
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ga-brass);
  color: var(--ga-espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  line-height: 1;
}

/* Per-theme icon badge overrides — Squarespace 7.1's 10 standard color
   themes (per Site Styles → Colors). Ancestor selector assumes the theme
   class sits on a .page-section (or similar) between #siteWrapper and the
   button — confirm against the live DOM and adjust the ancestor if needed.
   Defaults below are grouped Light / Dark / Bright; edit per-theme as the
   client's actual Site Styles palette calls for. */

/* Light-family themes — Brass badge, Espresso icon (default pairing) */
#siteWrapper .white .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .white-bold .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .light .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .light-bold .sqs-block-button a.sqs-button-element--primary::after {
  background-color: var(--ga-brass);
  color: var(--ga-espresso);
}

/* Dark-family themes — Brass badge, Espresso icon (same pairing still reads
   clearly against dark sections since contrast lives inside the badge) */
#siteWrapper .black .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .black-bold .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .dark .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .dark-bold .sqs-block-button a.sqs-button-element--primary::after {
  background-color: var(--ga-bone);
  color: var(--ga-espresso);
}

/* Bright-family themes — likely an accent-colored background in Site Styles;
   inverted to Espresso badge / Bone icon so it doesn't visually merge into
   a bright/accent section background. Confirm against the client's actual
   "Bright" swatch and adjust if it isn't accent-colored. */
#siteWrapper .bright .sqs-block-button a.sqs-button-element--primary::after,
#siteWrapper .bright-inverse .sqs-block-button a.sqs-button-element--primary::after {
  background-color: var(--ga-espresso);
  color: var(--ga-bone);
}

/* Secondary button — transparent outline, colors from the theme's secondary
   button variables. Falls back to currentColor so it still adapts to the
   section's text color even if those variables are unset. */
#siteWrapper .sqs-block-button a.sqs-button-element--secondary {
  background-color: var(--secondaryButtonBackgroundColor, transparent) !important;
  color: var(--secondaryButtonTextColor, currentColor) !important;
  border: 1px solid var(--secondaryButtonBorderColor, currentColor) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 13px 26px !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#siteWrapper .sqs-block-button a.sqs-button-element--secondary:hover {
  background-color: color-mix(in srgb, var(--secondaryButtonTextColor, currentColor) 8%, transparent) !important;
}

/* Tertiary button — placeholder wiring for the theme's tertiary button
   variables. Visual treatment (shape, icon, hover) to be finalized once the
   mockup defines a tertiary style; colors are ready to inherit now. */
#siteWrapper .sqs-block-button a.sqs-button-element--tertiary {
  background-color: var(--tertiaryButtonBackgroundColor, transparent) !important;
  color: var(--tertiaryButtonTextColor, currentColor) !important;
  border: 1px solid var(--tertiaryButtonBorderColor, transparent) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease;
}

#siteWrapper .sqs-block-button a.sqs-button-element--tertiary:hover {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   EYEBROWS (text highlight)
   Applies the mockup's eyebrow style to any text given the Squarespace
   highlight treatment (span.sqsrte-text-highlight), keyed off the inline
   emphasis nested inside it. Font-family/size are left to Style Editor where
   possible; only shape, color, spacing and the leading dot are set here.
     • BOLD   (<strong>) → bordered pill, bone text   — hero style
     • ITALIC (<em>)      → borderless dot + brass cap — section-eyebrow style
   :has() is what enforces "…and is bold/italic". Supported in all current
   browsers; if very old browser support is needed, drop the :has(...) and
   target .sqsrte-text-highlight directly (applies to all highlights).
   -------------------------------------------------------------------------- */

/* Bold variant — bordered pill */
.sqsrte-text-highlight:has(> strong) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent !important;   /* override SS default highlight fill */
  border: 1px solid rgba(245, 242, 236, 0.24);
  border-radius: 999px;
  padding: 8px 17px;
  vertical-align: middle;
}

.sqsrte-text-highlight:has(> strong)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-brass);
  flex: none;
}

.sqsrte-text-highlight:has(> strong) > strong {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e7e2d8;
  line-height: 1;
}

/* Italic variant — borderless dot + brass uppercase */
.sqsrte-text-highlight:has(> em) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent !important;
  border: none;
  padding: 0;
  vertical-align: middle;
}

.sqsrte-text-highlight:has(> em)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-brass);
  flex: none;
}

.sqsrte-text-highlight:has(> em) > em {
  font-style: normal;               /* italic is the trigger; render upright */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ga-brass);
  line-height: 1;
}