/*
Theme Name:   Kadence Child – Cozy Desk
Theme URI:    https://deskflowhub.com
Description:  Child theme de Kadence con diseño editorial "Cozy Desk"
Author:       DeskFlow Hub
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child
*/

/* =========================================================
   DESIGN TOKENS – Cozy Desk palette
   ========================================================= */
:root {
  --bg:          #f3ece1;   /* parchment */
  --bg-card:     #fbf7ef;   /* off-white cards */
  --bg-utility:  #2c2620;   /* dark top bar */
  --text:        #2c2620;   /* primary text */
  --text-2:      #4f4639;   /* body copy */
  --text-3:      #7c7165;   /* footer text */
  --text-muted:  #9a8e7c;   /* timestamps, labels */
  --border:      #ddd2bf;   /* main border */
  --border-2:    #e4dac8;   /* subtle border */
  --green:       #5b6b43;   /* olive accent */
  --green-light: #e6ead9;   /* green badge bg */
  --green-dark:  #4a5836;   /* green hover */
  --rust:        #b5562b;   /* terracotta CTA */
  --rust-dark:   #9a4621;   /* rust hover */
  --mono-green:  #9aae78;   /* mono green labels */
  --selection:   #5b6b43;
}

/* =========================================================
   GLOBAL RESETS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--selection); color: #fbf7ef; }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

/* Remove previous SpaceX/Tesla dark styles */
body.dark-mode,
body[data-theme="dark"] { color-scheme: light; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  color: var(--text) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p, li, td, th {
  font-family: 'Hanken Grotesk', sans-serif !important;
  color: var(--text-2);
  line-height: 1.65;
}

code, pre, kbd, samp {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.875em;
}

a {
  color: var(--rust) !important;
  text-decoration: none;
}
a:hover { color: var(--rust-dark) !important; text-decoration: underline; }

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header,
.wp-site-blocks > header,
header.site-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Logo / site title */
.site-title,
.site-title a,
.wp-block-site-title,
.site-branding .site-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--text) !important;
}

.site-tagline,
.site-description {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Nav */
.primary-navigation a,
.main-navigation a,
.kadence-navigation a,
.navigation-default a {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  color: #564e44 !important;
}
.primary-navigation a:hover,
.main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--rust) !important;
  text-decoration: none !important;
}

/* =========================================================
   UTILITY BAR (if rendered before header)
   ========================================================= */
.above-header-section,
.kadence-top-bar {
  background: var(--bg-utility) !important;
  color: #cfc6b6 !important;
  font-size: 12.5px !important;
}

/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */
#main,
.site-main,
.content-area,
main.wp-block-group {
  background: var(--bg) !important;
}

/* =========================================================
   ARTICLE CARDS
   ========================================================= */
article.post,
.post-card,
.entry,
.wp-block-post {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 0 rgba(60,45,30,.04) !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
article.post:hover,
.post-card:hover {
  box-shadow: 0 4px 16px rgba(60,45,30,.09) !important;
}

/* Post thumbnail */
.post-thumbnail img,
.wp-post-image,
article.post .entry-thumbnail img {
  border-radius: 14px 14px 0 0;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Entry content padding */
.entry-content-wrap,
.post-content,
.entry-header {
  padding: 18px 22px 22px !important;
}

/* Category badge above title */
.cat-links,
.entry-categories,
.post-categories,
.entry-footer .cat-links {
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--rust) !important;
  display: block;
  margin-bottom: 6px;
}
.cat-links a,
.entry-categories a {
  color: var(--rust) !important;
}

/* Post title */
.entry-title,
.entry-title a,
h2.entry-title a {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}
.entry-title a:hover { color: var(--rust) !important; }

/* Post excerpt */
.entry-summary,
.entry-excerpt,
.post-excerpt {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
  margin-top: 10px !important;
}

/* Post meta */
.entry-meta,
.post-meta,
.entry-footer {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 12px !important;
}
.entry-meta a { color: var(--text-muted) !important; }

/* Read more / CTA button */
.more-link,
.post-more-link,
.read-more-link,
a.wp-block-read-more {
  display: inline-block;
  background: var(--rust) !important;
  color: #fbf7ef !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  border: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 14px;
  transition: background 0.18s;
}
.more-link:hover,
.post-more-link:hover {
  background: var(--rust-dark) !important;
}

/* =========================================================
   BLOG / ARCHIVE GRID
   ========================================================= */
.posts-container,
.wp-block-post-template,
#main .loop-container,
.post-loop {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 30px) !important;
}

/* =========================================================
   SINGLE POST PAGE
   ========================================================= */
.single .entry-content,
.single-post .entry-content {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--text-2) !important;
  max-width: 72ch;
}

.single .entry-content h2,
.single .entry-content h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.single .entry-content h2 {
  font-size: clamp(22px, 2.8vw, 30px) !important;
  border-bottom: 2px solid var(--border-2);
  padding-bottom: 0.3em;
}

.single .entry-content h3 {
  font-size: clamp(19px, 2.2vw, 24px) !important;
  color: var(--green-dark) !important;
}

/* Affiliate / product buttons inside posts */
.single .entry-content a[href*="amzn.to"],
.single .entry-content a[href*="amazon.com"] {
  display: inline-block;
  background: var(--rust) !important;
  color: #fbf7ef !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  margin: 6px 0 !important;
  transition: background 0.18s;
}
.single .entry-content a[href*="amzn.to"]::after,
.single .entry-content a[href*="amazon.com"]::after {
  content: " →";
}
.single .entry-content a[href*="amzn.to"]:hover,
.single .entry-content a[href*="amazon.com"]:hover {
  background: var(--rust-dark) !important;
  text-decoration: none !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.widget,
.sidebar .widget,
.widget-area .widget {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  margin-bottom: 24px !important;
}

.widget-title,
.widgettitle {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 12px !important;
  color: var(--text) !important;
}

/* =========================================================
   FEATURED / HERO BANNER (home page)
   ========================================================= */
.home .site-main > .entry:first-child,
.home-featured,
.hero-section {
  background: var(--bg-card);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(24px, 3vw, 36px);
  border: 1px solid var(--border);
}

/* =========================================================
   PICKS / PRODUCT CARDS
   ========================================================= */
.product-card,
.pick-card {
  background: var(--bg) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 18px !important;
  padding: 22px !important;
}

/* =========================================================
   NEWSLETTER SECTION
   ========================================================= */
.newsletter-section,
.wp-block-group.newsletter {
  background: var(--green) !important;
  border-radius: 24px !important;
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 48px) !important;
  color: #f3ece1 !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer,
footer.site-footer,
.wp-site-blocks > footer {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3) !important;
}

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

.footer-widget-title,
.site-footer .widget-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.site-info,
.footer-bottom,
.copyright-bar {
  border-top: 1px solid var(--border-2) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* =========================================================
   BUTTONS (global)
   ========================================================= */
.wp-block-button__link,
.button,
input[type="submit"],
button[type="submit"] {
  background: var(--rust) !important;
  color: #fbf7ef !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  cursor: pointer;
  transition: background 0.18s;
}
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--rust-dark) !important;
  color: #fbf7ef !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid var(--green) !important;
  color: var(--green) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--green) !important;
  color: #fbf7ef !important;
}

/* =========================================================
   FORMS
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  background: #fbf7ef !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  padding: 12px 16px !important;
}
input:focus,
textarea:focus {
  border-color: var(--green) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91,107,67,.15) !important;
}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.search-form input[type="search"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

/* =========================================================
   KADENCE SPECIFICS – override inline dark vars
   ========================================================= */
:root {
  --global-palette1: #5b6b43 !important;
  --global-palette2: #b5562b !important;
  --global-palette3: #2c2620 !important;
  --global-palette4: #4f4639 !important;
  --global-palette5: #7c7165 !important;
  --global-palette6: #ddd2bf !important;
  --global-palette7: #fbf7ef !important;
  --global-palette8: #f3ece1 !important;
  --global-palette9: #ffffff !important;
}

/* Reset the dark/Tesla CSS that was in Customizer */
body { background-color: var(--bg) !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .posts-container,
  .wp-block-post-template,
  .loop-container {
    grid-template-columns: 1fr !important;
  }
  .entry-title,
  .entry-title a {
    font-size: 18px !important;
  }
}