/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 29 2025 | 15:12:11 */


/* Keep ALL section headings and "Browse by..." tight to content below Snippet 61230 */
.entry-content .wp-block-heading,
.entry-content .wp-block-kadence-advancedheading {
  margin-top: 0 !important;
  margin-bottom: 0.1em !important;
}

/* If headings inside .wp-block-heading have browser defaults, squash them */
.entry-content .wp-block-heading h2,
.entry-content .wp-block-heading h3 {
  margin-top: 0 !important;
  margin-bottom: 0.15em !important; /* or 0.1em for ultra-tight */
}

/* A–Z ingredients list — 5 columns, readable spacing Snippet 61201*/
.entry-content .ingredients-alpha .alpha-list,
.ingredients-alpha ul {
  column-count: 5;
  column-gap: .65rem;     /* adjust as needed */
  font-size: 1rem;
  line-height: 1.5;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.entry-content .ingredients-alpha .alpha-list li,
.ingredients-alpha li {
  break-inside: avoid;
  margin: 0 0 .25em 0;
}

/* Link appearance for alpha list */
.entry-content .ingredients-alpha .alpha-list a,
.entry-content .ingredients-alpha .alpha-list a:visited,
.entry-content .ingredients-alpha .alpha-list a:hover,
.ingredients-alpha a {
  text-decoration: none !important;
  border-bottom: 0;
  padding: .05em .25em;
  text-transform: capitalize;
}

/* Make counts a bit softer */
.ingredients-alpha .a2z-count {
  color: #6B7280;
  font-size: .9em;
  margin-left: .15em;
}

/* Responsive columns + slight mobile text bump */
@media (max-width:1200px) {
  .entry-content .ingredients-alpha .alpha-list,
  .ingredients-alpha ul { column-count: 4; }
}
@media (max-width: 900px) {
  .entry-content .ingredients-alpha .alpha-list,
  .ingredients-alpha ul { column-count: 3; }
}
@media (max-width: 600px) {
  .entry-content .ingredients-alpha .alpha-list,
  .ingredients-alpha ul {
    column-count: 2;
    font-size: 1.05rem;
  }
}
@media (max-width: 400px) {
  .entry-content .ingredients-alpha .alpha-list,
  .ingredients-alpha ul {
    column-count: 1;
    font-size: 1.05rem;
  }
}

/* A–Z nav container (default: sticky, but can disable if needed) */
.ingredients-alpha .alpha-nav {
  position: static;
  top: auto;
  background: transparent;
  border-bottom: 0;
  padding: .25rem 0 .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  z-index: 20;
}

/* letters as pill buttons */
.ingredients-alpha .alpha-nav a,
.ingredients-alpha .alpha-nav span.alpha-nav-disabled {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  padding: .3rem .55rem;
  border-radius: 9999px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, transform .06s, border-color .15s;
}

/* enabled letters */
.ingredients-alpha .alpha-nav a {
  border: 1px solid #073b60;
  color: #073b60;
}
.ingredients-alpha .alpha-nav a:hover {
  background: #073b60;
  color: #fff;
  transform: translateY(-1px);
}

/* active letter (JS adds .is-active) */
.ingredients-alpha .alpha-nav a.is-active {
  background: #fabc06;
  border-color: #fabc06;
  color: #073b60;
  box-shadow: 0 0 0 2px rgba(250,188,6,.25);
}

/* disabled letters */
.ingredients-alpha .alpha-nav span.alpha-nav-disabled {
  color: #98a2b3;
  border: 1px dashed #cdd6e1;
  pointer-events: none;
  opacity: .6;
}

/* keyboard focus */
.ingredients-alpha .alpha-nav a:focus-visible {
  outline: 2px solid #073b60;
  outline-offset: 2px;
}

/* Semi-transparent boxes on the index images Snippet 25874 */
.recipe-overlay p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(30, 58, 95, 0.8);
    color: white;
    padding: 5px 10px;
    margin: 0;
    border-radius: 8px;
    max-width: calc(100% - 20px); /* Prevents overflow beyond container */
    width: max-content; /* Box only as wide as the content needs */
    word-wrap: break-word;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
}
.recipe-overlay a,
.recipe-overlay p a {
    color: white !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
.recipe-overlay a:hover,
.recipe-overlay p a:hover {
    color: #fabc07 !important;
    text-decoration: none !important;
}
/* Option 1: Target images within the recipe overlay container */
.recipe-overlay img {
    border-radius: 8px;
}


/* ==== Classic-Recipes roundup numbering (inline, cookbook vibe) Snippet 25326 ==== */
/* 1) Start the counter once for the whole roundup */
.cr-roundup {
	counter-reset: cr-num 0;
}
/* 2) Increment once per card */
.cr-item {
	counter-increment: cr-num;
}
/* 3) SAFETY: kill any old numbers that might be printing elsewhere */
.cr-item::before,
.cr-item::after {
	content: none !important;
}
/* Title with inline number (wrap-safe) */
.cr-title{
	display: flex;
	flex-wrap: nowrap;
	/* keep number + title on one line of items */
	align-items: flex-start;
	/* align number to the top of the first line */
	gap: .7rem;
}
/* The number */
.cr-title::before{
	content: counter(cr-num, decimal-leading-zero);
	font: 600 3.2rem Georgia, serif;
	color: #073b60;
	opacity: .18;
	line-height: 1;
	white-space: nowrap;
	/* prevents "0" and "2" splitting to two lines */
	flex: 0 0 auto;
	/* never shrink */
	transform: translateY(.06em);
	/* tiny optical nudge with your bold H2 */
}
/* (Optional) smaller on narrow screens */
@media (max-width: 600px){
	.cr-title::before{
		font-size: 1.5rem;
		opacity: .16;
	}
}
@media (max-width: 600px){
	.cr-title{
		gap: .5rem;
	}
	.cr-title::before{
		font-size: 1.5rem;
		opacity: .16;
	}
}

/* ==== Roundup Title Snippet  undecorated 25144 ==== */
.roundup-title a,
.roundup-title a:link,
.roundup-title a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

.roundup-title a:hover,
.roundup-title a:focus {
  color: var(--global-palette-highlight, #b33) !important; /* swap with your accent color */
  text-decoration: underline; /* or remove if you want no effect at all */
}

