/**
 * Theme Name:        Wivey Link Theme
 * Description:       Wivey Link Theme (Child of 2025)
 * Version:           1.0.1
 * Author:            GreenNet
 * Author URI:        https://www.greennet.org.uk/
 * Text Domain:       wivey-link-theme
 * Domain Path:       /assets/lang
 * Tested up to:      7.0
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Template:          twentytwentyfive
 */


/* Unset underline on links */
header a {
	text-decoration: none;
}

/* Simple Button hover styles - can be swapped in to replace animations */
/*.wp-element-button:hover, 
.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--custom-wivey-blue);
}*/


/* Button animations */
.wp-element-button,
.wp-block-button__link,
.wp-block-post-excerpt__more-link,
#gform_submit_button_1.gform_button, /* TODO this should not be needed as covered by generic rule below BUT other form buttons (e.g. form 4) don't work if this is taken out?? */
button.gform_button {
    white-space: nowrap;
	display: block;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	
	&:after,
	&:before {
    	content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		border-radius: 9999px;
    }
	&:after {
		width: 100%;
		background-color: var(--wp--preset--color--custom-wivey-blue);
		z-index: -2;
	}
	&:before {
		width: 0%;
		background-color: var(--wp--preset--color--custom-wivey-red);
		transition: all .3s;
		z-index: -1;
	}
	&:hover {
		&:before {
			width: 100%;
		}
	}
}
/* Extra GF overrides to match theme */
#gform_submit_button_1.gform_button,
button.gform_button 
{
    border: none !important;
    box-shadow: unset !important;
    border-radius: 9999px !important;
    padding-top: 1rem !important;
    padding-right: 2.25rem !important;
    padding-bottom: 1rem !important;
    padding-left: 2.25rem !important;
    font-size: var(--wp--preset--font-size--large) !important;
}
/* End button animations */

/* Buttons with arrow icon - Important needed to override gravityforms */
.wp-element-button:has(img) {
    display: flex !important;
    align-items: center !important;
    gap: 0.6em !important;
    
    img {
        margin-right: -0.4em !important;
    }
}



/* Header Menu */

/* Make clickable area of main nav bigger */
.wp-block-navigation ul li a {
    padding: 0.4em 0.8em;
}

/* Make open and close burger menu icons bigger */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    display: flex;
    min-height: 44px;
    min-width: 44px;
    background-color: #eee;
    border-radius: 9999px;
    align-items: center;
    justify-content: center;
}
.wp-block-navigation__responsive-container-close {
    margin-top: -14px;
}


/* Header Menu Styles */
nav {
    /* Highlight current menu item */
	.current-menu-item > a,
	a:hover,
	a:active {
		color: var(--wp--preset--color--custom-wivey-red) !important;
		text-decoration: underline;
	}

    /* Improve mobile menu styles */
    @media (max-width: 599px) {
	    .wp-block-navigation__responsive-container {
	        padding-top: var(--wp--style--root--padding-right) !important;
	        padding-right: var(--wp--style--root--padding-right) !important;
		    background-color: #ffffff !important;
	    }
	    .wp-block-navigation__responsive-container-content {
    		justify-content: center !important;
    		align-items: center !important;
    
    		ul {
    		    justify-content: center !important;
    		    align-items: center !important;
    		}
    		li {
    		    align-items: center !important;
    		    font-size: var(--wp--preset--font-size--large) !important;
    		    line-height: 1.2em;
    		}
    		
    		/* Top level menu overrides */
    		> ul > li {
    		    font-size: var(--wp--preset--font-size--x-large) !important;
    		    line-height: 1.8em;
    		}
    	}
    }
}

.is-style-text-annotation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    column-gap: 0.4em;
    border-color: var(--wp--preset--color--custom-wivey-blue-light);
}


@media (max-width: 599px) {
    header {
        margin-bottom: 1rem;
    }
    .site-logo {
        min-width: 130px;
    }
    .booking-nav {
        flex-direction: column-reverse; /* Place burger on RHS on mobile */
    }
    .nav-donate {
        flex-direction: row-reverse; 
        gap: var(--wp--preset--spacing--20);
    }
}
@media (max-width: 450px) {
    /* Make the logo still fit and visible on small mobile */
    .site-logo {
        min-width: 95px;
        margin-lefT: -20px !important;
        margin-right: -10px !important;
    }
}
/* End Header Menu */



/* Header circles */
body {
    overflow-x: hidden;
}
@media (min-width: 600px) {
    body:not(.page-template-pages-no-circles) {
        header::before,
        header::after,
        .add-circle-1::before, 
        .add-circle-2::after {
            content: '';
            display: block;
            position: absolute;
            background-color: var(--wp--preset--color--custom-wivey-blue);
            border-radius: 50%;
            z-index: -1;
        }
        header::after,
        .add-circle-2::after {
            width: 33vw;
            height: 33vw;
            max-width: 450px;
            max-height: 450px;
            top: -5vw;
            right: -2vw;
            opacity: 0.11;
        }
        .add-circle-1::before,
        header::before {
            width: 43vw;
            height: 43vw;
            max-width: 600px;
            max-height: 600px;
            top: 2vw;
            left: 6vw;
            background-color: var(--wp--preset--color--custom-wivey-red);
            opacity: 0.06;
        }
        .add-circle-1::before,
        .add-circle-2::after {
            top: unset;
            transform: translateY(-30%);
        }
        .header-wrap {
            position: relative;
            z-index: 2;
        }
        .header-wrap .nav-donate {
            z-index: 3;
        }
        /* Make sure drop down menus from header always stay on top of body content*/
        main {
            z-index: 1;
        }
    }
}


/* Remove default margin above Footer */
footer {
    margin-block-start: 0;
}

@media (min-width: 781px) {
    .footer-contact {
        width: fit-content;
        margin-right: 0;
        margin-left: auto;
    }
}

/* Min height of footer map */
.map {
    min-height: max(12vw, 120px);
}

/* Expandable map in gallery */
.map-gallery {
    img {
        margin-top: 0;
        margin-bottom: auto;
    }
}


/* Archive pages - core fix for loop images sometimes being wider than containers */
.archive .wp-block-post-featured-image {
	max-width: 100% !important;
}
/* Core fix for list items displayed as flex */
.archive .entry-content li {
	display: list-item;
}



/* Full height images in columns */
.img-full-height {
    figure {
        height: 100%;
    }
    img {
        height: 100%;
        object-fit: cover;
    }
}




/* Statistics circles */
.stat-block {
    max-width: 1024px;
}
.statistic {
    aspect-ratio: 1;
    border-radius: 9999px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 320px;
    
    * {
        text-align: center;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100%;
    }
}

/* Quotes used on some stats and on testimonials */
.wp-block-quote {
    border-color: var(--wp--preset--color--custom-wivey-blue);
}



/* News listing */
/* Breakpoint to make 3 columns go to 2 */
@media (max-width: 900px) {
    .columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }    
}
/* Styled 'read more' arrows on the excerpt */
.wp-block-post-excerpt__more-link {
    position: absolute;
    right: var(--wp--preset--spacing--30);
    bottom: var(--wp--preset--spacing--30);
    border-radius: 9999px;
    padding: 0;
    height: 44px;
    width: 44px;
    display: flex;
    justify-content: center;
}

/* Make the link stretch so whole card is a link */
.crosslink-card {
    position: relative;
    height: 100%;
}
.crosslink-card {
    .wp-block-post-title a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    
    .wp-block-post-date {
        position: absolute;
        bottom: var(--wp--preset--spacing--30);
    }
}



/* WP forms styles */
.form-wrapper {
    max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--preset--spacing--40));
}


/* Gravityforms styles */
.gform_wrapper {
    label,
	legend,
	input {
    	--gf-local-font-size: var(--wp--preset--font-size--medium) !important;
    }
    .gfield_description {
        --gf-local-font-size: var(--wp--preset--font-size--small) !important;
    }
    
    .gfield_radio {
        flex-direction: row !important;
        gap: calc(2 * var(--gf-field-choice-gap)) !important;
    }
    .name_prefix {
        max-width: 8ch;
    }
}


/* File download block styles - on Membership and Our Impact Pages */
.wp-block-file {
    font-size: var(--wp--preset--font-size--large) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    &:has(.wp-block-file__embed) {
        flex-direction: column;
    }
    .wp-block-file__button {
        min-width: 72px;
    }
}



/* Team Loop - alternate images on right and left */
.team-loop li:nth-child(even) div {
    flex-direction: row-reverse;
}
.team-loop li:last-child div {
    padding-bottom: 0 !important;
    border-bottom: none;
}
.team-loop figure {
    border-radius: 2rem 0;
    overflow: hidden;
}