/* Custom CSS for Bridges Cleaning & Hygiene Services */

/* ========================================
   BRIDGES CLEANING BRAND TYPOGRAPHY
   ======================================== */

/* Brand name styling - container */
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.15rem;
}

/* "Bridges" - Libre Bodoni (Bodoni alternative) */
.brand-name-main {
  font-family: 'Libre Bodoni', serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  color: var(--color-navy);
}

/* "Cleaning Services" - Myriad Pro alternative (sans-serif) */
.brand-name-sub {
  font-family: 'Myriad Pro', 'Segoe UI', -apple-system, system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-rose);
}

/* Brand name in navbar - adjust for navbar context */
.navbar-brand .brand-name-main {
  font-size: 1.25rem;
}

.navbar-brand .brand-name-sub {
  font-size: 0.6rem;
}

/* Brand name in footer - white text and larger */
.footer .brand-name-main {
  color: white;
  font-size: 2.5rem;
}

.footer .brand-name-sub {
  color: var(--color-rose-light);
  font-size: 1.25rem;
}

/* ========================================
   BRIDGES CLEANING BRAND COLORS
   ======================================== */

:root {
  /* Primary Navy - Headers, Text, Backgrounds */
  --color-navy:           #1a183c;
  --color-navy-medium:    #4c445e;
  --color-navy-light:     #6b6580;

  /* Dusty Rose - Brand Accent, Buttons, Highlights */
  --color-rose:           #b28ea4;
  --color-rose-text:      #8d6a7e;  /* AA compliant for text */
  --color-rose-dark:      #6e5261;  /* AAA compliant for emphasis */
  --color-rose-light:     #c9a9bb;

  /* Lavender - Secondary Accent */
  --color-lavender:       #a79eb9;
  --color-lavender-light: #c4bdd4;

  /* Background Colors */
  --color-bg-warm:        #dfddd9;  /* Warm gray-beige */
  --color-bg-cool:        #ebeae9;  /* Cool gray */
  --color-bg-white:       #ffffff;

  /* Text Colors */
  --color-text-primary:   #1a183c;  /* Navy for headings */
  --color-text-body:      #4c445e;  /* Medium navy for body */
  --color-text-muted:     #6b6580;  /* Light navy for secondary text */
}

/* Override Bootstrap primary color with Bridges navy */
.btn-primary {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-navy-medium) !important;
  border-color: var(--color-navy-medium) !important;
}

.btn-outline-primary {
  border-color: var(--color-navy) !important;
  color: var(--color-navy) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  color: white !important;
}

/* Text color overrides */
.text-primary {
  color: var(--color-rose) !important;
}

/* Link colors */
a {
  color: var(--color-navy);
}

a:hover {
  color: var(--color-navy-medium);
}

/* Navbar active states */
.nav-link.active {
  color: var(--color-rose) !important;
}

/* Badges with brand colors */
.badge.bg-primary {
  background-color: var(--color-navy) !important;
}

/* Section backgrounds - alternate between warm and cool */
.bg-secondary {
  background-color: var(--color-bg-cool) !important;
}

/* Accent elements */
.text-accent {
  color: var(--color-rose);
}

/* Headings - ensure navy color */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-navy);
}

/* Footer link hover states */
.footer a:hover {
  color: var(--color-rose) !important;
}

/* Dropdown menu active items */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-navy) !important;
}

/* Card backgrounds */
.card.bg-secondary {
  background-color: var(--color-bg-cool) !important;
}

/* Custom helper classes */
.bg-navy {
  background-color: var(--color-navy);
  color: white;
}

.bg-rose {
  background-color: var(--color-rose);
  color: white;
}

.bg-warm {
  background-color: var(--color-bg-warm);
}

.bg-cool {
  background-color: var(--color-bg-cool);
}

.text-navy {
  color: var(--color-navy);
}

.text-rose {
  color: var(--color-rose);
}

.border-rose {
  border-color: var(--color-rose) !important;
}

/* Call-to-action sections */
.cta-section {
  background-color: var(--color-bg-warm);
  padding: 3rem 0;
}

/* Prose content styling for markdown */
.prose {
  color: var(--color-text-body);
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--color-navy);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose strong {
  color: var(--color-navy);
  font-weight: 600;
}

.prose a {
  color: var(--color-rose-text);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-rose-dark);
}

/* Breadcrumb styling */
.breadcrumb-item.active {
  color: var(--color-navy-medium);
}

/* Form focus states */
.form-control:focus {
  border-color: var(--color-rose);
  box-shadow: 0 0 0 0.2rem rgba(178, 142, 164, 0.25);
}

/* Hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Article/Blog Content Styles */
.article-content.prose {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-body);
}

.article-content.prose h2 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-bg-cool);
}

.article-content.prose h3 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  color: var(--color-navy);
}

.article-content.prose h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-navy-medium);
}

.article-content.prose p {
  margin-bottom: 1.5rem;
}

.article-content.prose ul,
.article-content.prose ol {
  margin-bottom: 2rem;
  padding-left: 2rem;
}

.article-content.prose li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.article-content.prose ul li::marker {
  color: var(--color-rose);
}

.article-content.prose strong {
  color: var(--color-navy);
  font-weight: 600;
}

.article-content.prose a {
  color: var(--color-rose-text);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.article-content.prose a:hover {
  color: var(--color-rose-dark);
}

/* Table Styles for Articles */
.article-content.prose table {
  width: 100%;
  margin: 2.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-bg-cool);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.article-content.prose thead {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-medium) 100%);
  color: white;
}

.article-content.prose thead th {
  padding: 1rem 1.25rem;
  font-weight: 600;
  text-align: left;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-content.prose tbody tr {
  transition: background-color 0.2s ease;
}

.article-content.prose tbody tr:nth-child(even) {
  background-color: var(--color-bg-cool);
}

.article-content.prose tbody tr:hover {
  background-color: rgba(178, 142, 164, 0.1);
}

.article-content.prose tbody td {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.article-content.prose tbody td:first-child {
  font-weight: 500;
  color: var(--color-navy);
}

/* Blockquote / Callout Boxes */
.article-content.prose blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  background-color: var(--color-bg-cool);
  border-left: 4px solid var(--color-rose);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--color-navy-medium);
}

.article-content.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Code and Pre blocks */
.article-content.prose code {
  background-color: var(--color-bg-cool);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--color-navy);
  font-family: 'Courier New', monospace;
}

.article-content.prose pre {
  background-color: var(--color-navy);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
}

.article-content.prose pre code {
  background: none;
  padding: 0;
  color: white;
}

/* Horizontal Rules */
.article-content.prose hr {
  margin: 3rem 0;
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-rose), transparent);
}

/* Image styling in articles */
.article-content.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Checklist styling (for checkbox lists) */
.article-content.prose ul.checklist {
  list-style: none;
  padding-left: 0;
}

.article-content.prose ul.checklist li {
  padding-left: 2rem;
  position: relative;
}

.article-content.prose ul.checklist li::before {
  content: '☐';
  position: absolute;
  left: 0;
  color: var(--color-rose);
  font-size: 1.2em;
}

/* Responsive tables */
@media (max-width: 768px) {
  .article-content.prose table {
    font-size: 0.875rem;
  }

  .article-content.prose thead th,
  .article-content.prose tbody td {
    padding: 0.75rem 0.875rem;
  }
}