/*
 Theme Name:   Our Happy Tree Child
 Theme URI:    
 Description:  Child theme for Our Happy Tree LLC
 Author:       Our Happy Tree LLC
 Template:     astra
 Version:      1.0.0
*/

/* =============================================
   BRAND COLORS
   Orange:  #F47920
   Teal:    #29ABE2
   Change these hex codes here if brand colors ever update
   ============================================= */

:root {
  --color-orange: #F47920;
  --color-teal:   #29ABE2;
  --color-teal-light: #E8F7FC;
  --color-white:  #FFFFFF;
  --color-text:   #333333;
}

/* =============================================
   BUTTONS
   ============================================= */

.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"],
.wp-block-button__link {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  border-radius: 30px !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.2s ease;
}

.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
input[type="submit"]:hover {
  background-color: var(--color-teal) !important;
  color: var(--color-white) !important;
}

/* =============================================
   LINKS
   ============================================= */

a {
  color: var(--color-teal);
}

a:hover {
  color: var(--color-orange);
}

/* =============================================
   SITE HEADER
   ============================================= */

.site-header,
#masthead {
  border-bottom: 3px solid var(--color-orange);
}

/* =============================================
   NAVIGATION MENU
   ============================================= */

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-orange) !important;
}

/* =============================================
   HEADINGS
   ============================================= */

h1, h2, h3 {
  color: var(--color-teal);
}

h4, h5, h6 {
  color: var(--color-orange);
}

/* =============================================
   WOOCOMMERCE - PRODUCT PAGES
   ============================================= */

.woocommerce .price,
.woocommerce ins .amount {
  color: var(--color-orange) !important;
  font-weight: 700;
}

.woocommerce .star-rating span::before {
  color: var(--color-orange);
}

/* =============================================
   FOOTER
   ============================================= */

.site-footer {
  background-color: var(--color-teal) !important;
  color: var(--color-white) !important;
  border-top: 4px solid var(--color-orange);
}

.site-footer a {
  color: var(--color-white) !important;
}

.site-footer a:hover {
  color: var(--color-orange) !important;
}

/* =============================================
   HIGHLIGHT SECTION (use class="oht-highlight" in Elementor)
   ============================================= */

.oht-highlight {
  background-color: var(--color-teal-light);
  border-left: 4px solid var(--color-teal);
  padding: 20px 24px;
  border-radius: 8px;
}