/*
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
------------------------------------*/


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

:root {
    /* Border Radius */
    --radius-xs: 0.125rem;
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-xxl: 2rem;
    --radius-50: 50%;

    /* Container Widths */
    --width-m: 64rem;
    --width-s: 48rem;
    --width-xs: 40rem;

    /* 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-dflt: 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 ***/

/* Body Background Outside Wrapper */
body {
    background-color: var(--surface-0);
}

/* 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: var(--padding-dflt) !important;
}

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


/* responsive header padding */
.main-navigation .inside-navigation {
  padding-left: var(--padding-dflt);
  padding-right: var(--padding-dflt);
  transition: all 0.3s ease;
}


.main-navigation.has-branding .inside-navigation.grid-container {
  padding-left: var(--padding-dflt) !important;
  padding-right: var(--padding-dflt) !important;
  transition: all 0.3s ease !important;
}



.site-content, #content {
	
}

.grid-container {
	
}


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

@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 calc(336px + clamp(0.938rem, 0.283vw + 0.872rem, 1.25rem));
  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-dflt {
  padding-left: var(--padding-dflt);
  padding-right: var(--padding-dflt);
}

.padding-dflt-r {
  padding-right: var(--padding-dflt);
}

.padding-dflt-l {
  padding-left: var(--padding-dflt);
}

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


/* Primary Menu CTA Button */
.main-navigation .main-nav ul li.nav-cta a {
    background: var(--contrast) !important;
    color: var(--surface-10) !important;
    padding: 1em 1.5em;
    border-radius: 4px;
    line-height: 1;
    font-weight: 600;
}

.main-navigation .main-nav ul li.nav-cta a:hover {
    background: var(--contrast-alt) !important;
    color: var(--surface-0) !important;
}

@media (min-width: 1025px) {
    .main-navigation .main-nav ul li.nav-cta a {
        margin-left: 16px;
    }
}

@media (max-width: 1024px) {
    .main-navigation .main-nav ul li.nav-cta a {
        margin-left: 0px;
    }
}

/* 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;
}

/* Border Radius Utilities */
.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-s {
    border-radius: var(--radius-s);
}

.radius-m {
    border-radius: var(--radius-m);
}

.radius-l {
    border-radius: var(--radius-l);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.radius-xxl {
    border-radius: var(--radius-xxl);
}

.radius-50 {
    border-radius: var(--radius-50);
}

/* Container Width Utilities */
.width-xs {
    max-width: var(--width-xs);
}

.width-s {
    max-width: var(--width-s);
}

.width-m {
    max-width: var(--width-m);
}



/* ==============================================
   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;
	border-radius: 15px;
    margin: 0;
	margin-bottom: 40px;
}

/* Comment Body Structure */
.comment-body {
	background-color: var(--surface-20);
    padding: 15px;
    margin: 50px 0;
	border-radius: 15px;
}

/* Comment Content Area */

.comments-area {
	padding-left: var(--padding-dflt);
}

@media (max-width: 949px) {
  .comments-area {
    padding-right: var(--padding-dflt);
  }
}

.comment-content {
    padding: 15px;
	border: 0;
}

li.comment.bypostauthor .comment-body {
    background-color: var(--surface-30);
}

li.comment.bypostauthor .comment-content {

}

.comment.depth-1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-color: var(--surface-10);
}

/* ==============================================
   COMMENT NESTING STRUCTURE - ALL DEPTHS
   ============================================== */

/* Main container for comment threads */
.comment .children {
    padding-left: 20px;
    margin: -30px 0 30px 0;
    border-left: 0px solid var(--primary-alt);
    border-bottom: 0px solid var(--primary-alt);
    position: relative;
}

/* Specific fix for parent comment children */
.comment.depth-1.parent > .children {
    border-bottom: 0px solid var(--primary-alt);
}

/* Ensures border visibility on all comments */
.comment {
    position: relative;
}

/* Fix for last child border */
.comment .children > li:last-child {
    padding-bottom: 1px;
}


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

/* Base Button Styles */
/* Comment form submit button */
.comment-form .submit {
    display: inline-block;
    padding: 10px 20px;
	border-radius: 6px;
    font-weight: bold;
    line-height: 1;
    color: var(--surface-50) !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;
}

.comment-form .submit:hover {
	color: var(--surface-0)  !important;
    background-color: var(--surface-50) !important;
    text-decoration: none !important;
}

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

/* Reply Link */
.comment-reply-link {
    display: inline-block;
    padding: 10px 20px;
	width: fit-content;
	border-radius: 6px;
    font-weight: bold;
    line-height: 1;
    color: var(--surface-0) !important;
	background-color: var(--surface-50);
    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;
}

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

/* Cancel Reply Link */
#cancel-comment-reply-link {
    padding-left: 30px;
	border-radius: 6px;
    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;
	border-radius: 6px;
    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-50);
    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-radius: 6px;
	border: 5px solid var(--surface-10) !important;
}

.page-numbers {
    border-radius: 6px;
}

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


/*Tasty Recipes*/

.tasty-recipes {
    border-radius: 15px !important;
	overflow: hidden !important;
	max-width: 100% !important;
}

/* Tasty Recipes Buttons Styling */

.tasty-recipes-quick-links {
    margin-bottom: 30px;
}

.tasty-recipes-jump-link {
    align-items: center;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1)!important;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    background-color: var(--surface-10) !important;
    color: var(--surface-50) !important;
    padding: 10px 15px !important;
	border-radius: 6px;
    font-weight: bold;
    border: none !important;
	text-decoration: none !important;
    transition: all 0.3s ease;
    margin: 0 10px 10px 0 !important;
}

.tasty-recipes-jump-link:hover {
    background-color: var(--surface-50) !important;
    color: var(--surface-0) !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .1);
    text-decoration: none;
}

.tasty-recipes-entry-header .tasty-recipes-buttons {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
	border-radius: 6px;
}

.tasty-recipes-entry-header .tasty-recipes-buttons a {
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1)!important;
    line-height: 1;
    background-color: var(--primary-alt) !important;
    color: var(--surface-50) !important;
    padding: 10px 15px !important;
	border-radius: 6px !important;
    font-weight: bold;
    border: none !important;
    transition: all 0.3s ease;
    margin: 0 10px 10px 0 !important;
}

.tasty-recipes-entry-header .tasty-recipes-buttons a:hover {
    background-color: var(--surface-50) !important;
    color: var(--surface-0) !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .1);
    text-decoration: none;
}

/* Hide Tasty Recipes categories*/

.tasty-recipes-details .category,
.tasty-recipes-details .cuisine,
.tasty-recipes-details .method {
    display: none !important;
}


/* Hide Tasty Recipes keywords*/
.tasty-recipes-entry-content .tasty-recipes-keywords p {
    display: none !important;
}


/* Hide Tasty Recipes Nutritions*/
.tasty-recipes-nutrition {
    display: none !important;
}

.tasty-recipes {
    margin-bottom: 40px !important;
}

.tasty-recipes-entry-content .tasty-recipes-instructions ol>li:before {
    color: var(--surface-0) !important;
    background-color: var(--contrast) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: absolute;
    top: 0 !important;
    margin-right: 10px !important;
    margin-right: 1.5em !important;
    font-size: var(--fs-body) !important;

}

.tasty-recipes-entry-content .tasty-recipes-instructions ol>li {
    font-size: var(--fs-body);
}

.tasty-recipes-entry-content .tasty-recipes-ingredients ol>li:before {
    color: var(--surface-0) !important;
    background-color: var(--contrast) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: absolute;
    top: 0 !important;
    margin-right: 10px !important;
    margin-right: 1.5em !important;
    font-size: var(--fs-body) !important;

}

.tasty-recipes-entry-content .tasty-recipes-ingredients ol>li {
    font-size: var(--fs-body);
}


.tasty-recipes-entry-content .tasty-recipes-notes ul li:before {
    color: var(--surface-0) !important;
    background-color: var(--contrast) !important;
    font-size: var(--fs-body) !important;
    width: 25px !important;
    height: 25px !important;
    font-weight: 700;
    line-height: 1.5em !important;
    top: 1.4em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.tasty-recipes-entry-content .tasty-recipes-notes ul li {
    font-size: var(--fs-body);
}


[data-tr-ingredient-checkbox] .tr-ingredient-checkbox-container input[type=checkbox]:checked+label:after {

    color: var(--contrast);
}


.tasty-recipes-entry-content .tasty-recipes-ingredients {
    font-size: var(--fs-body);
}


.tasty-recipes-entry-header h2 {
    font-size: var(--fs-h3);
}

.tasty-recipes-entry-header .tasty-recipes-details ul {
    font-size: var(--fs-body-s);;
}

.tasty-recipes-entry-header .tasty-recipes-details {
    margin-top: 0.5em !important;
}

/*End Tasty Recipes */

/*GP Search Bar */
.search-modal-form {
    border-radius: 10px;
}

/*WP Search Bar */
input[type="search"], .wp-block-search__button {
    border-radius: 10px;
}

/* Wp Block Heading Styling */
.wp-block-heading {
    border-left-style: solid;
    border-left-width: 10px;
	  border-left-color: var(--contrast);
    text-align: left;
	  padding-left: 10px
}