/*
Theme Name: Rivers Collection Theme
Theme URI: https://rivers-collection.vn
Author: Antigravity
Author URI: https://rivers-collection.vn
Description: Giao diện Landing Page sang trọng, hiện đại cho dự án căn hộ River Collection by An Gia.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rivers-theme
*/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for sticky header */
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #FDFBF7;
  color: #1C1917;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
  background: #C59B68;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A97C50;
}

/* Hero animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

/* Premium Metallic Gold Gradient Button */
.bg-gradient-gold {
  background: linear-gradient(135deg, #CF9E5C 0%, #FDF6E2 25%, #C59B68 50%, #FDF6E2 75%, #A97C50 100%);
  background-size: 200% auto;
  border: 1px solid rgba(169, 124, 80, 0.35);
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(197, 155, 104, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bg-gradient-gold:hover {
  background-position: right center;
  border-color: rgba(169, 124, 80, 0.6);
  box-shadow: 0 6px 20px rgba(197, 155, 104, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Fallback styling for page and post content elements (.prose) */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #1C1917 !important;
  font-weight: 700 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.25 !important;
}

.prose h1 { font-size: 2.25rem !important; }
.prose h2 { font-size: 1.75rem !important; }
.prose h3 { font-size: 1.5rem !important; }
.prose h4 { font-size: 1.25rem !important; }

.prose p {
  margin-bottom: 1.25em !important;
}

.prose a {
  color: #ed1c24 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.prose a:hover {
  color: #c81017 !important;
}

.prose ul {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.25em !important;
  margin-top: 1.25em !important;
}

.prose ol {
  list-style-type: decimal !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.25em !important;
  margin-top: 1.25em !important;
}

.prose li {
  margin-bottom: 0.5em !important;
}

.prose strong,
.prose b {
  font-weight: 700 !important;
  color: #1C1917 !important;
}

.prose em,
.prose i {
  font-style: italic !important;
}

/* Fluent Forms Custom Styling to match Rivers Theme */
.fluentform .ff-el-form-control {
  width: 100% !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(237, 28, 36, 0.2) !important;
  outline: none !important;
  font-size: 0.875rem !important;
  transition: all 0.20s ease-in-out !important;
  background-color: #ffffff !important;
  color: #1C1917 !important;
}

.fluentform .ff-el-form-control:focus {
  border-color: #ed1c24 !important;
  box-shadow: 0 0 0 2px rgba(237, 28, 36, 0.2) !important;
}

.fluentform label,
.fluentform .ff-el-form-label,
.fluentform .ff-el-input-label,
.fluentform .ff-el-input-label label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #44403C !important;
  margin-bottom: 4px !important;
  display: block !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.fluentform .ff-el-group,
.fluentform .ff-form-group {
  margin-bottom: 12px !important;
}

.fluentform button.ff-btn-submit {
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #CF9E5C 0%, #FDF6E2 25%, #C59B68 50%, #FDF6E2 75%, #A97C50 100%) !important;
  background-size: 200% auto !important;
  border: 1px solid rgba(169, 124, 80, 0.35) !important;
  color: #1C1917 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(197, 155, 104, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  cursor: pointer !important;
}

.fluentform button.ff-btn-submit:hover {
  background-position: right center !important;
  border-color: rgba(169, 124, 80, 0.6) !important;
  box-shadow: 0 6px 20px rgba(197, 155, 104, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) !important;
}

.fluentform .ff-message-success {
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 16px !important;
  font-size: 0.875rem !important;
}