/* ==========================================================================
   PRIME YEARS CARE AGENCY — Main Design System
   style.css — Compact Luxury Layout (Zero Dead Space & Speed Optimized)
   ========================================================================== */

/* Google Fonts Import with font-display: swap for instant text rendering */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Inter:wght@400;500;600;700;800&family=Fuzzy+Bubbles:wght@400;700&display=swap');

/* ===================================================================
   COLOR SYSTEM & DESIGN TOKENS — Updated to New Logo Brand Colours
   Green: #2d6a3f | Gold: #C8963e | Navy: #1a365d
   =================================================================== */
:root {
  /* Brand Palette — aligned with Companion Agency site (#4A7C59 warm sage) */
  --color-green-dark:   #3a6347;   /* soft deep sage (harmonious, not overpowering) */
  --color-green:        #4a7c59;   /* PRIMARY brand sage green (matches companion site) */
  --color-green-mid:    #42704f;   /* mid sage green for hover states */
  --color-green-light:  #5b8d6a;   /* lighter sage green for accents */
  --color-green-pale:   #f2f7f4;   /* fresh, warm pale sage tint for backgrounds */

  --color-gold:         #C8963e;   /* CLIENT GOLD — warm, refined accent */
  --color-gold-light:   #dda755;   /* lighter gold for hover */
  --color-gold-pale:    #faf4e8;   /* pale gold tint for subtle backgrounds */
  --color-gold-hover:   #b07830;   /* darker gold for pressed/hover state */

  --color-navy:         #1a365d;   /* companion site secondary navy brand colour */
  --color-navy-deep:    #0f223d;   /* deeper navy for contrast */

  --color-cream:        #f5f0e8;   /* companion site warm linen/cream */
  --color-cream-light:  #faf8f5;   /* soft light warm neutral */
  --color-white:        #ffffff;

  /* Typography & Neutral Colors */
  --color-primary:      #4a7c59;   /* Companion site signature sage green */
  --color-primary-light:#5b8d6a;   /* Companion site hover green */
  --color-primary-dark: #3a6347;   /* Companion site deep green */
  --color-heading:      #4a7c59;   /* Playfair Display headings in signature sage green */
  --color-text:         #1c1c1e;   /* Clean charcoal text */
  --color-text-mid:     #4a4a4a;   /* Reassuring subtitle grey from companion site */
  --color-text-muted:   #666666;   /* Subtle muted grey from companion site */
  --color-text-light:   #faf8f5;

  /* Structural Colors */
  --color-border:       #e2ded6;
  --color-border-light: #eceae4;
  --color-footer-bg:    #2d5038;   /* softened forest sage footer (not pitch dark) */
  --color-footer-heading:#ffffff;
  --color-footer-text:  #f0f4f1;
  --color-footer-link:  #d2e2d5;
  --color-footer-phone: #C8963e;   /* gold phone number in footer */

  /* Typography System */
  --font-heading:       'Playfair Display', Georgia, serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-tagline:       'Fuzzy Bubbles', cursive, sans-serif;

  /* Layout Boundaries */
  --max-width:          1360px;
  --max-width-narrow:   940px;
  --max-width-content:  800px;

  /* Border Radii */
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-2xl:         32px;
  --radius-pill:        999px;
  --radius-circle:      50%;

  /* Shadows — tuned to new green RGB (45, 106, 63) */
  --shadow-subtle:      0 2px 10px rgba(45, 106, 63, 0.06);
  --shadow-card:        0 8px 24px rgba(45, 106, 63, 0.09);
  --shadow-hover:       0 16px 40px rgba(45, 106, 63, 0.16);
  --shadow-glass:       0 8px 32px rgba(45, 106, 63, 0.12);

  /* Transitions */
  --ease:               0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring:        0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-slow:          0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Gradients */
  --grad-gold:          linear-gradient(135deg, #dba852 0%, #C8963e 50%, #a87630 100%);
  --grad-gold-hover:    linear-gradient(135deg, #e8bc6a 0%, #d8a44e 50%, #b8862e 100%);
  --grad-green:         linear-gradient(135deg, #3a6347 0%, #4a7c59 50%, #5b8d6a 100%); /* Softened Natural Forest Sage */
  --grad-mesh-hero:     var(--color-secondary, #f5f0e8); /* Warm linen background from companion site */

  /* Glassmorphism */
  --glass-bg:           rgba(255, 255, 255, 0.94);
  --glass-border:       rgba(255, 255, 255, 0.8);
}

/* ===================================================================
   BASE RESET & ACCESSIBILITY
   =================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-green-dark);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Touch Target Minimum (44px x 44px for Mobile Usability) */
button, a {
  touch-action: manipulation;
}

/* Focus styles */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* Typography Base — Exactly matches Companion site font & weight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading, #4a7c59);
  line-height: 1.15;
  font-weight: 600;
  text-transform: none;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); margin-bottom: 0.75rem; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); margin-bottom: 0.6rem; }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1rem; color: var(--color-text-mid); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-green); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--color-green-dark); }

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

/* Layout Utilities — Tightened Section Paddings for Zero Dead Space */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: var(--max-width-narrow); }
.container--content { max-width: var(--max-width-content); }

.section { padding: 3.5rem 0; position: relative; }
.section--sm { padding: 2.25rem 0; }
.section--lg { padding: 4.5rem 0; }

@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
  .section { padding: 2.5rem 0; }
  .section--sm { padding: 1.75rem 0; }
  .section--lg { padding: 3rem 0; }
}

.bg-cream { background-color: var(--color-cream); }
.bg-cream-light { background-color: var(--color-cream-light); }
.bg-white { background-color: var(--color-white); }
.bg-green-dark { background-color: var(--color-green-dark); color: var(--color-text-light); }
.bg-mesh-hero { background: var(--grad-mesh-hero); }
.bg-mesh-green { background: linear-gradient(135deg, #284c34 0%, #3a6347 50%, #4a7c59 100%); }

/* Section Header */
.section-header {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 2rem;
}

.section-header .divider {
  margin: 0.75rem auto 1.25rem;
}

.section-header p {
  margin-left: auto;
  margin-right: auto;
}

/* Component Helpers */
.text-center { text-align: center; }
.text-white { color: var(--color-text-light); }
.text-white h1, .text-white h2, .text-white h3 { color: var(--color-white); }

.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.label--green { color: var(--color-green); }

.divider {
  width: 50px; height: 3px;
  background: var(--grad-gold);
  border-radius: 2px;
  margin: 0.75rem 0 1.25rem;
}
.divider--center { margin: 0.75rem auto 1.25rem; }

.highlight-text {
  color: var(--color-green-dark);
  position: relative;
  display: inline-block;
}

/* Animations with Hardware Acceleration */
.anim {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
  will-change: opacity, transform;
}
.anim.in-view { opacity: 1; transform: translateY(0) translateZ(0); }
.anim--left { transform: translateX(-24px) translateZ(0); }
.anim--left.in-view { transform: translateX(0) translateZ(0); }
.anim--right { transform: translateX(24px) translateZ(0); }
.anim--right.in-view { transform: translateX(0) translateZ(0); }
.anim--scale { transform: scale(0.95) translateZ(0); }
.anim--scale.in-view { transform: scale(1) translateZ(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.15s; }
.delay-3 { transition-delay: 0.2s; }
.delay-4 { transition-delay: 0.25s; }