/* =========================================================================
   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; }

/* --- Pull-quote 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). */
.pull-quote {
  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.
   display:flow-root contains the ::before float so the indent works even when
   the paragraph sits beside another float (e.g. the couples-page portrait). */
.pull-quote-lead {
  display: flow-root;
  line-height: 2;
  padding-left: 1em;
  text-indent: -1em;
}
.pull-quote-lead::before {
  content: "";
  float: right;
  width: 1em;
  height: 1em; /* one partial line: only the first line is shortened */
}

/* --- Reusable "copy flows around a portrait" figure --------------------- */
/* Put .figure-float on a wrapper whose FIRST child is the <img> (with
   img-fluid), followed by the copy.
   • Large screens: the image floats right and the copy wraps around it, then
     runs full-width below.
   • Small screens: the wrapper is a flex column and the image is ordered BELOW
     the copy.
   (Bootstrap can't do both the responsive width and the mobile reorder alone,
   which is why this small rule exists.) */
.figure-float { display: flex; flex-direction: column; }
.figure-float > img {
  order: 1;               /* image sits after the copy when stacked */
  width: 100%;
  margin: 1.5rem 0 0;
}
@media (min-width: 992px) {
  .figure-float { display: block; }
  .figure-float > img {
    order: 0;
    float: right;
    width: 40%;
    margin: 0.25rem 0 1.5rem 2rem; /* gap to the wrapping copy on the left */
  }
}
/* Full-width blocks inside the wrapper — Bootstrap card rows and tables — drop
   BELOW the floated image instead of squeezing beside it. Prose still wraps. */
.figure-float .row,
.figure-float .table-responsive { clear: both; }

/* Offset in-page anchor targets so the sticky navbar doesn't cover them
   (e.g. the Clinical Supervision cards jumping to their sections). */
:target { scroll-margin-top: 5rem; }

/* --- 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; max-width: 100%; }
.footer-logo { height: 40px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) {
  /* On phones the wide wordmark shares the bar with the toggler — shrink it
     so the header never exceeds the viewport width. */
  .navbar-logo { height: 34px; }
}

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