/*
 Theme Name:   Fresh Eggs
 Theme URI:    https://freshggs.biz
 Description:  Fresh Eggs theme
 Author:       Holly Neumann
 Author URI:   https://freshggs.biz
 Template:     generatepress
 Version:      0.1
*/
/***
 * 1 - THEME TWEAKS
 * 2 - TYPOGRAPHY
 * 3 - GLOBAL STYLES
 * 4 - UTILITIES
 * 5 - Dynamic accessibility colour matrix with GeneratePress - Smippet Club - https://snippetclub.com/dynamic-accessibility-colour-matrix-with-generatepress/?
 
***/


  /************************************************/

/*** 1.  - THEME TWEAKS  ***/
/* Body background outside site wrapper  - uses PHP snippet */
body {
background-color: var(--surface-0);
}
/* Site Wrapper - do not use with merged header - uses PHP snippet 
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	background-color: var(--surface-10);
} */
	
/* Set the main content area height */
#main {
	min-height: 65vh;
	}
/* Container padding overrides 	*/
.inside-header {
	padding-inline: 0px!important;
}
.site-content #content{
	padding: 0px;
}
.single-post #content{
	padding: 10px;
}

/*Search field label color
    label[for*="nav-search"] {
        color: #fff;
    }
/* Password Protected Pages format */
.post-password-form {
	max-width: 768px;
	padding: 0rem 0px;
	margin-inline: auto;
	text-align; center;
}
/*Primary Menu Button Styles */
@media (min-width: 1025px){
	.main-navigation .main-nav ul li.nav-cta a{
		line-height: 1;
		text-transform: uppercase;
		background: var(--contrast)!important;
		border-radius: 5px;
		border-color: var(--button-hover);
		color: var(--surface-0);!important;
		padding: 1em 1.5em;
		margin-left: 16px;
		font-weight: 600;
}}
	.main-navigation .main-nav ul li.nav-cta a:hover {
		background: var(--contrast-alt)!important;
		color: var(--surface-0)!important;
}
/* CONTACT BUTTON IN NAV*/
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
	line-height:40px;
}
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .menu-bar-item > a, .sticky-navigation-transition .navigation-branding .main-title {line-height: 40px;}

 .contact a {
	font-weight:600;
	border-style:solid;
	 color: var(--surface-0)!important;
	 border-color:var(--primary);
	 background: var(--primary);
	 text-transform:uppercase;
	letter-spacing:.2em;
}
.contact a:hover {
	background: var(--contrast) !important;
	color: var(--surface-100)!important;
	 border-color: var(--contrast) ;
}

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

  /************************************************/


/*** 2. TYPOGRAPHY  ***/

:root {
    /* These HAVE TO match what is in the Customizer > Typography. Pull in font familys using font manager. 
     * Set headline-font as 'All Headlings', set body-font as HTML */
    --headline-font: Saira Semi Condensed, sans-serif;
    --body-font: Manrope, sans-serif;
	--pre-font: Inconsolata, sans-serif;
    --fs-body: clamp(0.75rem, 0.5795rem + 0.6818vw, 1.125rem);
    --fs-headline-xl: clamp(3.375rem, 2.608rem + 3.0682vw, 5.0625rem);
    --fs-headline-h1: clamp(2.5313rem, 1.956rem + 2.3011vw, 3.7969rem);
    --fs-headline-h2: clamp(2.1094rem, 1.63rem + 1.9176vw, 3.1641rem);
    --fs-headline-h3: clamp(1.6875rem, 1.304rem + 1.5341vw, 2.5313rem);
    --fs-headline-h4: /*clamp(1.4063rem, 1.0866rem + 1.2784vw, 2.1094rem);*/ clamp(1rem, 0.478vw + 0.847rem, 1.5rem);
    --fs-headline-h5: clamp(1.2656rem, 0.978rem + 1.1506vw, 1.8984rem);
    --fs-headline-h6: clamp(.8rem, calc(0.119vw + 0.762rem), 1rem);
    --fs-headline-pre: clamp(1.25rem, calc(0.06vw + 1.231rem), 1.35rem);
    --fs-headline-body-xl: clamp(1.27rem, calc(1.15rem + 0.59vw), 1.62rem);
    --fs-headline-body-l: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.35rem);
    --fs-headline-body-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --fs-headline-body-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
  	--text-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --text-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);	
    }
    
/* Default Body / p 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, h2, h3, h4, h5, h6, .fs-hxl, .fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 {
    font-weight: 600;
    margin-bottom: .5em;
    font-family: var(--headline-font);
    }
    
/* Heading font-size and line-height */
    
    .fs-hxl{
        font-size: var(--fs-headline-xl);
        line-height: 1.05;
    }
    
    h1, .fs-h1 {
        font-size: var(--fs-headline-h1);
        line-height: 1.05;
    }
    
    h2, .fs-h2 {
    font-size: var(--fs-headline-h2);
        line-height: 1.1;
    }
    
    h3, .fs-h3 {
        font-size: var(--fs-headline-h3);
        line-height: 1.15;
    }
    
    h4, .fs-h4 {
        font-size: var(--fs-headline-h4);
        line-height: 1.2;
    }
    
    h5, .fs-h5 {
        font-size: 1.375rem;
        font-size: var(--fs-headline-h5);
        line-height: 1.25;
    }
    
    h6, .fs-h6 {
        font-size: 1.25rem;
        font-size: var(--fs-headline-h6);
        line-height: 1.4;
    }
    
    .fs-pre {
        font-size: var(--fs-headline-pre);
		font-family: var(--pre-font);
        font-weight: 700;
    	text-transform: uppercase;
		 /*color: var(--primary-accent);*/
    	letter-spacing: .2em
    }
    
/* Additional Body font-size */
     
    .fs-xl {
    font-family: var(--body-font);
        font-size: var(--fs-headline-body-xl);
    }
    
   	.fs-l {
    font-family: var(--body-font);
        font-size: var(--fs-headline-body-l);
    }
    
    .fs-s {
    font-family: var(--body-font);
        font-size: var(--fs-headline-body-s);
    }
    
   .fs-xs {
    font-family: var(--body-font);
        font-size: var(--fs-headline-body-xs);
    }
    
/* Add top margin to blog post H2-H6 */
    
    .single-post :is(h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
    }
    
/* Button Global settings */
    .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:last-child:last-of-type{
	margin-bottom: 0px;
}

/*Termaggedon policies styling*/
#policy h2 {
	text-transform: none;
	font-weight: bold;
  font-size: var(--fs-headline-h3)
}
#policy h3 {
	text-transform: none;
	font-weight: bold;
  font-size: var(--fs-headline-h4)
}
/* Sections 37:10 https://www.youtube.com/watch?v=f36mgoLcmP0&t=8s (used global styles in GP instead of in file editor) */

    
/*** 2. END TYPOGRAPHY  ***/
/************************************************/
    
    
/*** 3 - GLOBAL STYLES  ***/
/* Container Widths */
    :root {
        --space-m:64rem;
        --space-s:48rem;
		--space-xs:40rem;
    }
     .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;
	}

/*** 3 - END GLOBAL STYLES  ***/

/************************************************/
    
    
/*** 4 - UTILITIES ***/
/*Link opens in new window ADD ICON to media library*/
    a[target="_blank"]::after {
      content: url(/wp-content/uploads/2025/03/new-window.svg);'(external link, opens in new window)';
      display: inline-block;
      margin-left: 0.2em;
      width: .8em;
      height: .8em;
        opacity: .8;
    }

/*screen reader text*/
    .screen-reader-text {
        overflow: hidden;
        clip: rect(0,0,0,0);
        position: absolute !important;
        width: 1px;
        height: 1px;
        border: 0;
        word-wrap: normal !important;
    }

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

/* Text Balance / Pretty */
.balance{
	text-wrap:balance;
}
p, div, blockquote, li {
	text-wrap:pretty;
}

/*** 4 - END UTILITIES ***/
    
/*** 5 - Dynamic accessibility colour matrix with GeneratePress - Smippet Club - uses PHP snippet ***/
/* Base table styles */
    .colour-matrix {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }
    
/* Table header and cell base styles */
    .colour-matrix th,
    .colour-matrix td {
        background: var(--bg-colour);
        color: var(--text-colour);
    }
    
/* Colour name styling */
    .colour-matrix .colour-name {
        text-transform: capitalize;
    }
    
/* Colour value styling (hex values) */
    .colour-matrix .colour-value {
        font-size: .9rem;
    }
    
/* Rating cell styles */
    .rating-cell {
        padding: .5rem;
    }
    
/* Rating label styling */
    .colour-matrix .rating {
        padding: .5rem 1rem;
        border-radius: 100vw;
        font-weight: 700;
        display: none; /* Hidden by default, shown when checkbox is checked */
    }
    
/* Styles for different ratings */
    .colour-matrix .rating-G {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    
    .colour-matrix .rating-AA,
    .colour-matrix .rating-AAA {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    
/* Styles for when no text should be shown */
    .colour-matrix .rating-null,
    .colour-matrix .rating-cell.not-text {
        background: var(--surface-10);
        color: transparent;
    }
    
/* Colour details shown in cells */
    .rating-cell .colours {
        font-size: 1.2rem;
    }
    
    .rating-cell .colours span {
        font-weight: 700;
    }
    
/* Checkbox styles - hidden because it's used as a toggle */
    #toggleRatings {
        display: none;
    }
    
    #toggleRatings,
    #toggleRatings:after,
    #toggleRatings:before,
    #toggleRatings *,
    #toggleRatings *:after,
    #toggleRatings *:before,
    #toggleRatings + .tgl-btn {
        box-sizing: border-box;
    }
    #toggleRatings::-moz-selection,
    #toggleRatings:after::-moz-selection,
    #toggleRatings:before::-moz-selection,
    #toggleRatings *::-moz-selection,
    #toggleRatings *:after::-moz-selection,
    #toggleRatings *:before::-moz-selection,
    #toggleRatings + .toggle-button::-moz-selection,
    #toggleRatings::selection,
    #toggleRatings:after::selection,
    #toggleRatings:before::selection,
    #toggleRatings *::selection,
    #toggleRatings *:after::selection,
    #toggleRatings *:before::selection,
    #toggleRatings + .tgl-btn::selection {
        background: none;
    }
    #toggleRatings + .toggle-button {
        outline: 0;
        display: block;
        width: 4em;
        height: 2em;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #toggleRatings + .toggle-button:after,
    #toggleRatings + .toggle-button:before {
        position: relative;
        display: block;
        content: "";
        width: 50%;
        height: 100%;
    }
    #toggleRatings + .toggle-button:after {
        left: 0;
    }
    #toggleRatings + .toggle-button:before {
        display: none;
    }
    #toggleRatings:checked + .toggle-button:after {
        left: 50%;
    }
    
    #toggleRatings + .toggle-button {
        background: #f0f0f0;
        border-radius: 2em;
        padding: 2px;
        transition: all 0.4s ease;
    }
    #toggleRatings + .toggle-button:after {
        border-radius: 50%;
        background: #fff;
        transition: all 0.2s ease;
    }
    #toggleRatings:checked + .toggle-button {
        background: #9FD6AE;
    }
    
    
    
/* Toggle button styles */
    .toggle-button {
        margin-top: 12px;
        margin-bottom: 1rem;
    }
    
/* Toggle button text for screen readers */
    .toggle-button span {
        display: none;
        visibility: hidden;
    }
    
/* Content before the toggle button */
    .toggle-button::before {
        content: "Show Ratings";
    }
    
/* Styles when the checkbox is checked */
    
    #toggleRatings:checked ~ * .rating-cell {
        background: unset;
        color: unset;
    }
    
    #toggleRatings:checked ~ * .rating-cell .rating {
        display: inline-block;
    }
    
    #toggleRatings:checked ~ * .rating-cell .colours {
        display: none;
    }
    
/* Tooltip styles */
    [data-tooltip]{
        position: relative;
        cursor: pointer;
    }
    
    [data-tooltip]:before,
    [data-tooltip]:after{
        --scale: 0;
        --arrow-size: 8px;
        --tooltip-color: hsla(191, 0%, 95%, 0.9);
        --tooltip-text-color: #222222;
        position: absolute;
        top: -.25rem;
        left: 50%;
        transform: translateX(-50%)  translateY(var(--translate-y, 0)) scale(var(--scale));
        transition: 150ms transform;
        transform-origin: bottom center;
    }
    
    [data-tooltip]:before{
        --translate-y: calc(-100% - var(--arrow-size));
        content: attr(data-tooltip);
            color: var(--tooltip-text-color);
        font-size: .8rem;
        line-height: 1;
        padding: .4rem .6rem;
        width: max-content;
        background: var(--tooltip-color);
        border-radius: .3rem;
        text-align: center;
    }
    
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after{
        --scale: 1;
    }
    
    [data-tooltip]:after{
        --translate-y: calc(-1 * var(--arrow-size));
        content:'';
        border: var(--arrow-size) solid transparent;
        border-top-color: var(--tooltip-color);
        transform-origin: top center;
    }
/*** 5 - END Dynamic accessibility colour matrix with GeneratePress - Smippet Club ***/
/************************************************/