/*
CTC Separate Stylesheet
Updated: 2026-03-18 08:09:58
*/

/*
CTC Separate Stylesheet
Updated: 2025-01-29 12:47:45
*/

/*@import url('css/fonts.css');  /* added 10 Jun */


h1 em,h2 em {
    font-style: italic!important;
    color: var(--sage-dark, #5a7050)!important;
}

#page .site-content {
    background-color: white!important;
	position: relative; /* #date 25-08-24 - sticky bar hiding breadcrumbs and title */
    /*top: 45px; /* #date 28-08-24 29-01-25 changed to 45px */
}

div#page {
    background: white; /* #date 01-09-24 */
}

.ast-separate-container #primary  {
    padding: 0 0!important;
	margin: 0 0 !important;
}



a {
	background-color: transparent;
	color: var(--charcoal, #2c2c2c);
	font-weight: 800;
	text-decoration: underline;	
}

@media (max-width: 545px) {
.ast-blog-layout-4-grid .ast-article-post {
    width: 50%!important;
}
}

header#masthead {
    /*position: fixed; 25 Jan 25*/ 
    top: 0;
    left: 0;
    z-index: 2;     /* changed from a big number to 2 - 25 Jan 25*/ 
    width: 100%;
    height: 80px;
}

/* 25 Jan 2025 * */
.slick-film-strip {
    margin: 0px auto!important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    max-width: 100%!important;
    height: 80px;
    background-color: #ffffff;
}


#diet-subcategories .diet-subcategory {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	
}

.blog-layout-4 .entry-title a {
    color: var(--ast-global-color-0);
    font-size: 22px;
	text-align: center; 
	text-decoration: none;
    display: block;
}

/** Added 21 Nov for archive pages top margin */
body.archive .ast-archive-description {
    margin: 0px;
	padding-top: 0px;
}

.archive .ast-article-post .ast-article-inner, .blog .ast-article-post .ast-article-inner, .archive .ast-article-post .ast-article-inner:hover, .blog .ast-article-post .ast-article-inner:hover {
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
      
}

div#searchFilterContainer h3 {
    color: var(--ast-global-color-0);
    padding-bottom: 10px;
}

.ast-blog-layout-4-grid .ast-article-inner {
	padding: 0em;
}

.blog-layout-4 .entry-title a {
    color: var(--ast-global-color-0);
	font-size: 18px;
}

article .ast-blog-layout-4-grid, #recipe-results .ast-blog-layout-4-grid {
    padding-left: 10px;
    padding-right: 10px;
}

.blog-layout-4 .ast-grid-common-col {
    padding-left: 0px;
    padding-right: 0px;
}

.search-results #pagination {
        margin-top: 20px;
    }

.search-results button.active {
    background-color: white;
    color: var(--ast-global-color-1);
}

.search-results button {
    padding: 0px 0px;
    margin: 0 5px;
    cursor: pointer;
    background-color: white;
    color: var(--ast-global-color-0);
}


.ast-author-bio p {
    margin-bottom: 10px;
}



.search-results-filter-toggle-wrapper {
	display: none;
}




.search-results-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    row-gap: 0;
}

.search-results-filter {
    display: block;
    flex-wrap: wrap;
    width: 350px;
}

.search-results {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 70%;
}


@media (max-width: 921px) {
	.search-results-filter-toggle-wrapper {
    	text-align: right;
		display:block;
		padding-bottom: 10px;

    }
	.search-results-filter {
		display:none;
	}
	.search-results {
		max-width: 100%;
	}
	div#searchFilterContainer {
		position: fixed;
		top: 0; 
		left: 0; 
		width: 350px; 
		height: 100%; 
		overflow-y: auto; 
		z-index: 9999;
		padding: 35px 15px 15px 15px;
		display: block;
		background: white;
	}	
	
}

.close-icon {
    background-image: url('/wp-content/uploads/2024/04/close.png');
	position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
	background-size: contain;
    width: 20px;
    height: 20px;
}


.ast-blog-layout-4-grid .ast-row {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-items: stretch;
}

.ast-archive-description .ast-archive-title {
	color: var(--ast-global-color-3)!important;
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
}

.archive .post-thumb-img-content .size-teaser {
    aspect-ratio: .666666667;
    object-fit: cover;
    width: 260px
}

.ast-blog-layout-4-grid .ast-article-post {
    width: 25%;
    margin-bottom: 2em;
    border-bottom: 0;
    background-color: transparent;
}


.ast-blog-featured-section {
    margin-bottom: 0.5em;
}

.ast-article-inner {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.ast-blog-layout-4-grid .ast-article-inner {
    box-shadow: inherit;
}

.entry-content h2 {
	line-height: 1.2em
}

.entry-title a {
    font-size: 20px;
}

.archive .entry-title {
    line-height: 1em;
}

.entry-content h1 {
    margin-top: 0em!important;
}

.entry-content > .wp-block-group, .entry-content > .wp-block-cover, .entry-content > .wp-block-columns {
	padding-top:0;
	padding-right:0;
	padding-bottom:0;
	padding-left:0;
 
}


.parent-featured-content {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.parent-featured-content .search-results {
    max-width: 90%;
}


/* ============================================================
   HERO1 — Full-width seasonal hero banner
   ============================================================ */



.hero1-wrapper {
    background: linear-gradient(135deg, #e8f0e4 0%, #faf5d4 50%, #fceee6 100%);
    width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.hero1-inner {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Left: text ── */
.hero1-text {
    flex: 1 1 50%;
}

.hero1-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 16px;
}

/* ── Hero1 font + button overrides ── */

.hero1-headline {
	font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--charcoal, #2c2c2c);
    margin-bottom: 20px;
}

.hero1-headline em {
    font-style: italic;
    color: var(--sage-dark, #5a7050);
}



.hero1-subtext {
    font-size: 1rem;
	color: var(--warm-grey);
    line-height: 1.65;
    max-width: 420px;
    margin-bottom: 32px;
}

.hero1-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}


/* Override global `a` rule on both buttons */
.hero1-btn-primary{
	
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-underline-offset: 0 !important;
    letter-spacing: 0.04em;
	
	background: var(--sage-dark)!important;
    color: white;
    padding: 13px 28px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.15s;
    /*display: inline-block;*/
	
}
.hero1-btn-primary:hover { 
	background: var(--charcoal); 
	transform: translateY(-1px); 

	 opacity: 0.88;
}

.hero1-btn-secondary {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-underline-offset: 0 !important;
    letter-spacing: 0.04em;
	
	background: transparent!important;
    color: var(--charcoal)!important;
    padding: 13px 28px!important;
    border-radius: 6px!important;
    font-size: 0.85rem;
    border: 1px solid var(--border)!important;
    transition: border-color 0.2s, transform 0.15s;
    /*display: inline-block;*/
}

  .hero1-btn-secondary:hover {   
	  color: var(--charcoal)!important;
	  border-color: var(--sage)!important; 
	  transform: translateY(-1px); 
}


/* Override the `.ast-single-post a` rule bleeding in */
.hero1-wrapper a.hero1-btn-primary,
.hero1-wrapper a.hero1-btn-secondary {
    text-decoration: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    color: inherit !important;
}

.hero1-wrapper a.hero1-btn-primary {
    background: var(--sage-dark, #5a7050);
    color: #fff !important;
}

.hero1-wrapper a.hero1-btn-secondary {
    background: transparent;
    color: var(--sage-dark, #5a7050) !important;
    border: 2px solid var(--sage-dark, #5a7050);
}

.hero1-wrapper a.hero1-btn-secondary:hover {
    background: var(--sage-dark, #5a7050);
    color: var(--sage-dark, #5a7050) !important;
}

/* ── Right: image grid ── */

.hero1-grid {
    flex: 1 1 45%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
}

.hero1-grid-card {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
}

/* First image spans full left column (2 rows tall) */
.hero1-grid-card--featured {
    grid-row: 1 / 3;
}

.hero1-grid-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hero1-grid-card--featured img {
    min-height: 280px;
}

.hero1-grid-card:not(.hero1-grid-card--featured) img {
    min-height: 130px;
}

.hero1-grid-card:hover img {
    transform: scale(1.03);
}

.hero1-grid-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
	font-family: 'Cormorant Garamond', serif;
    padding: 20px 10px 8px;
    line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

Spotlight 1
/* ============================================================
   SPOTLIGHT1 — Easter spotlight banner (2x2 grid)
   ============================================================ */

.spotlight1-wrapper {
    background: linear-gradient(135deg, #fceee6 0%, #faf5d4 60%, #eaf2e6 100%);
    border-radius: 16px;
    width: 100%;
    padding: 48px 40px;
    box-sizing: border-box;
    margin-bottom: 40px;
    border: 1px solid rgba(138, 158, 126, 0.2);
    position: relative;
    overflow: hidden;
}

.spotlight1-wrapper::before {
    content: '🐣';
    position: absolute;
    top: -20px;
    right: 40px;
    font-size: 6rem;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.spotlight1-inner {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ── Left: text ── */
.spotlight1-text {
    flex: 1 1 45%;
}

.spotlight1-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--charcoal, #2c2c2c);
    margin-bottom: 16px;
}

.spotlight1-headline em {
    font-style: italic;
    color: var(--sage-dark, #5a7050);
}

.spotlight1-subtext {
    font-size: 1rem;
    color: var(--warm-grey);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 28px;
}

.spotlight1-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.spotlight1-btn-primary {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-underline-offset: 0 !important;
    letter-spacing: 0.04em;
    
    background: var(--sage-dark) !important;
    color: white !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.15s;
    display: inline-block;
}

.spotlight1-btn-primary:hover { 
    background: var(--charcoal) !important; 
    transform: translateY(-1px); 
    opacity: 0.88;
}

.spotlight1-btn-secondary {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-underline-offset: 0 !important;
    letter-spacing: 0.04em;
    
    background: transparent !important;
    color: var(--charcoal) !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 0.85rem;
    border: 1px solid var(--border) !important;
    transition: border-color 0.2s, transform 0.15s;
    display: inline-block;
}

.spotlight1-btn-secondary:hover {   
    color: var(--charcoal) !important;
    border-color: var(--sage) !important; 
    transform: translateY(-1px); 
}

/* ── Right: 2x2 image grid ── */
.spotlight1-grid {
    flex: 1 1 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    aspect-ratio: 1 / 1;
}

.spotlight1-grid-card {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.22s, box-shadow 0.22s;
}

.spotlight1-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.spotlight1-grid-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.spotlight1-grid-card:hover img {
    transform: scale(1.03);
}

.spotlight1-grid-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 20px 10px 8px;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}




Style4 · CSS
Copy

/* ============================================================
   STYLE4 — Single-column numbered recipe list
   ============================================================ */

.style4-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Each card */
.style4-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 0;
    border-bottom: 1px solid #e5e5e5;
}

.style4-item:last-child {
    border-bottom: none;
}

/* Large prominent number */
.style4-number {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--ast-global-color-3, #333);
    margin-bottom: 12px;
    font-family: Lora, sans-serif;
}

/* Recipe name — h3, centred */
h3.style4-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-align: center;
}

h3.style4-title a {
    text-decoration: none;
    color: inherit;
}

h3.style4-title a:hover {
    text-decoration: underline;
}


/* Full-width image */
.style4-image {
    width: 100%;
    margin-bottom: 20px;
}

.style4-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

	.style4-description {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 12px 0 16px 0;
    text-align: left;
}

/* CTA button/link */
.style4-cta {
    margin-top: 8px;
}

.style4-cta-link {
    display: inline-block;
    padding: 10px 28px;
    background-color: var(--ast-global-color-3, #333);
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: Lora, sans-serif;
    transition: opacity 0.2s ease;
}

.style4-cta-link:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Ad unit inside the list */
.style4-ad {
    padding: 10px 0;
}

/* End of style4*/

.ast-blog-layout-4-grid .ast-article-post.style1 {
    width: 25%;

}

.ast-blog-layout-4-grid .ast-article-post.style1-5column{
    width: 20%;

}

.ast-blog-layout-4-grid .ast-article-post.style1-6column{
    width: 16%;
}

.ast-blog-layout-4-grid .ast-article-post.style2{
    width: 33%;
}
.ast-blog-layout-4-grid .ast-article-post.style2-1column{
    width: 100%;
}
.ast-blog-layout-4-grid .ast-article-post.style2-2column{
    width: 50%;
}

/** Added 29-01-2025 */
#recipe-results.style3-scroll {
  display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}	

#recipe-results.style3-scroll::-webkit-scrollbar {
    display: none;
}

article .ast-blog-layout-4-grid .ast-article-post.style3 {
    flex: 0 0 auto !important;
    width: calc(25%) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

article.style3 img.size-teaser {
    aspect-ratio: 1!important;
	border-radius: 50%!important; /* Makes it a perfect circle */
    object-fit: cover; /* Ensures the image fills the circle properly */
    border: 2px solid #ddd; /* Optional border */
}

.style3 .entry-title a {
    font-size: 12px !important;
	font-weight: 400;
}

/** End */

/* Created 29-01-25 */
.style2 h3.entry-title {
    max-width: 70%;
	min-width: 70%;
}


.ast-post-format.blog-layout-4.ast-article-inner.style2, .ast-post-format.blog-layout-4.ast-article-inner.style2, .ast-post-format.blog-layout-4.ast-article-inner.style2 {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.post-content.ast-grid-common-col.style2 a, .post-content.ast-grid-common-col.style2-1column a, .post-content.ast-grid-common-col.style2-2column a{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 calc(33.33% - 20px); /* 29-01-25 changed 1 1 to 0 0 */
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;*/
    padding: 5px;
    background-color: #fff;
}

.post-content.ast-grid-common-col.style2, .post-content.ast-grid-common-col.style2-1column, .post-content.ast-grid-common-col.style2-2column{
    display: flex;
    flex-wrap: wrap;
    /*gap: 20px;*/
    justify-content: space-between;
}


.ast-blog-featured-section.post-thumb.ast-blog-single-element.style2, .ast-blog-featured-section.post-thumb.ast-blog-single-element.style2-1column, .ast-blog-featured-section.post-thumb.ast-blog-single-element.style2-2column {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 calc(33.33% - 20px);
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;*/
    background-color: #fff;
}

.sm-caps {
    letter-spacing: .02em;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 700;
	font-size: 14px;
    color: var(--ast-global-color-3);
	font-family: Lora, sans-serif;
}

.sm-caps em {
	text-transform: none;
	font-style: italic;
}

.roundup-header {
    display: flex;
    flex-wrap: wrap; /* Ensure it adapts to smaller screens */
    align-items: center;
    gap: 10px; /* Space between elements */
}

.roundup-header h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);!important;
}

.roundup-header a.section-link {
    text-decoration: none;
    font-size: 14px; /* Adjust size as needed */
    color: var(--ast-global-color-3); /* Link color */
    /*margin-left: auto; Push the link to the right */
}

.roundup-header a.section-link:hover {
    text-decoration: underline;
}







/* ── Responsive ── */
@media (max-width: 768px) {
    .hero1-wrapper {
        padding: 40px 20px;
    }

    .hero1-inner {
        flex-direction: column;
        gap: 32px;
    }

    .hero1-text {
        flex: 1 1 100%;
    }

    .hero1-headline {
        font-size: 1.9rem;
    }

    .hero1-grid {
        flex: 1 1 100%;
        width: 100%;
    }
	
	    .spotlight1-inner {
        flex-direction: column;
        gap: 32px;
    }
    
    .spotlight1-text {
        text-align: center;
    }
    
    .spotlight1-subtext {
        max-width: 100%;
    }
    
    .spotlight1-ctas {
        justify-content: center;
    }
    
    .spotlight1-grid {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .spotlight1-wrapper::before {
        font-size: 4rem;
        right: 20px;
    }
}

/* Mobile responsiveness */

@media (max-width: 545px) {
	

    .hero1-headline {
        font-size: 1.6rem;
    }

    .hero1-subtext {
        font-size: 0.95rem;
    }

    .hero1-btn-primary,
    .hero1-btn-secondary {
        width: 100%;
        text-align: center;
    }

    .hero1-ctas {
        flex-direction: column;
    }

	
	.style4-number {
		font-size: 36px;
	}

	.style4-title {
		font-size: 20px;
	}
	
    .style4-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .style4-item {
        width: 100% !important;
        flex: none !important;
    }	
	
	    .spotlight1-wrapper {
        padding: 32px 20px;
    }
    
    .spotlight1-grid {
        gap: 8px;
    }
    
    .spotlight1-grid-label {
        font-size: 0.75rem;
        padding: 15px 6px 6px;
    }
	


.ast-blog-layout-4-grid .ast-article-post.style1 {
    width: 50%!important;

}

.ast-blog-layout-4-grid .ast-article-post.style1-5column{
    width: 50%!important;

}

.ast-blog-layout-4-grid .ast-article-post.style1-6column{
    width: 50%!important;
}
.ast-blog-layout-4-grid .ast-article-post.style2 {
    width: 100%!important;
}
.ast-blog-layout-4-grid .ast-article-post.style2-1column {
    width: 100%!important;
}
.ast-blog-layout-4-grid .ast-article-post.style2-2column{
    width: 100%!important;
}	
}