/* =========================================================================
   Hallman Therapy — theme
   Palette: https://coolors.co/palette/fefae0-69b578-3a7d44-254d32-181d27
   This file only applies the brand palette. All layout is handled with
   Bootstrap classes in the templates (no inline styles are used anywhere).
   ========================================================================= */

:root {
  /* Named palette */
  --ht-light:   #FEFAE0; /* cream       */
  --ht-mid:     #69B578; /* leaf green  */
  --ht-primary: #3A7D44; /* base color  */
  --ht-dark:    #254D32; /* forest      */
  --ht-darkest: #181D27; /* near-black  */

  /* Re-point Bootstrap's theme so its utilities inherit the brand color */
  --bs-primary: var(--ht-primary);
  --bs-primary-rgb: 58, 125, 68;
  --bs-link-color: var(--ht-primary);
  --bs-link-color-rgb: 58, 125, 68;
  --bs-link-hover-color: var(--ht-dark);
  --bs-link-hover-color-rgb: 37, 77, 50;
}

/* --- Background utilities drawn from the palette ------------------------ */
.bg-brand         { background-color: var(--ht-primary) !important; }
.bg-brand-mid     { background-color: var(--ht-mid)     !important; }
.bg-brand-light   { background-color: var(--ht-light)   !important; }
.bg-brand-dark    { background-color: var(--ht-dark)    !important; }
.bg-brand-darkest { background-color: var(--ht-darkest) !important; }

/* --- Text utilities ---------------------------------------------------- */
.text-brand      { color: var(--ht-primary) !important; }
.text-brand-dark { color: var(--ht-dark)    !important; }

/* --- Pale-sage text highlighter (home opening statement) --------------- */
/* box-decoration-break makes the highlight hug each wrapped line of text,
   with rounded ends and a subtle drop shadow per line (not one big box). */
.sage-highlight {
  background-color: var(--ht-light);
  padding: 0.15em 0.4em;
  border-radius: 0.35rem;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  box-shadow: 0 2px 3px rgba(24, 29, 39, 0.15);
}

/* Staggered lead: roomier line spacing, first line flush-left but pulled in
   1em on the right, every following line indented 1em on the left. */
.sage-lead {
  line-height: 2;
  padding-left: 1em;
  text-indent: -1em;
}
.sage-lead::before {
  content: "";
  float: right;
  width: 1em;
  height: 1em; /* one partial line: only the first line is shortened */
}

/* --- Service link boxes (home hero) ------------------------------------ */
.service-box { transition: transform .15s ease, box-shadow .15s ease; }
.service-box:hover,
.service-box:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(24, 29, 39, .15) !important;
}

/* --- Primary button, recoloured through Bootstrap's own button vars ----- */
.btn-primary {
  --bs-btn-bg: var(--ht-primary);
  --bs-btn-border-color: var(--ht-primary);
  --bs-btn-hover-bg: var(--ht-dark);
  --bs-btn-hover-border-color: var(--ht-dark);
  --bs-btn-active-bg: var(--ht-dark);
  --bs-btn-active-border-color: var(--ht-darkest);
  --bs-btn-disabled-bg: var(--ht-primary);
  --bs-btn-disabled-border-color: var(--ht-primary);
}

/* --- "Special" navigation buttons: darker tones from the scheme --------- */
.btn-brand-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ht-dark);
  --bs-btn-border-color: var(--ht-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ht-darkest);
  --bs-btn-hover-border-color: var(--ht-darkest);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ht-darkest);
  --bs-btn-active-border-color: var(--ht-darkest);
  --bs-btn-focus-shadow-rgb: 37, 77, 50;
}
.btn-brand-darkest {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ht-darkest);
  --bs-btn-border-color: var(--ht-darkest);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0e1117;
  --bs-btn-hover-border-color: #0e1117;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0e1117;
  --bs-btn-active-border-color: #0e1117;
  --bs-btn-focus-shadow-rgb: 24, 29, 39;
}

/* --- Navigation bar links on the dark bar ------------------------------ */
.navbar .nav-link { color: rgba(255, 255, 255, 0.85); }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active { color: var(--ht-light); }

/* --- Logo sizing (navbar + footer) ------------------------------------- */
.navbar-logo { height: 44px; width: auto; }
.footer-logo { height: 40px; width: auto; }

/* --- Footer masthead links --------------------------------------------- */
.footer a { color: var(--ht-light); }
.footer a:hover,
.footer a:focus { color: #fff; }