/* Brand Color Palette - Simplified Harmonious Blend */

:root {
  /* Primary Brand Color */
  --brand-teal: #2A9D8F; /* Deep Teal - sophisticated and calming */
  
  /* Secondary Accent Color */
  --brand-terracotta: #F4A261; /* Terracotta - warm and earthy */
  
  /* Neutral Foundation */
  --brand-charcoal: #264653; /* Deep Charcoal - rich primary text */
  --brand-medium-gray: #6B7280; /* Medium Gray - secondary text */
  --brand-light-gray: #F8F9FA; /* Light Gray - backgrounds */
  --brand-white: #FFFFFF; /* Pure White - main background */
  
  /* Override Bootstrap variables */
  --bs-primary: var(--brand-teal);
  --bs-primary-rgb: 42, 157, 143;
  
  --bs-secondary: var(--brand-terracotta);
  --bs-secondary-rgb: 244, 162, 97;
  
  --bs-dark: var(--brand-charcoal);
  --bs-dark-rgb: 38, 70, 83;
  
  --bs-light: var(--brand-light-gray);
  --bs-light-rgb: 248, 249, 250;
  
  --bs-body-color: var(--brand-charcoal);
  --bs-body-color-rgb: 38, 70, 83;
  
  --bs-body-bg: var(--brand-white);
  --bs-body-bg-rgb: 255, 255, 255;
  
  --bs-heading-color: var(--brand-charcoal);
  
  --bs-link-color: var(--brand-teal);
  --bs-link-color-rgb: 42, 157, 143;
  
  --bs-link-hover-color: #218478;
  --bs-link-hover-color-rgb: 33, 132, 120;
}

/* Element-specific styles */

/* Primary Buttons (Main CTAs) */
.btn-primary {
  background-color: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: var(--brand-white) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #218478 !important;
  border-color: #218478 !important;
}

/* Secondary Buttons (Supporting actions) */
.btn-secondary {
  background-color: var(--brand-terracotta) !important;
  border-color: var(--brand-terracotta) !important;
  color: var(--brand-white) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #e18f52 !important;
  border-color: #e18f52 !important;
}

/* Tertiary Buttons - now use the same as secondary for consistency */
.btn-tertiary {
  background-color: var(--brand-terracotta) !important;
  border-color: var(--brand-terracotta) !important;
  color: var(--brand-white) !important;
}

.btn-tertiary:hover, .btn-tertiary:focus {
  background-color: #e18f52 !important;
  border-color: #e18f52 !important;
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--brand-teal) !important;
  color: var(--brand-white) !important;
}

.btn-outline-secondary {
  color: var(--brand-terracotta) !important;
  border-color: var(--brand-terracotta) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--brand-terracotta) !important;
  color: var(--brand-white) !important;
}

/* Dark buttons */
.btn-dark {
  background-color: var(--brand-charcoal) !important;
  border-color: var(--brand-charcoal) !important;
}

/* Text colors */
.text-primary {
  color: var(--brand-teal) !important;
}

.text-secondary {
  color: var(--brand-terracotta) !important;
}

.text-tertiary {
  color: var(--brand-terracotta) !important; /* Same as secondary now */
}

.text-muted, .text-body-secondary {
  color: var(--brand-medium-gray) !important;
}

.text-dark {
  color: var(--brand-charcoal) !important;
}

/* Background colors */
.bg-primary {
  background-color: var(--brand-teal) !important;
}

.bg-secondary {
  background-color: var(--brand-terracotta) !important;
}

.bg-tertiary {
  background-color: var(--brand-terracotta) !important; /* Same as secondary now */
}

.bg-dark {
  background-color: var(--brand-charcoal) !important;
}

.bg-light {
  background-color: var(--brand-light-gray) !important;
}

/* Brand-specific classes */
.bg-brand {
  background-color: var(--brand-teal) !important;
}

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

/* Icon pills with brand color */
.icon-pill {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Soft background variants */
.btn-primary-soft {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--brand-teal) !important;
  border-color: transparent !important;
}

.btn-primary-soft:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

.btn-secondary-soft {
  background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
  color: var(--brand-terracotta) !important;
  border-color: transparent !important;
}

.btn-secondary-soft:hover {
  background-color: rgba(var(--bs-secondary-rgb), 0.2) !important;
}

/* Badges */
.badge.bg-primary {
  background-color: var(--brand-teal) !important;
}

.badge.bg-secondary, .badge.bg-warning {
  background-color: var(--brand-terracotta) !important;
  color: var(--brand-white) !important;
}

.badge.bg-tertiary {
  background-color: var(--brand-terracotta) !important;
  color: var(--brand-white) !important;
}

/* Navigation styles */
.navbar-dark .navbar-nav .nav-link {
  color: var(--brand-white) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--brand-terracotta) !important;
}

/* Footer links */
footer .nav-link {
  color: var(--brand-white) !important;
}

footer .nav-link:hover {
  color: var(--brand-terracotta) !important;
}

/* Card hover effects */
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Package cards */
.pkg-overlay {
  background: linear-gradient(transparent, rgba(38, 70, 83, 0.8));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: var(--brand-white);
}

.pkg-price {
  background-color: var(--brand-terracotta);
  color: var(--brand-white);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Hero section overlay */
.hero-section .bg-overlay {
  background-color: rgba(38, 70, 83, 0.5) !important;
}

/* Responsive Design Enhancements */

/* Mobile Navigation */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--brand-charcoal);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
  }
  
  .navbar-nav .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
  }
  
  .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* Mobile Form Elements */
@media (max-width: 767.98px) {
  .form-control, .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.75rem;
  }
  
  .btn {
    padding: 0.75rem 1rem;
  }
  
  .dropdown-menu {
    width: 100%;
  }
  
  .offcanvas {
    width: 100% !important;
  }
}

/* Responsive Spacing */
@media (max-width: 767.98px) {
  .container, .container-fluid {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
  
  .col, [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .py-md-8, .py-8 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  h1, .h1 {
    font-size: 2rem;
  }
  
  h2, .h2 {
    font-size: 1.75rem;
  }
}

/* Touch-friendly Elements */
@media (max-width: 767.98px) {
  .btn, .nav-link, .card-link, a.stretched-link {
    min-height: 44px; /* Apple's recommended touch target size */
    display: inline-flex;
    align-items: center;
  }
  
  .icon-pill {
    width: 44px;
    height: 44px;
  }
}