:root {
  --color-primary:      #8E2E2E; /* dark red — header, footer, buttons, accent links */
  --color-site-bg:      #ffffff; /* body / page background */
  --color-feature-bg:   #fafaf0; /* beige — feature sections, about strip, search strip */
  --color-body-text:    #2b2b2b; /* main readable body text */
  --color-footer-bg:    #8E2E2E; /* footer bar background */
  --color-footer-text:  #ffffff; /* footer link and text colour */
}




/* Anchor scrolls always clear the sticky header on all pages */
html {
  scroll-padding-top: calc(var(--tb-desktop, 56px) + var(--mh-desktop, 72px) + 16px);
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--tb-mobile, 44px) + var(--mh-mobile, 60px) + 16px);
  }
}

/* General reset & font */
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: var(--color-site-bg);
  color: var(--color-body-text);
}

img:not(.emoji):not(.wp-smiley) {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  z-index: 10000;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* Top bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary);
  padding: 10px 10px;
  border-bottom: 1px solid #ffffff;
}

.social img {
  height: 24px;
}

.secondary-menu a {
  margin-left: 20px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px;
  background: rgba(255,255,255,.48);        /* fallback for browsers without lab() */
  background: lab(100% 0.01 -0.01 / 0.48);  /* preferred */
  border-bottom: 1px solid rgb(217, 202, 202);
}


.logo a {
  font-size: 28px;
  font-weight: 500;
  color: #b6a344;
  text-decoration: none;
}

.main-menu a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700; /* or 800 if you want it extra bold */
   font-size: 20px;
  margin-left: 45px;
  color: var(--color-section-titles);
  text-decoration: none;
  font-weight: bold;
}

.secondary-menu-ul,
.main-menu-ul,
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.secondary-menu-ul,
.main-menu-ul {
  display: flex;
  align-items: center;
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
}

.main-menu .dropdown {
  position: relative;
  display: inline-block;
}

.main-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 8px 16px rgba(139, 106, 106, 0.2);
  z-index: 3;
  padding: 15px;
}

.main-menu .dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  margin: 5px 20px;
  color: #000000;
  text-decoration: none;
}


.search-button {
  all: unset;             /* Reset all default browser styles */
  font-size: 22px;        /* Size of the emoji */
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  margin-left: 15px;      /* spacing from previous item */
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  vertical-align: middle;
}
.search-button:hover {
  transform: scale(1.1);
}







.welcome-banner {
  background-color: var(--color-feature-bg);
  text-align: center;
  padding: 15px 20px;
  font-family: 'Open Sans', sans-serif;
  color: #0b0b0b;
}

.welcome-banner h1 {
  font-size: 2.5rem;
  font-family: 'Brush Script MT', cursive;
  margin-bottom: 10px;
}

.welcome-banner p {
  font-size: 1.2rem;
  color: #4e4c4c;
}


/* Hero Section */
.hero {
  text-align: center;
  padding: 30px 20px;
}

.hero h2 {

  font-size: 33px;
  margin-bottom: 10px;
  color: var(--color-section-titles);
}


/* Category Grid */
/* Grid Row Wrappers */
.category-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Icon Styling */
.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.icon-wrapper img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}

.icon-wrapper span {
  margin-top: 8px;
  font-weight: bold;
  color: #454545;
}





.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.icon-wrapper img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}

.icon-wrapper span {
  margin-top: 8px;
  font-weight: bold;
  color: #000;
}


.about-me-wrapper {
  background-color: #d3d30c;
  padding: 10px 0;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}



.about-me-section {
  padding: 50px 0;
  background-color: var(--color-feature-bg);
}

.about-me-container {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;

}

.about-me-image img {
  width: 180px;
  height: auto;
  border-radius: 12px;
}

.about-me-text {
  flex: 1;
}

.about-me-text h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 15px;
    color: var(--color-section-titles);
}

.about-me-text p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
    font-family: 'Jost', sans-serif;

}





.about-me-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff !important;             /* keep text white */
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none !important;   /* no underline */
  font-weight: bold;
  cursor: pointer;
}

/* Ensure it stays white on all states */
.about-me-button:hover,
.about-me-button:focus,
.about-me-button:active,
.about-me-button:visited {
  color: #fff !important;
  text-decoration: none !important;
}

/* Optional: subtle hover so it feels clickable */
.about-me-button:hover { 
  background-color: #762525;
}

/* Optional: visible keyboard focus */
.about-me-button:focus-visible {
  outline: 2px solid #b76a6a;
  outline-offset: 2px;
}








.newest-recipes {
  padding: 10px 10px;
  background-color: #ffffff;
  color: #454545;
    font-family: 'Jost', sans-serif;

}

.newest-recipes .container {
  max-width: 1200px;
  margin: 0 auto;
      font-family: 'Jost', sans-serif;

}

.newest-recipes .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
      font-family: 'Jost', sans-serif;

}

.newest-recipes h2 {

  font-size: 36px;
  margin-bottom: 10px;
}

.newest-recipes .see-all {
  color: var(--color-section-titles);
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 10px;
      font-family: 'Jost', sans-serif;

}

.newest-recipes .intro-text {
  font-size: 20px;
  color: #535151;
  margin: 1rem 0 2rem 0;
  padding: 0;
  max-width: none;
  text-align: left;
      font-family: 'Jost', sans-serif;


}












.recipe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  

}




@media (max-width: 768px) {
  .recipe-cards,
  .recipe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns on mobile */
    gap: 20px;
    padding: 0 10px;
    
  }

  .recipe-card {
    width: 100%;
  }

  .recipe-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  }
}

@media (max-width: 768px) {
  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .recipe-card {
    padding: 8px;
  }

  .recipe-card img {
    width: 100%;
    height: auto;
    border-radius: 6px;
  }

  .recipe-card .recipe-category {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-section-titles);
    margin-top: 6px;
    margin-bottom: 2px;
  }

  .recipe-card .recipe-title,
  .recipe-card h3.recipe-title {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    margin: 2px 0 8px 0;
  }
}

@media (max-width: 480px) {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
}







.recipe-card {
  text-align: left;
}

/* DESKTOP & TABLET */
.recipe-card img {
  width: 100%;
  height: 350px;         /* consistent height on desktop */
  object-fit: cover;
  border-radius: 6px;
}

/* MOBILE */
@media (max-width: 768px) {
  .recipe-card img {
    height: 220px;       /* shorter height on mobile */
    object-fit: cover;
    border-radius: 6px;
  }
}



.recipe-card .category {
  font-size: 14px;
  color: var(--color-section-titles);
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 3px;
}

.recipe-card .recipe-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: #282727;
}






/* Shake animation */
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.icon-wrapper:hover img {
  animation: shake 0.4s ease;
}

/* Site footer only (not post meta footers) */
#colophon,
.site-footer {
  text-align: center;
  background: var(--color-footer-bg);
  padding: 20px 0;
  margin-top: 50px;
  font-size: 14px;
  color: var(--color-footer-text);
}


.footer-links {
  margin-bottom: 10px;
}

.footer-links a {
  margin: 0 10px;
  color: var(--color-footer-text);
  text-decoration: none;
}


@media (max-width: 768px) {
  .about-me-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-me-text {
    text-align: center;
  }
}


.featured-recipe {
  background-color: #ffffff;
  padding: 10px 10px;
  padding-top: 1.5rem; /* reduce top padding */
  margin-top: 1rem;  /* reduce top margin */
}

.featured-recipe-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--color-feature-bg);
  border: 4px dotted #ebeacc;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  font-family: 'Jost', sans-serif;
}
.featured-recipe-image {
  width: 280px;
  height: 280px;
  min-width: 280px;
  min-height: 280px;
  max-width: 280px;
  max-height: 280px;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
  flex: 0 0 280px;
}
.featured-recipe-image img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* Apply rounded corners to all images sitewide */
img:not(.emoji):not(.wp-smiley) {
  border-radius: 20px;
  display: block;
  max-width: 100%;
  height: auto;
}




.featured-content {
  max-width: 700px;
  flex: 1;
}










/* === CUSTOM ADDITIONAL CSS (from WordPress Customizer) === */


/* ─────────────────────────────────────────────
   1) Page tweaks
─────────────────────────────────────────────── */
.page .entry-title { display: none; }

/* ─────────────────────────────────────────────
   2) Card grid on homepage
─────────────────────────────────────────────── */
.newest-recipes .recipe-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .newest-recipes .recipe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .newest-recipes .recipe-cards { grid-template-columns: 1fr; }
}
.newest-recipes .recipe-card {
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.newest-recipes .recipe-card img { width: 100%; height: auto; display: block; }
.newest-recipes .recipe-card .category {
  margin: 12px 16px 0; font-size: 12px; letter-spacing: .06em; color: var(--color-section-titles);
}
.newest-recipes .recipe-card .recipe-title { margin: 6px 16px 16px; font-size: 18px; line-height: 1.3; }
.newest-recipes .recipe-card .recipe-title a { text-decoration: none; color: #3b1f1f; }






/* ─────────────────────────────────────────────
   3) Full-bleed custom headers (mobile + desktop)
─────────────────────────────────────────────── */
.mobile-header,
.desktop-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  z-index: 1000;
}

/* Prevent wrappers from clipping the search bar */
.site-header, .desktop-header, .mobile-header, .main-navigation,
.entry-content, .inside-article, .grid-container { overflow: visible !important; }

/* Hide default nav on mobile if you’re using the custom header */
@media (max-width: 768px){
  .menu-toggle, .main-navigation { display: none !important; }
}

/* ─────────────────────────────────────────────
   4) Mobile header layout + compact logo (final)
─────────────────────────────────────────────── */
@media (max-width: 768px){
  .mobile-header .main-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:.35rem .75rem !important; /* tighter row */
  }

  /* Buttons */
  .mobile-header .mobile-menu-toggle,
  .mobile-header .search-button{
    width:40px; height:40px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; color:#2b2b2b; cursor:pointer;
  }

  /* Kill any rogue font-size/line-height inflation on the logo link */
  .mobile-header .logo,
  .mobile-header .logo a{
    display:flex !important; align-items:center !important;
    font-size:0 !important; line-height:0 !important;
    margin:0 !important; padding:0 !important;
  }

  /* Fixed mobile logo height */
  .mobile-header .logo { height:32px !important; }
  .mobile-header .logo img{
    height:100% !important; width:auto !important; max-width:180px;
    display:block !important;
  }
}

/* Desktop logo sanity (for WordPress logo widgets, etc.) */
.site-logo img, img.custom-logo, .inside-header .site-logo img {
  max-height: 56px !important; height: auto !important; width: auto !important; display: block !important;
}
@media (max-width: 768px){
  .site-logo img, img.custom-logo, .inside-header .site-logo img { max-height: 40px !important; }
}

/* ─────────────────────────────────────────────
   5) Slide panels (menu + search) with animation
─────────────────────────────────────────────── */
.slide-panel{
  /* removed - see slide panel fix below */
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
}
.slide-panel.is-open,
.slide-panel.show{
  /* removed - see slide panel fix below */
}

/* Mobile menu look */
.mobile-header .mobile-menu{
  background:#fff; border-top:1px solid #eee;
}
.mobile-header .mobile-menu a{
  display:block; padding:.9rem .9rem; color:#6b2f08; text-decoration:none; border-top:1px solid #f3f3f3;
}

/* ─────────────────────────────────────────────
   6) Shared search bar (under header)
─────────────────────────────────────────────── */
.header-search-bar{
  display:none; align-items:center;
}
.header-search-bar.is-open,
.header-search-bar.show{ display:flex !important; }

/* Input + button live inside one unified, bordered box instead of two
   separate controls — the form element itself is the box. */
.header-search-bar form{
  display:flex; align-items:stretch; width:100%; max-width:360px;
  border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff;
}

.header-search-bar input[type="search"]{
  flex:1; min-width:0; padding:.6rem .75rem;
  border:none; border-radius:0; background:transparent;
}
.header-search-bar input[type="search"]:focus{ outline:none; }

.header-search-bar button[type="submit"]{
  padding:.6rem 1rem; border:0; border-radius:0;
  background:var(--color-primary, #8E2E2E); color:#fff; cursor:pointer;
  white-space:nowrap;
}
.header-search-bar button[type="submit"]:hover{ opacity:.9; }






/* Desktop logo size (adjust the px value to taste) */
@media (min-width: 769px){
  .desktop-header .logo img{
    height: 48px !important;   /* try 42 / 48 / 52 until it feels right */
    width: auto !important;
    display: block !important;
  }

  /* Optional: tighten the desktop header row a bit */
  .desktop-header .main-header{
    padding: 10px 0;           /* reduce vertical padding if needed */
  }
}


@media (min-width: 769px){
  .inside-header .site-logo img,
  img.custom-logo{
    max-height: 48px !important;
    height: auto !important;
    width: auto !important;
  }
}





/* Desktop header: keep full-width bars, just add side gutters */
@media (min-width: 769px){
  /* full-width red top bar, no centering */
  .desktop-header .top-bar{
    padding-left: 40px;   /* ~1cm */
    padding-right: 40px;
  }

  /* full-width white nav row, no centering */
  .desktop-header .main-header{
    padding-left: 40px;   /* ~1cm */
    padding-right: 40px;
  }

  /* optional: small gap between nav items */
  .desktop-header .main-menu{ gap: 24px; }
}




/* Social icons base */
.top-bar .social-icons{ display:flex; gap:14px; }
.top-bar .social-icons .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9999px;
  color:#8E2E2E; background:transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.top-bar .social-icons .icon:hover{ transform:translateY(-1px); background:#f4eaea; color:#652020; }
.top-bar .social-icons svg{ width:20px; height:20px; display:block; }

/* Desktop: center icons; keep About/Contact fixed to the right */
@media (min-width: 769px){
  .desktop-header .top-bar{
    display:flex; align-items:center; justify-content:center;
    position:relative; padding-left:40px; padding-right:40px; /* your gutter */
  }
  .desktop-header .top-bar .secondary-menu{
    position:absolute; right:40px; top:50%; transform:translateY(-50%);
    display:flex; gap:18px;
  }
}

/* Mobile: About/Contact left, icons right */
@media (max-width: 768px){
  .mobile-header .top-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 16px;
  }
  .mobile-header .top-bar .secondary-menu{ display:flex; gap:16px; }
  .mobile-header .top-bar .social-icons{ gap:12px; }
  .mobile-header .top-bar .social-icons .icon{ width:32px; height:32px; }
}




/* Bigger, brighter social icons in the top bar */
.top-bar .social-icons .icon{
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;                     /* icon color */
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* make the SVG paths use the current text color */
.top-bar .social-icons svg{
  width: 24px;                     /* icon size */
  height: 24px;
}
.top-bar .social-icons svg path{
  fill: currentColor !important;
}

/* hover/focus */
.top-bar .social-icons .icon:hover,
.top-bar .social-icons .icon:focus-visible{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-1px);
}

/* (optional) active click feedback */
.top-bar .social-icons .icon:active{
  transform: translateY(0);
}










/* Full-bleed background even if footer sits inside a max-width container */
footer {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 22px 16px;
}





.my-footer .container {
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  text-align: center;
}

.my-footer .links { display: inline-flex; gap: 20px; margin-bottom: 8px; }
.my-footer .links a { text-decoration: none; }
.my-footer .links .footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 20px;
}
.my-footer .links .footer-menu li { margin: 0; }
.my-footer .links .footer-menu a { text-decoration: none; }












/* Force Tasty Jump + Print buttons to match Explore Further */
a.tasty-recipes-jump-to,
a.tasty-recipes-print,
.tasty-recipes-buttons a,
.tasty-recipes-quick-links a {
  background-color: #f4e7e4 !important;
  color: #333 !important;
  border: 1px solid #d8c8c6 !important;
  border-radius: 50px !important;
  padding: 0.75rem 1.8rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease-in-out !important;
}

/* Hover effect */
a.tasty-recipes-jump-to:hover,
a.tasty-recipes-print:hover,
.tasty-recipes-buttons a:hover,
.tasty-recipes-quick-links a:hover {
  background-color: #e9dad8 !important;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}

/* Container centering */
.tasty-recipes-buttons,
.tasty-recipes-quick-links {
  text-align: center !important;
  margin: 2rem 0 !important;
}

.tasty-recipes-buttons a + a,
.tasty-recipes-quick-links a + a {
  margin-left: 1rem !important;
}




/* Remove dot + add spacing */
.tasty-recipes-buttons,
.tasty-recipes-quick-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;      /* space between buttons */
  font-size: 0 !important;   /* hides the raw "·" text node */
}

.tasty-recipes-buttons a,
.tasty-recipes-quick-links a {
  font-size: 16px !important; /* restore text size */
}

/* Ensure no leftover margin rule adds extra space */
.tasty-recipes-buttons a + a,
.tasty-recipes-quick-links a + a {
  margin-left: 0 !important;
}




/* Mobile tweaks for Jump/Print buttons */
@media (max-width: 600px) {
  .tasty-recipes-buttons,
  .tasty-recipes-quick-links {
    gap: 8px !important;                 /* smaller space */
  }

  .tasty-recipes-buttons a,
  .tasty-recipes-quick-links a {
    font-size: 14px !important;          /* smaller text */
    padding: 0.55rem 1rem !important;     /* tighter padding */
    border-radius: 40px !important;       /* keep pill look, slightly tighter */
  }
}

/* Ultra-narrow phones: stack if needed */
@media (max-width: 360px) {
  .tasty-recipes-buttons,
  .tasty-recipes-quick-links {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* "Jump to Recipe" / "Print Recipe" jump bar — these are actually rendered
   by the gymplix-connector plugin (#gymplix-jumpbar / .gymplix-jumpbar__btn),
   not the .tasty-recipes-* classes above, which don't exist on this site.
   The plugin injects its own inline <style> per post that already stacks
   and centers the buttons on mobile, but sets the bar and buttons to
   width:100% plus padding with no box-sizing, so both render wider than
   the article and overflow. These overrides use the plugin's own selectors
   at matching specificity + !important (needed to beat that later inline
   <style> block) to fix the box model and cap the buttons at a width
   clearly narrower than the container, without touching colour, text, or
   the plugin's jump/print functionality. */
@media (max-width: 720px) {
  #gymplix-jumpbar.gymplix-jumpbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #gymplix-jumpbar .gymplix-jumpbar__btn {
    box-sizing: border-box !important;
    width: 90% !important;
    max-width: 320px !important;
    min-width: 0 !important;
  }
}
















.featured-badge {
  font-size: 22px;
  font-family: 'Brush Script MT', cursive;
  color: #a52a2a;
  margin-bottom: 10px;
}



.featured-title {
  font-size: 36px;
  font-weight: 800;
  font-family: 'Anton', sans-serif;
  margin-bottom: 10px;
  color: var(--color-section-titles);
}

.featured-description {
  font-size: 20px;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.6;
  
}

.featured-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: 14px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: background 0.3s;
}

.featured-button:hover {
  background-color: #6a1e1e;
}

@media (max-width: 768px) {
  .featured-recipe-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .featured-content {
    max-width: 100%;
  }
}










.dinner-recipe-2 {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

.dinner-recipe-2 .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.dinner-recipe-2 .header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dinner-recipe-2 .section-title {
  font-size: 34px;
  font-weight: 800;
  font-family: 'Anton', sans-serif;
  color: var(--color-section-titles);
  margin: 0;
}

.dinner-recipe-2 .see-all-link {
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-primary);
  font-size: 0.95rem;
    font-size: 19px;
}

.dinner-recipe-2 {
  padding: 2rem 1rem 1rem 1rem; /* Less bottom padding */
}

.dinner-recipe-2 .section-subtitle {
  font-size: 20px;
  color: #666;
  margin-bottom: 0.5rem; /* smaller space below */
  margin-top: 0.5rem;     /* smaller space above */
}


.recipe-grid {
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 30px;
  box-sizing: border-box;
}






.newest-recipes {
  margin-bottom: 40px; /* You can increase this number if needed */
}

.newsletter-section {
    margin-bottom: 20px;
}






@media (max-width: 767px) {
  .dinner-recipe-2 .header-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dinner-recipe-2 .section-title {
    font-size: 28px;
    text-align: left;
  }



  .dinner-recipe-2 .section-subtitle {
    font-size: 16px;
    text-align: left;
    margin-top: 10px;
  }

  .recipe-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .dinner-recipe-2 .container {
    padding: 0 10px;
  }
}


.recipe-grid {
  padding-left: 10px;  /* Match this with header-wrapper */
}





.custom-search-section {
  background-color: var(--color-feature-bg);
  padding: 3rem 1rem;
  text-align: center;
  border-radius: 0;
}

.custom-search-section .subheading {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  color: #444;
  margin-bottom: 0.3rem;
}

.custom-search-section .search-title {
  font-family: 'Georgia', serif;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--color-section-titles);
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
  border: 3px solid #edece2;
  border-radius: 50px;
  overflow: hidden;
  background-color: white;
}

.search-bar input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  font-size: 1rem;
  outline: none;
  border-radius: 50px 0 0 50px;
}

.search-bar button {
  background-color: #ffffff;
  color: white;
  border: none;
  padding: 0 1.5rem;
  font-size: 1.2rem;
  height: 100%;
  cursor: pointer;
  border-radius: 0 50px 50px 0;
}

.or-text {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.browse-link {
  font-weight: bold;
  text-decoration: underline;
  color: #662828;
  margin-left: 0.25rem;
}



.category-section {
  padding: 3rem 1rem;
  border-top: 3px dotted #f2f2c7;
  text-align: left;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 1200px;
  margin: 0 auto 0.5rem auto; /* reduced bottom margin */
  flex-wrap: wrap;
  gap: 1rem;
}

.category-title {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 2rem;
  margin: 0; /* remove default spacing */
}

.see-all-link {
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-primary);
  font-size: 0.95rem;
    font-size: 19px;

}

 

.category-description {
  margin: 0.5rem 0 2rem 0;
  color: #555;
  font-size: 1.125rem;
  text-align: left;
  padding: 0;
  max-width: none;
    font-size: clamp(18px, 2vw, 20px); /* Grows with screen size */


}

.category-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.category-label {
  font-weight: bold;
  color: var(--color-section-titles);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 10px;
}



.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.recipe-card {
  text-align: left;
}

.recipe-card img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.recipe-category {
  color: var(--color-section-titles);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin: 0.75rem 0 0.3rem;
}

.recipe-title {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
}


.newsletter-section {
  background-color: var(--color-feature-bg);
  padding: 15px 20px;
}

.newsletter-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.newsletter-image {
  flex-shrink: 0;
  width: 352px;
  max-width: 352px;
  flex: 0 0 352px;
}

.newsletter-image img {
  display: block;
  width: 352px;
  max-width: 352px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border: 10px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .newsletter-image {
    width: 100%;
    max-width: 352px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: auto;
  }

  .newsletter-image img {
    width: 100%;
    max-width: 352px;
    height: auto;
  }

  /* Fields were rendering at 100% width PLUS their own 15px left/right
     padding on top (default content-box), overflowing past the right
     edge. border-box makes padding count inside the 100%, so the field
     stays fully inside its container with the same padding as before —
     left spacing unchanged, right spacing now equal to it. */
  .newsletter-form input {
    box-sizing: border-box;
  }
}

.newsletter-form {
  flex: 1;
  max-width: 1200px;
}

.newsletter-form h2 {
  font-size: 2rem;
  font-family: 'Georgia', serif;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--color-section-titles);
}

.newsletter-form p {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}

.newsletter-form input {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  font-size: 1rem;
  border: 1px solid #bcbcbc;
  border-radius: 5px;
}

.newsletter-form button {
  width: 100%;
  padding: 15px;
  background-color: var(--color-primary);
  color: var(--color-footer-text);
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
   margin-bottom: 20px;
}

.newsletter-form button:hover {
  background-color: #c53412;
}

.newsletter-success {
  display: none;
  color: #1b7e27;
  font-weight: 600;
  margin-top: 10px;
}


















/* OPTIONAL: Make sure mobile menu appears properly on small screens */
@media (max-width: 768px) {
  .mobile-header {
    display: block;
    width: 100%;
    background: white;
    z-index: 1000;
  }

  .mobile-header nav,
  .mobile-header .logo,
  .mobile-header button {
    display: inline-block;
    vertical-align: middle;
  }

  .mobile-menu-toggle {
    font-size: 22px;
    margin: 10px;
    cursor: pointer;
    background: none;
    border: none;
  }

  .mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    padding: 10px;
    border-top: 1px solid #ddd;
  }

  .mobile-menu a {
    padding: 10px 0;
    text-decoration: none;
    color: #2d2b2b;
    font-weight: bold;
  }

  .mobile-menu.show {
    display: flex;
  }
}





@media (max-width: 768px) {
  .mobile-header {
    display: block;
  }
}


.mobile-header a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
/* and the rest I gave you */










/* Show/hide headers based on screen size */
.mobile-header {
  display: none;
}
.desktop-header {
  display: block;
}

@media (max-width: 768px) {
  .mobile-header {
    display: block;
    background: white;
    z-index: 1000;
  }
  .desktop-header {
    display: none;
  }

  .mobile-header .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }

  .mobile-menu-toggle {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
  }

  .mobile-menu {
    display: none;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ccc;
  }

  .mobile-menu.show {
    display: flex;
  }

  .mobile-menu a {
    padding: 10px 0;
    text-decoration: none;
    color: #353535;
    font-weight: bold;
  }
}




@media (max-width: 768px) {
  .category-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 10px;
    margin: 20px auto;
  }

  .icon-wrapper {
    width: 100px;
  }
}









/* Hide horizontal scroll globally */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* Prevent image overflow */
img:not(.emoji):not(.wp-smiley) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Fix category icons layout */
@media (max-width: 768px) {
  .category-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 10px;
    margin: 20px auto;
    width: 100%;
  }

  .icon-wrapper {
    width: 100px;
    text-align: center;
  }
}

/* Fix logo area if it’s overflowing */
.mobile-header .main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/* Prevent nav menu from overflowing */
.mobile-header nav {
  overflow-x: hidden;
  max-width: 100%;
}





@media (max-width: 768px) {
  .featured-recipe-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .featured-recipe-image {
    width: 240px !important;
    height: 240px !important;
    min-width: 240px !important;
    min-height: 240px !important;
    max-width: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
    align-self: center !important;
  }
  .featured-recipe-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
  }

  .featured-content {
    text-align: center;
    padding: 12px;
  }

  .featured-title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .featured-description {
    font-size: 19px;
    line-height: 1.5;
  }

  .featured-button {
    font-size: 14px;
    padding: 10px 16px;
    margin-top: 12px;
    display: inline-block;
  }
}




@media (min-width: 769px) {
  .featured-recipe-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
  }
  .featured-recipe-image {
    width: 280px !important;
    height: 280px !important;
    min-width: 280px !important;
    min-height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
    flex: 0 0 280px !important;
  }
  .featured-content { flex: 1; }
}

/* continue with normal rules below */
.category-title {
  color: var(--color-section-titles);
  opacity: 1;
  text-shadow: none;
}

.welcome-banner {
  padding-bottom: 10px; /* reduce spacing */
  margin-bottom: 0;
}

.about-divider {
  margin: 10px auto;  /* reduce vertical spacing */
}

.hero {
  padding-top: 10px;  /* less space above 'Find Your Perfect Recipe Here' */
}







/* === CATEGORY GRID LAYOUT === */

.category-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 30px 0;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 100px;
}

.icon-wrapper img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.icon-wrapper span {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
}


/* === MOBILE STYLES: 2 rows x 3 icons === */
@media (max-width: 768px) {
  .category-row {
    gap: 20px;
  }

  .icon-wrapper {
    width: 30%;         /* 3 icons per row */
    max-width: 100px;
  }

  .icon-wrapper img {
    width: 60px;
    height: 60px;
  }

  .icon-wrapper span {
    font-size: 0.85rem;
  }
}



/* ✅ Apply Suez One to all h2 and styled h2 equivalents */
h2,
.section-title,
.category-title,
.search-title,
.newsletter-form h2,
.about-me-text h2,
.hero h2,
.featured-title,
.dinner-recipe-2 .section-title {
  font-family: 'Suez One', serif !important;
}

/* Set Jost as the default font for the entire page */
body {
  font-family: 'Jost', sans-serif;
  line-height: 1.6;
  color: #2c2c2c;
}





.about-me-text h2,
.hero h2,
.newsletter-form h2,
.dinner-recipe-2 
.section-title {
  font-family: 'Suez One', serif !important;
  font-weight: 400; /* or bold, depending on style */
}




@media (min-width: 769px) {
  .icon-wrapper img {
    width: 100px;
    height: 100px;
  }

  .icon-wrapper span {
    font-size: 1.1rem;
  }
}



.recipe-title {
  font-family: 'Jost', sans-serif !important;
}






/* Scrollbar styling for WebKit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f5f5f5;
}

/* === Spacy Header Alignment Fix === */

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px; /* space between menu and search */
}

.header-right .main-menu {
  display: flex;
  align-items: center;
}

.header-right .search-button {
  display: flex;
  align-items: center;
}









/* Post meta row under cards/posts — inline + clean */
.site-main .inside-article footer.entry-meta {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;      /* space between Category and Leave a comment */
  flex-wrap: wrap !important;
}

/* remove any badge/pill on the category link */
.site-main .inside-article footer.entry-meta .cat-links a {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* tidy icon spacing + ensure excerpt leaves space */
.site-main .inside-article footer.entry-meta .gp-icon { margin-right: 6px !important; }
.site-main .inside-article .entry-summary { margin-bottom: 12px !important; }

/* remove list styling if theme outputs lists here */
.site-main .inside-article footer.entry-meta ul { list-style: none; margin: 0; padding: 0; }
.site-main .inside-article footer.entry-meta li { display: inline-flex; align-items: center; margin: 0; }

/* link style */
.site-main .inside-article footer.entry-meta a { color: inherit; text-decoration: none; }
.site-main .inside-article footer.entry-meta a:hover { text-decoration: none; }






.footer-bar, .site-info { display: none !important; }








/* Footer: single-color bar, centered, compact */
.my-footer{
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
  padding:6px 0;
}
.my-footer .container{
  max-width:1100px;
  margin:0 auto;
  padding:0 14px;
  text-align:center;
  background:transparent !important;   /* kill the white box */
  box-shadow:none; border:0;
}
.my-footer .links{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:18px; margin:0 0 4px;
}
.my-footer p{ margin:0; line-height:1.3; }

/* Links */
.my-footer a{
  color:#fff !important;                /* white links */
  text-decoration:none;
}








/* One solid footer bar (no inner lighter box) */
.my-footer{ background:var(--color-footer-bg); padding:6px 0; color:var(--color-footer-text); }

.my-footer .container{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 14px;               /* keep it compact */
  max-width:1100px; margin:0 auto; text-align:center;
}

/* kill any decorative overlays */
.my-footer::before,
.my-footer::after,
.my-footer .container::before,
.my-footer .container::after{ content:none !important; background:none !important; }

/* links */
.my-footer .links{ display:flex; justify-content:center; gap:18px; margin:0 0 4px; }
.my-footer a{ color:#fff !important; text-decoration:none; }
.my-footer a:hover{ color:#F4E3C1; text-decoration:underline; }
.my-footer p{ margin:0; line-height:1.3; }










/* 1) Keep the share icons inside the content width and aligned left */
.entry-content .sassy-social-share,
.entry-content .heateor_sss_sharing_container {
  max-width: 800px;              /* match your post content width */
  margin: 16px auto !important;  /* center within the content column */
  padding-left: 0 !important;
  text-align: left;
}

/* Remove odd internal left margins some share plugins add */
.entry-content .sassy-social-share .share-buttons,
.entry-content .heateor_sss_sharing_container .heateor_sss_sharing_ul {
  margin-left: 0 !important;
}






/* === Keep special blocks inside the text column === */
/* Set this to your article text width */
:root { --post-text-width: 800px; }

/* Center within the article like normal paragraphs */
.single .inside-article .entry-content > .heateor_sss_sharing_container,
.single .inside-article .entry-content > .sassy-social-share,
.single .inside-article .entry-content > nav.post-navigation {
  max-width: var(--post-text-width);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Share icons: one line, aligned with text ---- */
.heateor_sss_sharing_container,
.sassy-social-share { text-align: left !important; }

.heateor_sss_sharing_container .heateor_sss_sharing_ul,
.sassy-social-share .share-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---- Post navigation: stack + left align ---- */
.single nav.post-navigation {
  position: static !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.single nav.post-navigation .nav-links {
  display: flex !important;
  flex-direction: column !important;   /* two lines */
  align-items: flex-start !important;  /* flush with text edge */
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single .post-navigation .nav-next {
  order: 1 !important;
  float: none !important;
  width: auto !important;
}
.single .post-navigation .nav-previous {
  order: 2 !important;
  float: none !important;
  width: auto !important;
}

/* Link cosmetics (optional) */
.single .post-navigation a { color: #333; text-decoration: none; }
.single .post-navigation a:hover { text-decoration: underline; }









/* Prevent any float/bleed pushing text to page edges */
.post-navigation .nav-previous,
.post-navigation .nav-next {
  float: none;
  width: 100%;
}






/* Fix misaligned meta row on category/archive cards */
.archive .inside-article footer.entry-meta,
.blog    .inside-article footer.entry-meta{
  position: static !important;   /* cancel any absolute/relative tricks */
  float: none !important;
  clear: both;                   /* start on a new line under the excerpt */
  margin: 10px 0 0 !important;   /* small top space */
  padding: 0 !important;
  display: flex;                 /* tidy inline items */
  flex-wrap: wrap;
  gap: 10px;
}

/* Keep each meta item inline and inside the card */
.archive .inside-article footer.entry-meta > * ,
.blog    .inside-article footer.entry-meta > * {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}








/* Home hero: remove the white box behind "Hey, I'm Klaudia!" */
.home .about-me-section { background: var(--color-feature-bg); }
.home .about-me-section .container,
.home .about-me-section .about-me-container,
.home .about-me-section .wp-block-group.has-background {
  background: transparent !important;
  box-shadow: none !important;   /* in case a card style added it */
  border: 0 !important;
}




/* Kill the outer generic footer background */
footer,
.site-footer {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Use ONE footer bar only */
.my-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 12px 0;
}



/* Ensure inner wrapper doesn't reintroduce a box */
.my-footer .container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}



.my-footer {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}






/* ── Breadcrumb: clear the fixed desktop header on every page ──
   body already reserves calc(--tb-desktop + --mh-desktop) of top padding
   for the fixed header, but the breadcrumb sits flush against the very
   top of that reserved space with no buffer of its own, so it's the
   first thing clipped whenever the real header height runs even slightly
   past the assumed constants. This keeps it fully clear, on load and
   while scrolling, on every page type (not just single posts). */
@media (min-width: 769px) {
  .breadcrumb {
    position: relative;
    z-index: 1;
    margin-top: 20px;
  }
}

/* ── Single post: breadcrumb + title always visible above sticky nav ── */
body.single .breadcrumb,
body.single-post .breadcrumb {
  position: relative;
  z-index: 1;
  scroll-margin-top: calc(var(--tb-desktop, 56px) + var(--mh-desktop, 72px) + 16px);
}

body.single .entry-header,
body.single-post .entry-header {
  position: relative;
  z-index: 1;
  scroll-margin-top: calc(var(--tb-desktop, 56px) + var(--mh-desktop, 72px) + 16px);
}

.single .entry-header,
.single h1.entry-title {
  margin-top: 40px !important;
  padding-top: 20px !important;
}

.single .entry-title,
body.single-post h1.entry-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 40px !important;
  margin-bottom: 20px !important;
  padding-top: 20px !important;
  color: #2c2c2c !important;
  position: relative !important;
  z-index: 1 !important;
  scroll-margin-top: calc(var(--tb-desktop, 56px) + var(--mh-desktop, 72px) + 20px);
}

/* Breathing room at the top of the article area */
body.single-post .inside-article {
  padding-top: 16px;
}

@media (max-width: 768px) {
  body.single .breadcrumb,
  body.single-post .breadcrumb,
  body.single .entry-header,
  body.single-post .entry-header {
    scroll-margin-top: calc(var(--tb-mobile, 44px) + var(--mh-mobile, 60px) + 16px);
  }

  .single .entry-title,
  body.single-post h1.entry-title {
    font-size: 1.5rem !important;
    scroll-margin-top: calc(var(--tb-mobile, 44px) + var(--mh-mobile, 60px) + 16px);
  }
}

/* Non-single entry titles (archive cards, blog index) */
.page .inside-article .entry-title {
  font-family: 'Suez One', serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .2px;
  color: #2c2c2c;
  font-size: clamp(30px, 5vw, 42px);
  margin-bottom: 8px;
}





























/* ========== CATEGORY LABELS (desktop + mobile) ========== */
.dinner-recipe-2 .recipe-card .category,
.dinner-recipe-2 .recipe-card .recipe-category,
.dinner-recipe-2 .recipe-card .category-label,
.category-section.dinner-recipe-2 .recipe-card .category,
.category-section.dinner-recipe-2 .recipe-card .recipe-category,
.category-section.dinner-recipe-2 .recipe-card .category-label{
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--color-section-titles) !important;
  margin-top: 12px !important;
}

@media (max-width: 768px){
  .dinner-recipe-2 .recipe-card .category,
  .dinner-recipe-2 .recipe-card .recipe-category,
  .dinner-recipe-2 .recipe-card .category-label,
  .category-section.dinner-recipe-2 .recipe-card .category,
  .category-section.dinner-recipe-2 .recipe-card .recipe-category,
  .category-section.dinner-recipe-2 .recipe-card .category-label{
    font-size: 14px !important;
  }
}

/* ========== MOBILE GRID + IMAGE RATIO (2-up, same height) ========== */
@media (max-width: 768px){
  /* Force 2 columns on all four sections you marked as dinner-recipe-2 */
  .dinner-recipe-2 .recipe-grid,
  .category-section.dinner-recipe-2 .recipe-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
    padding: 0 8px !important;
  }

  /* Uniform tall thumbs; cancel any fixed heights */
  .dinner-recipe-2 .recipe-card img,
  .category-section.dinner-recipe-2 .recipe-card img{
    width: 100% !important;
    height: auto !important;       /* kills the old 220px rule */
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    display: block;
  }

  /* Tight cards so images dominate */
  .dinner-recipe-2 .recipe-card,
  .category-section.dinner-recipe-2 .recipe-card{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========== DESKTOP FEATURED IMAGE ========== */
@media (min-width: 769px){
  .featured-recipe-wrapper .featured-recipe-image{
    width: 280px !important;
    height: 280px !important;
    min-width: 280px !important;
    min-height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
    flex: 0 0 280px !important;
  }
  .featured-recipe-wrapper .featured-recipe-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
  }
  .featured-recipe-wrapper{ gap: 30px; }
}







/* Desktop/laptop: 4 cards per row for the category sections */
@media (min-width: 1024px){
  .dinner-recipe-2 .recipe-grid,
  .category-section.dinner-recipe-2 .recipe-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;              /* tweak to 18–28px if you prefer */
  }

  /* Keep desktop thumbnails consistent and not overly tall */
  .dinner-recipe-2 .recipe-card img,
  .category-section.dinner-recipe-2 .recipe-card img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;               /* balanced portrait; try 1/1 if you want squares */
    object-fit: cover !important;
    border-radius: 16px;
  }
}

/* Optional: tablet = 3 per row */
@media (min-width: 768px) and (max-width: 1023px){
  .dinner-recipe-2 .recipe-grid,
  .category-section.dinner-recipe-2 .recipe-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}






/* Make the search section full width (keep same color & content) */
.custom-search-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 768px) {
  /* width:100vw + padding without border-box rendered wider than the
     viewport (padding added on top of the 100vw content box), pushing
     the section — and the search bar inside it — past the right edge.
     border-box keeps the same padding but counts it inside the 100vw,
     so the right side now lines up the same as the left. */
  .custom-search-section {
    box-sizing: border-box;
  }

  /* The input is a flex item that defaults to a non-zero intrinsic
     min-width, so on narrow screens it refused to shrink to fit and
     pushed the whole bar past the right edge. min-width:0 lets it
     shrink properly; width/box-sizing make the bar fill its container
     exactly, with the icon button kept intact via flex-shrink:0. */
  .search-bar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .search-bar input {
    min-width: 0;
    box-sizing: border-box;
  }

  .search-bar button {
    flex-shrink: 0;
  }
}



/* Newest Recipes – make all thumbs identical + same hover */
.newest-recipes .recipe-card {
  overflow: hidden;                 /* clip zoom inside the card */
  border-radius: 12px;              /* same card rounding */
}

.newest-recipes .recipe-card img {
  width: 100%;
  height: auto !important;          /* beat earlier fixed heights */
  aspect-ratio: 3 / 2;              /* matches the other cards */
  object-fit: cover;                /* uniform crop */
  border-radius: 0;                 /* let the card control rounding */
  display: block;
  transition: transform .25s ease;  /* same hover feel */
}

.newest-recipes .recipe-card:hover img {
  transform: scale(1.02);           /* subtle zoom on hover */
}













/* ===== CATEGORY CARDS – match "Newest Recipes" behavior ===== */

/* 1) Kill underline from the anchor-wrapped cards (all states) */
.dinner-recipe-2 .recipe-card:link,
.dinner-recipe-2 .recipe-card:visited,
.dinner-recipe-2 .recipe-card:active,
.category-section .recipe-card:link,
.category-section .recipe-card:visited,
.category-section .recipe-card:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) Only show underline on the title when hovering the card */
.dinner-recipe-2 .recipe-card:hover .recipe-title,
.category-section .recipe-card:hover .recipe-title {
  text-decoration: underline !important;
  text-underline-offset: 2px; /* nicer spacing */
}

/* 3) Subtle image zoom on hover (no size change) */
.dinner-recipe-2 .recipe-card,
.category-section .recipe-card {
  overflow: hidden;               /* clip zoom so the card size stays the same */
}

.dinner-recipe-2 .recipe-card img,
.category-section .recipe-card img {
  transition: transform .25s ease;
}

.dinner-recipe-2 .recipe-card:hover img,
.category-section .recipe-card:hover img {
  transform: scale(1.02);         /* same vibe as Newest Recipes */
}




/* HERO ICONS – remove underline until hover */
.category-row .icon-wrapper,
.category-row .icon-wrapper:link,
.category-row .icon-wrapper:visited,
.category-row .icon-wrapper:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.category-row .icon-wrapper span {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.category-row .icon-wrapper:hover span {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}









/* ========= TOP-LEVEL MENU: base underline + hover ========= */
.main-menu a{
  position: relative;
  text-decoration: none !important;
}
.main-menu a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--color-section-titles);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.main-menu a:hover::after,
.main-menu a:focus-visible::after{
  transform:scaleX(1); /* <-- hover underline returns */
}

/* Desktop thickness/offset (optional) */
@media (min-width:769px){
  .main-menu a::after{ bottom:-8px; height:3px; }
}

/* ========= STICKY (one active at a time) ========= */

/* Home (underline only the real Home) */
body.home .main-menu a[href="/"]::after,
body.home .main-menu a[href="https://www.drecipes.com/"]::after{ transform:scaleX(1); }

/* Category archives — one rule per menu item */
body.category-breakfast   .main-menu a[href*="/breakfast/"]::after  { transform:scaleX(1); }
body.category-lunch       .main-menu a[href*="/lunch/"]::after       { transform:scaleX(1); }
body.category-dinner      .main-menu a[href*="/dinner/"]::after      { transform:scaleX(1); }
body.category-drinks      .main-menu a[href*="/drinks/"]::after      { transform:scaleX(1); }
body.category-family-meals .main-menu a[href*="/family-meals/"]::after { transform:scaleX(1); }
body.category-vegan       .main-menu a[href*="/vegan/"]::after       { transform:scaleX(1); }

/* Gluten-Free category archive */
body.category-gluten-free .main-menu a[href*="/gluten-free/"]::after{ transform:scaleX(1); }

/* Weight Loss Meals category archive */
body.category-weight-loss-meals .main-menu a[href*="/weight-loss-meals/"]::after{ transform:scaleX(1); }

/* Recipes hub pages (/recipes/ or /all-recipes/) */
body.page .main-menu a[href="/recipes/"]::after,
body.page .main-menu a[href*="/all-recipes/"]::after{ transform:scaleX(1); }

/* Any single post (recipe) -> keep Recipes underlined */
body.single-post .main-menu a[href*="/recipes/"]::after{ transform:scaleX(1); }

/* If you have “Recipes” sharing the Home URL, do NOT underline it on the homepage */
body.home .main-menu a[href*="/recipes/"]::after{ transform:scaleX(0) !important; }

/* ========= SUB-MENU (your dropdown) — keep what already works ========= */
.main-menu .dropdown-content a{
  position: relative;
  text-decoration: none !important;
}
.main-menu .dropdown-content a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:#8b2e2e;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.main-menu .dropdown-content a:hover::after,
.main-menu .dropdown-content a:focus-visible::after{ transform:scaleX(1); }

/* Keep underline on the OPEN sub-category + parent “Recipes” */
body.category-breakfast  .main-menu .dropdown-content a[href*="/breakfast/"]::after,
body.category-lunch      .main-menu .dropdown-content a[href*="/lunch/"]::after,
body.category-dinner     .main-menu .dropdown-content a[href*="/dinner/"]::after,
body.category-desserts   .main-menu .dropdown-content a[href*="/desserts/"]::after,
body.single-post.category-breakfast  .main-menu .dropdown-content a[href*="/breakfast/"]::after,
body.single-post.category-lunch      .main-menu .dropdown-content a[href*="/lunch/"]::after,
body.single-post.category-dinner     .main-menu .dropdown-content a[href*="/dinner/"]::after,
body.single-post.category-desserts   .main-menu .dropdown-content a[href*="/desserts/"]::after,
body.category-breakfast  .main-menu a[href*="/recipes/"]::after,
body.category-lunch      .main-menu a[href*="/recipes/"]::after,
body.category-dinner     .main-menu a[href*="/recipes/"]::after,
body.category-desserts   .main-menu a[href*="/recipes/"]::after,
body.single-post.category-breakfast  .main-menu a[href*="/recipes/"]::after,
body.single-post.category-lunch      .main-menu a[href*="/recipes/"]::after,
body.single-post.category-dinner     .main-menu a[href*="/recipes/"]::after,
body.single-post.category-desserts   .main-menu a[href*="/recipes/"]::after{
  transform:scaleX(1) !important;
}









/* Compact, centered underline for the About button */
.about-me-button{
  position: relative;
  text-decoration: none !important;
}

.about-me-button::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 8px;          /* closer to text */
  width: 80%;           /* shorter line (tweak 45–65%) */
  height: 2px;          /* thin */
  background:#fff;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.about-me-button:hover::after,
.about-me-button:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* Optional: a hair thicker on large screens */
@media (min-width: 769px){
  .about-me-button::after{ bottom: 10px; height: 2.5px; }
}





/* Pink CTA: compact centered underline + darker hover */
.featured-button{
  position: relative;
  display: inline-block;
  background: #d44a6a;              /* base pink */
  color: #fff !important;            /* keep text white */
  text-decoration: none !important;
  border-radius: 40px;
  padding: 12px 24px;
  font-weight: 700;
  transition: background .2s ease;
}

.featured-button::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 8px;                       /* closer to text */
  width: 70%;                        /* shorter line (tweak 45–70%) */
  height: 2px;                       /* thin */
  background:#fff;                   /* white underline */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.featured-button:hover,
.featured-button:focus-visible{
  background:#b93b58;                /* darker on hover */
}

.featured-button:hover::after,
.featured-button:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* Slightly thicker underline on larger screens (optional) */
@media (min-width: 769px){
  .featured-button::after{ bottom: 10px; height: 2.5px; }
}








/* Social icons widget – white background version */
.social-icons.sidebar-social {
  background-color: #ffffff;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  gap: 22px;
}

/* Circle outline icon style */
.social-icons.sidebar-social .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c3330; /* Brand color */
  background: #ffffff;
  transition: 0.2s ease;
}

/* Make SVG inherit the icon color */
.social-icons.sidebar-social .icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Hover effect */
.social-icons.sidebar-social .icon:hover {
  color: #ffffff;
  background: #8c3330;
  border-color: #8c3330;
  transform: translateY(-2px);
}




/* Tighter gap between "Explore Further" and the icons */
.social-icons.sidebar-social {
  padding-top: 5px !important;   /* was 30px */
  padding-bottom: 15px !important; /* you can keep 20–30 if you like more space above Recent Posts */
}





















/* ===== MOBILE STICKY NAV + HIDE TOP BAR ON SCROLL ===== */
:root{
  --tb-desktop: 56px;
  --mh-desktop: 72px;
  --tb-mobile:  44px;
  --mh-mobile:  60px;
}

/* Safety: let fixed positioning work */
#page, .site, .desktop-header, .mobile-header{ overflow: visible !important; }

/* ---------- DESKTOP: both bars always fixed ---------- */
@media (min-width: 769px){
  .desktop-header .top-bar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10001;
  }
  .desktop-header .main-header{
    position: fixed;
    top: var(--tb-desktop); left: 0; right: 0;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  body{ padding-top: calc(var(--tb-desktop) + var(--mh-desktop)); }
}

/* ---------- MOBILE: white nav always sticky; red top bar hides on scroll ---------- */
@media (max-width: 768px){

  /* Red top bar: fixed, slides up when user scrolls down */
  .mobile-header .top-bar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10001;
    transition: transform 0.3s ease, opacity 0.25s ease;
    transform: translateY(0);
    opacity: 1;
  }

  /* White nav bar: fixed, moves up to fill the gap when top bar hides */
  .mobile-header .main-header{
    position: fixed;
    top: var(--tb-mobile); left: 0; right: 0;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: top 0.3s ease;
    overflow: visible !important;
  }

  /* Scrolled state: top bar slides off-screen, white nav moves to very top */
  body.scrolled-down .mobile-header .top-bar{
    transform: translateY(-100%);
    opacity: 0;
  }
  body.scrolled-down .mobile-header .main-header{
    top: 0 !important;
  }
  /* Search bar follows the nav position when top bar is hidden */
  body.scrolled-down #headerSearchBar.slide-panel{
    top: var(--mh-mobile) !important;
  }

  /* Page content offset (tallest combined state) */
  body{ padding-top: calc(var(--tb-mobile) + var(--mh-mobile)); }

  /* Mobile menu dropdown — absolutely positioned below the fixed nav bar */
  .mobile-header #mobileMenu{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 9999;
    background: #fff;
    border-top: 2px solid #8E2E2E;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    max-height: 70vh;
    overflow-y: auto;
    /* show/hide toggled by .show / .is-open via JS */
    display: none;
    flex-direction: column;
  }
  .mobile-header #mobileMenu.show,
  .mobile-header #mobileMenu.is-open{
    display: flex;
  }
  .mobile-header #mobileMenu a{
    display: block;
    padding: 13px 18px;
    color: #6b2f08;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #f0e8e8;
    font-size: 16px;
  }
  .mobile-header #mobileMenu a:hover{
    background: #faf4f4;
  }
}

/* Admin bar offsets (logged-in users) */
body.admin-bar .desktop-header .top-bar{ top: 32px; }
@media (min-width: 769px){
  body.admin-bar .desktop-header .main-header{ top: calc(var(--tb-desktop) + 32px); }
  body.admin-bar{ padding-top: calc(var(--tb-desktop) + var(--mh-desktop) + 32px); }
}
@media (max-width: 782px){
  body.admin-bar .mobile-header .top-bar{ top: 46px; }
  body.admin-bar .mobile-header .main-header{ top: calc(var(--tb-mobile) + 46px); }
  body.admin-bar.scrolled-down .mobile-header .top-bar{ transform: translateY(-100%); opacity: 0; }
  body.admin-bar.scrolled-down .mobile-header .main-header{ top: 46px !important; }
  body.admin-bar{ padding-top: calc(var(--tb-mobile) + var(--mh-mobile) + 46px); }
}

/* Neutralize conflicting sticky plugins */
nav.main-navigation.is_stuck,
nav.main-navigation.toggled.is_stuck{
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}


/* ========== NEWEST RECIPES SECTION - LANDSCAPE CARDS ========== */

/* Desktop: 4-column grid with landscape images */
@media (min-width: 1024px) {
  .newest-recipes .recipe-cards,
  .dinner-recipe-2 .recipe-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Landscape image ratio */
  .newest-recipes .recipe-card img,
  .dinner-recipe-2 .recipe-grid .recipe-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;  /* Landscape ratio matching reference */
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block;
  }

  /* Card styling */
  .newest-recipes .recipe-card,
  .dinner-recipe-2 .recipe-grid .recipe-card {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }

  .newest-recipes .recipe-card:hover,
  .dinner-recipe-2 .recipe-grid .recipe-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* Category label positioning */
  .newest-recipes .recipe-card .category-label,
  .newest-recipes .recipe-card .category,
  .dinner-recipe-2 .recipe-grid .recipe-card .category-label {
    display: block;
    margin: 12px 16px 4px 16px;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    color: #8b2e2e !important;
  }

  /* Title styling */
  .newest-recipes .recipe-card .recipe-title,
  .newest-recipes .recipe-card h3,
  .dinner-recipe-2 .recipe-grid .recipe-card .recipe-title {
    margin: 0 16px 16px 16px;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2c;
  }
}

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .newest-recipes .recipe-cards,
  .dinner-recipe-2 .recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .newest-recipes .recipe-card img,
  .dinner-recipe-2 .recipe-grid .recipe-card img {
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }
}

/* Mobile: 2 columns with landscape images */
@media (max-width: 767px) {
  .newest-recipes .recipe-cards,
  .dinner-recipe-2 .recipe-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }

  .newest-recipes .recipe-card img,
  .dinner-recipe-2 .recipe-grid .recipe-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;  /* Keep landscape on mobile too */
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  .newest-recipes .recipe-card .category-label,
  .newest-recipes .recipe-card .category,
  .dinner-recipe-2 .recipe-grid .recipe-card .category-label {
    margin: 8px 10px 2px 10px;
    font-size: 11px !important;
  }

  .newest-recipes .recipe-card .recipe-title,
  .newest-recipes .recipe-card h3,
  .dinner-recipe-2 .recipe-grid .recipe-card .recipe-title {
    margin: 0 10px 10px 10px;
    font-size: 14px !important;
    line-height: 1.3;
  }
}

/* Ensure images don't have conflicting styles */
.newest-recipes .recipe-card img,
.dinner-recipe-2:first-of-type .recipe-grid .recipe-card img {
  height: auto !important;  /* Override any fixed heights */
  max-height: none !important;
}

/* ========== HOMEPAGE RECIPE ROWS — SQUARE 1:1 IMAGES ==========
   Scoped ONLY to the four homepage recipe-row sections by their unique
   section IDs (#dinner, #drinks, #breakfast, #lunch — see front-page.php).
   These four sections share the .dinner-recipe-2 class with the "Newest
   Recipes" section and every other .recipe-card img rule above, so an
   ID-scoped selector is required to change only these four without
   touching Newest Recipes, All Recipes, category/archive pages, search
   results, or single posts — none of which use these IDs.
   aspect-ratio:1/1 keeps the card's existing width and derives a matching
   height (no hardcoded height, so it stays responsive at every
   breakpoint). object-fit:contain (not cover) shows the complete image,
   centered, at its original proportions — no crop, zoom, or stretch. */
#dinner .recipe-card img,
#drinks .recipe-card img,
#breakfast .recipe-card img,
#lunch .recipe-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* ========== SIDEBAR LAYOUT (two-column: content 70% + sidebar 30%) ========== */
.content-sidebar-wrap {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.main-content-area {
  flex: 1;
  min-width: 0;
}

#secondary.widget-area {
  flex: 0 0 30%;
  max-width: 30%;
  min-width: 0;
}

/* Align sidebar top with article title on single post pages */
body.single-post #secondary.widget-area,
body.single #secondary.widget-area {
  padding-top: 40px;
}

@media (max-width: 900px) {
  .content-sidebar-wrap {
    flex-direction: column;
  }
  #secondary.widget-area {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ========== STICKY FOOTER (always at bottom even on short/empty pages) ========== */
body {
  min-height: 100vh;
  box-sizing: border-box; /* padding-top (fixed-header offset) is INSIDE 100vh — footer never falls below fold */
  display: flex;
  flex-direction: column;
}

/* .page is the direct flex child that must grow to push the footer down */
.page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* .site-content expands within .page so footer sticks to bottom */
.site-content {
  flex: 1;
}

#content {
  flex: 1;
}

#main-content {
  flex: 1;
}

/* Footer is a sibling of .site-content inside .page; auto-margin keeps it at bottom */
.site-footer {
  margin-top: auto;
}

/* ========== BREADCRUMBS ========== */
/* Breadcrumb hidden on single posts (removed from single.php; CSS as backup) */
body.single .breadcrumb,
body.single-post .breadcrumb,
body.single .breadcrumbs,
body.single-post .breadcrumbs,
body.single nav.breadcrumb,
body.single-post nav.breadcrumb,
body.single .bread-crumb,
body.single-post .bread-crumb {
  display: none !important;
}

.breadcrumb {
  padding: 8px 0 12px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb a {
  color: #8b2c2c;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: #bbb;
  font-size: 12px;
}

.breadcrumb-current {
  color: #444;
}

/* ========== SIDEBAR WIDGET STYLES ========== */
.widget-area .widget {
  margin-bottom: 30px;
}

.widget-area .widget-title {
  font-size: 18px;
  font-family: 'Suez One', serif;
  color: var(--color-section-titles);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-section-titles);
}

.widget-area .recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-area .recent-posts-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.widget-area .recent-posts-list li:last-child {
  border-bottom: none;
}

.widget-area .recent-posts-list a {
  color: #2c2c2c;
  text-decoration: none;
  font-size: 14px;
  display: block;
}

.widget-area .recent-posts-list a:hover {
  color: #8b2c2c;
}

.widget-area .recent-posts-list time {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 2px;
}

.widget-area .category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-area .category-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.widget-area .category-list li:last-child {
  border-bottom: none;
}

.widget-area .category-list a {
  color: #2c2c2c;
  text-decoration: none;
}

.widget-area .category-list a:hover {
  color: #8b2c2c;
}

.widget-area .sidebar-newsletter-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.widget-area .sidebar-newsletter-form .btn-primary {
  width: 100%;
  padding: 10px;
  background: #8b2c2c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}

.widget-area .sidebar-newsletter-form .btn-primary:hover {
  background: #6a1e1e;
}

.widget-area .newsletter-message {
  font-size: 13px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .breadcrumb {
    font-size: 13px;
  }
}

/* =================================================================
   MOBILE MENU & SLIDE PANELS FIX
   Critical CSS for hamburger menu functionality
   ================================================================= */

/* Slide panel base styles */
.slide-panel {
	position: fixed;
	top: 0;
	left: -100%;
	width: 80%;
	max-width: 320px;
	height: 100vh;
	background: #ffffff;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
	z-index: 9999;
	transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
	-webkit-overflow-scrolling: touch;
}

/* Mobile menu specific positioning */
#mobileMenu.slide-panel {
	left: -100%;
	padding: 20px;
}

/* Search bar positioning (slides from right) */
#headerSearchBar.slide-panel {
	left: auto;
	right: -100%;
	transition: right 0.3s ease-in-out;
}

/* OPEN STATE - this is what was missing! */
.slide-panel.is-open,
.slide-panel.show {
	left: 0 !important;
	transform: translateX(0) !important;
}

#headerSearchBar.slide-panel.is-open,
#headerSearchBar.slide-panel.show {
	left: auto;
	right: 0 !important;
}

/* Overlay backdrop when menu is open */
.slide-panel.is-open::before,
.slide-panel.show::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
	pointer-events: auto;
}

/* Search panel (desktop): a compact dropdown directly under the header,
   not a fullscreen slide-in drawer with a dark backdrop — #mobileMenu keeps
   that drawer behaviour untouched; only #headerSearchBar changes here. */
@media (min-width: 769px) {
	#headerSearchBar.slide-panel {
		position: fixed !important;
		top: calc(var(--tb-desktop, 56px) + var(--mh-desktop, 72px)) !important;
		left: auto !important;
		right: 15px !important;
		width: auto !important;
		max-width: 400px !important;
		height: auto !important;
		max-height: none !important;
		background: #fff !important;
		border-radius: 10px !important;
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
		padding: 10px !important;
		z-index: 11002 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(-6px) !important;
		transition: opacity 0.22s ease, transform 0.22s ease !important;
	}

	#headerSearchBar.slide-panel.is-open,
	#headerSearchBar.slide-panel.show {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	#headerSearchBar.slide-panel.is-open::before,
	#headerSearchBar.slide-panel.show::before {
		content: none !important;
	}
}

/* Mobile menu list styles */
.mobile-menu-list,
.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu-list li,
.mobile-menu ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #eee;
}

.mobile-menu-list a,
.mobile-menu ul a {
	display: block;
	padding: 15px 10px;
	color: var(--color-section-titles);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.mobile-menu-list a:hover,
.mobile-menu ul a:hover,
.mobile-menu-list a:focus,
.mobile-menu ul a:focus {
	background: #f5f5f5;
	color: var(--color-primary, #8E2E2E);
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	padding: 8px 12px;
	cursor: pointer;
	color: var(--color-primary, #8E2E2E);
	transition: opacity 0.2s;
	z-index: 10000;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
	opacity: 0.7;
}

.mobile-menu-toggle:focus {
	outline: 2px solid var(--color-primary, #8E2E2E);
	outline-offset: 2px;
}

/* Show mobile menu button on mobile */
@media (max-width: 768px) {
	.mobile-menu-toggle {
		display: block;
	}
	
	.mobile-header {
		display: block !important;
	}
	
	.desktop-header {
		display: none !important;
	}
}

/* Prevent body scroll when menu is open */
body.menu-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* =================================================================
   CATEGORY / TAG / DATE ARCHIVE — COMPACT 2-COLUMN CARD GRID
   Covers all archive pages that share the sidebar layout.
   ================================================================= */

/* ── Grid: fixed 2 columns on desktop ── */
body.archive .main-content-area .recipe-grid,
body.category .main-content-area .recipe-grid,
body.tag .main-content-area .recipe-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ── Card shell ── */
body.archive .main-content-area .recipe-grid > .recipe-card,
body.category .main-content-area .recipe-grid > .recipe-card,
body.tag .main-content-area .recipe-grid > .recipe-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

body.archive .main-content-area .recipe-grid > .recipe-card:hover,
body.category .main-content-area .recipe-grid > .recipe-card:hover,
body.tag .main-content-area .recipe-grid > .recipe-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* ── Image ── */
body.archive .main-content-area .recipe-grid > .recipe-card img,
body.category .main-content-area .recipe-grid > .recipe-card img,
body.tag .main-content-area .recipe-grid > .recipe-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
}

/* ── Category label ── */
body.archive .main-content-area .recipe-grid > .recipe-card .category-label,
body.category .main-content-area .recipe-grid > .recipe-card .category-label,
body.tag .main-content-area .recipe-grid > .recipe-card .category-label {
  display: block !important;
  margin: 10px 12px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-section-titles) !important;
  text-decoration: none !important;
}

/* ── Recipe title ── */
body.archive .main-content-area .recipe-grid > .recipe-card .recipe-title,
body.category .main-content-area .recipe-grid > .recipe-card .recipe-title,
body.tag .main-content-area .recipe-grid > .recipe-card .recipe-title {
  display: block !important;
  margin: 0 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #2c2c2c !important;
  text-decoration: none !important;
  overflow-wrap: break-word !important;
}

/* ── Mobile: single column ── */
@media (max-width: 768px) {
  body.archive .main-content-area .recipe-grid,
  body.category .main-content-area .recipe-grid,
  body.tag .main-content-area .recipe-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.archive .main-content-area .recipe-grid > .recipe-card img,
  body.category .main-content-area .recipe-grid > .recipe-card img,
  body.tag .main-content-area .recipe-grid > .recipe-card img {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  body.archive .main-content-area .recipe-grid > .recipe-card .recipe-title,
  body.category .main-content-area .recipe-grid > .recipe-card .recipe-title,
  body.tag .main-content-area .recipe-grid > .recipe-card .recipe-title {
    font-size: 16px !important;
  }
}

/* =================================================================
   MOBILE DROPDOWN PANEL INTEGRATION
   Replaces dependency on Additional CSS
   ================================================================= */
@media (max-width: 768px) {
  /* Prevent clipping in mobile header/nav wrappers */
  .mobile-header,
  .mobile-header nav,
  .mobile-header .main-header {
    overflow: visible !important;
  }

  /* Keep mobile header above page; anchor absolute dropdown to nav row */
  .mobile-header {
    position: relative !important;
    z-index: 99998 !important;
  }

  .mobile-header .main-header {
    position: fixed !important;
    z-index: 10000 !important;
  }

  /* Mobile menu dropdown fix - anchor below nav row (no clipping strip) */
  #mobileMenu.slide-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 50% !important;
    height: auto !important;
    max-height: calc(100vh - 93px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 10001 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;
    border-radius: 0 0 12px 0 !important;
    box-shadow: 4px 8px 24px rgba(0,0,0,0.18) !important;
    padding: 8px 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  #mobileMenu.slide-panel.is-open,
  #mobileMenu.slide-panel.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Menu list items */
  #mobileMenu .mobile-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobileMenu .mobile-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }

  #mobileMenu .mobile-menu-list li:last-child {
    border-bottom: none !important;
  }

  #mobileMenu .mobile-menu-list li a {
    display: block !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-section-titles) !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
  }

  #mobileMenu .mobile-menu-list li a:hover {
    background: rgba(123,35,35,0.06) !important;
    color: var(--color-section-titles) !important;
  }

  /* Disable only mobile menu fullscreen pseudo-backdrop */
  #mobileMenu.slide-panel.is-open::before,
  #mobileMenu.slide-panel.show::before {
    content: none !important;
  }
}

/* =================================================================
   MOBILE PANEL SYSTEM (FINAL) — menu + search dropdown under mobile row
   ================================================================= */
@media (max-width: 768px) {
  /* Header wrappers: no clipping, proper stacking */
  .mobile-header,
  .mobile-header nav,
  .mobile-header .main-header {
    overflow: visible !important;
  }

  .mobile-header {
    position: relative !important;
    z-index: 11000 !important;
  }

  .mobile-header .main-header {
    position: fixed !important;
    top: var(--tb-mobile) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 11001 !important;
    transition: top 0.3s ease !important;
  }

  /* Mobile menu dropdown anchored to same row */
  .mobile-header .main-header #mobileMenu.slide-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 0 0 12px 0 !important;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.18) !important;
    padding: 8px 0 !important;
    z-index: 11002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  .mobile-header .main-header #mobileMenu.slide-panel.is-open,
  .mobile-header .main-header #mobileMenu.slide-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Ensure menu items are visible and tappable */
  .mobile-header .main-header #mobileMenu .mobile-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-header .main-header #mobileMenu .mobile-menu-list > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  .mobile-header .main-header #mobileMenu .mobile-menu-list > li:last-child {
    border-bottom: none !important;
  }

  .mobile-header .main-header #mobileMenu .mobile-menu-list > li > a {
    display: block !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--color-section-titles) !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-header .main-header #mobileMenu .mobile-menu-list > li > a:hover {
    background: rgba(123, 35, 35, 0.06) !important;
    color: var(--color-section-titles) !important;
  }

  /* Search panel: dropdown below same row, not fullscreen overlay */
  #headerSearchBar.slide-panel {
    position: fixed !important;
    top: calc(var(--tb-mobile) + var(--mh-mobile)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
    padding: 10px !important;
    z-index: 11002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  #headerSearchBar.slide-panel.is-open,
  #headerSearchBar.slide-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Disable fullscreen pseudo-backdrop for both mobile menu + search */
  #mobileMenu.slide-panel.is-open::before,
  #mobileMenu.slide-panel.show::before,
  #headerSearchBar.slide-panel.is-open::before,
  #headerSearchBar.slide-panel.show::before {
    content: none !important;
  }
}

/* ─── Mobile menu items: defeat the .mobile-header a { color:#fff } rule ─── */
/* This ensures links are never white-on-white regardless of inheritance. */
@media (max-width: 768px) {
  #mobileMenu a,
  #mobileMenu a:link,
  #mobileMenu a:visited {
    color: var(--color-section-titles) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    background: transparent !important;
  }
  #mobileMenu li {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }
  #mobileMenu ul {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ── No underline: category labels & post/recipe title links (sitewide) ── */
.cat-links a,
.cat-links a:link,
.cat-links a:visited,
.cat-links a:hover,
.cat-links a:focus,
.entry-category a,
.entry-category a:hover,
.entry-category a:focus,
.post-categories a,
.post-categories a:hover,
.post-categories a:focus,
.category-label a,
.category-label a:hover,
.recipe-category a,
.recipe-category a:hover {
  text-decoration: none !important;
}

.entry-title a,
.entry-title a:link,
.entry-title a:visited,
.entry-title a:hover,
.entry-title a:focus,
h1.entry-title a,
h2.entry-title a,
h3.entry-title a,
.post-title a,
.post-title a:hover,
.recipe-title a,
.recipe-title a:hover,
.recipe-title a:focus {
  text-decoration: none !important;
}

/* ── Active menu item indicator ──────────────────────────────────────────── */

/* Desktop: expand the ::after underline on the active item (same as hover) */
.main-menu li.current-menu-item > a::after,
.main-menu li.current-menu-ancestor > a::after,
.main-menu li.current_page_item > a::after,
.main-menu li.current-cat > a::after {
  transform: scaleX(1);
}

/* Mobile: underline on the active link text */
#mobileMenu li.current-menu-item > a,
#mobileMenu li.current-menu-ancestor > a,
#mobileMenu li.current_page_item > a,
#mobileMenu li.current-cat > a,
.mobile-menu-list li.current-menu-item > a,
.mobile-menu-list li.current-menu-ancestor > a,
.mobile-menu-list li.current_page_item > a,
.mobile-menu-list li.current-cat > a {
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-section-titles) !important;
}

/* ── Recipe card link reset (archive, category, search, homepage grids) ─── */
/* The whole card is an <a>; remove browser-default blue underline sitewide. */
.recipe-card,
.recipe-card:link,
.recipe-card:visited,
.recipe-card:hover,
.recipe-card:focus,
.recipe-card:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* Category label inside a card — theme accent colour, no underline */
.recipe-card .category-label {
  color: var(--color-section-titles) !important;
  text-decoration: none !important;
}

/* Recipe title inside a card — dark, readable, no underline */
.recipe-card .recipe-title {
  color: #2c2c2c !important;
  text-decoration: none !important;
}

/* ── Archive / category pages: no blue underline on any link ── */
.entry-title a,
.cat-links a,
.post-categories a,
article h2 a,
article h3 a {
  text-decoration: none !important;
  color: inherit !important;
}

.entry-title a:hover,
.cat-links a:hover {
  text-decoration: none !important;
}

/* ── Single post featured image (inside the_content()) ── */
/* All images inside single article content — full photo visible, no cropping */
/* :not(.emoji):not(.wp-smiley) — excludes WordPress's emoji <img> tags (both
   the PHP wp-smiley markup and the client-side wp-emoji-release.min.js
   "emoji" markup — see spacy_disable_emoji_conversion() in functions.php,
   which stops that script from running at all) so this selector's higher
   specificity than core's default emoji-sizing rule can no longer stretch
   emoji (👉, 📌, 🖨️, etc.) to full article width. Deliberately NOT excluding
   [role="img"] here — real content photos can legitimately carry that
   attribute for accessibility, and this rule must keep sizing those
   normally. The fallback below only strips role="img" images that are also
   tagged as emoji, or that come from WordPress's own emoji CDN. */
.single .entry-content img:not(.emoji):not(.wp-smiley),
.single .post-thumbnail img:not(.emoji):not(.wp-smiley),
body.single-post .entry-content img:not(.emoji):not(.wp-smiley) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
  background: #f9f9f9 !important;
  border-radius: 10px !important;
  display: block !important;
  margin-bottom: 16px !important;
}

/* The gymplix-connector recipe card's circular avatar/thumbnail
   (#recipe-card-container .recipe-avatar img) lives inside .entry-content,
   so the broad single-post content-image rule above was overriding the
   plugin's own circular sizing — forcing a 3:2 rectangle onto a 92x92
   round frame, which is why the image looked square inside the circle.
   This uses an ID-scoped selector (higher specificity than the class-only
   rule above) to restore a properly fitted, centred, uncropped-proportion
   circle for just this one avatar image, without changing how any other
   in-article image is sized. */
#recipe-card-container .recipe-avatar img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  margin: 0 !important;
  max-width: none !important;
  display: block !important;
}

/* ── WordPress emoji images: force back to inline glyph size ──
   Fallback safety net kept even though spacy_disable_emoji_conversion() in
   functions.php now stops WordPress from generating <img class="emoji">
   tags in the first place (front end, admin, feeds, email). This still
   catches emoji images from cached HTML that predates the fix, or from any
   other emoji-to-image conversion, everywhere on the site — including
   inside the Tasty Recipes Pin/Print/Jump buttons, which is what was
   inflating those buttons into huge circles.
   Matching is deliberately scoped to .emoji/.wp-smiley (and the role="img"
   variant some emoji libraries add ON TOP OF one of those classes, or on
   WordPress's own emoji CDN images) rather than a bare [role="img"], so a
   real content photo that legitimately carries role="img" for accessibility
   is never affected. */
img.emoji,
img.wp-smiley,
img[role="img"].emoji,
img[role="img"].wp-smiley,
img[src*="s.w.org/images/core/emoji/"],
.entry-content img.emoji,
.entry-content img.wp-smiley,
.tasty-recipes-buttons img.emoji,
.tasty-recipes-quick-links img.emoji,
.recipe-card img.emoji {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  aspect-ratio: auto !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
  vertical-align: -0.1em !important;
}

/* ─────────────────────────────────────────────
   All Recipes page — dedicated grid (new page,
   does not modify any existing .recipe-grid rule)
   Desktop: 3 columns · Tablet: 2 columns · Mobile: 2 columns
─────────────────────────────────────────────── */
.all-recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .all-recipes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .all-recipes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Same image proportions/cropping/rounding as the category-page cards
   (body.category .main-content-area .recipe-grid > .recipe-card img).
   !important is required for the same reason it is on category pages:
   it must win over the legacy un-scoped .recipe-card img rules earlier
   in this file. Scoped to .all-recipes-grid only, so no other page's
   .recipe-card image sizing is touched. */
.all-recipes-grid .recipe-card-link img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
}

.all-recipes-grid .recipe-card-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.all-recipes-grid .recipe-excerpt {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555;
}

.all-recipes-grid .recipe-explore-link {
  display: inline;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  color: var(--color-primary);
  white-space: nowrap;
}

.all-recipes-intro {
  max-width: 700px;
  margin: 0.5rem 0 1.5rem;
  color: #555;
}

.all-recipes-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.all-recipes-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #282727;
}

.all-recipes-pagination a.page-numbers:hover {
  background: var(--color-feature-bg);
}

.all-recipes-pagination .page-numbers.current {
  background: var(--color-section-titles);
  color: #fff;
}