/*
Theme Name: Embossed Moments
Theme URI: https://www.embossedmoments.co.za
Description: A child theme for Kadence, customised for Embossed Moments.
Author: Bronwen Hilhorst
Author URI: https://interactive-concepts.co.za/
Template: kadence
Version: 1.0
Text Domain: embossed-moments
*/

:root {
  --font-heading: 'Libre Baskerville', serif;
  --font-body: 'Raleway', sans-serif!important;
  --font-button: 'Playfair Display', serif;

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-md: 1.125rem;
  --font-lg: 1.5rem;
  --font-xl: 2rem;
  --font-xxl: 3rem;
}

@media (min-width: 768px) and (max-width: 980px) {
  :root {
    --font-base: 0.95rem;
    --font-md: 1.05rem;
    --font-lg: 1.25rem;
    --font-xl: 1.75rem;
    --font-xxl: 2.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --font-base: 0.9rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;
    --font-xxl: 2rem;
  }
}

body {
  font-family: var(--font-body) !important;
  font-size: var(--font-base) !important;
}

h1, .entry-content h1, .wp-block-heading h1 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-xxl);
}

h2, .entry-content h2, .wp-block-heading h2 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-xl) !important;
}

h3, .entry-content h3, .wp-block-heading h3 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-lg);
}

h4, .entry-content h4, .wp-block-heading h4 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-md) ;
}

h5, .entry-content h5, .wp-block-heading h5,
h6, .entry-content h6, .wp-block-heading h6 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-sm) ;
}

.entry-content {
  font-family: var(--font-body) !important;
  font-size: var(--font-base) !important;
}

button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--font-button) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
  font-weight: 700 !important;
  color: #0f0e0b !important;
}

/* Grid container */
.custom-post-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin-bottom: 40px;
}

/* Each post */
.post-item {
  background: #f9f9f9;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  flex: 1 1 calc(33.333% - 30px);
  min-width: 300px;
  max-width: calc(33.333% - 30px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.post-item:hover {
  transform: translateY(-4px);
}

/* Thumbnail wrapper and image */
.post-thumbnail {
  width: 100%;
  overflow: hidden;
  margin-bottom: 15px;
}

.post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Post meta and content */
.post-title {
  font-size: 20px;
 margin: 0  0 5px!important;
  color: #222;
  
}

.post-categories {
  font-size: 14px;
  color: #888;
  margin-bottom: 5px!important;
}

.post-date {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.post-excerpt {
  font-size: 15px;
  margin-bottom: 10px;
  flex-grow: 1;
}

.read-more {
  color: #80776b; /* brand highlight color */
  font-weight: bold;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.2s ease;
}

.read-more:hover {
  color: #373531;       /* darker on hover */
  text-decoration: underline;
}


.read-more:hover {
  text-decoration: underline;
}

/* Category filter buttons */
.category-buttons button {
  padding: 8px 15px;
  border: none;
  background: #d7d8d3; /* Inactive background */
  color: #373531;       /* Inactive text */
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
  font-size:16px!important;
}

.category-buttons button.active {
  background: #80776b;  /* Active background */
  color: #ffffff;       /* Active text */
}

.category-buttons button:hover {
  background: #b7b2a6;  /* Hover state */
  color: #0f0e0b;
}


/* Responsive tweak */
@media (max-width: 768px) {
  .post-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

}
/* Base style adjustments if needed */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* Tablet (max-width: 980px) */
@media screen and (max-width: 980px) {
  .category-buttons button {
    font-size: 13px!important;
    padding: 6px 12px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .category-buttons {
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .category-buttons button {
    font-size: 12px!important;
    padding: 4px 10px;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
  }
}

/* Toggle button - only visible on mobile */
.mobile-filter-toggle {
  display: none;
  background-color: #80776b;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* Hide filter buttons by default on mobile */
@media (max-width: 767px) {
  .mobile-filter-toggle {
    display: inline-block;
  }

    .category-buttons {
    display: none !important;
  }

  .category-buttons.visible {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }
}




.entry-content-wrap  {
	padding-bottom:0!important
}

.woocommerce .woocommerce-message{
	display:none!important;
}

.emb-review-link {
  color: #373531;                 
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: bold;
}
.emb-review-link:hover,
.emb-review-link:focus {
  color: #80776B;                  
  text-decoration-thickness: 2px;
}

.emb-review-cta--top{ 
	margin: 0 0 28px;
	text-align:center;
}  

/* Space above/below the My Account screen (WC Blocks + classic) */
body.woocommerce-account .wp-block-woocommerce-my-account,
body.woocommerce-account .wc-block-my-account,
body.woocommerce-account .woocommerce {  /* classic template fallback */
  margin-top: 20px!important;
  margin-bottom: 40px!important;
}

/* My Account form labels */
.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce form label {
  color: #0f0e0b !important;
}

.woocommerce-loop-product__title {
	font-size:18px!important;
}

/* Add space above the product grid (shop & category pages) */
body.post-type-archive-product .products.content-wrap.product-archive,
body.tax-product_cat .products.content-wrap.product-archive,
body.tax-product_tag .products.content-wrap.product-archive {
  padding-top: 60px!important; /* tweak as needed */
}

/* Space under price in product grid (classic loop) */
.woocommerce ul.products li.product .price{
  display: block;
  margin-bottom: 14px!important; /* tweak */
}