/* ==================================================
   Soft and Firmament Theme
   For Graced Living & Events - Gender neutral, calming
   ================================================== */

/* Primary Palette - Soft firmament colors */
:root {
  --primary: #7BA7BC;
  --primary-light: #B8D4E3;
  --primary-dark: #5A8FA8;
  --secondary: #F5E8E0;
  --accent: #D4A574;
  
  /* Neutrals - Soft and warm */
  --white: #FFFFFF;
  --off-white: #FAFAF8;
  --cream: #F8F5F2;
  --light-gray: #E8E4E1;
  --medium-gray: #C5C1BD;
  --dark-gray: #6B6560;
  --charcoal: #3D3835;
  --black: #2A2623;
  
  /* Gradients for firmament effect */
  --gradient-sky: linear-gradient(135deg, #E8F4F8 0%, #F8F5F2 100%);
  --gradient-sunset: linear-gradient(135deg, #F5E8E0 0%, #E8F4F8 100%);
  --gradient-warm: linear-gradient(180deg, #FFFFFF 0%, #F8F5F2 50%, #F5E8E0 100%);
}

/* Color assignments for CSS variables */
* {
  --main-color: var(--primary);
  --main-color-light: var(--primary-light);
  --main-color-dark: var(--primary-dark);
  --accent-color: var(--accent);
  --sec-bg: var(--secondary);
}

/* Background colors */
body {
  background: var(--off-white);
  color: var(--charcoal);
}

/* Light background sections */
.de_light,
.de_light .text-dark {
  color: var(--charcoal);
}

/* Header styles */
.header.background-light,
.header.light,
.header.transparent-light {
  background: var(--white);
}

.header-fullwidth {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--light-gray);
}

/* Navigation */
#mainmenu > li > a,
#mo-menu > li > a {
  color: var(--charcoal);
  font-weight: 500;
}

#mainmenu > li > a:hover,
#mainmenu > li.active > a,
#mo-menu > li > a:hover {
  color: var(--primary);
}

/* Dropdown menus */
#mainmenu ul,
#mo-menu ul {
  background: var(--white);
  border: 1px solid var(--light-gray);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Buttons */
.btn-main {
  background: var(--primary);
  color: var(--white);
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-main:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(123, 167, 188, 0.3);
}

.btn-line {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-line:hover {
  background: var(--primary);
  color: var(--white);
}

/* Section backgrounds */
.section-bg-light {
  background: var(--cream);
}

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

/* Cards and boxes */
.service-box,
.room-box,
.event-box,
.property-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.service-box:hover,
.room-box:hover,
.event-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--charcoal);
  font-weight: 600;
}

.text-primary {
  color: var(--primary) !important;
}

.text-accent {
  color: var(--accent) !important;
}

/* Soft borders and dividers */
.de_divider,
hr {
  border-color: var(--light-gray);
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--light-gray);
  background: var(--white);
  color: var(--charcoal);
  border-radius: 8px;
  padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 167, 188, 0.1);
}

/* Social icons */
.de_social-icons a {
  color: var(--dark-gray);
  transition: color 0.3s ease;
}

.de_social-icons a:hover {
  color: var(--primary);
}

/* Footer */
footer {
  background: var(--charcoal);
  color: var(--white);
}

/* Mobile menu */
#menu-overlay {
  background: var(--white);
}

#mo-menu > li > a {
  color: var(--charcoal);
}

/* Slider */
#slidecaption {
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.slider-text h2 {
  color: var(--white);
  font-weight: 700;
}

/* Decorative elements */
.de_rotate {
  color: var(--primary-light);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-fullwidth {
    background: var(--white);
  }
}