/*
 Theme Name:   Fresh Eggs
 Theme URI:    https://freshggs.biz
 Description:  Fresh Eggs theme
 Author:       Holly Neumann
 Author URI:   https://freshggs.biz
 Template:     generatepress
 Version:      2.0
*/
/***
 * 1 - THEME TWEAKS
 * 2 - TYPOGRAPHY
 * 3 - UTILITIES
 * 4 - 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);
	}

/* Set the main content area height - Keep the footer from sitting too high on short pages */
#main {
	min-height: 65vh;
	}

/* GeneratePress header padding */
.inside-header {
	padding-inline: 0px!important;
}	
.site-header {
	padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem)!important;
}
/* OPTIONAL: Remove content-area padding */
/*.site-content #content{
	padding: 0px;
}*/
/* OPTIONAL: Add padding around single blog posts */
/*.single-post #content{
	padding: 10px;
}*/

/*Search field label color
    label[for*="nav-search"] {
        color: #fff;
    }
/* OPTIONAL: Password Protected Pages format 
.post-password-form {
	max-width: 768px;
	padding: 0rem 0px;
	margin-inline: auto;
	text-align: center;
}*/

/* CONTACT BUTTON IN NAV*/
/* Contact menu item: add class "contact" to the menu item */
.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);
}

/* OPTIONAL: Navigation and sticky navigation line heights
   Enable when the GeneratePress Customizer settings
   don't provide the desired navigation height.

	Standard navigation 
.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .menu-bar-item > a {
    line-height: 40px;
}

	Sticky navigation 
.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;
}
*/
/*** 1. END THEME TWEAKS  ***/

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


/*** 2. TYPOGRAPHY (NON-GENERATEBLOCKS RULES) ***/

/*
 * Font families are managed in GeneratePress Typography.
 * Font sizes and reusable typography styles are managed
 * in GenerateBlocks Global Styles and Design Tokens.
 */

/* Default paragraph spacing */
p {
    margin-bottom: 1.5rem;
}

/* Extra separation between headings in individual blog posts  - Add top margin to blog post H2-H6 */
.single-post :is(h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
}

/* GenerateBlocks buttons */
.gb-button {
    line-height: 1em;
}

/* Remove unnecessary space after the last paragraph in GB containers */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0;
}

/* Remove bottom margin in block editor */
.block-editor-block-list__layout .gb-container p:last-child:last-of-type {
    margin-bottom: 0;
}

/* Termageddon policy headings */
#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);
}

/*** 2. END TYPOGRAPHY ***/

    
/*** 2. END TYPOGRAPHY  ***/
/************************************************/
        
    
/*** 3 - UTILITIES (NOT MIGRATED TO GENERATEBLOCKS) ***/
/* Use an image inside a container as its background - set class to the container*/
.image-background {
    position: relative;
    isolation: isolate;
}
.image-background img:first-of-type {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* External-link icon: requires this SVG in the site's Media Library at this path.
   If it is absent on a new site, update/remove this rule. */
a[target="_blank"]::after {
    content: url(/wp-content/uploads/2022/04/external-link-alt-solid.svg);
    display: inline-block;
    margin-left: .2em;
    width: .8em;
    height: .8em;
    opacity: .8;
}

/* Screen-reader-only utility */
.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 unless focused/active */
.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;
}

/* Two- and three-line text truncation */
.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;
}

/* Remove underlines on an element or its descendant links */
.no-ul,
.no-ul a {
    text-decoration: none;
}

/* Improve natural line breaks in regular copy */
p, div, blockquote, li {
    text-wrap: pretty;
}


/*** 3 - END UTILITIES ***/
    
/*** 4 - 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;
    }
/*** 4 - END Dynamic accessibility colour matrix with GeneratePress - Smippet Club ***/
/************************************************/