/**
 * Gotas de Sabiduría - Universal Block Styles Fallback
 * Provides consistent CSS rules for custom theme colors, fonts, and smooth spacing.
 */

/* Core Brand Colors */
.bg-sand {
  background-color: #F7F3EE !important;
}
.bg-sand\/30, .bg-sand-30 {
  background-color: rgba(247, 243, 238, 0.4) !important;
}
.bg-jungle {
  background-color: #2D4636 !important;
}
.bg-clay {
  background-color: #C06C4D !important;
}
.bg-[#E2ECE5] {
  background-color: #E2ECE5 !important;
}

/* Text Colors */
.text-jungle {
  color: #2D4636 !important;
}
.text-clay {
  color: #C06C4D !important;
}
.text-moss {
  color: #4A5D4E !important;
}
.text-moss\/80 {
  color: rgba(74, 93, 78, 0.8) !important;
}
.text-sand {
  color: #F7F3EE !important;
}

/* Borders */
.border-jungle {
  border-color: #2D4636 !important;
}
.border-clay {
  border-color: #C06C4D !important;
}
.border-clay\/10 {
  border-color: rgba(192, 108, 77, 0.1) !important;
}
.border-jungle\/10 {
  border-color: rgba(45, 70, 54, 0.1) !important;
}

/* Typography fallbacks */
.font-serif {
  font-family: 'Playfair Display', Georgia, Cambria, "Times New Roman", Times, serif !important;
}
.font-sans {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Gutenberg Editor-specific iframe adjustments */
.wp-block-gotas-de-sabiduria-header,
.wp-block-gotas-de-sabiduria-hero,
.wp-block-gotas-de-sabiduria-menu-bar,
.wp-block-gotas-de-sabiduria-section,
.wp-block-gotas-de-sabiduria-features-grid,
.wp-block-gotas-de-sabiduria-importance,
.wp-block-gotas-de-sabiduria-apoya,
.wp-block-gotas-de-sabiduria-footer {
  display: block;
  width: 100%;
}

/* GDS Menu Bar Interactive Transitions and Hover Animations */
.gds-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-radius: 16px !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.gds-nav-item:hover {
  background-color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(45, 70, 54, 0.05), 0 8px 10px -6px rgba(45, 70, 54, 0.05) !important;
}

/* Icon Animation & Transform scale/translation matching React */
.gds-nav-icon {
  width: 32px !important;
  height: 32px !important;
  background-color: #2D4636 !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gds-nav-item:hover .gds-nav-icon {
  background-color: #C06C4D !important;
  transform: scale(1.1) translateY(-4px) !important;
}

/* Text transitions to clay/orange on hover */
.gds-nav-title {
  font-family: 'Playfair Display', Georgia, Cambria, "Times New Roman", Times, serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #2D4636 !important;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.gds-nav-item:hover .gds-nav-title {
  color: #C06C4D !important;
}

.gds-nav-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: rgba(74, 93, 78, 0.6) !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1 !important;
}

/* GDS Sticky Menu Bar alignments */
.gds-sticky-menu-bar {
  position: sticky !important;
  top: 56.67px !important; /* Align flush with the top sticky navigation of 56.67px */
  z-index: 40 !important;
}

/* WordPress Admin Bar offsets for sticky elements when logged in */
.admin-bar .sticky.top-0 {
  top: 32px !important;
}
.admin-bar .gds-sticky-menu-bar {
  top: 88.67px !important; /* 56.67px + 32px admin bar height */
}

@media screen and (max-width: 782px) {
  .admin-bar .sticky.top-0 {
    top: 46px !important; /* Admin bar is 46px high on mobile */
  }
  .admin-bar .gds-sticky-menu-bar {
    top: 102.67px !important; /* 56.67px + 46px admin bar height on mobile */
  }
}