/**
 * Client-Specific Theming & Customizations
 *
 * This file contains CSS variables for easy color/theme customization
 * and any client-specific CSS overrides.
 *
 * USAGE:
 * 1. Update the CSS variables below to match your client's brand colors
 * 2. Add any additional client-specific CSS at the bottom of this file
 * 3. Do not modify bootstrap.css, platforma.css, or clue.css directly
 */


/* ========================================================================
   CSS VARIABLES - CUSTOMIZE THESE FOR EACH CLIENT
   ======================================================================== */

:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --primary-color: #182b55;              /* Brammeier navy — main brand color */
  --primary-color-dark: #0f1d3a;         /* Darker navy for hover states */
  --primary-color-light: #2a4a7f;        /* Lighter navy for accents */
  --primary-color-bright: #3a5f9a;       /* Brighter navy for button hover states */

  /* Override Bootstrap's primary color to match your brand */
  --bs-primary: #182b55;
  --bs-primary-rgb: 24, 43, 85;

  /* Plain-text hyperlinks: brand teal instead of Bootstrap's default bright blue */
  --bs-link-color: #007399;
  --bs-link-color-rgb: 0, 115, 153;
  --bs-link-hover-color: #005c7a;
  --bs-link-hover-color-rgb: 0, 92, 122;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #007399;            /* Brammeier teal — links, highlights */
  --accent-color: #00ab68;               /* Brammeier green — CTAs, accents */
  --warm-color: #8d634b;                 /* Brammeier gold-brown — exact match to logo's outer frame (.st1) */
  --warm-color-dark: #6f4e3b;            /* Darker gold-brown for button hover states */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--secondary-color);
  --link-hover-color: #005c7a;
  --button-color: var(--primary-color);
  --button-hover-color: var(--primary-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: #fafafa;
  --bg-light: #f8f9fa;
  --bg-warm: #f5efea;                    /* Warm beige — matches staff photography backgrounds */
  --bg-warm-subtle: #faf7f5;             /* Very light warm tint for large areas */
  --hero-bg-color: #eaf4f9;              /* Light teal tint for hero section */
  --sidebar-bg: rgba(24, 43, 85, 0.96);  /* Brammeier navy sidebar */


  /* ===== TEXT COLORS ===== */
  --text-primary: #212529;               /* Main body text */
  --text-secondary: #6c757d;             /* Secondary/muted text */
  --text-light: #6c757d;                 /* Light gray text */
  --text-white: #ffffff;                 /* White text */


  /* ===== TYPOGRAPHY ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-headings: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* Heading font weights */
  --heading-font-weight: 300;            /* Light weight for h1-h4 */


  /* ===== SPACING ===== */
  --section-padding: 4rem;               /* Vertical padding for major sections */
  --section-padding-mobile: 2rem;        /* Vertical padding on mobile */


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;            /* For rounded buttons */


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* ========================================================================
   DARK MODE SUPPORT (OPTIONAL)
   Uncomment this section if you want to support dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }
}
*/


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   ======================================================================== */

/* --- Bronze buttons (replaces navy on all standard buttons) ---
   Note: #homepage-cover and #request-banner use white buttons on dark bg —
   those higher-specificity rules in clue.css remain unchanged.
   Treatment dark band gets its own bronze-on-navy treatment below. */
.btn-primary,
.btn-outline-primary {
  background-color: var(--warm-color) !important;
  border-color: var(--warm-color) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-primary:focus,
.btn-outline-primary:focus,
.btn-primary:active,
.btn-outline-primary:active {
  background-color: var(--warm-color-dark) !important;
  border-color: var(--warm-color-dark) !important;
  color: #ffffff !important;
}

/* Dark backgrounds: white outline buttons */
#homepage-cover .btn-outline-primary,
#homepage-cover .btn-primary,
.treatment-band-dark .btn-outline-primary,
.treatment-band-dark .btn-primary {
  background-color: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

#homepage-cover .btn-outline-primary:hover,
#homepage-cover .btn-primary:hover,
#homepage-cover .btn-outline-primary:focus,
#homepage-cover .btn-primary:focus,
#homepage-cover .btn-outline-primary:active,
#homepage-cover .btn-primary:active,
.treatment-band-dark .btn-outline-primary:hover,
.treatment-band-dark .btn-primary:hover,
.treatment-band-dark .btn-outline-primary:focus,
.treatment-band-dark .btn-primary:focus,
.treatment-band-dark .btn-outline-primary:active,
.treatment-band-dark .btn-primary:active {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--primary-color) !important;
}


/* --- Warm treatment band (matches staff photo beige) --- */
.treatment-band-warm {
  padding: 3rem 0;
  background-color: var(--bg-warm);
}

/* --- Homepage people/team section and reviews: warm instead of blue-grey --- */
.hp-section-tinted {
  background-color: var(--bg-warm) !important;
}

#reviews-banner {
  background-color: var(--bg-warm-subtle);
}

#reviews-banner .swiper-slide {
  background-color: #fff;
  border: 1px solid rgba(141, 101, 76, 0.18);
}

/* --- Review stars: brand bronze/gold --- */
#reviews-banner .fa-star,
#reviews-banner .bi-star-fill {
  color: var(--warm-color) !important;
}

/* --- Blockquote: bronze left border accent --- */
blockquote.blockquote.border-start {
  border-color: var(--warm-color) !important;
}

/* --- Section h2 headings: small green accent bar below --- */
.treatment-band .container > h2::after,
.treatment-band-warm .container > h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--accent-color);
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

/* --- Quick facts icons: green accent --- */
.treatment-fact-icon .bi {
  color: var(--accent-color) !important;
}

/* --- Mega-menu column headers: green underline --- */
.mega-menu-header {
  border-bottom-color: var(--accent-color) !important;
}
.slide-mega-menu .mega-menu-header {
  border-bottom-color: var(--accent-color) !important;
}

/* --- Horizontal rules: subtle warm bronze tint --- */
hr {
  border-color: rgba(141, 101, 76, 0.25);
  opacity: 1;
}


/* ========================================================================
   USAGE EXAMPLES & NOTES
   ======================================================================== */

/*
HOW TO USE CSS VARIABLES:

1. In your HTML or other CSS:
   background-color: var(--primary-color);
   color: var(--text-primary);

2. To change colors for a specific client:
   - Simply update the hex values in the :root section above
   - All instances throughout the site will update automatically

3. Common customizations by client:
   - --primary-color: Your client's main brand color
   - --sidebar-bg: Match the sidebar to their branding
   - --hero-bg-color: Customize homepage hero section
   - --font-family-base: Use client's preferred font

4. Advanced: Override Bootstrap classes:
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

BEST PRACTICES:
- Always use variables instead of hardcoded colors
- Test changes across multiple pages before deploying
- Keep client-specific overrides in this file
- Document any custom CSS you add below
*/


/* ========================================================================
   HOMEPAGE HERO — 2-column editorial overlay (Brammeier-specific)
   Replaces the legacy centered-content hero on hero-modern.njk.
   Background video & .hero-video-toggle continue to be styled by
   modern-header-modern.css. Search input ID stays #homepage-search-input
   so search.js + search-placeholder-animation.js still attach.
   ======================================================================== */

#homepage-cover .bramm-hero-grid {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 5rem 1.25rem 4.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: end;          /* both columns bottom-align */
	min-height: 100%;
	color: #fff;
}

/* Left column ------------------------------------------------------- */
#homepage-cover .bramm-hero-left {
	max-width: 640px;
}
#homepage-cover .bramm-hero-eyebrow {
	display: inline-block;
	font-family: var(--font-family-base);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 1rem;
}
#homepage-cover .bramm-hero-grid h1 {
	font-weight: 300;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.1;
	margin: 0 0 1.25rem;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
#homepage-cover .bramm-hero-tagline {
	font-family: var(--font-family-base);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 1.5rem;
	padding-left: 0;           /* cancel inherited #homepage-cover p padding */
	padding-right: 0;
}

/* Search pill on dark hero --------------------------------------- */
#homepage-cover .bramm-hero-search {
	position: relative;
	max-width: 480px;
	margin: 0 0 1.5rem;
}
#homepage-cover .bramm-hero-search input {
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 0.75rem 1.25rem 0.75rem 2.75rem;
	font-family: var(--font-family-base);
	font-size: 0.95rem;
	color: var(--text-primary, #222);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
#homepage-cover .bramm-hero-search input::placeholder {
	color: #6b6259;
}
#homepage-cover .bramm-hero-search input:focus {
	outline: 2px solid var(--warm-color);
	outline-offset: 2px;
	background: #fff;
}
#homepage-cover .bramm-hero-search i {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--warm-color);
	font-size: 1rem;
	pointer-events: none;
}

/* CTA buttons row — buttons themselves use standard .btn-outline-primary,
   which is already styled by the existing #homepage-cover override
   (white outline on dark, fills white with navy text on hover). */
#homepage-cover .bramm-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Right column: vertical service-link list ---------------------- */
#homepage-cover .bramm-hero-services {
	border-left: 1px solid rgba(255, 255, 255, 0.22);
	padding-left: 2rem;
}
#homepage-cover .bramm-hero-services-label {
	display: block;
	font-family: var(--font-family-base);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 1rem;
}
#homepage-cover .bramm-hero-services ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#homepage-cover .bramm-hero-services li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
#homepage-cover .bramm-hero-services a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
	font-family: var(--font-family-headings, var(--font-family-base));
	font-size: 1rem;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
#homepage-cover .bramm-hero-services a i {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
	transition: transform 0.2s ease, color 0.2s ease;
}
#homepage-cover .bramm-hero-services a:hover,
#homepage-cover .bramm-hero-services a:focus-visible {
	color: #d4b89a;
	padding-left: 0.4rem;
}
#homepage-cover .bramm-hero-services a:hover i,
#homepage-cover .bramm-hero-services a:focus-visible i {
	transform: translateX(4px);
	color: #d4b89a;
}

/* Responsive ---------------------------------------------------- */
@media (max-width: 991.98px) {
	#homepage-cover .bramm-hero-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding: 4rem 1.25rem 3rem;
	}
	#homepage-cover .bramm-hero-services {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
		padding-left: 0;
		padding-top: 1.5rem;
	}
}
@media (max-width: 575.98px) {
	#homepage-cover .bramm-hero-grid {
		padding: 3rem 1rem 2.5rem;
	}
	#homepage-cover .bramm-hero-services ul {
		columns: 2;
		column-gap: 1.5rem;
	}
	#homepage-cover .bramm-hero-services li + li {
		border-top: none;
	}
	#homepage-cover .bramm-hero-services a {
		padding: 0.4rem 0;
	}
}


/* ========================================================================
   MOBILE HOMEPAGE HEADER FIX
   The template enlarges the header logo to 80px on the transparent
   homepage hero (body.homepage:not(.header-scrolled) .header-logo in
   modern-header-modern.css). That rule's specificity beats the mobile
   50px rule, so on phones the logo renders at 80px / ~265px wide. It is
   wide enough that Bootstrap's flex-wrap navbar drops the search +
   hamburger controls onto a second row, ballooning the header to ~166px.
   The homepage hero only pulls up 105px behind the header, so the taller
   header leaves a bare white strip behind the top of the logo, where the
   white logo wordmark disappears (white-on-white). Keep the compact logo
   on phones and stop the navbar from wrapping so the hero covers the
   whole header. client.css loads after modern-header-modern.css, so this
   wins on cascade order.
   ======================================================================== */
@media (max-width: 575.98px) {
	body.homepage:not(.header-scrolled) .header-logo {
		height: 50px;
	}
	.main-header .navbar {
		flex-wrap: nowrap;
	}
}


/* All headings sitewide use Jost (Google Fonts).
   Loaded in base-simple.njk + base.njk via fonts.googleapis.com. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hp-section-heading,
.contact-gallery-heading {
	font-family: var(--font-family-headings);
}


/* Hero video overlay — Brammeier brand pair (navy → gold-brown).
   Overrides the template's default blue diagonal corners. */
:root {
	--hero-overlay-corner-1: rgba(24, 43, 85, 0.85);    /* navy (--primary-color), top-left */
	--hero-overlay-corner-2: rgba(141, 99, 75, 0.78);   /* gold-brown (--warm-color), bottom-right */
	--hero-overlay-tint: rgba(15, 29, 58, 0.42);        /* darker navy tint for white-text legibility */
}


/* With Jost as the heading font, the same numeric weights read heavier than
   in system fonts. Pull all heading weights down a notch for visual balance. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 300;
}
.hp-section-heading,
.contact-gallery-heading,
.hp-people-card h3,
.contact-card h3 {
	font-weight: 500 !important;
}


/* ========================================================================
   MEET THE TEAM — Editorial portrait grid
   ======================================================================== */

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
}
@media (max-width: 991.98px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 575.98px) {
	.team-grid { grid-template-columns: 1fr; }
}

/* Center a lone trailing card so it doesn't sit alone in the leftmost column */
@media (min-width: 992px) {
	.team-grid .team-card:last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
	.team-grid .team-card:last-child:nth-child(2n+1) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 0.75rem);
	}
}

/* Role-grouped rows: each row is a self-contained flex container that
   centers however many cards it holds (3, 2, or 1). */
.team-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	margin-bottom: 2rem;
}
.team-row:last-of-type { margin-bottom: 3rem; }
.team-row .team-card {
	flex: 0 1 calc((100% - 4rem) / 3);
	min-width: 0;
}
@media (max-width: 991.98px) {
	.team-row { gap: 1.5rem; margin-bottom: 1.5rem; }
	.team-row .team-card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 575.98px) {
	.team-row .team-card { flex-basis: 100%; }
}

.team-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
}
.team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 36px rgba(24, 43, 85, 0.14);
}

.team-card-portrait {
	position: relative;
	overflow: hidden;
	background: var(--bg-warm);
}
.team-card-portrait img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.8s ease;
}
.team-card:hover .team-card-portrait img {
	transform: scale(1.04);
}

.team-card-role {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	background: var(--warm-color);
	color: #fff;
	padding: 0.5rem 0.9rem;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 2;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.team-card-body {
	padding: 1.5rem 1.5rem 1.75rem;
	flex: 1;
}
.team-card-name {
	font-family: var(--font-family-headings);
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--primary-color);
	line-height: 1.1;
	margin-bottom: 0.5rem;
}
.team-card-tagline {
	font-family: var(--font-family-headings);
	font-style: italic;
	color: var(--warm-color);
	font-size: 1rem;
	line-height: 1.45;
	margin-bottom: 1.1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(141, 101, 76, 0.18);
}
.team-card-body p:not(.team-card-tagline) {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
}
.team-card-body p:last-child {
	margin-bottom: 0;
}

/* Placeholder tagline marker — visually flags cards still awaiting client bios.
   Uses a dashed border + muted color so reviewers can spot incomplete entries. */
.team-card-tagline--placeholder {
	color: var(--text-light) !important;
	border-bottom: 1px dashed rgba(141, 101, 76, 0.4) !important;
	font-style: italic;
}


/* Plain-text hyperlinks: enforce brand teal for any anchor inside content
   areas, not just Bootstrap-styled ones. Buttons, .btn-link, social icons,
   nav links, footer links, and other components have their own colors and
   are unaffected because their selectors are more specific. */
#content a,
#content a:visited,
.hp-section a,
.hp-section a:visited,
#reviews-banner a,
#reviews-banner a:visited {
	color: var(--secondary-color);
	text-decoration-color: rgba(0, 115, 153, 0.45);
	text-underline-offset: 2px;
}
#content a:hover,
#content a:focus,
.hp-section a:hover,
.hp-section a:focus {
	color: var(--link-hover-color);
	text-decoration-color: var(--link-hover-color);
}