/*
Theme Name: Shirley Cooking
Theme URI: https://shirleycooking.com
Template: kadence
Description: Child theme for Shirley Cooking, based on Kadence.
Author: Marie
Version: 1.0.0
Text Domain: shirley-cooking
*/

/* ===========================
   Fonts
   =========================== */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap");

/* ===========================
   Base
   =========================== */
body { background-color: #FAF7F4; font-family: Inter, sans-serif; color: #2B2B2B; }

/* ===========================
   Header
   =========================== */
.site-header { background-color: #FFFFFF; border-bottom: 3px solid #D4733B; }
.site-title { font-family: Playfair Display, serif; font-size: 2rem; color: #A85C2F !important; font-weight: 700; }
.site-description { color: #6B4F3A; font-style: italic; }

/* Desktop nav */
.primary-menu-container .menu > li > a { color: #2B2B2B; font-weight: 500; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }
.primary-menu-container .menu > li > a:hover { color: #D4733B; }

/* Dropdown menu */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul {
  background-color: #FFFFFF !important;
  border: 2px solid #2B2B2B;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.header-navigation .header-menu-container ul ul li a,
.header-navigation ul ul.sub-menu li a {
  color: #2B2B2B !important;
  background-color: #FFFFFF !important;
}
.header-navigation .header-menu-container ul ul li a:hover,
.header-navigation ul ul.sub-menu li a:hover {
  color: #D4733B !important;
  background-color: #FAF7F4 !important;
}

/* ===========================
   Mobile menu
   =========================== */
.menu-toggle-open .menu-toggle-icon,
.menu-toggle-open .menu-toggle-icon:before,
.menu-toggle-open .menu-toggle-icon:after,
button.menu-toggle-open,
.kadence-svg-iconset svg.kadence-svg-icon {
  color: #2B2B2B !important;
  fill: #2B2B2B !important;
}
.menu-toggle-open .hamburger-inner,
.menu-toggle-open .hamburger-inner::before,
.menu-toggle-open .hamburger-inner::after {
  background-color: #2B2B2B !important;
}

.popup-drawer .drawer-inner { background-color: #FFFFFF !important; }
.popup-drawer .drawer-header { background-color: #FFFFFF !important; border-bottom: 1px solid #E8D5C0; }
.popup-drawer .drawer-inner a,
.popup-drawer .drawer-inner .menu-item a,
.popup-drawer .mobile-menu-container a { color: #2B2B2B !important; }
.popup-drawer .drawer-inner a:hover,
.popup-drawer .mobile-menu-container a:hover { color: #D4733B !important; }
.popup-drawer .menu-toggle-close { color: #2B2B2B !important; background-color: transparent !important; }
.popup-drawer .menu-toggle-close .toggle-close-bar { background-color: #2B2B2B !important; }
.popup-drawer .drawer-sub-toggle { color: #2B2B2B !important; }
.popup-drawer .drawer-sub-toggle:hover { color: #D4733B !important; }
.popup-drawer .mobile-menu-container ul.sub-menu { background-color: #FAF7F4 !important; }
.popup-drawer .mobile-menu-container ul.sub-menu a { color: #2B2B2B !important; }

/* ===========================
   Content
   =========================== */
.entry-title a { font-family: Playfair Display, serif; color: #2B2B2B; }
.entry-title a:hover { color: #D4733B; }
.post-thumbnail img { border-radius: 8px; }
.entry-taxonomies a { color: #D4733B; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.entry-summary .more-link, .entry-content .more-link { color: #D4733B; font-weight: 600; }

/* Page/Post title hero banner */
.entry-hero-container-inner { background-color: #A85C2F !important; }
.entry-hero-container-inner h1.entry-title,
.entry-hero-container-inner .entry-header h1,
.entry-hero-container-inner .page-title h1 { color: #FFFFFF !important; font-family: Playfair Display, serif; font-weight: 700; }

/* Tags */
.post-tags a, .entry-tags a, .tag-links a, a[rel=tag] {
  color: #A85C2F !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E8D5C0 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
}
.post-tags a:hover, .entry-tags a:hover, .tag-links a:hover, a[rel=tag]:hover {
  color: #FFFFFF !important;
  background-color: #D4733B !important;
  border-color: #D4733B !important;
}

/* ===========================
   Recipe card (WPRM)
   =========================== */
.wprm-recipe-container { border: 2px solid #2B2B2B; border-radius: 8px; background: #F5E6D8; }

/* ===========================
   Buttons & pagination
   =========================== */
.wp-block-button__link, button, input[type=submit] { background-color: #D4733B; border-radius: 4px; }
.wp-block-button__link:hover, button:hover, input[type=submit]:hover { background-color: #A85C2F; }
.pagination .page-numbers.current { background-color: #D4733B; color: #FFFFFF; }

/* ===========================
   Footer
   =========================== */
.site-footer { background-color: #2B2B2B; color: #E8D5C0; }
.site-footer a, .site-footer .footer-html a, .site-info a, .site-footer-inner-wrap a { color: #D4733B; text-decoration: none !important; }
.site-footer a:hover, .site-footer .footer-html a:hover, .site-info a:hover, .site-footer-inner-wrap a:hover { text-decoration: underline !important; }

/* ===========================
   Homepage
   =========================== */
.home .entry-hero-container-inner { display: none !important; }
.home .entry-content a { color: #A85C2F; text-decoration: none; }
.home .entry-content a:hover { color: #D4733B; text-decoration: underline; }
.home .wp-block-image img { transition: transform 0.3s ease; }
.home .wp-block-image img:hover { transform: scale(1.03); }
.home .wp-block-heading a { color: #2B2B2B; text-decoration: none; }
.home .wp-block-heading a:hover { color: #D4733B; }

@media (max-width: 600px) {
  .home .wp-block-columns { flex-wrap: wrap !important; }
  .home .wp-block-column { flex-basis: 100% !important; margin-bottom: 20px; }
}

/* ===========================
   Related Posts (mu-plugin)
   =========================== */
.shirley-related-posts {
  margin-top: 50px;
  padding: 30px 20px;
  border-top: 2px solid #E8D5C0;
  background-color: #FFFFFF;
  border-radius: 8px;
}
.shirley-related-posts h2 {
  font-family: Playfair Display, serif;
  color: #A85C2F;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 25px;
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-post-item { text-align: center; }
.related-post-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.related-post-item img:hover { transform: scale(1.03); }
.related-post-item h3 { font-size: 1rem; font-weight: 600; margin-top: 10px; line-height: 1.4; }
.related-post-item h3 a { color: #2B2B2B !important; text-decoration: none; }
.related-post-item h3 a:hover { color: #D4733B; }

@media (max-width: 600px) {
  .related-posts-grid { grid-template-columns: 1fr; gap: 25px; }
  .related-post-item img { height: 250px; }
}

/* ===========================
   Hide Jetpack related posts
   =========================== */
#jp-relatedposts, .jp-relatedposts, .jp-relatedposts-post-aag { display: none !important; }

/* ===========================
   Newsletter Signup (Kit)
   =========================== */
.shirley-newsletter {
  margin-top: 40px;
  padding: 30px 25px;
  background-color: #F5E6D8;
  border-radius: 8px;
  text-align: center;
}
.shirley-newsletter h2 {
  font-family: Playfair Display, serif;
  color: #A85C2F;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.shirley-newsletter p {
  color: #6B4F3A;
  font-size: 0.95rem;
  margin: 0 0 20px 0;
}
.shirley-kit-fields {
  display: flex;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}
.shirley-kit-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #2B2B2B;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: Inter, sans-serif;
  background: #F5E6D8;
  color: #2B2B2B;
}
.shirley-kit-input:focus {
  outline: none;
  border-color: #D4733B;
}
.shirley-kit-button {
  padding: 12px 24px;
  background-color: #D4733B !important;
  color: #FFFFFF !important;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Inter, sans-serif;
  white-space: nowrap;
}
.shirley-kit-button:hover {
  background-color: #A85C2F !important;
}
/* Hide Kit default styles and branding */
.shirley-kit-form .formkit-powered-by-convertkit-container,
.shirley-kit-form .formkit-guarantee,
.shirley-kit-form .formkit-header,
.shirley-kit-form .formkit-subheader,
.shirley-kit-form .formkit-background { display: none !important; }
.shirley-kit-form { border: none !important; max-width: none !important; padding: 0 !important; background: transparent !important; }
.shirley-kit-form [data-style=minimal] { padding: 0 !important; }

@media (max-width: 600px) {
  .shirley-kit-fields {
    flex-direction: column;
  }
  .shirley-kit-button {
    width: 100%;
  }
}

/* ===========================
   Header Search Bar
   =========================== */
.header-search-bar .search-field,
.search-toggle-open-container .search-field,
.header-search-form .search-field {
  border: 1px solid #E8D5C0 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  font-family: Inter, sans-serif !important;
  color: #2B2B2B !important;
  background: #FFFFFF !important;
  max-width: 180px;
}
.header-search-bar .search-field:focus,
.header-search-form .search-field:focus {
  border-color: #D4733B !important;
  outline: none !important;
}
.header-search-bar .search-submit,
.header-search-form .search-submit {
  background: #D4733B !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  cursor: pointer;
}
.header-search-bar .search-submit:hover,
.header-search-form .search-submit:hover {
  background: #A85C2F !important;
}
/* Fix the red border on search icon/input */
.search-toggle-open .search-toggle-icon,
.header-search-bar input[type=search] {
  border-color: #E8D5C0 !important;
}

/* ===========================
   Inline Header Search Bar
   =========================== */
.header-search-inline {
  display: flex;
  align-items: center;
  gap: 0;
}
.header-search-inline input[type="search"] {
  border: 2px solid #2B2B2B;
  
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-family: Inter, sans-serif;
  color: #2B2B2B;
  background: #F5E6D8;
  width: 160px;
  outline: none;
}
.header-search-inline input[type="search"]:focus {
  border-color: #D4733B;
}
.header-search-inline button {
  background: #D4733B;
  color: #FFFFFF;
  border: 1px solid #D4733B;
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}
.header-search-inline button:hover {
  background: #A85C2F;
  border-color: #A85C2F;
}
@media (max-width: 768px) {
  .header-search-inline { display: none; }
}

/* Force hamburger visibility on mobile */
.mobile-toggle-open,
.menu-toggle-open,
button.menu-toggle-open,
.mobile-header-trigger-wrap .menu-toggle-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #2B2B2B !important;
}
.mobile-toggle-open svg,
.menu-toggle-open svg,
.mobile-header-trigger-wrap svg {
  fill: #2B2B2B !important;
  color: #2B2B2B !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Fix mobile trigger color - override palette variable */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
  color: #2B2B2B !important;
}
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
  color: #2B2B2B !important;
  fill: #2B2B2B !important;
}
.mobile-toggle-open-container .menu-toggle-open svg {
  fill: #2B2B2B !important;
}