/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Default GeneratePress child theme
Author:       Tom Usborne
Author URI:   https://tomusborne.com
Template:     generatepress
Version:      1.0

/* --------TABLE OF CONTENTS--------
1. Root Variables
2. Typography
3. Theme Structure
4. Theme Components
5. Utility Classes
6. Categories, Featured & Recent Post Images
------------------------------------*/


/*** 1. ROOT VARIABLES ***/

:root {
    /* Typography */
    --headline-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --fs-body: 1.25rem;
    --fs-xl: clamp(3.05rem, calc(2.24rem + 4.08vw), 5.5rem);
    --fs-h1: clamp(2.44rem, calc(1.96rem + 2.41vw), 3.89rem);
    --fs-h2: clamp(1.95rem, calc(1.69rem + 1.33vw), 2.75rem);
    --fs-h3: clamp(1.56rem, calc(1.44rem + 0.64vw), 1.94rem);
    --fs-h4: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-h5: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-h6: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-pre: clamp(0.97rem, calc(1.01rem + -0.05vw), 1rem);
    --fs-body-xl: clamp(1.27rem, calc(1.15rem + 0.59vw), 1.62rem);
    --fs-body-l: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.35rem);
    --fs-body-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --fs-body-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
	
    /* Section Spacing*/
    --section-xs-padding: 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-s-padding: clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-m-padding: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-d-padding: clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-l-padding: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-xl-padding: clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
	--padding-sp-horizontal: clamp(0.938rem, 0.283vw + 0.872rem, 1.25rem);
}

/*** 2. TYPOGRAPHY ***/


/* Target the breadcrumb more precisely */
.rank-math-breadcrumb p {
    font-size: var(--fs-body-s);
    font-weight: 400;             
    line-height: 1.8;
}

.rank-math-breadcrumb a {
	border-bottom: 2px solid var(--surface-50);
}

.rank-math-breadcrumb a:hover {
	border-bottom: 2px solid var(--surface-30);
}

/* Base Text Styles */
p {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-family: var(--body-font);
}

/* Headings */
h1, h2, h3, h4, h5, h6, 
.fs-xl, .fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 {
    font-weight: 700;
    margin-bottom: .5em;
    font-family: var(--headline-font);
}

/* Heading Sizes */
.fs-xl {
    font-size: var(--fs-xl);
    line-height: 1.05;
}

h1, .fs-h1 {
    font-size: var(--fs-h1);
    line-height: 1.05;
}

h2, .fs-h2 {
    font-size: var(--fs-h2);
    line-height: 1.1;
}

h3, .fs-h3 {
    font-size: var(--fs-h3);
    line-height: 1.15;
}

h4, .fs-h4 {
    font-size: var(--fs-h4);
    line-height: 1.1;
}

h5, .fs-h5 {
    font-size: 1.375rem;
    font-size: var(--fs-h5);
    line-height: 1.25;
}

h6, .fs-h6 {
    font-size: 1.25rem;
    font-size: var(--fs-h6);
    line-height: 1.4;
}

/* Additional Text Styles */
.fs-pre {
    font-size: var(--fs-pre);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.fs-body-xl {
    font-family: var(--body-font);
    font-size: var(--fs-body-xl);
}

.fs-body-l {
    font-family: var(--body-font);
    font-size: var(--fs--body-l);
}

.fs-body-s {
    font-family: var(--body-font);
    font-size: var(--fs-body-s);
}

.fs-body-xs {
    font-family: var(--body-font);
    font-size: var(--fs-body-xs);
}

/* Post Content Typography */
.single-post :where(h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
}

/* Text Balance */
.balance {
    text-wrap: balance;
}

p, div, blockquote, li {
    text-wrap: pretty;
}


/*** 3. THEME STRUCTURE ***/

/* Main Content Area Height*/
/* Ensures the main content area always takes at least 65% of viewport height */
#main {
    min-height: 65vh;
}

/* Removes horizontal padding from header's inner container */
.inside-header {
    padding-inline: 0px !important;
}

.inside-header.grid-container .site-logo {
	padding-inline-start: clamp(0.938rem, 0.283vw + 0.872rem, 1.25rem) !important;
}

/* Responsive horizontal padding for header */
.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
}

/* =============================================
   Single Post Layout Styles
   ============================================= */

/**
 * Base Grid Container Styles
 * Applies to all screen sizes
 */

.grid-container {
  padding-left: var(--padding-sp-horizontal);
  padding-right: var(--padding-sp-horizontal);
  transition: all 0.3s ease;
}

@media (max-width: 1250px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
      margin-left: 0px !important;
    }
}
/**
 * Main Content Area Layout
 */
body.single-post .site-content {
  display: flex;
  flex-direction: column; /* Mobile-first approach */
  column-gap: clamp(1rem, 34.82vw + -15.735rem, 11.25rem);
  transition: all 0.3s ease;
}

body.single-post .content-area {
  width: 100%;
  min-width: 0; /* Prevent flex overflow */
}

/**
 * Sidebar Styles - Initially hidden on mobile
 */
body.single-post #right-sidebar {
  flex: 0 0 337px;
  transition: all 0.3s ease;
}

/* =============================================
   Responsive Breakpoints
   ============================================= */

/**
 * Mobile Layout (0-949px)
 * - Single column layout
 * - Hidden sidebar
 */
@media (max-width: 949px) {
  body.single-post #right-sidebar {
    display: none;
  }
  
  /* Ensures content takes full width */
  body.single-post .content-area {
    flex: 1 0 100%;
    padding-right: 0;
  }
}

/**
 * Desktop Layout (950px+)
 * - Sidebar/content side-by-side
 * - Responsive column gap
 */
@media (min-width: 950px) {
  body.single-post .site-content {
    flex-direction: row;
  }
  
  body.single-post #right-sidebar {
    display: block;
  }
  
  body.single-post .content-area {
    flex: 1;
  }
}


/* Section Spacing */
.section-xs {
    padding: var(--section-xs-padding);
}

.section-s {
    padding: var(--section-s-padding);
}

.section-m {
    padding: var(--section-m-padding);
}

.section-d {
    padding: var(--section-d-padding);
}

.section-l {
    padding: var(--section-l-padding);
}

.section-xl {
    padding: var(--section-xl-padding);
}

.padding-sp-horizontal {
  padding-left: var(--padding-sp-horizontal);
  padding-right: var(--padding-sp-horizontal);
}

/*** 4. THEME COMPONENTS ***/

/* Button Styles */
.gb-button {
    line-height: 1em;
	transition: all 0.3s ease;
}

/* Container Styles */ 
/*Remove bottom margin on last paragraph*/
.gb-container p:last-child:last-of-type {
    margin-bottom: 0;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0;
}

/*text selection highlight color*/
::selection {
  background: var(--contrast); /* background */
  color: var(--surface-0);       /* text */
}

::-moz-selection {
  background: var(--contrast);
  color: var(--surface-0);
}
/*end text selection highlight color*/


/*** 5. UTILITY CLASSES ***/

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Stretch link on Card  */ 

.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: '';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

/* END Stretch link on Card  */ 

/* Line Limits */
.line-limit-3, .line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* No Underline */
.no-ul, .no-ul a {
    text-decoration: none;
}

/* CF7 Contact form */

.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"] {
    width: 70%;
    padding: 10px;
	margin-top: 0.5em;
    box-sizing: border-box; /* includes padding in width calculation */
}

.wpcf7 form .wpcf7-response-output {
	margin-left: 0em;
	width: 70%;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 10px 15px !important;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1) !important;
}

.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
    background-color: var(--surface-0) !important;
    color: var(--surface-50) !important;
}

.wpcf7-list-item {
    margin: 0 !important;
}

/* Mobile Layout */
@media (max-width: 600px) {
    .wpcf7-form-control-wrap input[type="text"],
    .wpcf7-form-control-wrap input[type="email"] {
        width: 100%;
        padding: 10px;
        margin-top: 0.5em;
        box-sizing: border-box;
    }
    
    .wpcf7 form .wpcf7-response-output {
        width: 100%;
    }
}

/*button styling*/
.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 10px 15px !important;
	font-weight: bold;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1) !important;
}

/*ENDS button styling*/

/* End CF7 Contact form */


/* ==============================================
   COMMENTS SECTION STYLING
   ============================================== */

/* Comment Section Titles */
.comment-reply-title,
.comments-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--surface-50);
    margin-top: 1em;
}

/* Comment Form Container */
.comment-respond {
    background-color: var(--surface-10);
    padding: 35px;
    margin: 0;
	margin-bottom: 40px;
}


/* ==============================================
   BUTTON STYLING
   ============================================== */

/* Base Button Styles */
.comment-form .submit,
.comment-reply-link {
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    line-height: 1;
    color: var(--surface-0) !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Submit Button */
.comment-form .submit {
    /* Add specific styles if needed */
}

/* Reply Link */
.comment-reply-link {
    background-color: var(--surface-50);
    width: fit-content;
}

.comment-reply-link:hover {
    background-color: var(--contrast);
    text-decoration: none;
}

/* Cancel Reply Link */
#cancel-comment-reply-link {
    padding-left: 30px;
    font-size: var(--fs-body-s);
    text-decoration: underline;
}

/* Comment Navigation */
.comment-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 40px 0;
    text-align: center;
}

.comment-navigation .nav-previous,
.comment-navigation .nav-next {
    display: inline-block;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.comment-navigation a {
    display: inline-block;
    padding: 12px 30px;
    min-width: 160px;
    margin-bottom: 1em;
    background-color: var(--surface-50);
    color: var(--surface-0);
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1.5;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.comment-navigation a:hover {
    background-color: var(--contrast);
    color: var(--surface-0);
    transform: none;
}

/* Responsive */
@media (max-width: 600px) {
    .comment-navigation {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .comment-navigation a {
        width: 100%;
        max-width: 220px;
        padding: 10px 20px;
    }
}


/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
    .comment .children {
        padding-left: 15px;
        margin-left: 10px;
    }
    
    .comment-content {
        padding: 20px;
    }
    
    .comment-respond {
        padding: 25px;
    }
}


/* Query Pagination Buttons Styling */

.page-numbers.current {
  background-color: var(--surface-10) !important;
	border: 5px solid var(--surface-10) !important;
}

.page-numbers:not(.current):hover {
    background-color: var(--surface-10);
}
/* END Query Pagination Buttons Styling */



/* Weekly Newsletter */
.form-inline-complex-layout {
    display: flex;   
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.form-column-item {
    display: flex;  
    flex-direction: column; 
    flex: 1;  
}

.form-column-item.submit-column {
    flex: 0 0 auto;
}

.form-column-item label {
    display: block;   
    font-weight: bold;
    width: 100%;
}

.form-column-item .column-field-input,
.form-column-item input[type="text"],
.form-column-item input[type="email"] {
    width: 100%;  
    box-sizing: border-box;
}

.form-column-item .inline-button.wpcf7-submit {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 650px) {
    .form-inline-complex-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .form-column-item,
    .form-column-item.submit-column {
         width: auto;
         min-width: auto;
         flex: 0 0 auto;
    }

    .form-column-item label,
    .form-column-item .column-field-input {
         width: 100%; 
    }

     .form-column-item .inline-button.wpcf7-submit {
         width: 100%;
     }
}

/* End Weekly Newsletter */

/* Hide comments on pages only, keep on posts */
.page .comments-area {
    display: none !important;
}

/* Make sure comments still show on posts */
.single-post .comments-area {
    display: block !important;
}

/* Remove specific containers only on home page */
.home .hfeed {
    display: none !important;
}

/* Style for your specific H1 title */
.gb-text-b07b4335 {
    border-left-style: solid !important;
    border-left-width: 10px !important;
    border-left-color: #2f8063 !important;
    color: #2f8063 !important;
    text-align: left !important;
    padding-left: 15px !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* Style for all H2 titles in your content */
.dynamic-entry-content h2 {
    border-left-style: solid !important;
    border-left-width: 10px !important;
    border-left-color: #2f8063 !important;
    color: #2f8063 !important;
    text-align: left !important;
    padding-left: 15px !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* Style for all checkbox containers in recipe ingredients */
[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]+label:before {
    border: 2px solid #2f8063 !important;
    background-color: #ffffff !important;
}

/* Style for checked checkboxes */
[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]:checked+label:before {
    background-color: #2f8063 !important;
    border-color: #2f8063 !important;
}

/* Style for the checkmark inside checked boxes */
[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]:checked+label:after {
    border-bottom: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
}

/* Style for focus state */
[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]:focus+label:before {
    box-shadow: 0 0 8px #2f8063 !important;
    outline: 1px solid #2f8063 !important;
}

/* Style for hover effect on checkboxes */
[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]+label:hover:before {
    border-color: #2f8063 !important;
    background-color: rgba(122, 159, 54, 0.1) !important;
}

/* Style for instruction list items with bullet points */
.tasty-recipes-entry-content .tasty-recipes-instructions ul li:before {
    background-color: #2f8063 !important;
}

/* Style for instruction list items with numbers */
.tasty-recipes-entry-content .tasty-recipes-instructions ol li:before {
    background-color: #2f8063 !important;
    color: #ffffff !important;
}

/* Style for ingredient list items with bullet points */
.tasty-recipes-entry-content .tasty-recipes-ingredients ul li:before {
    background-color: #2f8063 !important;
}

/* Style for ingredient list items with numbers */
.tasty-recipes-entry-content .tasty-recipes-ingredients ol li:before {
    background-color: #2f8063 !important;
    color: #ffffff !important;
}

/* Alternative: If your instructions are in a different container */
.dynamic-entry-content li[id^="instruction-step-"]:before {
    background-color: #2f8063 !important;
    color: #ffffff !important;
}

/* Style for any ordered list numbers in content */
.dynamic-entry-content ol li:before {
    background-color: #2f8063 !important;
    color: #ffffff !important;
}

/* Style for any unordered list bullets in content */
.dynamic-entry-content ul li:before {
    background-color: #2f8063 !important;
}

/* Tasty Recipes Scale Label */
.tasty-recipes-scale-label {
    color: #000000 !important;
}

/* Text styles with black color */
.text-lg.font-bold.text-text-100.mt-1.-mb-1\.5 {
    color: #000000 !important;
}

/*** 6. CATEGORIES, FEATURED & RECENT POST IMAGES ***/

/* Categories Images - Rectangular Style */
.categories_img {
    border-radius: 0 !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
    display: block;
}

/* Categories Image Wrapper */
.categories_img_wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

/* Featured Post Images */
.featured-post-img,
.gb-media {
    border-radius: 0 !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
    display: block;
}

/* Recent Post Images */
.recent-post-img {
    border-radius: 0 !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
    display: block;
}

/* GenerateBlocks Media Elements */
.gb-media img {
    border-radius: 0 !important;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Image aspect ratio control (from reference) */
.gb-media-2187806c {
    aspect-ratio: 1/1; /* Square images like in reference */
    width: 100%;
    object-fit: cover;
}

/* Categories Block Container */
.categories_block {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

/* Individual Category Item */
.categories_block .gb-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Category Title Styling */
.categories_title {
    margin-top: 10px;
    font-weight: 700;
    text-align: center;
}

.categories_title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.categories_title a:hover {
    color: var(--contrast);
}

/* Hover Effects for Images */
.categories_img:hover,
.featured-post-img:hover,
.recent-post-img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Container hover effects from reference */
.stretch-link:hover .categories_img {
    filter: brightness(0.9);
}

/* Hover and Focus Effects (from reference) */
.gb-element:is(:hover, :focus) {
    filter: opacity(80%);
    transition: all 0.2s ease 0s;
}

/* Responsive Grid Layout for Categories */
@media (min-width: 768px) {
    .categories_block {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .categories_block {
        flex-direction: column;
        gap: 20px;
    }
    
    .categories_img {
        max-width: 200px;
        margin: 0 auto;
    }
}

/* Featured Post Container */
.featured-post {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.featured-post .post-title {
    font-size: var(--fs-h4);
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.2;
}

.featured-post .post-excerpt {
    font-size: var(--fs-body-s);
    color: var(--surface-40);
    margin-bottom: 10px;
}

/* Recent Posts Container */
.recent-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recent-post-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.recent-post-item .recent-post-img {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.recent-post-item .post-content {
    flex: 1;
}

.recent-post-item .post-title {
    font-size: var(--fs-body);
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.recent-post-item .post-date {
    font-size: var(--fs-body-xs);
    color: var(--surface-40);
}

/* General image sizing utility */
.gb-media-YOUR_UNIQUE_ID {
    max-width: 100%;
    height: auto;
    max-height: 300px; /* Adjust this value */
    object-fit: cover;
    margin: 20px auto; /* Centers the image horizontally */
    display: block; /* Ensures the image behaves as a block element for centering */
}