/*
 * Peleuses Healthcare Consulting — Main Stylesheet
 * Brand palette extracted from logo:
 *   --brand-blue:   #1D3F72  (PHC/PELEUSES text, primary dark)
 *   --brand-blue-2: #2B5BA0  (lighter accent blue)
 *   --brand-gray:   #8C8C8C  (HEALTHCARE CONSULTING text)
 *   --brand-light:  #FFFFFF
 *   --body-text:    #000000  (per spec: black on white)
 */

/* ── CSS Custom Properties ───────────────────────────────── */
:root {
  --brand-blue:    #1D3F72;
  --brand-blue-2:  #2B5BA0;
  --brand-blue-3:  #EAF0F8;   /* very light tint for section bg */
  --brand-gray:    #8C8C8C;
  --brand-gray-lt: #F5F5F5;
  --body-text:     #000000;
  --white:         #FFFFFF;

  /* Radius & shadow tokens */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 2px 8px rgba(29,63,114,.10);
  --shadow-md: 0 4px 20px rgba(29,63,114,.15);
  --transition: 220ms ease;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-text);
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--brand-blue);
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: var(--brand-blue-2);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--brand-blue); }

img { max-width: 100%; height: auto; }

/* ── Top Bar ─────────────────────────────────────────────── */
.topbar {
  background: var(--brand-blue);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  padding: .4rem 0;
  letter-spacing: .02em;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: #fff; }

/* ── Navbar ──────────────────────────────────────────────── */
.site-navbar {
  background: var(--white);
  border-bottom: 3px solid var(--brand-blue);
  padding: .6rem 0;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-navbar .navbar-brand { padding: 0; }
.site-navbar .logo-img     { height: 52px; width: auto; }

.site-navbar .nav-link {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-blue) !important;
  padding: .5rem .9rem !important;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
  color: var(--brand-blue-2) !important;
  border-bottom-color: var(--brand-blue-2);
}

.site-navbar .dropdown-menu {
  border: none;
  border-top: 2px solid var(--brand-blue);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 260px;
  z-index: 1050;
}
.site-navbar .dropdown-item {
  font-size: .9rem;
  color: var(--brand-blue);
  padding: .55rem 1.2rem;
  transition: background var(--transition);
}
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item.active {
  background: var(--brand-blue-3);
  color: var(--brand-blue);
}

/* Mobile toggler */
.navbar-toggler { border-color: var(--brand-blue); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231D3F72' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-2) 100%);
  color: var(--white);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-pattern.svg') center/cover no-repeat;
  opacity: .06;
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  margin-bottom: 1.2rem;
}
.hero .lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.9);
  max-width: 600px;
}
.hero .btn-hero-primary {
  background: var(--white);
  color: var(--brand-blue);
  font-weight: 700;
  border: none;
  padding: .75rem 2rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.hero .btn-hero-primary:hover {
  background: var(--brand-blue-3);
  color: var(--brand-blue);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.hero .btn-hero-outline {
  border: 2px solid rgba(255,255,255,.7);
  color: var(--white);
  background: transparent;
  font-weight: 700;
  padding: .73rem 2rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition);
}
.hero .btn-hero-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* ── Page header (inner pages) ───────────────────────────── */
.page-banner {
  background: var(--brand-blue);
  padding: 3.5rem 0 3rem;
  color: var(--white);
}
.page-banner h1 {
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: .4rem;
}
.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a {
  color: rgba(255,255,255,.75);
  font-size: .88rem;
}
.page-banner .breadcrumb-item.active { color: rgba(255,255,255,.95); }
.page-banner .breadcrumb-item + .page-banner .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 5rem 0; }
.section-alt { background: var(--brand-blue-3); }
.section-dark {
  background: var(--brand-blue);
  color: var(--white);
}
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,.9); }

.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin-bottom: .6rem;
}
.section-subtitle {
  font-size: 1rem;
  color: var(--brand-gray);
  margin-bottom: 3rem;
}
.section-divider {
  width: 56px;
  height: 3px;
  background: var(--brand-blue-2);
  margin: .8rem 0 2rem;
}

/* ── Service cards ───────────────────────────────────────── */
.service-card {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
  /* Works as both <div> and <a> */
  color: var(--body-text);
  display: block;
  text-decoration: none;
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--body-text);
  text-decoration: none;
}
.service-card .card-icon {
  font-size: 2.4rem;
  color: var(--brand-blue-2);
  margin-bottom: 1rem;
}
.service-card .card-title {
  font-size: 1.1rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--brand-blue);
}
.service-card .card-text { font-size: .95rem; }
.service-card h3 { color: var(--brand-blue); }
.service-card .btn-service {
  color: var(--brand-blue-2);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap var(--transition);
}
.service-card .btn-service:hover { gap: .6rem; color: var(--brand-blue); }
.service-link {
  color: var(--brand-blue-2);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.service-card:hover .service-link { color: var(--brand-blue); }


/* ── Stat / highlight tiles ──────────────────────────────── */
.stat-tile {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-tile .stat-number {
  font-family: 'Libre Baskerville', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-blue-2);
  line-height: 1;
}
.stat-tile .stat-label {
  font-size: .9rem;
  color: var(--brand-gray);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── CTA band ────────────────────────────────────────────── */
.cta-band {
  background: var(--brand-blue);
  padding: 4rem 0;
  color: var(--white);
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 1rem; }
.btn-cta-white {
  background: var(--white);
  color: var(--brand-blue);
  font-weight: 700;
  border: none;
  padding: .75rem 2.2rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.btn-cta-white:hover {
  background: var(--brand-blue-3);
  color: var(--brand-blue);
}

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-card {
  background: var(--white);
  border-left: 4px solid var(--brand-blue-2);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.testimonial-card blockquote {
  font-style: italic;
  color: var(--body-text);
  margin-bottom: .8rem;
}
.testimonial-card cite {
  font-size: .88rem;
  color: var(--brand-gray);
  font-weight: 700;
}

/* ── Buttons (global) ────────────────────────────────────── */
.btn-primary-brand {
  background: var(--brand-blue);
  color: var(--white);
  border: none;
  padding: .65rem 1.8rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: background var(--transition), box-shadow var(--transition);
}
.btn-primary-brand:hover {
  background: var(--brand-blue-2);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-outline-brand {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  padding: .63rem 1.8rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.btn-outline-brand:hover {
  background: var(--brand-blue);
  color: var(--white);
}

/* ── Forms ───────────────────────────────────────────────── */
.form-label { font-weight: 600; color: var(--brand-blue); }
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue-2);
  box-shadow: 0 0 0 .2rem rgba(43,91,160,.2);
}

/* ── Contact page ────────────────────────────────────────── */
.contact-info-card {
  background: var(--brand-blue);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 2.5rem 2rem;
}
.contact-info-card h4 { color: var(--white); }
.contact-info-card .ci-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.2rem;
  color: rgba(255,255,255,.9);
}
.contact-info-card .ci-icon {
  font-size: 1.3rem;
  color: rgba(255,255,255,.7);
  margin-top: .1rem;
  flex-shrink: 0;
}

/* ── Service inner page ──────────────────────────────────── */
.service-detail-icon {
  font-size: 3rem;
  color: var(--brand-blue-2);
}

/* ── Team / about ────────────────────────────────────────── */
.team-card {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--brand-blue-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2.5rem;
  color: var(--brand-blue-2);
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-blue);
  color: rgba(255,255,255,.85);
  padding: 4rem 0 0;
}
.footer-logo { mix-blend-mode: screen; opacity: .92; max-height: 46px; width: auto; }
.footer-tagline { font-size: .9rem; color: rgba(255,255,255,.7); max-width: 280px; }
.footer-heading {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 1rem;
}
.footer-links a,
.footer-contact a {
  color: rgba(255,255,255,.8);
  font-size: .92rem;
  display: block;
  margin-bottom: .35rem;
  transition: color var(--transition);
}
.footer-links a:hover,
.footer-contact a:hover { color: var(--white); }
.footer-contact li {
  font-size: .92rem;
  color: rgba(255,255,255,.8);
  margin-bottom: .45rem;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  margin-right: .4rem;
  font-size: 1rem;
  transition: background var(--transition), border-color var(--transition);
}
.social-icon:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}
.footer-bottom {
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.2rem 0;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}

/* ── Maintenance page ────────────────────────────────────── */
.maintenance-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue);
  color: var(--white);
  text-align: center;
}
.maintenance-body h1 { color: var(--white); font-size: 2.5rem; }

/* ── Survey / Questionnaire ──────────────────────────────── */
.survey-progress {
  height: 6px;
  background: var(--brand-blue-3);
  border-radius: 3px;
  margin-bottom: 2rem;
}
.survey-progress-bar {
  height: 100%;
  background: var(--brand-blue-2);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Utility helpers ─────────────────────────────────────── */
.text-brand      { color: var(--brand-blue)   !important; }
.text-brand-2    { color: var(--brand-blue-2) !important; }
.text-brand-gray { color: var(--brand-gray)   !important; }
.bg-brand        { background: var(--brand-blue)   !important; }
.bg-brand-2      { background: var(--brand-blue-2) !important; }
.bg-brand-light  { background: var(--brand-blue-3) !important; }
.border-brand    { border-color: var(--brand-blue) !important; }

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 991.98px) {
  .site-navbar .nav-link { border-bottom: none; padding: .6rem 1rem !important; }
  .hero { padding: 4rem 0 3.5rem; }
  .section { padding: 3.5rem 0; }
}
@media (max-width: 575.98px) {
  .hero h1 { font-size: 1.8rem; }
  .stat-tile .stat-number { font-size: 2.2rem; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .site-navbar, .topbar, .cta-band, .site-footer { display: none !important; }
  body { color: #000; }
}