/*
Theme Name: My Kitchen Produce
Theme URI: https://example.com/my-kitchen-produce
Author: Your Name
Author URI: https://example.com
Description: A fresh and warm WordPress theme for cooking blogs, featuring natural greens, soft oranges, and creamy neutrals. Built with TailwindCSS and Vue.js for modern, interactive recipe sharing.
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: my-kitchen-produce
Tags: blog, food, recipes, cooking, custom-colors, responsive-layout, featured-images
*/

/* Import Tailwind CSS */
@import './assets/css/tailwind.css';

/* Custom theme styles */
:root {
  --color-cream: #FFF8E7;
  --color-tangerine: #FF9F68;
  --color-basil: #7BAE7F;
  --color-cinnamon: #C46B4D;
  --color-olive: #A4A376;
}

/* Base typography */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #333;
  background-color: var(--color-cream);
}

/* Recipe card hover effects */
.recipe-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom selection color */
::selection {
  background-color: var(--color-tangerine);
  color: white;
}

/* Focus styles for accessibility */
a:focus, button:focus {
  outline: 2px solid var(--color-basil);
  outline-offset: 2px;
}

/* Logo styles */
.site-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.logo-link:hover .site-logo {
  filter: brightness(1.1);
}

.logo-branding {
  line-height: 0;
}

/* Custom logo wrapper (for WordPress customizer uploaded logos) */
.custom-logo-wrapper img {
  height: 3rem;
  width: auto;
  transition: transform 0.3s ease;
}

.custom-logo-wrapper img:hover {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .custom-logo-wrapper img {
    height: 4rem;
  }
}