/* ================================================
   WEDDING WEBSITE - BASE STYLES
   Shared styles used across all pages
   ================================================ */

/* Google Fonts Import - Must be at the top */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Color Variables */
:root {
  --light-blue: #BFD7ED;
  --medium-blue: #A3BFD9;
  --dark-blue: #2D5D7B;
  --primary-blue: #5c839e;  /* New primary blue color */
  --primary-pink: #E7AB9A;  /* Primary pink color */
  --primary-peach: #ebb0a0; /* Primary peach color */
  --light-gray: #E5E5E5;
  --medium-gray: #CCCCCC;
  --dark-gray: #4F4F4F;
  --off-white: #F8F8F8;
  --white: #FFFFFF;
  
  /* Font families */
  --font-decorative: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', sans-serif;
  --fancy-font: 'Luxurious Script', cursive;
}

/* Base Styles */
html {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--off-white);
  color: var(--dark-gray);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-decorative);
  font-weight: 500;
}

/* Smooth fade transitions for view switches */
.app-fade {
  transition: opacity 250ms ease;
}

.app-fade-out {
  opacity: 0 !important;
}

.app-fade-in {
  opacity: 1 !important;
}

/* Decorative headers */
.title-decorative {
  font-family: var(--fancy-font); /* Same as login screen hero-script-title */
  font-size: 2.5rem;
  font-weight: 400; /* Changed from 500 to match login screen */
  letter-spacing: 1px; /* Changed from 0.5px to match login screen */
  color: #000000;
}

/* Divider */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--medium-blue), transparent);
  margin: 1.5rem auto;
  width: 100%;
}

/* Custom button styles */
.btn-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 1px;
  padding: 10px 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #4a6b80;
  border-color: #4a6b80;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(92, 131, 158, 0.3);
}

.btn-outline-primary {
  color: var(--dark-blue);
  border-color: var(--dark-blue);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 1px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--dark-blue);
  color: white;
  transform: translateY(-2px);
}

/* Form controls */
.form-control {
  border-radius: 0;
  padding: 12px;
  border: 1px solid var(--medium-gray);
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--medium-blue);
  box-shadow: 0 0 0 0.25rem rgba(163, 191, 217, 0.25);
}

.form-control.form-control-lg {
  font-size: 1.2rem;
  padding: 15px;
}

/* Map container styling */
.map-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .map-container {
    height: 400px;
  }
}