/*
 * Theme Name:   PetCaramelo Child
 * Description:  Child theme for PetCaramelo — custom design system
 * Template:     newspulse-magazine
 * Version:      1.0
 *
 * HOW TO INSTALL:
 * 1. Create a folder: /wp-content/themes/petcaramelo-child/
 * 2. Put this file inside it as: style.css
 * 3. Also create functions.php (see functions.php file)
 * 4. WordPress Admin → Appearance → Themes → Activate "PetCaramelo Child"
 */

/* ═══════════════════════════════════════════
   PETCARAMELO DESIGN SYSTEM
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Nunito:wght@400;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --pc-amber:        #F59E0B;
  --pc-amber-d:      #D97706;
  --pc-amber-pale:   #FFFBEB;
  --pc-amber-light:  #FEF3C7;
  --pc-brown:        #78350F;
  --pc-bark:         #92400E;
  --pc-white:        #FFFFFF;
  --pc-gray-50:      #F9FAFB;
  --pc-gray-100:     #F3F4F6;
  --pc-gray-200:     #E5E7EB;
  --pc-gray-400:     #9CA3AF;
  --pc-gray-700:     #374151;
  --pc-radius-card:  18px;
  --pc-radius-btn:   12px;
  --pc-shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --pc-shadow-btn:   0 3px 0 rgba(0,0,0,.18);
}

/* ── GLOBAL BODY & TYPOGRAPHY ── */
body {
  font-family: 'Nunito', sans-serif !important;
  background-color: var(--pc-amber-pale) !important;
  color: var(--pc-gray-700) !important;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: 'Baloo 2', cursive !important;
  color: var(--pc-brown) !important;
}

/* ── SITE HEADER ── */
.site-header,
#masthead,
.main-header-bar,
header.header {
  background: var(--pc-white) !important;
  border-bottom: 2px solid var(--pc-amber-light) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  font-family: 'Nunito', sans-serif !important;
}

/* Logo / Site title */
.site-title a,
.custom-logo-link,
.site-branding .site-title {
  font-family: 'Baloo 2', cursive !important;
  color: var(--pc-amber-d) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* ── NAVIGATION ── */
.main-navigation a,
.nav-menu a,
#site-navigation a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  color: var(--pc-bark) !important;
  transition: color .15s !important;
}

.main-navigation a:hover,
.nav-menu a:hover {
  color: var(--pc-amber-d) !important;
}

/* Active menu item */
.main-navigation .current-menu-item > a,
.nav-menu .current-menu-item > a {
  color: var(--pc-amber-d) !important;
  border-bottom: 2px solid var(--pc-amber) !important;
}

/* ── BUTTONS ── */
.wp-block-button__link,
button,
.button,
input[type="submit"],
.btn-primary {
  background: var(--pc-amber) !important;
  color: var(--pc-brown) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  border: none !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  box-shadow: var(--pc-shadow-btn) !important;
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--pc-amber-d) !important;
  color: var(--pc-brown) !important;
}

/* ── LINKS ── */
a {
  color: var(--pc-amber-d) !important;
  transition: color .15s !important;
}

a:hover {
  color: var(--pc-brown) !important;
}

/* ── CARDS / POSTS ── */
.entry,
.post,
article,
.card {
  background: var(--pc-white) !important;
  border-radius: var(--pc-radius-card) !important;
  border: 1.5px solid var(--pc-amber-light) !important;
  box-shadow: var(--pc-shadow-card) !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s !important;
}

.entry:hover,
.post:hover,
article:hover,
.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

/* Post title */
.entry-title a,
.post-title a {
  font-family: 'Baloo 2', cursive !important;
  color: var(--pc-brown) !important;
  text-decoration: none !important;
}

.entry-title a:hover,
.post-title a:hover {
  color: var(--pc-amber-d) !important;
}

/* ── SIDEBAR ── */
.widget-area,
.sidebar,
#secondary {
  font-family: 'Nunito', sans-serif !important;
}

.widget-title,
.widgettitle {
  font-family: 'Baloo 2', cursive !important;
  color: var(--pc-brown) !important;
  border-bottom: 2px solid var(--pc-amber-light) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}

/* ── FOOTER ── */
.site-footer,
#colophon,
footer.footer {
  background: var(--pc-brown) !important;
  color: var(--pc-amber-light) !important;
  font-family: 'Nunito', sans-serif !important;
  border-top: 3px solid var(--pc-amber) !important;
}

.site-footer a,
#colophon a {
  color: var(--pc-amber) !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--pc-white) !important;
}

/* ── FORMS (search, comments) ── */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
.search-field {
  border: 1.5px solid var(--pc-gray-200) !important;
  border-radius: 99px !important;
  padding: 8px 16px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  background: var(--pc-gray-50) !important;
  transition: border-color .2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
.search-field:focus {
  border-color: var(--pc-amber) !important;
  outline: none !important;
}

/* ── BREADCRUMBS (Yoast / RankMath) ── */
.breadcrumb,
.wpseo-breadcrumb,
.rank-math-breadcrumb {
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--pc-gray-400) !important;
}

.breadcrumb a,
.wpseo-breadcrumb a,
.rank-math-breadcrumb a {
  color: var(--pc-bark) !important;
}

/* ── PAGE BACKGROUND ── */
.site,
.page,
main,
#page,
#content,
.site-content {
  background: var(--pc-amber-pale) !important;
}

/* ── CATEGORY / TAG PILLS ── */
.cat-links a,
.tag-links a,
.wp-block-post-terms a {
  background: var(--pc-amber-light) !important;
  color: var(--pc-bark) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 99px !important;
  border: 1.5px solid var(--pc-amber) !important;
  text-decoration: none !important;
  transition: background .15s !important;
}

.cat-links a:hover,
.tag-links a:hover {
  background: var(--pc-amber) !important;
  color: var(--pc-brown) !important;
}

/* ── PAGINATION ── */
.page-numbers,
.nav-links a {
  background: var(--pc-white) !important;
  border: 1.5px solid var(--pc-gray-200) !important;
  color: var(--pc-gray-700) !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
}

.page-numbers:hover,
.nav-links a:hover,
.page-numbers.current {
  background: var(--pc-amber) !important;
  border-color: var(--pc-amber) !important;
  color: var(--pc-brown) !important;
}

/* ── TABLES ── */
table { border-collapse: collapse; width: 100%; }
th { background: var(--pc-amber-light) !important; color: var(--pc-brown) !important; font-family: 'Baloo 2', cursive !important; }
td, th { padding: 10px 14px !important; border: 1px solid var(--pc-gray-200) !important; }
tr:nth-child(even) { background: var(--pc-gray-50) !important; }

/* ── BLOCKQUOTE ── */
blockquote {
  border-left: 4px solid var(--pc-amber) !important;
  background: var(--pc-amber-light) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
  font-style: normal !important;
  color: var(--pc-brown) !important;
}