/*
Theme Name:        Create Child
Theme URI:         https://www.perplexity.ai/computer
Description:       A Kadence Child Theme inspired by the "Create" lifestyle blog design by Restored316. Features a feminine, clean, airy aesthetic with pastel color palette, Cook/Craft/Decorate/Entertain category silos, diet-filter navigation, and WooCommerce-ready shop section.
Author:            Perplexity Computer
Author URI:        https://www.perplexity.ai/computer
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:       kadence-create-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
*/

/* =====================================================
   KADENCE CREATE CHILD THEME — CUSTOM STYLES
   
   These styles override Kadence parent theme defaults.
   The parent theme (Kadence) must be installed and active.
   
   Required plugins (all FREE):
   - Kadence Blocks (kadence-blocks)
   - Kadence Starter Templates (kadence-starter-templates)
   
   Optional plugins for full feature set:
   - WooCommerce (woocommerce) — for shop/SVG file sales
   - Simple Social Icons (simple-social-icons) — for footer social
   ===================================================== */

/* =====================================================
   CSS CUSTOM PROPERTIES — BRAND DESIGN TOKENS
   ===================================================== */
:root {
  /* === Brand Colors === */
  --create-pink:           #E8847C;
  --create-pink-light:     #F2B4AD;
  --create-pink-pale:      #F5E0DD;
  --create-coral:          #EA8178;
  --create-coral-hover:    #D66B63;
  --create-peach:          #F7D5CB;
  --create-peach-light:    #FDF0EC;
  --create-cream:          #FDF8F5;
  --create-sage:           #8CA9A1;
  --create-sage-light:     #B5CEC9;
  --create-topbar-bg:      #F2B4AD;

  /* === Category Accent Colors === */
  --create-cook:           #B07AB0;   /* purple */
  --create-craft:          #E8847C;   /* coral */
  --create-decorate:       #E8A87C;   /* orange */
  --create-entertain:      #F2C88A;   /* gold/peach */

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

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

  /* === Spacing Scale (4px base) === */
  --create-space-1:   0.25rem;  /*  4px */
  --create-space-2:   0.5rem;   /*  8px */
  --create-space-3:   0.75rem;  /* 12px */
  --create-space-4:   1rem;     /* 16px */
  --create-space-5:   1.25rem;  /* 20px */
  --create-space-6:   1.5rem;   /* 24px */
  --create-space-8:   2rem;     /* 32px */
  --create-space-10:  2.5rem;   /* 40px */
  --create-space-12:  3rem;     /* 48px */
  --create-space-16:  4rem;     /* 64px */
  --create-space-20:  5rem;     /* 80px */

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

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

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

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

/* =====================================================
   GLOBAL BODY & TYPOGRAPHY OVERRIDES
   ===================================================== */

body {
  background-color: var(--create-bg) !important;
  font-family: var(--create-font-body) !important;
  color: var(--create-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Load Google Fonts via CSS @import (backup — prefer wp_enqueue_style in functions.php) */
@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');

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

/* Display headings (hero, section titles) */
.entry-title,
.wp-block-heading.is-style-display,
.create-section-title {
  font-family: var(--create-font-display) !important;
}

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

a {
  color: var(--create-coral);
  transition: color var(--create-transition);
}

a:hover {
  color: var(--create-coral-hover);
}

/* =====================================================
   TOP ANNOUNCEMENT BAR
   ===================================================== */

/* Target Kadence's header above-primary row */
.header-top-bar,
.above-header-section,
.site-above-header-wrap {
  background-color: var(--create-topbar-bg) !important;
  color: #ffffff !important;
  font-size: 0.8125rem;
  font-family: var(--create-font-body);
  letter-spacing: 0.02em;
}

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

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

.site-header,
.site-header-wrap,
.site-main-header-wrap {
  background-color: var(--create-white) !important;
  border-bottom: 1px solid var(--create-border) !important;
}

/* Site logo text override (if no image logo uploaded) */
.site-title,
.site-branding__title {
  font-family: var(--create-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(--create-text) !important;
}

/* Primary navigation links */
.main-navigation a,
.header-navigation a,
.nav--primary a,
.primary-menu-container a {
  font-family: var(--create-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--create-text) !important;
  transition: color var(--create-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(--create-coral) !important;
}

/* =====================================================
   SECONDARY NAV (Sub-header / Below-header)
   ===================================================== */

.site-below-header-wrap,
.below-header-section {
  background-color: var(--create-white) !important;
  border-bottom: 1px solid var(--create-divider) !important;
}

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

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

/* =====================================================
   KADENCE BUTTONS — PRIMARY
   ===================================================== */

.wp-block-button__link,
.kb-btn,
.kt-button,
button[type="submit"],
input[type="submit"],
.woocommerce-button,
.button {
  background-color: var(--create-coral) !important;
  color: #ffffff !important;
  border-radius: var(--create-radius-full) !important;
  font-family: var(--create-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(--create-transition), transform var(--create-transition) !important;
  box-shadow: 0 4px 20px rgba(232, 132, 124, 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(--create-coral-hover) !important;
  transform: translateY(-2px) !important;
}

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

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--create-coral) !important;
  color: #ffffff !important;
}

/* =====================================================
   HERO / BANNER SECTION
   ===================================================== */

/* Full-width cover block used as hero */
.wp-block-cover,
.wp-block-kadence-cover,
.kadence-hero-section {
  min-height: clamp(340px, 45vw, 520px) !important;
}

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

/* =====================================================
   POST CARDS / KADENCE POSTS BLOCKS
   ===================================================== */

/* Kadence Posts Block (kb-posts) */
.wp-block-kadence-posts .kb-posts__item,
.kb-posts-item,
.kt-blocks-post-grid-item {
  background: var(--create-white) !important;
  border-radius: var(--create-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--create-shadow-sm) !important;
  transition: transform var(--create-transition), box-shadow var(--create-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(--create-shadow-md) !important;
}

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

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

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

/* =====================================================
   SINGLE POST / PAGE CONTENT
   ===================================================== */

/* Article entry title */
.single .entry-title,
.page .entry-title {
  font-family: var(--create-font-display) !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--create-text) !important;
}

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

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

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

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

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

/* Category filter pill buttons */
.create-filter-pill,
.kb-filter-button {
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  background: var(--create-pink-pale) !important;
  color: var(--create-coral) !important;
  border-radius: var(--create-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(--create-pink-light) !important;
  cursor: pointer !important;
  transition: background var(--create-transition), color var(--create-transition) !important;
  text-decoration: none !important;
}

.create-filter-pill:hover,
.create-filter-pill.active,
.kb-filter-button:hover,
.kb-filter-button.is-active {
  background: var(--create-coral) !important;
  color: #ffffff !important;
  border-color: var(--create-coral) !important;
}

/* Category card grid (Cook / Craft / Decorate / Entertain) */
.create-category-card {
  border-radius: var(--create-radius-md) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform var(--create-transition), box-shadow var(--create-transition) !important;
}

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

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

/* Category label colors */
.create-category-label--cook     { background-color: var(--create-cook)     !important; }
.create-category-label--craft    { background-color: var(--create-craft)    !important; }
.create-category-label--decorate { background-color: var(--create-decorate) !important; }
.create-category-label--entertain{ background-color: var(--create-entertain) !important; }

/* =====================================================
   NEWSLETTER / EMAIL SIGNUP FORMS
   ===================================================== */

/* Generic email opt-in wrapper */
.create-newsletter,
.wp-block-kadence-form .kb-field-wrap,
.mailerlite-subscribe-form {
  background: var(--create-peach-light) !important;
  border: 1px solid var(--create-peach) !important;
  border-radius: var(--create-radius-xl) !important;
  padding: var(--create-space-8) var(--create-space-12) !important;
}

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

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

/* =====================================================
   WOOCOMMERCE PRODUCT CARDS (Shop SVG Files)
   ===================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border-radius: var(--create-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--create-shadow-sm) !important;
  background: var(--create-white) !important;
  transition: transform var(--create-transition), box-shadow var(--create-transition) !important;
}

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

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

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

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  background-color: var(--create-coral) !important;
  color: #ffffff !important;
  border-radius: var(--create-radius-full) !important;
}

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

/* =====================================================
   SECTION BACKGROUNDS & DIVIDERS
   ===================================================== */

/* Pink/peach pastel section backgrounds */
.create-section--peach,
.has-create-peach-background-color {
  background-color: var(--create-peach-light) !important;
}

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

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

/* Top bar (pink strip above header) */
.create-topbar {
  background-color: var(--create-topbar-bg) !important;
  color: #ffffff !important;
}

/* =====================================================
   "AS SEEN IN" LOGOS STRIP
   ===================================================== */

.create-as-seen-in {
  background: var(--create-white);
  padding: var(--create-space-10) var(--create-space-6);
  text-align: center;
  border-top: 1px solid var(--create-divider);
  border-bottom: 1px solid var(--create-divider);
}

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

/* =====================================================
   AUTHOR BIO SECTION
   ===================================================== */

.create-author-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

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

/* =====================================================
   SOCIAL FOLLOW ROW
   ===================================================== */

.create-social-row {
  background: var(--create-topbar-bg);
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
}

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

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

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

.site-footer,
.site-footer-wrap {
  background: var(--create-white) !important;
  border-top: 1px solid var(--create-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(--create-text) !important;
  margin-bottom: 1.25rem !important;
  font-family: var(--create-font-body) !important;
}

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

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

/* Footer bottom bar */
.site-footer-bottom,
.footer-bottom-wrap {
  background: var(--create-topbar-bg) !important;
  color: #ffffff !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: #ffffff !important;
}

/* =====================================================
   KADENCE COLOR PALETTE REGISTRATION
   (mirrors below in functions.php — CSS backup)
   ===================================================== */

.has-create-coral-color       { color: var(--create-coral)       !important; }
.has-create-pink-color        { color: var(--create-pink)        !important; }
.has-create-sage-color        { color: var(--create-sage)        !important; }
.has-create-text-color        { color: var(--create-text)        !important; }

.has-create-coral-background-color       { background-color: var(--create-coral)       !important; }
.has-create-pink-background-color        { background-color: var(--create-pink)        !important; }
.has-create-peach-background-color       { background-color: var(--create-peach-light) !important; }
.has-create-sage-background-color        { background-color: var(--create-sage)        !important; }
.has-create-cream-background-color       { background-color: var(--create-cream)       !important; }

/* =====================================================
   RESPONSIVE OVERRIDES
   ===================================================== */

@media (max-width: 1024px) {
  .create-author-section {
    grid-template-columns: 1fr;
  }
}

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

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

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