/*
Theme Name:        PinVerse Child
Theme URI:         https://pinverse.io
Description:       A Kadence Child Theme built for PinVerse — a Pinterest-optimized lifestyle & recipe blog. Features a warm orange brand palette, clean airy aesthetic, category silo architecture (Cook/Craft/Decorate/Entertain), diet-filter navigation, and WooCommerce-ready shop section.
Author:            PinVerse
Author URI:        https://pinverse.io
Template:          kadence
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:       pinverse-child
Tags:              lifestyle, blog, food, custom-colors, custom-logo, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
*/

/* =====================================================
   PINVERSE CHILD THEME — CUSTOM STYLES

   Overrides Kadence parent theme defaults.
   Parent theme (Kadence) must be installed and active.

   Required plugins (FREE):
   - Kadence Blocks (kadence-blocks)

   Optional plugins for full feature set:
   - WooCommerce — for shop/digital product sales
   - Simple Social Icons — for footer social widgets
   ===================================================== */

/* =====================================================
   CSS CUSTOM PROPERTIES — BRAND DESIGN TOKENS
   ===================================================== */
:root {
  /* === Brand Colors === */
  --pv-primary:         #ED8F0C;
  --pv-primary-light:   #F5B84D;
  --pv-primary-pale:    #FFF3DC;
  --pv-primary-hover:   #D17A00;
  --pv-peach:           #FFE0A3;
  --pv-peach-light:     #FFF8EC;
  --pv-cream:           #FFFDF8;
  --pv-sage:            #8CA9A1;
  --pv-sage-light:      #B5CEC9;
  --pv-topbar-bg:       #ED8F0C;

  /* === Category Accent Colors === */
  --pv-cook:            #B07AB0;
  --pv-craft:           #ED8F0C;
  --pv-decorate:        #E8A87C;
  --pv-entertain:       #F2C88A;

  /* === Neutral Palette === */
  --pv-white:           #FFFFFF;
  --pv-bg:              #FFFDF8;
  --pv-text:            #2C2C2C;
  --pv-text-muted:      #717171;
  --pv-text-light:      #999999;
  --pv-border:          #EDE8E5;
  --pv-divider:         #F0E8E5;

  /* === Typography === */
  --pv-font-display:    'Playfair Display', Georgia, serif;
  --pv-font-heading:    'Cormorant Garamond', Georgia, serif;
  --pv-font-body:       'Work Sans', 'Helvetica Neue', sans-serif;
  --pv-font-logo:       'Montserrat', 'Arial Black', sans-serif;

  /* === Spacing Scale (4px base) === */
  --pv-space-1:   0.25rem;
  --pv-space-2:   0.5rem;
  --pv-space-3:   0.75rem;
  --pv-space-4:   1rem;
  --pv-space-5:   1.25rem;
  --pv-space-6:   1.5rem;
  --pv-space-8:   2rem;
  --pv-space-10:  2.5rem;
  --pv-space-12:  3rem;
  --pv-space-16:  4rem;
  --pv-space-20:  5rem;

  /* === Border Radius === */
  --pv-radius-sm:   0.375rem;
  --pv-radius-md:   0.5rem;
  --pv-radius-lg:   0.75rem;
  --pv-radius-xl:   1.25rem;
  --pv-radius-full: 9999px;

  /* === Shadows === */
  --pv-shadow-sm:  0 1px 3px rgba(120, 80, 20, 0.07);
  --pv-shadow-md:  0 4px 16px rgba(120, 80, 20, 0.09);
  --pv-shadow-lg:  0 12px 40px rgba(120, 80, 20, 0.13);

  /* === Transitions === */
  --pv-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Layout === */
  --pv-max-width:     1200px;
  --pv-content-width: 960px;
  --pv-narrow-width:  680px;
}

/* =====================================================
   GOOGLE FONTS
   (Backup @import — wp_enqueue_style in functions.php
   is the primary loader and is preferred for performance)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Work+Sans:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

/* =====================================================
   GLOBAL BODY & TYPOGRAPHY
   ===================================================== */
body {
  background-color: var(--pv-bg);
  font-family: var(--pv-font-body);
  color: var(--pv-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pv-font-heading);
  color: var(--pv-text);
  line-height: 1.2;
}

.entry-title,
.wp-block-heading.is-style-display,
.pv-section-title {
  font-family: var(--pv-font-display);
}

p, li, blockquote {
  font-family: var(--pv-font-body);
  color: var(--pv-text-muted);
  line-height: 1.7;
}

a {
  color: var(--pv-primary);
  transition: color var(--pv-transition);
}

a:hover {
  color: var(--pv-primary-hover);
}

/* =====================================================
   TOP ANNOUNCEMENT BAR
   ===================================================== */
.header-top-bar,
.above-header-section,
.site-above-header-wrap {
  background-color: var(--pv-topbar-bg) !important;
  color: #fff !important;
  font-size: 0.8125rem;
  font-family: var(--pv-font-body);
  letter-spacing: 0.02em;
}

.site-above-header-wrap a,
.above-header-section a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================
   SITE HEADER
   ===================================================== */
.site-header,
.site-header-wrap,
.site-main-header-wrap {
  background-color: var(--pv-white) !important;
  border-bottom: 1px solid var(--pv-border) !important;
}

.site-title,
.site-branding__title {
  font-family: var(--pv-font-logo) !important;
  font-weight: 800 !important;
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pv-text) !important;
}

.main-navigation a,
.header-navigation a,
.nav--primary a,
.primary-menu-container a {
  font-family: var(--pv-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--pv-text) !important;
  transition: color var(--pv-transition) !important;
}

.main-navigation a:hover,
.header-navigation a:hover,
.nav--primary a:hover,
.primary-menu-container a:hover,
.main-navigation .current-menu-item > a {
  color: var(--pv-primary) !important;
}

/* =====================================================
   SECONDARY NAV (Below-header)
   ===================================================== */
.site-below-header-wrap,
.below-header-section {
  background-color: var(--pv-white) !important;
  border-bottom: 1px solid var(--pv-divider) !important;
}

.site-below-header-wrap a,
.below-header-section a {
  font-family: var(--pv-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--pv-text-muted) !important;
  text-transform: capitalize !important;
}

.site-below-header-wrap a:hover,
.below-header-section a:hover {
  color: var(--pv-primary) !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.wp-block-button__link,
.kb-btn,
.kt-button,
button[type="submit"],
input[type="submit"],
.woocommerce-button,
.button {
  background-color: var(--pv-primary) !important;
  color: #fff !important;
  border-radius: var(--pv-radius-full) !important;
  font-family: var(--pv-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0.875rem 2.5rem !important;
  transition: background-color var(--pv-transition), transform var(--pv-transition) !important;
  box-shadow: 0 4px 20px rgba(237, 143, 12, 0.3) !important;
  cursor: pointer;
}

.wp-block-button__link:hover,
.kb-btn:hover,
.kt-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover {
  background-color: var(--pv-primary-hover) !important;
  transform: translateY(-2px) !important;
}

/* Outline / ghost variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--pv-primary) !important;
  border: 2px solid var(--pv-primary) !important;
  box-shadow: none !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--pv-primary) !important;
  color: #fff !important;
}

/* =====================================================
   HERO / COVER BLOCKS
   ===================================================== */
.wp-block-cover,
.wp-block-kadence-cover,
.kadence-hero-section {
  min-height: clamp(340px, 45vw, 520px) !important;
}

/* Ensure cover images fill their containers */
.wp-block-cover .wp-block-cover__image-background {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.pv-hero-tagline {
  font-family: var(--pv-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

/* Force centered text inside column cover cards
   (overrides Gutenberg's is-layout-flow display:block) */
.wp-block-column .wp-block-cover .wp-block-cover__inner-container,
.wp-block-column .wp-block-cover .wp-block-cover__inner-container.is-layout-flow,
.wp-block-column .wp-block-cover .wp-block-cover__inner-container.wp-block-cover-is-layout-flow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 20px !important;
  z-index: 1 !important;
}

.wp-block-column .wp-block-cover .wp-block-cover__inner-container h3,
.wp-block-column .wp-block-cover .wp-block-cover__inner-container .wp-block-heading {
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-column .wp-block-cover .wp-block-cover__inner-container h3 a {
  color: #fff !important;
  text-decoration: none !important;
}

/* =====================================================
   POST CARDS
   ===================================================== */
.wp-block-kadence-posts .kb-posts__item,
.kb-posts-item,
.kt-blocks-post-grid-item {
  background: var(--pv-white) !important;
  border-radius: var(--pv-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--pv-shadow-sm) !important;
  transition: transform var(--pv-transition), box-shadow var(--pv-transition) !important;
}

.wp-block-kadence-posts .kb-posts__item:hover,
.kb-posts-item:hover,
.kt-blocks-post-grid-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--pv-shadow-md) !important;
}

.kb-posts__item .kb-posts__title a,
.kt-blocks-post-grid-item h3 a,
.entry-title a {
  font-family: var(--pv-font-heading) !important;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important;
  font-weight: 600 !important;
  color: var(--pv-text) !important;
  text-decoration: none !important;
  transition: color var(--pv-transition) !important;
}

.kb-posts__item:hover .kb-posts__title a,
.kt-blocks-post-grid-item:hover h3 a {
  color: var(--pv-primary) !important;
}

.kb-posts__taxonomy,
.kt-blocks-post-grid-item .kt-blocks-post-top-meta,
.post-categories a {
  font-family: var(--pv-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pv-primary) !important;
  text-decoration: none !important;
}

/* =====================================================
   SINGLE POST / PAGE CONTENT
   ===================================================== */
.single .entry-title,
.page .entry-title {
  font-family: var(--pv-font-display) !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--pv-text) !important;
}

.entry-content p,
.entry-content li {
  font-family: var(--pv-font-body) !important;
  font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
  color: var(--pv-text-muted) !important;
  line-height: 1.8 !important;
}

.entry-content blockquote,
.wp-block-quote {
  border-left: 4px solid var(--pv-primary-light) !important;
  background: var(--pv-peach-light) !important;
  padding: var(--pv-space-5) var(--pv-space-8) !important;
  border-radius: 0 var(--pv-radius-md) var(--pv-radius-md) 0 !important;
  font-family: var(--pv-font-display) !important;
  font-style: italic !important;
}

/* =====================================================
   CATEGORY SILO ELEMENTS
   ===================================================== */

/* Circular category images with hover rotation */
.pv-category-circle,
.kb-category-circle {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid var(--pv-white) !important;
  box-shadow: var(--pv-shadow-md) !important;
  transition: transform 0.5s ease !important;
  cursor: pointer;
}

.pv-category-circle:hover,
.kb-category-circle:hover {
  transform: rotate(5deg) scale(1.06) !important;
}

/* Filter pill buttons */
.pv-filter-pill,
.kb-filter-button {
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  background: var(--pv-primary-pale) !important;
  color: var(--pv-primary) !important;
  border-radius: var(--pv-radius-full) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--pv-primary-light) !important;
  cursor: pointer !important;
  transition: background var(--pv-transition), color var(--pv-transition) !important;
  text-decoration: none !important;
}

.pv-filter-pill:hover,
.pv-filter-pill.active,
.kb-filter-button:hover,
.kb-filter-button.is-active {
  background: var(--pv-primary) !important;
  color: #fff !important;
  border-color: var(--pv-primary) !important;
}

/* Category cards */
.pv-category-card {
  border-radius: var(--pv-radius-md) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform var(--pv-transition), box-shadow var(--pv-transition) !important;
}

.pv-category-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pv-shadow-lg) !important;
}

/* Category label bar */
.pv-category-label {
  font-family: var(--pv-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  width: 100% !important;
}

.pv-category-label--cook      { background-color: var(--pv-cook)     !important; }
.pv-category-label--craft     { background-color: var(--pv-craft)    !important; }
.pv-category-label--decorate  { background-color: var(--pv-decorate) !important; }
.pv-category-label--entertain { background-color: var(--pv-entertain)!important; }

/* =====================================================
   NEWSLETTER / EMAIL OPT-IN
   ===================================================== */
.pv-newsletter,
.wp-block-kadence-form .kb-field-wrap,
.mailerlite-subscribe-form {
  background: var(--pv-peach-light) !important;
  border: 1px solid var(--pv-peach) !important;
  border-radius: var(--pv-radius-xl) !important;
  padding: var(--pv-space-8) var(--pv-space-12) !important;
}

.pv-newsletter input[type="email"],
.wp-block-kadence-form input[type="email"],
input[type="email"].pv-email-input {
  border: 1.5px solid var(--pv-primary-light) !important;
  border-radius: var(--pv-radius-full) !important;
  padding: 0.875rem 1.5rem !important;
  font-family: var(--pv-font-body) !important;
  font-size: 0.9rem !important;
  background: var(--pv-white) !important;
  outline: none !important;
  transition: border-color var(--pv-transition) !important;
  width: 100%;
}

.pv-newsletter input[type="email"]:focus,
input[type="email"].pv-email-input:focus {
  border-color: var(--pv-primary) !important;
}

/* =====================================================
   WOOCOMMERCE PRODUCT CARDS
   ===================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border-radius: var(--pv-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--pv-shadow-sm) !important;
  background: var(--pv-white) !important;
  transition: transform var(--pv-transition), box-shadow var(--pv-transition) !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--pv-shadow-md) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--pv-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--pv-text) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  color: var(--pv-primary) !important;
  font-weight: 700 !important;
  font-family: var(--pv-font-body) !important;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  background-color: var(--pv-primary) !important;
  color: #fff !important;
  border-radius: var(--pv-radius-full) !important;
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--pv-primary-hover) !important;
}

/* =====================================================
   SECTION BACKGROUNDS
   ===================================================== */
.pv-section--peach,
.has-pv-peach-background-color {
  background-color: var(--pv-peach-light) !important;
}

.pv-section--primary,
.has-pv-primary-background-color {
  background: linear-gradient(135deg, var(--pv-primary-pale) 0%, var(--pv-peach) 100%) !important;
}

.pv-section--sage,
.has-pv-sage-background-color {
  background: linear-gradient(135deg, var(--pv-sage) 0%, #a8c0bc 100%) !important;
  color: #fff !important;
}

/* =====================================================
   "AS SEEN IN" LOGOS STRIP
   ===================================================== */
.pv-as-seen-in {
  background: var(--pv-white);
  padding: var(--pv-space-10) var(--pv-space-6);
  text-align: center;
  border-top: 1px solid var(--pv-divider);
  border-bottom: 1px solid var(--pv-divider);
}

.pv-as-seen-in__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-text-light);
  margin-bottom: var(--pv-space-8);
  display: block;
}

/* =====================================================
   AUTHOR BIO SECTION
   ===================================================== */
.pv-author-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pv-author-section__content {
  background: var(--pv-peach-light);
  padding: clamp(2.5rem, 5vw, 4rem) 3rem;
}

.pv-author-section__name {
  font-family: var(--pv-font-display) !important;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  color: var(--pv-text);
}

/* =====================================================
   SOCIAL FOLLOW ROW
   ===================================================== */
.pv-social-row {
  background: var(--pv-topbar-bg);
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
}

.pv-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.625rem 1.5rem;
  border-radius: var(--pv-radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--pv-transition);
}

.pv-social-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer,
.site-footer-wrap {
  background: var(--pv-white) !important;
  border-top: 1px solid var(--pv-divider) !important;
}

.footer-widget-area .widget-title,
.site-footer .widget-title {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--pv-text) !important;
  margin-bottom: 1.25rem !important;
  font-family: var(--pv-font-body) !important;
}

.footer-widget-area a,
.site-footer a {
  font-size: 0.875rem !important;
  color: var(--pv-text-muted) !important;
  transition: color var(--pv-transition) !important;
  text-decoration: none !important;
}

.footer-widget-area a:hover,
.site-footer a:hover {
  color: var(--pv-primary) !important;
}

/* Footer bottom dark bar */
.site-footer-bottom,
.footer-bottom-wrap,
.site-bottom-footer-wrap,
.site-bottom-footer-wrap .site-footer-row-container-inner,
.site-bottom-footer-wrap .site-footer-row-container,
.site-footer .site-bottom-footer-wrap {
  background-color: #2d2d2d !important;
  color: #fff !important;
}

.site-footer-bottom a,
.footer-bottom-wrap a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.site-footer-bottom a:hover,
.footer-bottom-wrap a:hover {
  color: #fff !important;
}

/* =====================================================
   BLOCK EDITOR COLOR UTILITY CLASSES
   ===================================================== */
.has-pv-primary-color       { color: var(--pv-primary)      !important; }
.has-pv-sage-color          { color: var(--pv-sage)         !important; }
.has-pv-text-color          { color: var(--pv-text)         !important; }

.has-pv-primary-background-color  { background-color: var(--pv-primary)     !important; }
.has-pv-peach-background-color    { background-color: var(--pv-peach-light) !important; }
.has-pv-sage-background-color     { background-color: var(--pv-sage)        !important; }
.has-pv-cream-background-color    { background-color: var(--pv-cream)       !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .pv-author-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 0.75rem 1.25rem !important;
  }

  .wp-block-cover {
    min-height: 280px !important;
  }

  .pv-social-row {
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .pv-author-section__content {
    padding: 2rem 1.5rem;
  }
}