/* =========================================================================
   BRAND LAYER — 5 Bird Dwellings
   =========================================================================

   Every value here was MEASURED on the rendered original (WP Bakery +
   picostrap5) via vctokens.py across all 14 pages, then decided by hand.
   This is a KEEP-THE-DESIGN re-theme: reproduce what renders, don't redesign.

   Fonts are enqueued in functions.php (Adobe kit + Google), not here.
   ====================================================================== */

/* -------------------------------------------------------------------------
   0. FONTS — Vendeur is self-hosted (it was in the old altpicochild theme, NOT
   in the Adobe kit). Without this @font-face the headings fall back to a wrong
   face that renders hollow/outlined. Files live in assets/fonts/.
   ---------------------------------------------------------------------- */

@font-face {
	font-family: "Vendeur";
	src: url("../fonts/Vendeur-Regular.woff2") format("woff2"),
	     url("../fonts/Vendeur-Regular.woff")  format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vendeur";
	src: url("../fonts/Vendeur-Italic.woff2") format("woff2"),
	     url("../fonts/Vendeur-Italic.woff")  format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */

:root {
	/* --- Raw palette (measured RGB in comments) --------------------- */
	--brand-sage:     #79aa91;   /* rgb(121,170,145) — primary button       */
	--brand-forest:   #27422f;   /* rgb(39,66,47)    — dark green accent     */
	--brand-charcoal: #1d2425;   /* rgb(29,36,37)    — dark sections, footer */
	--brand-rust:     #c02b0a;   /* rgb(192,43,10)   — accent / link         */
	--brand-ink:      #222222;   /* rgb(34,34,34)    — body + headings       */
	--brand-bg:       #ffffff;
	--brand-bg-alt:   #f6f6f6;   /* rgb(246,246,246) — tinted section bg     */

	/* --- Bootstrap theme colours (hex + -rgb triplet, mechanism 1) -- */
	--bs-primary:         #79aa91;
	--bs-primary-rgb:     121, 170, 145;
	--bs-secondary:       #27422f;
	--bs-secondary-rgb:   39, 66, 47;
	--bs-light:           #f6f6f6;
	--bs-light-rgb:       246, 246, 246;
	--bs-dark:            #1d2425;
	--bs-dark-rgb:        29, 36, 37;

	/* --- The "subtle" family (mechanism 3 — stops blue leaking) ----- */
	--bs-primary-text-emphasis:   #27422f;
	--bs-primary-bg-subtle:       #eaf2ee;
	--bs-primary-border-subtle:   #c3d6cd;
	--bs-secondary-text-emphasis: #1d2425;
	--bs-secondary-bg-subtle:     #e6e9e6;
	--bs-secondary-border-subtle: #b9c2bb;

	/* --- Typography (stack only; files in functions.php) ------------ */
	--bs-body-font-family: "Baskervville", Baskerville, Georgia, "Times New Roman", serif;
	--bs-body-font-size:   1.125rem;         /* 18px measured        */
	--bs-body-font-weight: 400;              /* orig computed 100 on Baskervville, which has no 100 → renders 400 */
	--bs-body-line-height: 1.5;              /* 27px / 18px measured */
	--bs-body-color:       #222222;
	--bs-body-color-rgb:   34, 34, 34;
	--bs-body-bg:          #ffffff;
	--bs-heading-color:    #222222;

	/* --- Links: the sage/teal-green accent (Lindsey) ---------------- */
	--bs-link-color:       #79aa91;
	--bs-link-color-rgb:   121, 170, 145;
	--bs-link-hover-color: #5f9280;

	/* --- Shape — the original is square throughout (vintage look) --- */
	--bs-border-radius:    0;
}

/* -------------------------------------------------------------------------
   2. TYPOGRAPHY
   Headings: Vendeur (Adobe Fonts), uppercase with tracking — the whole
   vintage character of the site lives here. Body: Baskervville.
   ---------------------------------------------------------------------- */

body {
	font-family: var(--bs-body-font-family);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #222222;
}

p { line-height: 1.65; }   /* measured 29.7px / 18px — looser than the body */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 400;
	line-height: 1.2;
	color: #222222;
	margin-top: 0;
	margin-bottom: 1rem;   /* 16px, matching the original */
}

/* Two heading faces, as measured: h1-h3 are Vendeur (the display serif); h4-h6
   are fairplex-narrow (the same kit, a plainer face). Putting Vendeur on all of
   them was wrong — h4/h5/h6 render in the wrong font. */
h1, h2, h3, .h1, .h2, .h3 { font-family: "Vendeur", Georgia, serif; }
h4, h5, h6, .h4, .h5, .h6 { font-family: "fairplex-narrow", "Baskervville", Georgia, serif; }

/* UPPERCASE — measured on h1/h2/h3/h5/h6, but NOT h4 (title case). */
h1, h2, h3, h5, h6,
.h1, .h2, .h3, .h5, .h6 { text-transform: uppercase; }
h4, .h4 { text-transform: none; }

/* Sizes + tracking, from the measured render (px at 1440, expressed in rem). */
h1, .h1 { font-size: 3.164rem; letter-spacing: 1px;    line-height: 1.35; }  /* 50.6px */
h2, .h2 { font-size: 2.531rem; letter-spacing: normal; }                     /* 40.5px */
h3, .h3 { font-size: 2.215rem; letter-spacing: normal; }                     /* 35.4px */
h4, .h4 { font-size: 1.575rem; letter-spacing: 1px; }                        /* 25.2px */
h5, .h5 { font-size: 1.406rem; letter-spacing: 2px; }                        /* 22.5px */
h6, .h6 { font-size: 1.266rem; letter-spacing: 2px; }                        /* 20.25px */

/* The home hero h1 renders smaller than the base (measured 34.2px / 1.9em). */
.alt-hero h1, .alt-hero .h1 { font-size: 2.138rem; line-height: 1.35; }      /* 34.2px */

/* -------------------------------------------------------------------------
   3. LINKS
   ---------------------------------------------------------------------- */

a           { color: #79aa91; text-decoration: none; }
a:hover,
a:focus     { color: #5f9280; text-decoration: underline; }

/* The original repurposed .text-secondary as the sage link colour (Bootstrap
   5.3 defaults it to a muted grey). The property-name links on Locations carry
   this class, so restore sage. */
.text-secondary { color: #79aa91 !important; }
a.text-secondary:hover, a.text-secondary:focus { color: #5f9280 !important; }

/* -------------------------------------------------------------------------
   4. BUTTONS
   Original buttons are SQUARE, uppercase, 500 weight, 2px tracking.
   Primary = sage fill (x8 on site); Secondary = forest fill; a forest
   outline variant also appears.
   ---------------------------------------------------------------------- */

.btn {
	--bs-btn-border-radius: 0;
	font-family: "korolev", sans-serif;   /* the original button face */
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 2px;
	/* letter-spacing adds a trailing gap after the last letter, which shoves the
	   text right inside the button; pull it back so the label sits centred. */
	text-indent: 2px;
	padding: 14px 20px;
}

.btn-primary {
	--bs-btn-color:                 #ffffff;
	--bs-btn-bg:                    #79aa91;
	--bs-btn-border-color:          #79aa91;
	--bs-btn-hover-color:           #ffffff;
	--bs-btn-hover-bg:              #689781;
	--bs-btn-hover-border-color:    #689781;
	--bs-btn-active-color:          #ffffff;
	--bs-btn-active-bg:             #5c8a74;
	--bs-btn-active-border-color:   #5c8a74;
	--bs-btn-disabled-color:        #ffffff;
	--bs-btn-disabled-bg:           #a9c8b8;
	--bs-btn-disabled-border-color: #a9c8b8;
	--bs-btn-focus-shadow-rgb:      121, 170, 145;
}

.btn-secondary {
	--bs-btn-color:                 #ffffff;
	--bs-btn-bg:                    #27422f;
	--bs-btn-border-color:          #27422f;
	--bs-btn-hover-color:           #ffffff;
	--bs-btn-hover-bg:              #1d3324;
	--bs-btn-hover-border-color:    #1d3324;
	--bs-btn-active-color:          #ffffff;
	--bs-btn-active-bg:             #16281c;
	--bs-btn-active-border-color:   #16281c;
	--bs-btn-disabled-color:        #ffffff;
	--bs-btn-disabled-bg:           #6d8074;
	--bs-btn-disabled-border-color: #6d8074;
	--bs-btn-focus-shadow-rgb:      39, 66, 47;
}

.btn-outline-secondary {
	--bs-btn-color:                 #27422f;
	--bs-btn-border-color:          #27422f;
	--bs-btn-hover-color:           #ffffff;
	--bs-btn-hover-bg:              #27422f;
	--bs-btn-hover-border-color:    #27422f;
	--bs-btn-active-color:          #ffffff;
	--bs-btn-active-bg:             #27422f;
	--bs-btn-active-border-color:   #27422f;
	--bs-btn-focus-shadow-rgb:      39, 66, 47;
}

/* -------------------------------------------------------------------------
   6. SECTION BACKGROUNDS — library vocabulary contract
   ---------------------------------------------------------------------- */

.alt-section-light { background-color: #f6f6f6; }
.alt-section-white { background-color: #ffffff; }

.alt-section-dark  { background-color: #1d2425; color: #f6f6f6; }
.alt-section-dark h1, .alt-section-dark h2, .alt-section-dark h3,
.alt-section-dark h4, .alt-section-dark h5, .alt-section-dark h6,
.alt-section-dark p,  .alt-section-dark li, .alt-section-dark a {
	color: #f6f6f6;
}

/* A forest-green band also appears in the original (e.g. CTA strips). */
.alt-section-forest { background-color: #27422f; color: #f6f6f6; }
.alt-section-forest h1, .alt-section-forest h2, .alt-section-forest h3,
.alt-section-forest h4, .alt-section-forest h5, .alt-section-forest h6,
.alt-section-forest p,  .alt-section-forest li, .alt-section-forest a {
	color: #f6f6f6;
}

/* -------------------------------------------------------------------------
   7. HEADER / FOOTER
   Footer is a dark charcoal band with light text (measured inner text
   rgb(246,246,246)). Footer column headings render in the BODY font,
   uppercase — NOT the Vendeur heading face (a re-theme footer gotcha).
   ---------------------------------------------------------------------- */

/* Header logo. The logo is an SVG, and WordPress emits width="1" height="1"
   on SVG custom logos (no intrinsic size), which renders it invisible. Force
   a real size; width auto keeps the horizontal logo's aspect. */
.alt-site-header .custom-logo,
.alt-site-header .navbar-brand img {
	height: 62px;
	width: auto;
	max-width: 280px;
}

/* Masthead breathing room — the original sits the logo/nav further off the
   viewport edges than Bootstrap's default container-fluid gutter, and gives the
   header more height so the content below it doesn't crowd up against it. */
.alt-site-header .container-fluid {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}
.alt-site-header .navbar {
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

/* Home only: the header floats transparent OVER the hero (no white bar), with
   light logo + nav. Other pages keep the solid white masthead. */
body.home .alt-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
}
body.home .alt-site-header .nav-link { color: #ffffff; }
body.home .alt-site-header .nav-link:hover,
body.home .alt-site-header .nav-link:focus { color: #f6f6f6; }
/* The logo is a dark mark; force it white so it reads on the photo. */
body.home .alt-site-header .custom-logo { filter: brightness(0) invert(1); }

/* Footer is two bands: the nav band in dark blue (the charcoal-blue), then the
   copyright sub-footer (colophon) in black. Both white/centred text. */
.alt-site-footer {
	background-color: #1d2425;
	color: #f6f6f6;
}
.alt-site-footer a { color: #f6f6f6; }
.alt-site-footer a:hover { color: #ffffff; }
.alt-site-footer .nav { gap: 0.5rem 1.5rem; }
.alt-site-footer .nav-link,
.alt-site-footer .nav a,
.alt-site-footer .menu a {
	font-family: "fairplex-narrow", Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #f6f6f6;
	text-decoration: none;
}
.alt-site-footer .nav-link:hover,
.alt-site-footer .nav a:hover,
.alt-site-footer .menu a:hover { color: #ffffff; }
.alt-site-footer h1, .alt-site-footer h2, .alt-site-footer h3,
.alt-site-footer h4, .alt-site-footer h5, .alt-site-footer h6 {
	font-family: var(--bs-body-font-family);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #f6f6f6;
}

/* Copyright sub-footer band. */
.alt-subfooter {
	background-color: #000000;
	color: #ffffff;
	padding: 1rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.alt-subfooter p { color: #ffffff; }

/* -------------------------------------------------------------------------
   7b. ACCORDION — brand the chevron + open state (mechanisms 3 & 4)
   Only matters if an FAQ section is used; harmless otherwise.
   ---------------------------------------------------------------------- */

.accordion {
	--bs-accordion-btn-color:    #222222;
	--bs-accordion-active-color: #27422f;
	--bs-accordion-active-bg:    #eaf2ee;
	--bs-accordion-border-color: #d6ddd8;
	--bs-accordion-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2327422f' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------
   8. FORMS
   ---------------------------------------------------------------------- */

.form-control:focus, .form-select:focus {
	border-color: #79aa91;
	box-shadow: 0 0 0 0.25rem rgba(121, 170, 145, 0.35);
}

/* Gravity Forms submit → the sage CTA, matching the site's buttons (the plugin
   ships a grey default). */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	background-color: #79aa91;
	border: 1px solid #79aa91;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
	padding: 14px 20px;
	border-radius: 0;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background-color: #689781;
	border-color: #689781;
}