/**
 * 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: #0d2a4b;              /* Main brand color - navy blue from logo */
  --primary-color-dark: #081b33;         /* Darker shade for hover states */
  --primary-color-light: #27b2b5;        /* Teal from logo - lighter accent */
  --primary-color-bright: #27b2b5;       /* Teal from logo - button hover states */

  /* Override Bootstrap's primary color to match your brand */
  --bs-primary: #0d2a4b;
  --bs-primary-rgb: 13, 42, 75;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #27b2b5;            /* Teal from logo */
  --accent-color: #b48a26;              /* Gold/bronze from logo */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --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;
  --hero-bg-color: #e7ecf9;              /* Homepage hero section background */
  --sidebar-bg: rgba(13, 42, 75, 0.92);  /* Mobile sidebar menu background */


  /* ===== 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: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-headings: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  --font-weight-base: 300;               /* Light weight for body text */

  /* Heading font weights */
  --heading-font-weight: 500;            /* Medium weight for h1-h4 (Playfair Display) */


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

  /* Override Bootstrap font variables */
  --bs-font-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 300;
  --bs-heading-font-family: var(--font-family-headings);
}

/* Apply Poppins globally and ensure light weights */
body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
}

h1, h2, h3, h4 {
  font-weight: 500;
}

h5, h6 {
  font-weight: 400;
}

strong, b {
  font-weight: 500;
}

/* Heading weights tuned for Playfair Display (no 300 weight available) */
.hp-section-heading,
.contact-gallery-heading {
  font-weight: 400;
}

.hp-eyebrow,
.hp-chip,
.hp-people-subtitle,
.treatment-box-heading {
  font-weight: 400;
}

.hp-people-body h3,
.contact-card h3,
.contact-phone a {
  font-weight: 400;
}


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


/* Static hero gradient overlay based on brand navy (#0d2a4b) */
.background-video-container-overlay {
  background: linear-gradient(135deg, rgba(8, 25, 45, 0.85) 0%, rgba(13, 42, 75, 0.5) 40%, rgba(13, 42, 75, 0.5) 60%, rgba(8, 25, 45, 0.85) 100%) !important;
  background-size: auto !important;
  animation: none !important;
}


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   Add any additional custom CSS below this line
   ======================================================================== */

/* Pin hero content to the top of the hero and reserve clearance for the
   absolutely-positioned service dock (~85px) so the trust strip doesn't
   collide with the dock icons. The template's default behavior vertically
   centers content via `my-auto`, which produced excess empty space above
   the eyebrow once the eyebrow + larger headline + subhead were added. */
body.homepage #homepage-cover .bg-cover {
  padding-top: 0;
}
body.homepage #homepage-cover .bg-cover > .container {
  padding-top: 2vh;
  padding-bottom: 110px;
  justify-content: flex-start;
}
/* Neutralize the nested h-100 / py-5 wrappers that let my-auto center the col */
body.homepage #homepage-cover .bg-cover > .container > div {
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.homepage #homepage-cover .row {
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.homepage #homepage-cover .row > [class*="col-"].my-auto {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* On mobile the dock stacks below the hero, so no reserved clearance */
@media (max-width: 767.98px) {
  body.homepage #homepage-cover .bg-cover > .container {
    padding-top: 3vh;
    padding-bottom: 2rem;
  }
}

/* Hero Eyebrow — small gold label with divider line above the headline */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hero-eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--accent-color);
  opacity: 0.85;
}
.hero-eyebrow-text {
  color: var(--accent-color);
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Hero Headline — larger, refined, with italic gold accent word */
body.homepage #homepage-cover h1.hero-headline {
  font-size: 3.75rem;
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 1.1rem;
  color: #ffffff;
}
.hero-headline-accent {
  color: var(--accent-color);
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 1199.98px) {
  body.homepage #homepage-cover h1.hero-headline { font-size: 3.25rem; }
}
@media (max-width: 991.98px) {
  body.homepage #homepage-cover h1.hero-headline { font-size: 2.75rem; }
}
@media (max-width: 767.98px) {
  body.homepage #homepage-cover h1.hero-headline { font-size: 2.1rem; }
  .hero-eyebrow-line { width: 28px; }
  .hero-eyebrow-text { font-size: 0.72rem; letter-spacing: 0.16em; }
}

/* Hero Subhead — widened past the client's 600px spec so the copy fits on
   two lines instead of three (client signed off on design overrides). */
.hero-subhead {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

/* Thin white divider between CTAs and trust bar (~50px top & bottom spacing) */
.hero-divider {
  width: 100%;
  max-width: 640px;
  margin: 50px auto;
  border: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}
.hero-divider + .hero-trust-strip {
  margin-top: 0;
}
@media (max-width: 767.98px) {
  .hero-divider { margin: 36px auto; max-width: 280px; }
}

/* Hero Trust Strip */
.hero-trust-strip {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
}

.hero-trust-item {
  display: inline;
}

.hero-trust-divider {
  margin: 0 0.5rem;
  opacity: 0.4;
}

@media (max-width: 767.98px) {
  .hero-trust-strip {
    font-size: 0.75rem;
  }
  .hero-trust-item {
    display: block;
    margin-bottom: 0.25rem;
  }
}

/* Footer — blue gradient with white content */
#footer {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  color: rgba(255, 255, 255, 0.9);
  border-top: none;
}
#footer .footer-heading {
  color: #fff;
}
#footer .footer-address,
#footer .footer-nav a,
.footer-hours-table th,
.footer-hours-table td {
  color: rgba(255, 255, 255, 0.85);
}
#footer .footer-nav a:hover {
  color: #fff;
}
#footer .footer-phone a {
  color: #fff;
}
#footer .footer-phone a:hover {
  color: rgba(255, 255, 255, 0.8);
}
#footer .footer-social-link {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
#footer .footer-social-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
#footer hr {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Caveat — cursive signature font for CTA section */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

/* Example: Custom button style
.btn-custom {
  background-color: var(--accent-color);
  color: white;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 2rem;
}
*/


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