:root {
  /* --- BASE PALETTE COLORS --- */
  --color-dusty-blue: #9eb9c5;  /* Main background/base color of the image */
  --color-pale-pink: #e4c8d4;   /* Lightest pink for highlights/accents */
  --color-muted-rose: #b58d9e;  /* Deepest rose/mauve for strong accents/buttons */
  --color-off-white: #f7f7f7;   /* Brightest white from small florals */
  --color-taupe-green: #9e9a93; /* Subtle gray-green from the leaves/vines */
  --color-danger: #ff0000;
  --unleash-pink: #F5DAC9;
  /* --- GENERAL WEBSITE THEME --- */
  
  /* Backgrounds */
  --bg-primary: var(--color-off-white);      /* Main site background (cleanest and brightest) */
  --bg-secondary: var(--color-dusty-blue);   /* Secondary background (e.g., sections, headers) */
  --bg-card: #f3f3f3;                       /* Slightly off-white for cards, contrasting with main background */
  --bg-primary-10: rgba(60, 79, 87, 0.1); 

  /* Text & Headers */
  --text-primary: #3c4f57;                  /* Dark, deep blue-gray for body text (legible) */
  --text-secondary: var(--color-taupe-green);/* Muted text for captions or metadata */
  
  --header-h1: var(--color-muted-rose);      /* Strongest color for H1, matching the large roses */
  --header-h2: var(--text-primary);          /* Dark blue-gray for legibility */
  
  /* Borders, Lines & Shadows */
  --border-main: var(--color-pale-pink);     /* Light, soft border for forms, dividers */
  --border-form-focus: var(--color-muted-rose); /* Clear focus border */
  --shadow-subtle: rgba(158, 185, 197, 0.3); /* Soft shadow using the dusty blue tone */
  
  /* --- BUTTONS & INTERACTIVE ELEMENTS --- */
  
  /* Primary Button (Use the strong rose color) */
  --btn-bg: var(--color-muted-rose);
  --btn-text: var(--color-off-white);
  --btn-hover-bg: #987889;                   /* Slightly darker rose for hover state */
  
  /* Secondary Button (Use the pale pink or dusty blue) */
  --btn-secondary-bg: var(--color-pale-pink);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-hover-bg: #e1b8c8;
}

  
  
  body{ font-family:'Inter',sans-serif; overflow-x:hidden; }
  .container{ max-width:1200px; margin:0 auto; }
  
  /* Faster reveal + smaller lift */
  .fade-in-up{ opacity:0; transform:translateY(12px); transition:opacity .15s ease-out, transform .15s ease-out; }
  .fade-in-up.is-visible{ opacity:1; transform:translateY(0); }
  
  @media (prefers-reduced-motion:reduce){
    .fade-in-up{ transition:none; transform:none; opacity:1; }
  }
  
  /* Modal */
  .modal{ display:none; position:fixed; z-index:100; inset:0; width:100%; height:100%; overflow:auto;
    background:rgba(0,0,0,.4); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    align-items:center; justify-content:center; }
  .modal-content{ background:#fff; margin:15% auto; padding:20px; border-radius:1.5rem; border:2px solid var(--accent);
    width:80%; max-width:420px; text-align:center; animation:slide-in .3s forwards; }
  @keyframes slide-in{ from{ transform:translateY(-50px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
  .close-button{ color:#aaa; float:right; font-size:28px; font-weight:700; }
  .close-button:hover,.close-button:focus{ color:#000; text-decoration:none; cursor:pointer; }
  
  /* Small helpers */
  .badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:600; }
  
  /* Header social icons */
  .social-icon-header{ display:inline-flex; align-items:center; justify-content:center;
    transition: transform .25s ease, filter .25s ease, color .3s ease; }
  .social-icon-header:hover{ transform:translateY(-3px) scale(1.1);
    filter: drop-shadow(0 0 6px rgba(184,134,11,.5)); }
  
  /* Footer social hover flair */
  .social-link svg{ transition: transform .3s ease, filter .3s ease; }
  .social-link:hover svg{ transform: translateY(-4px) scale(1.15);
    filter: drop-shadow(0 0 6px rgba(184,134,11,.6)); }
    #lightbox:not(.hidden){ display:grid; place-items:center; }
  

    .hero-container {
      background-image: url('./assets/banner.png');
      background-repeat: no-repeat;
      background-position: center;
      
      /* 1. STRETCH TO FIT: 
         This ensures the image always reaches the corners, 
         even if the text makes the box taller. 
         (Note: This will vertically stretch the flowers if the text is very long) */
      background-size: 100% 100%; 
  
      /* 2. REMOVE FIXED HEIGHT: 
         Use min-height instead. This sets a "starting" size, 
         but allows the box to grow if text overflows. */
      height: auto;        
      min-height: 50vh;    
  
      /* 3. ADD PADDING: 
         This prevents your text/button from hitting the very edge 
         of the image and forces the container to expand. */
      padding: 4rem 2rem;  
      
      /* 4. WIDTH: 
         Keep width responsive */
      width: 100%;
  
      /* Optional: Center the text/button inside */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  /* -------------------------------------- */
  /* MEDIA QUERY FOR SMALL SCREENS (< 650px) */
  /* -------------------------------------- */
  @media (max-width: 649px) {
    .hero-container {
        /* You only need to override what changes here. 
           Usually, on mobile, you might want less padding or height. */
        min-height: 40vh; 
        padding: 2rem 1rem;
        
        /* If the text is really long on mobile, you might want to switch 
           sizing to avoid extreme distortion: */
        /* background-size: cover; */ 
    }
  }
.button-primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}
.button-primary:hover {
  background-color: var(--btn-hover-bg);
}
body {
  background-color: #ffffff;
}

.button-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}
.button-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
}
.header-h2 {
  color: var(--header-h2)
}
.header-h1 {
  color: var(--header-h1)
}