/* =============================================
   THEME: Custom Teal (Canonbury Clinic)
   Professional, clean — osteopathy, healthcare
   Font Pairing: Friendly (Poppins + Merriweather)
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* --- Theme Variables --- */
:root {
  /* Colour Palette — based on #176F7D */
  --color-primary: #176F7D;
  --color-primary-light: #3A95A3;
  --color-primary-dark: #0E4D57;
  --color-secondary: #C48B5B;
  --color-secondary-light: #D4A87A;
  --color-secondary-dark: #956438;
  --color-accent: #7B6E99;
  --color-accent-light: #9B8FB3;

  --color-bg: #F7FAFB;
  --color-bg-alt: #E8F1F3;
  --color-bg-dark: #0E2E33;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F0F6F7;

  --color-text: #2D3638;
  --color-text-light: #5E6E72;
  --color-text-inverse: #F7FAFB;
  --color-text-heading: #0E2E33;

  --color-border: #D0DCE0;
  --color-border-light: #E4ECEE;

  --color-success: #2A8F6F;
  --color-error: #C45B5B;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;

  /* Font sizes — Poppins renders larger, so reduce heading sizes */
  --text-h1-desktop: 2.5rem;
  --text-h2-desktop: 2rem;
  --text-h3-desktop: 1.3rem;
}

/* =============================================
   SITE-SPECIFIC LAYOUT OVERRIDES
   ============================================= */

/* Homepage intro: 2/3 text + 1/3 video */
@media (min-width: 768px) {
  .intro-grid {
    grid-template-columns: 2fr 1fr !important;
  }
}

/* Extra breathing room below intro heading */
.intro-grid h2 {
  margin-bottom: var(--space-xl);
}

/* Page header: centre all content sitewide */
.page-header .container {
  text-align: center;
}

/* Breadcrumbs: centre within page headers */
.page-header .breadcrumbs {
  justify-content: center;
}

/* Breadcrumbs: spacing and base style */
.page-header .breadcrumbs {
  margin-bottom: var(--space-md);
}

/* Breadcrumbs: light text on dark backgrounds (fixes selector mismatch in components.css) */
.page-header--dark .breadcrumbs__item a,
.page-header--image .breadcrumbs__item a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.page-header--dark .breadcrumbs__item a:hover,
.page-header--image .breadcrumbs__item a:hover {
  color: #ffffff;
}

.page-header--dark .breadcrumbs__item--active,
.page-header--image .breadcrumbs__item--active {
  color: #ffffff;
}

.page-header--dark .breadcrumbs__separator,
.page-header--image .breadcrumbs__separator {
  color: rgba(255, 255, 255, 0.4);
}