/**
 * Smooth Brand Color Overrides for Storefront Theme
 * 
 * This file overrides Storefront's default colors with the Smooth brand palette
 * Colors inspired by a bamboo forest at dawn
 *
 * @package smooth-storefront
 * Color Reference:
 * - Bright Green: #92C120 (Primary actions, accents)
 * - Bamboo Sage: #A8C5A0 (Hover states, secondary)
 * - Natural Earth: #8B7355 (Accents, badges)
 * - Charcoal: #3D4238 (Text, headings)
 * - Bamboo Cream: #F5F0E8 (Backgrounds, cards)
 */

:root {
  /* Smooth Brand Colors */
  --smooth-bright-green: #92C120;
  --smooth-sage: #A8C5A0;
  --smooth-earth: #8B7355;
  --smooth-charcoal: #3D4238;
  --smooth-cream: #F5F0E8;
  --smooth-green-light: #D4E8B8;
  --smooth-text: #2C2C2C;
  --smooth-text-muted: #6B6B6B;
  --smooth-border: #E4E4DC;
  --smooth-white: #FFFFFF;
}

/* ============================================================
   MAIN COLORS - REPLACE STOREFRONT DEFAULTS
   ============================================================ */

/* Header Background */
.site-header {
  background-color: var(--smooth-white) !important;
  color: var(--smooth-text) !important;
  border-bottom: 1px solid var(--smooth-border) !important;
}

/* Text and Links */
body {
  color: var(--smooth-text) !important;
  background-color: var(--smooth-white) !important;
}

body,
button,
input,
textarea {
  color: var(--smooth-text) !important;
}

a {
  color: var(--smooth-bright-green) !important;
}

a:hover,
a:focus {
  color: var(--smooth-sage) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--smooth-charcoal) !important;
}

/* Footer */
.site-footer {
  background-color: var(--smooth-charcoal) !important;
  color: #c8ddd2 !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: var(--smooth-white) !important;
}

.site-footer a {
  color: #a8c4b5 !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  color: var(--smooth-white) !important;
  text-decoration: underline !important;
}

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

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.added_to_cart,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
  background-color: var(--smooth-bright-green) !important;
  border-color: var(--smooth-bright-green) !important;
  color: var(--smooth-white) !important;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.added_to_cart:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
  background-color: var(--smooth-sage) !important;
  border-color: var(--smooth-sage) !important;
  color: var(--smooth-white) !important;
}

button.cta,
button.alt,
input[type="button"].cta,
input[type="button"].alt,
input[type="reset"].cta,
input[type="reset"].alt,
input[type="submit"].cta,
input[type="submit"].alt,
.button.cta,
.button.alt,
.wp-block-button__link.cta,
.wp-block-button__link.alt,
.added_to_cart.cta,
.added_to_cart.alt {
  background-color: var(--smooth-charcoal) !important;
  border-color: var(--smooth-charcoal) !important;
}

button.cta:hover,
button.alt:hover,
input[type="button"].cta:hover,
input[type="button"].alt:hover,
input[type="reset"].cta:hover,
input[type="reset"].alt:hover,
input[type="submit"].cta:hover,
input[type="submit"].alt:hover,
.button.cta:hover,
.button.alt:hover,
.wp-block-button__link.cta:hover,
.wp-block-button__link.alt:hover,
.added_to_cart.cta:hover,
.added_to_cart.alt:hover {
  background-color: #4a5244 !important;
  border-color: #4a5244 !important;
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
  background-color: var(--smooth-cream) !important;
  color: var(--smooth-text) !important;
  border: 1px solid var(--smooth-border) !important;
  border-radius: 4px !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus {
  background-color: #f9f7f3 !important;
  border-color: var(--smooth-bright-green) !important;
  box-shadow: 0 0 0 3px rgba(146, 193, 32, 0.12) !important;
  outline: none !important;
}

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

.main-navigation ul li a:hover,
.main-navigation ul li.focus > a {
  color: var(--smooth-bright-green) !important;
  background-color: var(--smooth-green-light) !important;
}

.main-navigation ul li.current-menu-item > a {
  color: var(--smooth-bright-green) !important;
  font-weight: 600 !important;
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li.focus {
  background-color: var(--smooth-cream) !important;
  color: var(--smooth-bright-green) !important;
}

.secondary-navigation .menu a:hover {
  color: var(--smooth-bright-green) !important;
  text-decoration: underline !important;
}

/* Mobile menu toggle */
button.menu-toggle {
  color: var(--smooth-text) !important;
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
  background-color: var(--smooth-charcoal) !important;
}

/* ============================================================
   PAGINATION & LINKS
   ============================================================ */

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  background-color: var(--smooth-cream) !important;
  color: var(--smooth-text) !important;
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
  background-color: var(--smooth-bright-green) !important;
  color: var(--smooth-white) !important;
  border-color: var(--smooth-bright-green) !important;
}

.pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
}

/* ============================================================
   WIDGETS
   ============================================================ */

.widget-title,
.widgettitle {
  color: var(--smooth-charcoal) !important;
  border-bottom-color: var(--smooth-border) !important;
}

.widget a {
  color: var(--smooth-bright-green) !important;
  font-weight: 600 !important;
}

.widget a:hover {
  color: var(--smooth-sage) !important;
}

/* ============================================================
   PRODUCT SPECIFIC (WooCommerce)
   ============================================================ */

/* Product cards/items */
.products li.product {
  border-color: var(--smooth-border) !important;
}

.products li.product:hover {
  box-shadow: 0 10px 30px rgba(146, 193, 32, 0.12) !important;
}

/* Product title */
.products li.product .woo-loop-product__title {
  color: var(--smooth-charcoal) !important;
}

.products li.product .woo-loop-product__title:hover {
  color: var(--smooth-bright-green) !important;
}

/* Star ratings */
.star-rating span::before {
  color: var(--smooth-bright-green) !important;
}

/* Price */
.amount {
  color: var(--smooth-text) !important;
  font-weight: 600 !important;
}

del .amount {
  color: var(--smooth-text-muted) !important;
  text-decoration: line-through !important;
}

/* Add to cart button (WooCommerce) */
.product-type-simple > a.button,
.product-type-variable > a.button,
.product-type-grouped > a.button,
.product-type-external > a.button {
  background-color: var(--smooth-bright-green) !important;
  color: var(--smooth-white) !important;
  border-color: var(--smooth-bright-green) !important;
}

.product-type-simple > a.button:hover,
.product-type-variable > a.button:hover,
.product-type-grouped > a.button:hover,
.product-type-external > a.button:hover {
  background-color: var(--smooth-sage) !important;
  border-color: var(--smooth-sage) !important;
  color: var(--smooth-white) !important;
}

.single-product .product_meta {
  border-top-color: var(--smooth-border) !important;
  border-bottom-color: var(--smooth-border) !important;
}

/* Cart page */
table.shop_table {
  border-color: var(--smooth-border) !important;
}

table.shop_table th {
  background-color: var(--smooth-cream) !important;
  color: var(--smooth-text) !important;
  border-bottom-color: var(--smooth-border) !important;
}

table.shop_table td {
  border-bottom-color: var(--smooth-border) !important;
}

/* Checkout */
.woocommerce-checkout #payment {
  background-color: var(--smooth-cream) !important;
  border-color: var(--smooth-border) !important;
}

.woocommerce-notice,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-left-color: var(--smooth-bright-green) !important;
}

.woocommerce-message {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
}

.woocommerce-error {
  background-color: #fef2f2 !important;
  color: #c0392b !important;
  border-left-color: #c0392b !important;
}

/* ============================================================
   BLOCKS
   ============================================================ */

.wp-block-button__link {
  background-color: var(--smooth-bright-green) !important;
  color: var(--smooth-white) !important;
}

.wp-block-button__link:hover {
  background-color: var(--smooth-sage) !important;
  color: var(--smooth-white) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--smooth-bright-green) !important;
  border-color: var(--smooth-bright-green) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
}

/* ============================================================
   ENTRY & POST STYLING
   ============================================================ */

.hentry {
  border-color: var(--smooth-border) !important;
}

.hentry .entry-header {
  border-bottom-color: var(--smooth-border) !important;
}

.hentry .entry-header .posted-on a,
.hentry .entry-header .post-author a,
.hentry .entry-header .post-comments a,
.hentry .entry-header .byline a {
  color: var(--smooth-bright-green) !important;
  font-weight: 600 !important;
}

.hentry .entry-header .posted-on a:hover,
.hentry .entry-header .post-author a:hover,
.hentry .entry-header .post-comments a:hover,
.hentry .entry-header .byline a:hover {
  color: var(--smooth-sage) !important;
}

.hentry .entry-content a {
  color: var(--smooth-bright-green) !important;
  text-decoration: underline !important;
}

.hentry .entry-content a:hover {
  color: var(--smooth-sage) !important;
  text-decoration: none !important;
}

.hentry .entry-taxonomy {
  border-top-color: var(--smooth-border) !important;
}

.cat-links a,
.tags-links a {
  color: var(--smooth-bright-green) !important;
  font-weight: 600 !important;
}

.cat-links a:hover,
.tags-links a:hover {
  color: var(--smooth-sage) !important;
}

/* ============================================================
   COMMENTS
   ============================================================ */

#comments .comments-title {
  border-bottom-color: var(--smooth-border) !important;
  color: var(--smooth-charcoal) !important;
}

#comments .comment-list .comment-content .comment-text {
  background-color: var(--smooth-cream) !important;
  border-color: var(--smooth-border) !important;
}

#respond {
  background-color: var(--smooth-cream) !important;
}

#respond .comment-form-author input,
#respond .comment-form-email input,
#respond .comment-form-url input {
  background-color: var(--smooth-white) !important;
  border-color: var(--smooth-border) !important;
}

/* ============================================================
   BREADCRUMBS & OTHER ELEMENTS
   ============================================================ */

.woocommerce-breadcrumb a {
  color: var(--smooth-bright-green) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--smooth-sage) !important;
  text-decoration: underline !important;
}

/* Product filters */
.woocommerce-widget-layered-nav-list__item--active a {
  color: var(--smooth-bright-green) !important;
  font-weight: 600 !important;
}

/* ============================================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================================ */

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--smooth-bright-green) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   SELECTION HIGHLIGHT
   ============================================================ */

::selection {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
}

::-moz-selection {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
}

/* ============================================================
   SMOOTH BRAND HIGHLIGHTS & ACCENTS
   ============================================================ */

mark,
ins {
  background-color: var(--smooth-green-light) !important;
  color: var(--smooth-charcoal) !important;
  font-weight: 600 !important;
}

hr {
  border-color: var(--smooth-border) !important;
  background-color: var(--smooth-border) !important;
}

/* Blockquote */
blockquote {
  border-left-color: var(--smooth-bright-green) !important;
  color: var(--smooth-text-muted) !important;
}

/* Code blocks */
pre {
  background-color: var(--smooth-cream) !important;
  border: 1px solid var(--smooth-border) !important;
  color: var(--smooth-text) !important;
}

code,
kbd,
tt,
var {
  background-color: var(--smooth-cream) !important;
  color: var(--smooth-earth) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
  .site-header {
    background-color: var(--smooth-white) !important;
  }
  
  button.menu-toggle {
    background-color: transparent !important;
    border-color: var(--smooth-border) !important;
  }
  
  .main-navigation.toggled {
    background-color: var(--smooth-white) !important;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  a {
    color: var(--smooth-bright-green) !important;
  }
  
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .button {
    background-color: var(--smooth-bright-green) !important;
    color: var(--smooth-white) !important;
  }
}