/*
Theme Name: Tasty Think (Kadence Child)
Theme URI: https://tastythink.com
Description: Custom warm food-blog child theme for Tasty Think, built on Kadence.
Author: Northvex Solutions
Template: kadence
Version: 2.0.0
Text Domain: tastythink-kadence-child
*/

/* Layout and template styles for the site build live in assets/tt-site.css,
   enqueued from inc/tt-setup.php. This file keeps the locked palette and
   base component styles only. */

/* ===== Locked Palette (editorial set) ===== */
:root {
  --tt-cream: #FAF3E7;
  --tt-paper: #FFFFFF;
  --tt-ink: #1F1B16;
  --tt-paprika: #D6552C;
  --tt-paprika-dark: #B03F1C;
  --tt-mustard: #E3A626;
  --tt-plum: #6B2737;
  --tt-sage: #6B7F5B;
  --tt-line: #E4D4BE;
  --tt-muted: #7A6C5D;

  /* Map into Kadence's own global palette variables so core blocks/patterns follow suit */
  --global-palette1: var(--tt-ink);
  --global-palette2: var(--tt-paprika);
  --global-palette3: var(--tt-mustard);
  --global-palette4: var(--tt-sage);
  --global-palette8: var(--tt-cream);
  --global-palette9: var(--tt-paper);
}

/* ===== Base ===== */
body {
  background-color: var(--tt-cream);
  color: var(--tt-ink);
  font-family: 'Work Sans', -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: var(--tt-ink);
}

a {
  color: var(--tt-paprika);
}
a:hover {
  color: var(--tt-paprika-dark);
}

/* ===== Header ===== */
.site-header,
.kadence-sticky-header {
  background-color: var(--tt-paper);
  border-bottom: 1px solid var(--tt-line);
}

/* ===== Buttons ===== */
.wp-block-button__link,
button,
.button,
input[type="submit"] {
  background-color: var(--tt-paprika);
  color: #FFFFFF !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  padding: 12px 24px;
  transition: background-color 0.2s ease;
}
.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: var(--tt-paprika-dark);
}

/* ===== Category pills / tags (used on archive and single templates) ===== */
.category-pill,
.tt-category-pill,
.post-categories a,
.wp-block-post-terms a {
  display: inline-block;
  background-color: var(--tt-mustard);
  color: var(--tt-ink) !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  margin-right: 6px;
}

/* ===== Recipe / post cards ===== */
.tt-recipe-card,
article.post,
.entry-card {
  background-color: var(--tt-paper);
  border: 1px solid var(--tt-line);
  border-radius: 12px;
  overflow: hidden;
}
.tt-recipe-card img,
article.post img,
.entry-card img {
  border-radius: 12px 12px 0 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Meta row (prep time / servings / difficulty) */
.tt-recipe-meta,
.entry-meta {
  color: var(--tt-muted);
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
}

/* ===== WP Recipe Maker overrides (if/when plugin is active) ===== */
.wprm-recipe-container {
  --wprm-header-background: var(--tt-sage);
  --wprm-header-text: #FFFFFF;
  --wprm-accent: var(--tt-paprika);
  background-color: var(--tt-paper);
  border: 1px solid var(--tt-line) !important;
  border-radius: 12px !important;
  font-family: 'Work Sans', sans-serif;
}
.wprm-recipe-name {
  font-family: 'Fraunces', serif !important;
  color: var(--tt-ink) !important;
}

/* ===== Newsletter band (homepage band is styled in tt-site.css) ===== */
.tt-newsletter-band {
  background-color: var(--tt-mustard);
  color: var(--tt-ink);
  padding: 48px 24px;
  text-align: center;
}
.tt-newsletter-band input[type="email"] {
  border-radius: 8px;
  border: none;
  padding: 12px 16px;
  font-family: 'Work Sans', sans-serif;
}

/* ===== Footer ===== */
.site-footer,
footer.site-footer {
  background-color: var(--tt-ink);
  color: var(--tt-cream);
}
.site-footer a {
  color: var(--tt-cream);
}
.site-footer a:hover {
  color: var(--tt-mustard);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .tt-recipe-card,
  article.post,
  .entry-card {
    margin-bottom: 20px;
  }
}