/*
 Theme Name:   Shandy's Catering Child Theme
 Theme URL:    https://generatepress.com
 Description:  Shandy's Catering Child Theme
 Author:       Kembangi
 Author URL:   https://kembangi.com
 Template:     generatepress
 Version:      0.3
 Last Updated: March 2025
*/

/* TABLE OF CONTENTS
1. Theme Tweaks
2. Utilities
3. Typography
4. Global Styles
5. Fluent Forms
6. CSS Grid
*/

/*** 1. THEME TWEAKS ***/

/*** COLOUR DECLARATION ***/
:root {
	/* LIGHT THEME PALETTE */
		--white: #FDFEFD;
		--primary-lightest: ;
		--primary-lighter: ;
		--primary-light: #13a64f ;
		--primary: #11783c;
		--primary-dark: #135430;
		--primary-darker: ;
		--primary-darkest: ;
		--primary-50: #f0fdf5;
		--primary-100: #dbfde8;
		--primary-200: #baf8d3;
		--primary-300: #84f1b0;
		--primary-400: #47e186;
		--primary-500: #1ec964;
		--primary-600: #13a64f;
		--primary-hover: #146738;
		--primary-focus: #135430;
		--secondary-lightest: #f5cbb3;
		--secondary-lighter: #eea983;
		--secondary-light: #e77c50;
		--secondary: #e26136;
		--secondary-dark: #d24324;
		--secondary-darker: #af321f;
		--secondary-darkest: #71261d;
		--action: #0158a3;
		--action-alt: #0c8eeb;
		--brand: #11783c;
		--brand-alt: #84f1b0;
		--squash: #781811;
		--squash-alt: #4b0904;
		--text-light: #13a64f;
		--text: #11783c;
		--text-dark: #042f18;
	}
	
	/* BLOG POST - UL MARKER TAKEAWAYS SECTION STYLING */
	.keytakeaways ~ ul {
		margin-left: 0px;
		list-style: none;
	}
	
	.keytakeaways ~ ul li {
		margin-bottom: 1rem;
		border-left: 4px solid var(--brand-alt);
		padding-left: 16px;
		font-family: var(--body-font);
		font-size: 1rem;
		border-radius: 4px;
	}
	
	ul, ol, li {
		font-family: var(--body-font);
		font-size: var(--fs-body);
		padding-inline-start: 0;
	}
	
	li ::marker {
		color: var(--brand-alt);
	}
	*/
	
	ol ::marker {
		font-family: var(--link-font);
		content: /*"# "*/ counter(list-item) ": ";
		font-size: 1rem;}

	blockquote {
		padding-inline-start: 1em;
		border-inline-start: 0.3em solid;
	}
	
	/* Body background color (outside wrapper) */
	body {
		background-color: var(--white) !important;
	}


/* FLUID SPACE */
/* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--grid-max-width: 77.50rem;
	--grid-gutter: var(--space-s-l, clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem));
	--grid-columns: 12;
  }
  
  .u-container {
	max-width: var(--grid-max-width);
	padding-inline: var(--grid-gutter);
	margin-inline: auto;
  }
  
  .u-grid {
	display: grid;
	gap: var(--grid-gutter);
  }

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1980,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--space-3xs: clamp(0.25rem, 0.238rem + 0.0602vw, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.4759rem + 0.1205vw, 0.625rem);
	--space-xs: clamp(0.75rem, 0.7139rem + 0.1807vw, 0.9375rem);
	--space-s: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
	--space-m: clamp(1.5rem, 1.4277rem + 0.3614vw, 1.875rem);
	--space-l: clamp(2rem, 1.9036rem + 0.4819vw, 2.5rem);
	--space-xl: clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem);
	--space-2xl: clamp(4rem, 3.8072rem + 0.9639vw, 5rem);
	--space-3xl: clamp(6rem, 5.7108rem + 1.4458vw, 7.5rem);
  
	/* One-up pairs */
	--space-3xs-2xs: clamp(0.25rem, 0.1777rem + 0.3614vw, 0.625rem);
	--space-2xs-xs: clamp(0.5rem, 0.4157rem + 0.4217vw, 0.9375rem);
	--space-xs-s: clamp(0.75rem, 0.6536rem + 0.4819vw, 1.25rem);
	--space-s-m: clamp(1rem, 0.8313rem + 0.8434vw, 1.875rem);
	--space-m-l: clamp(1.5rem, 1.3072rem + 0.9639vw, 2.5rem);
	--space-l-xl: clamp(2rem, 1.6627rem + 1.6867vw, 3.75rem);
	--space-xl-2xl: clamp(3rem, 2.6145rem + 1.9277vw, 5rem);
	--space-2xl-3xl: clamp(4rem, 3.3253rem + 3.3735vw, 7.5rem);
  
	/* Custom pairs */
	--space-s-l: clamp(1rem, 0.7108rem + 1.4458vw, 2.5rem);
  }

 

  /* Site wrapper */
	.site-wrapper {
		width: 100%;
		max-width: 1920px;
		margin-inline: auto;
		background-color: var(--white) !important;
	} 

	/* Set the main content area height to a minimum of 65vh */
	#main {
	min-height: 65vh;
	}

/* Container Padding Overrides */
	.inside-header {
	padding-inline: 0px !important;
	padding: 0px !important;
	}

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

	.site-content, #content {
	padding: 0px;
	}

/* Post Editor Width (BACKEND) */
	.post-type-post .block-editor-block-list__layout {
 	max-width: 728px !important;
 	margin-inline: auto !important;
	padding-inline: 200px !important;
	}

	.post-type-post .edit-post-visual-editor__post-title-wrapper .editor-post-title {
	max-width: 728px !important;
	margin-inline: auto !important;
	padding-inline: 200px !important;
	}

/* Primary Navigation Styling */
.nav-float-right #site-navigation {
	margin-left: 0;
}

.main-navigation {
	width: 100%;
	background: var(--primary);
}

#primary-menu {
	width: 100%;
	color: var(--white);
}

.main-navigation li:nth-last-child(1) {
	margin-left: auto;
}

.main-navigation li:first-child {
	margin-left: auto;
}

/** CTA BUTTON ON NAVIGATION BAR **/

@media (min-width: 1025px) {

	/*Natural State*/
	.main-navigation .main-nav ul li.nav-cta a {
		background: var(--white) !important;
		color: var(--primary) !important;
		padding: 0.8em 1em;
		margin-left: 16px;
		margin-right: 40px;
		border-radius: 4px;
		line-height: 1;
		font-weight: 600;
		text-transform: uppercase;
	}
	/*Hover State*/
	.main-navigation .main-nav ul li.nav-cta a:hover {
		background: var(--white) !important;
		color: var(--primary-500) !important;
	}
}

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

/* NAVIGATION BAR - LINE ON HOVER */

.main-navigation .main-nav ul li a {
	color: var(--white);
    border-bottom: 4px solid transparent;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 4px solid var(--white);

}

/* MOBILE MENU - SLIDEOUT NAVIGATION */
#generate-slideout-menu:before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	background-color: #042f18;
	background-image: url('https://shandyscatering.id/wp-content/uploads/2025/04/mobile-bg.webp');
	background-position: center center;
	background-size: cover;
	opacity: 0.755;
}



/*** 2. UTILITIES ***/

/*** ------------------------------------------------------------------- ***/

/*** STICKY FLOATING SIDEBAR ***/
.sticky-content-track .gb-inside-container {
	height: 100%;
	position: relative;
	background-color: red;
}

.sticky-content-wrapper {
	position: sticky;
	top: 4em;
}

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

/* Aspect Ratios */
.ar-16-9, .ar-9-16, .ar-4-3, .ar-1-1, .ar-3-2 {
	object-fit: cover;
}

.ar-16-9 {
	aspect-ratio: 16/9;
}

.ar-9-16 {
	aspect-ratio: 9/16;
}

.ar-4-3 {
	aspect-ratio: 4/3;
}

.ar-1-1 {
	aspect-ratio: 1/1;
}

.ar-3-2 {
	aspect-ratio: 3/2;
}


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

/* Border Radius */
:root {
	--radius-xs: .125rem;
	--radius-s: .25rem;
	--radius-m: .5rem;
	--radius-l: 1rem;
	--radius-xl: 1.5rem;
	--radius-xxl: 2rem;
	--radius-50: 50%;
	--radius-circle: 50%;
}

  /*** 3. TYPOGRAPHY ***/
  /* <weight>: Use a value from 400 to 700 */
  /* <uniquifier>: Use a unique and descriptive class name */
  
  .lora-font {
	font-family: "Lora", serif;
	font-optical-sizing: auto;
	font-weight: 400, 500, 600, 700;
	font-style: normal;
  }

  :root {
	/*these HAVE TO match what is in the CUSTOMIZER > TYPOGRAPHY. Pull in Font Families using Font Manager. Set Headline-Font as 'All Headings', set body-font as HTML */
	--headline-font: "Lora", serif;
	--subtitle-font: "Rubik", sans-serif;
	--body-font: "Rubik", sans-serif;
	--link-font: "Inter", sans-serif;
}
	
/** SPACE MARGIN **/

 	.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
	}
	
	.prose {
	--flow-space: var(--space-m-l);
	}
	
	.prose :is(h1, blockquote) {
	--flow-space: var(--space-m);
	}
	
	.prose :is(h2 + *, h3 + *, h4 + *) {
	--flow-space: var(--space-s);
	}


/* FLUID FONT SIZE */
/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1920,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	
	--fs-text-xs: clamp(0.6944rem, 0.6741rem + 0.1017vw, 0.8rem);
	--fs-text-s: clamp(0.8333rem, 0.8012rem + 0.1606vw, 1rem);
	--fs-body: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
	--fs-h6: clamp(1.2rem, 1.1301rem + 0.3494vw, 1.5625rem);
	--fs-h5: clamp(1.44rem, 1.3411rem + 0.4946vw, 1.9531rem);
  	--fs-h4: clamp(1.728rem, 1.5905rem + 0.6876vw, 2.4414rem);
  	--fs-h3: clamp(2.0736rem, 1.885rem + 0.9428vw, 3.0518rem);
  	--fs-h2: clamp(2.4883rem, 2.2326rem + 1.2784vw, 3.8147rem);
  	--fs-h1: clamp(2.986rem, 2.6424rem + 1.718vw, 4.7684rem);
  	--fs-hxl: clamp(3.5832rem, 3.1249rem + 2.2914vw, 5.9605rem);
  }

 /* For browsers that don't support clamp */
 @supports not (font-size: clamp(1rem, 1vi, 1rem)) {
	:root {
		  --fs-text-xs: 0.79rem;
		  --fs-text-s: 0.89rem;
		  --fs-body: 1rem;
		  --fs-text-m: 1.13rem;
		  --fs-text-l: 1.27rem;
		  --fs-h6: 1.42rem;
		  --fs-h5: 1.6rem;
		  --fs-h4: 1.8rem;
		  --fs-h3: 2.03rem;
		  --fs-h2: 2.28rem;
		  --fs-h1: 2.57rem;
		  --fs-hxl: 2.89rem;
		  --fs-h2xl: 3.25rem;
	}
	@media screen and (min-width: 3600px) {
	  :root {
			  --fs-text-xs: 0.72rem;
			  --fs-text-s: 0.9rem;
			  --fs-body: 1.13rem;
			  --fs-text-m: 1.41rem;
			  --fs-text-l: 1.76rem;
			  --fs-h6: 2.2rem;
			  --fs-h5: 2.75rem;
			  --fs-h4: 3.43rem;
			  --fs-h3: 4.29rem;
			  --fs-h2: 5.36rem;
			  --fs-h1: 6.71rem;
			  --fs-hxl: 8.38rem;
			  --fs-h2xl: 10.48rem;
	  }
	}
  }


/* DEFAULT BODY / Paragraph Font Settings */
p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	font-family: var(--body-font);
}

/* Default Headings weight, margin, font-family */

h1 {
	font-weight: 800;
	font-family: var(--headline-font);
	margin-bottom: .5em;
	color: var(--text);
}

h2, h3, .gb-headline-xxl, .gb-headline-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3 {
	font-weight: 800;
	margin-bottom: .5em;
	font-family: var(--headline-font);
}

h4, h5, h6, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 {
	font-weight: 700;
	margin-bottom: .5em;
	font-family: var(--headline-font);

}

   /* Heading font-size and line-height */

.gb-headline-xl {
	font-size: var(--fs-hxl);
	line-height: 1.05;
}

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


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


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


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


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


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

.gb-headline-pre {
	font-size: var(--fs-h6);
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* Additional Body Font-Size */
.gb-headline-body-xl {
	font-family: var(--body-font);
	font-size: var(--fs-h2);
}

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

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

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

/* Button Global Line Height */
.gb-button {
	line-height: 1em;
}

/* Remove Bottom Margin on Last Paragraph */
.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

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

/*** 4. GLOBAL STYLES ***/

/* SECTIONS */
.section-d {
	padding: clamp(1.5rem, 1.4277rem + 0.3614vw, 1.875rem) clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
}

.section-xs {
	padding: clamp(0.75rem, 0.7139rem + 0.1807vw, 0.9375rem) clamp(0.75rem, 0.7139rem + 0.1807vw, 0.9375rem);
}

.section-s {
	padding: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem) clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
}

.section-m {
	padding: clamp(2rem, 1.9036rem + 0.4819vw, 2.5rem) clamp(1.5rem, 1.4277rem + 0.3614vw, 1.875rem);
}

.section-l {
	padding: clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem) clamp(2rem, 1.9036rem + 0.4819vw, 2.5rem);
}

.section-xl {
	padding: clamp(4rem, 3.8072rem + 0.9639vw, 5rem) clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem);
}

.section-2xl {
	padding: clamp(6rem, 5.7108rem + 1.4458vw, 7.5rem) clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem);
}

/* HELPER CLASSES */

/* Standard Shadow(s) */

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}

.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin Auto */

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}

/* Position Properties */

.relative{
	position: relative;
}

.absolute{
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky{
	position: sticky;
	top: 24px;
}

/* CUSTOM CODE */
.scroll-grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 300px;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
}

.scroll-grid > div {
	scroll-snap-align: start;
}

/*OWL CAROUSEL CUSTOM NAVIGATION*/

.main-content {
    position: relative;
    .owl-theme {
        .custom-nav {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            .owl-prev, .owl-next {
                position: absolute;
                height: 100px;
                color: inherit;
                background: none;
                border: none;
                z-index: 100;

                i {
                    font-size: 2.5rem;
                    color: var(--primary-300);
                }
            }

            .owl-prev {
                left: 0;
            }

            .owl-next {
                right: 0;
            }
        }
    }
}



/* Auto-Numbering on Heading */
.reasons {
	counter-reset: reasons;
}

.reasons-card {
	counter-increment: reasons;
}

.reasons-card__heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.reasons-card__heading::before {
	content:counter(reasons);
	width: 4rem;
	aspect-ratio: 1/1;
	background-color: var(--primary-400);
	display: grid;
	place-items: center;
	color: var(--dark-primary);
	border-radius: 50vw;
	border: 1px solid var(--primary-600);
}

/* Auto-Alternate Card */

.reasons > * > *:last-child {
	order: -1;
}

/* Desktop Only */
@media (min-width: 767px) {
 .reasons > *:nth-child(even) > *:last-child {	
		order: 1;
}
}

/* Auto-Numbering on Image */
.reasons-card__media {
	position: relative;
	overflow: hidden;

}

.reasons-card__media::before {
 content: counter(reasons);
	position: absolute;
	font-size: 200px;
	line-height: 0.75rem;
	inset-inline-end: -10px;
	inset-block-end: -10px;
	font-weight: 900px;
	color: var(--primary);
}