/* =====================================================================
   BOSQUE HAVEN — COMPLETE ADDITIONAL CSS
   bosquehaven.com · Theme: Kamala · Updated August 12, 2026

   THIS FILE REPLACES EVERYTHING.
   Clear the Additional CSS box completely, then paste this whole file.
   Do not append it to what's already there — you'll get duplicates
   fighting each other.

   Where it goes:
     Appearance > Customize > Additional CSS
     (block theme: Appearance > Editor > Styles > ⋮ > Additional CSS)

   CONTENTS
     1.  Palette
     2.  Page content typography            (scoped to .bh)
     3.  Section bands and brick coping
     4.  Cards, stats, callouts, lists
     5.  Tables
     6.  Buttons
     7.  FAQ / Details
     8.  Images and photo placeholders
     9.  Desktop full-bleed  ← fixes narrow bands on wide screens
     10. Content/footer gap  ← removes Kamala's hard-coded spacer
     11. Site header
     12. Navigation menu
     13. Site footer
     14. Motion
     15. Mobile

   ACCESSIBILITY
     Every text/background pair is WCAG AAA (7:1 or better).
     Lowest text pair used anywhere: 7.17:1
     Turquoise #1C8D7F is TRIM ONLY — never put text in it.
     ===================================================================== */


/* ---------------------------------------------------------------------
   1. PALETTE
   --------------------------------------------------------------------- */
.bh {
  --adobe:#FBF6EE;      /* page ground */
  --sand:#F0E7D9;       /* banded section */
  --plaster:#F6F0E5;    /* hero / card interior */
  --white:#FFFFFF;

  --ink:#231E18;        /* 15.36:1 on adobe */
  --ink-soft:#4B4238;   /*  9.14:1 on adobe */

  --emerald:#0C4A42;    /*  9.41:1 on adobe — headings, buttons */
  --emerald-dk:#052E29; /* deep bands, footer */
  --teal:#0B5049;       /*  8.28:1 on adobe — links */
  --turq:#1C8D7F;       /*  TRIM ONLY, never text */
  --turq-lite:#86D8CA;  /*  8.88:1 on emerald-dk */

  --terra:#7E3418;      /*  8.16:1 on adobe */
  --brick:#9C4A2A;      /* coping course */
  --brick-dk:#6E3218;

  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.68;
}


/* ---------------------------------------------------------------------
   2. TYPOGRAPHY
   --------------------------------------------------------------------- */
.bh .wp-block-heading {
  font-family: "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.bh h1.wp-block-heading { font-size: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem); }
.bh h2.wp-block-heading { font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem); margin-top: 1.6em; }
.bh h3.wp-block-heading { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); margin-top: 1.6em; }

/* Territorial lintel: painted turquoise trim above each section heading */
.bh > .wp-block-group > h1.wp-block-heading::before,
.bh > .wp-block-group > h2.wp-block-heading::before {
  content: "";
  display: block;
  width: 4.5rem; height: 5px;
  background: var(--turq);
  margin-bottom: 1rem;
}
.bh > .wp-block-group.deep > h2.wp-block-heading::before { background: var(--turq-lite); }
.bh > .wp-block-group.hero > h1.wp-block-heading::before { width: 7rem; height: 6px; }

.bh p { max-width: 68ch; margin: 0 0 1.15em; }
.bh li { max-width: 68ch; }
.bh a { color: var(--teal); text-underline-offset: .18em; }
.bh a:hover { color: var(--emerald); }
.bh .deep a { color: var(--turq-lite); }

.bh p.lede { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); max-width: 46ch; }
.bh p.eyebrow {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--terra); font-weight: 700; margin-bottom: 1.1rem;
}

.bh :focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }


/* ---------------------------------------------------------------------
   3. SECTION BANDS + BRICK COPING
   The fired-brick course that caps a Territorial parapet, drawn in CSS.
   --------------------------------------------------------------------- */
.bh > .wp-block-group { position: relative; }

.bh > .wp-block-group.tint::before,
.bh > .wp-block-group.deep::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 13px;
  background: repeating-linear-gradient(90deg,
    var(--brick) 0 30px, var(--brick-dk) 30px 34px);
  border-bottom: 2px solid var(--brick-dk);
}
.bh > .wp-block-group.hero { border-bottom: 1px solid #E2D6C2; }


/* ---------------------------------------------------------------------
   4. CARDS, STATS, CALLOUTS, LISTS
   --------------------------------------------------------------------- */
.bh .card, .bh .stat {
  height: 100%;
  border: 1px solid #E2D6C2;
  box-shadow: 0 1px 0 rgba(35,30,24,.06), 0 10px 28px rgba(35,30,24,.07);
}
.bh .card { border-top: 5px solid var(--emerald); }
.bh .stat { border-top: 6px solid var(--turq); }
.bh .card > .wp-block-heading:first-child,
.bh .stat > .wp-block-heading:first-child { margin-top: 0; }
.bh .stat h3.wp-block-heading { font-size: 2rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.bh .stat p { font-size: .95rem; margin-bottom: 0; }
.bh .card p:last-child, .bh .card ul:last-child { margin-bottom: 0; }

.bh .callout {
  border: 1px solid #E2D6C2;
  border-left: 6px solid var(--terra);
  padding: 1.5rem 1.75rem;
}
.bh .callout p:last-child { margin-bottom: 0; }

.bh ul.checks { list-style: none; padding-left: 0; }
.bh ul.checks li { padding-left: 1.9rem; position: relative; margin-bottom: .7rem; }
.bh ul.checks li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .72rem; height: .72rem; background: var(--turq);
}
.bh .deep ul.checks li::before { background: var(--turq-lite); }


/* ---------------------------------------------------------------------
   5. TABLES
   --------------------------------------------------------------------- */
.bh .wp-block-table table { border-collapse: collapse; width: 100%; background: var(--white); }
.bh .wp-block-table caption {
  caption-side: top; text-align: left;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; color: var(--ink); padding-bottom: .65rem;
}
.bh .wp-block-table th,
.bh .wp-block-table td {
  text-align: left; padding: .85rem .95rem; border-bottom: 1px solid #E2D6C2;
}
.bh .wp-block-table thead th {
  background: var(--emerald); color: var(--white);
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.bh .wp-block-table tbody th { font-weight: 700; color: var(--emerald); }
.bh .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background: var(--plaster); }


/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.bh .wp-block-button__link {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; padding: .8rem 1.7rem; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bh .deep .wp-block-button__link {
  border-color: var(--turq-lite) !important;
  color: var(--turq-lite) !important;
}


/* ---------------------------------------------------------------------
   7. FAQ / DETAILS
   --------------------------------------------------------------------- */
.bh .wp-block-details {
  background: var(--white);
  border: 1px solid #E2D6C2;
  border-top: 3px solid var(--turq);
  padding: 1.1rem 1.25rem;
  margin-bottom: .6rem;
}
.bh .wp-block-details summary {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; color: var(--emerald); font-size: 1.05rem;
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.bh .wp-block-details summary::marker { color: var(--terra); }
.bh .wp-block-details[open] summary { margin-bottom: .8rem; }
.bh .wp-block-details p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------
   8. IMAGES + PHOTO PLACEHOLDERS
   --------------------------------------------------------------------- */
.bh .wp-block-image.bh-frame {
  border: 1px solid #E2D6C2;
  border-top: 6px solid var(--turq);
  background: var(--sand);
  margin-block: 2rem;
}
.bh .wp-block-image.bh-frame img { display: block; width: 100%; height: auto; }
.bh .wp-block-image.bh-frame figcaption {
  padding: .8rem 1rem; margin: 0;
  background: var(--white);
  border-top: 1px solid #E2D6C2;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .92rem; color: var(--ink-soft); text-align: left;
}

/* Hatched box marking a photograph that still needs taking */
.bh .bh-frame.is-empty {
  display: grid; place-items: center; text-align: center;
  min-height: 16rem; padding: 2.5rem 1.5rem;
  border: 1px solid #E2D6C2; border-top: 6px solid var(--turq);
  background: repeating-linear-gradient(135deg,
    var(--sand) 0 12px, #E9DECC 12px 24px) !important;
  margin-block: 2rem;
}
.bh .bh-frame.is-empty p { max-width: none; margin: 0; }
.bh .bh-frame.is-empty .ph-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; color: var(--emerald); font-size: 1.05rem; margin-bottom: .35rem;
}
.bh .bh-frame.is-empty .ph-meta {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .85rem; color: var(--terra);
  letter-spacing: .04em; text-transform: uppercase;
}


/* ---------------------------------------------------------------------
   9. DESKTOP FULL-BLEED
   Kamala constrains content to a centred column. Without this the
   colour bands only fill that column and float in white margins on a
   wide screen. Mobile looks fine because the column is the screen.
   --------------------------------------------------------------------- */
.bh > .wp-block-group.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(1.5rem, calc(50vw - 37rem));
  padding-right: max(1.5rem, calc(50vw - 37rem));
}

/* Text stays readable even when the band spans the window.
   Long line lengths are genuinely hard for older eyes. */
.bh > .wp-block-group > * { max-width: 74rem; margin-inline: auto; }
.bh > .wp-block-group > p,
.bh > .wp-block-group > ul,
.bh > .wp-block-group > .wp-block-details { max-width: 68ch; margin-inline: 0; }

@media (min-width: 62rem) {
  .bh > .wp-block-group.hero { padding-block: 6rem; }
  .bh > .wp-block-group { padding-block: 5rem; }
}
@media (min-width: 90rem) {
  .bh .wp-block-columns { max-width: 74rem; margin-inline: auto; }
}


/* ---------------------------------------------------------------------
   10. CONTENT / FOOTER GAP
   Kamala's page template has a literal Spacer block between </main>
   and the footer. It is an element with a set height, so margin rules
   cannot touch it. This hides it on every template at once.
   --------------------------------------------------------------------- */
.wp-site-blocks > main + .wp-block-spacer { display: none !important; }

/* Belt and braces for trailing space from the theme itself */
.wp-site-blocks > main { margin-block-end: 0 !important; }
.wp-site-blocks > footer { margin-block-start: 0 !important; }
.wp-block-post-content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.bh { margin-bottom: 0 !important; }
.bh > .wp-block-group:last-child { margin-bottom: 0 !important; }


/* ---------------------------------------------------------------------
   11. SITE HEADER
   --------------------------------------------------------------------- */
.wp-site-blocks > header,
header.wp-block-template-part {
  background: #FFFFFF;
  border-bottom: 4px solid #1C8D7F;   /* turquoise trim */
  position: sticky; top: 0; z-index: 100;
}
header.wp-block-template-part .wp-block-site-logo img {
  max-width: 180px;
  height: auto;
}


/* ---------------------------------------------------------------------
   12. NAVIGATION MENU
   44px minimum targets and a visible focus ring are not decoration —
   a real share of this audience navigates by keyboard or with
   reduced dexterity.
   --------------------------------------------------------------------- */
header .wp-block-navigation {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .95rem;
}
header .wp-block-navigation a {
  color: #231E18;
  padding: .5rem .2rem;
  min-height: 44px;
  display: flex; align-items: center;
  border-bottom: 3px solid transparent;
}
header .wp-block-navigation a:hover {
  color: #0C4A42;
  border-bottom-color: #1C8D7F;
}
header .wp-block-navigation .current-menu-item a,
header .wp-block-navigation .current_page_item a {
  color: #0C4A42; font-weight: 700; border-bottom-color: #7E3418;
}
header .wp-block-navigation :focus-visible {
  outline: 3px solid #7E3418; outline-offset: 3px;
}

@media (max-width: 62rem) {
  .wp-block-navigation__responsive-container.is-menu-open { background: #FBF6EE; }
  .wp-block-navigation__responsive-container.is-menu-open a {
    min-height: 48px; font-size: 1.05rem;
  }
}


/* ---------------------------------------------------------------------
   13. SITE FOOTER
   --------------------------------------------------------------------- */
.wp-site-blocks > footer,
footer.wp-block-template-part {
  background: #052E29;
  color: #FBF6EE;
  padding-block: 3.5rem 2rem;
  position: relative;
}
/* brick coping along the top edge, matching the page bands */
footer.wp-block-template-part::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 13px;
  background: repeating-linear-gradient(90deg, #9C4A2A 0 30px, #6E3218 30px 34px);
  border-bottom: 2px solid #6E3218;
}
footer.wp-block-template-part a { color: #FBF6EE; }
footer.wp-block-template-part a:hover { color: #86D8CA; }
footer.wp-block-template-part h2,
footer.wp-block-template-part h3 { color: #86D8CA; font-size: 1.05rem; }
footer.wp-block-template-part .wp-block-site-logo img { max-width: 140px; }
footer.wp-block-template-part :focus-visible {
  outline: 3px solid #86D8CA; outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   14. MOTION
   CSS scroll-driven animation. No JavaScript, so nothing can fail and
   leave content hidden. Chrome and Edge animate; Safari and Firefox
   show the page normally, which is a correct outcome.
   Self-disables for anyone who has asked for reduced motion.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes bh-rise {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }
    .bh > .wp-block-group > .wp-block-heading,
    .bh > .wp-block-group > p,
    .bh > .wp-block-group > .wp-block-columns,
    .bh > .wp-block-group > .wp-block-table,
    .bh > .wp-block-group > .wp-block-image,
    .bh > .wp-block-group > .wp-block-details,
    .bh > .wp-block-group > .wp-block-buttons,
    .bh > .wp-block-group > ul {
      animation: bh-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}


/* ---------------------------------------------------------------------
   15. MOBILE
   --------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .bh > .wp-block-group {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .bh .wp-block-columns { gap: 1.25rem; }
}

/* ===================================================================== */
/* END — Bosque Haven Additional CSS                                     */
/* ===================================================================== */


/* ==========================================================
   BLOG LIST FEATURED IMAGES  ·  added 25 Aug 2026
   Square corners, image fills the full height of the text
   column beside it. Landscape photos are centre-cropped.
   ========================================================== */

.bh-postlist .wp-block-post > .wp-block-columns {
	align-items: stretch;
}

.bh-postlist .wp-block-post > .wp-block-columns > .wp-block-column:first-child {
	display: flex;
}

.bh-postlist .wp-block-post-featured-image {
	flex: 1 1 auto;
	display: flex;
	margin: 0;
	min-height: 0;
	overflow: hidden;
}

.bh-postlist .wp-block-post-featured-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.bh-postlist .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover !important;   /* inline style on the img needs !important */
	object-position: center;
	border-radius: 0 !important;    /* kills the 600px corner curve */
}

/* Phones: columns stack, so let the image sit at a normal shape */
@media (max-width: 781px) {

	.bh-postlist .wp-block-post > .wp-block-columns > .wp-block-column:first-child {
		display: block;
	}

	.bh-postlist .wp-block-post-featured-image img {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}