/*
 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:      0.1
*/
body.page-id-12 {
	background-color: var(--base);
}
body {
    --gp-slideout-width: 100%;
}
body.home .menu-toggle {
	color: var(--base-2);
}
body.home #site-logo {
	display: none;
}
#generate-slideout-menu {
	padding: 20px;
}
#generate-slideout-menu .main-nav {
	padding-top: 75px;
}
#site-navigation {
	margin-bottom: 0;
}
#logo-id {
	top: calc(50vh - 150px);
    left: calc(50vw - 150px);
	color: var(--base-2);
}
#site-logo > a > svg path {
	fill: var(--base);
	transition: all 1s ease;
}
#site-logo:hover > a > svg > .char-v > path {
	fill: var(--light-green);
    transition: fill .1s ease;
}
#menu-primary-menu {
	text-align: right;
}
#menu-primary-menu > li {
	transition: all 0.25s ease 0s;
}
#menu-primary-menu > li:hover {
	transform: translate3d(-5px, 0px, 0px);
}
body.page-id-12 #menu-primary-menu > li > a {
	color: var(--base-2);
}
#content {
	min-height: 100vh;
}
@media (max-width:768px) {
	#content {
		flex-direction: column-reverse;
		justify-content: flex-end;
	}
}
body.admin-bar #content {
	min-height: calc(100vh - 32px);
}
#content > .sidebar > .inside-right-sidebar {
	display: flex;
    height: 100%;
	position: sticky;
    top: 72px;
    max-height: calc(100vh - 112px);
}
#content > .sidebar > .inside-right-sidebar > .gen-sidebar-nav {
    display: flex;
    height: 100%;
	width: 100%;
    flex-direction: column;
    justify-content: space-between;
	align-items: flex-end;
}
@media (max-width:768px) {
	#content > .sidebar > .inside-right-sidebar > .gen-sidebar-nav {
		flex-direction: column-reverse;
		padding-bottom: 80px;
	}
	#content > .sidebar > .inside-right-sidebar > .gen-sidebar-nav > div {
		align-self: center;
		margin-top: -30px;
	}
	body > nav#site-navigation {
		display: none !important;
	}
}

.list-style {
	margin: 0;
	list-style-position: inside;
}
.list-style > li {
	margin: 0px 0px 15px;
}
.list-style > li::marker {
	font-size: 8px;
	line-height: 20.4px;
	transform: translateY(-2px);
}


/* Logo for front page */
#logo-id {
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
}

/* 1. The "V" - Longer, heavier fade and drift */
.logo-v {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transform-origin: center;
    /* Duration increased to 2.2s for a very slow, graceful 'bloom' */
    animation: v-entrance-slow 2.2s cubic-bezier(0.1, 0, 0.2, 1) forwards;
    animation-delay: 0.8s; 
}

@keyframes v-entrance-slow {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    /* Fade is stretched out over the first 80% of the movement */
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 2. The "G" - Standard 1.6s duration, but timed to fire into the V's fade */
.logo-g {
    opacity: 0;
    transform: translateY(-40px) scale(0.95);
    transform-origin: center;
    /* Kept at 1.6s as requested, as it felt 'right' */
    animation: g-entrance 1.6s cubic-bezier(0.2, 0, 0.2, 1) forwards;
    /* Delayed slightly more to match the V's longer travel time */
    animation-delay: 1.4s; 
}

@keyframes g-entrance {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 1. Hide every path and group inside the logo-text container immediately */
#logo-id .logo-text path, 
#logo-id .logo-text g {
    visibility: hidden; /* Using visibility instead of opacity for a 'harder' hide */
    opacity: 0;
}

/* 2. Create the reveal animation */
@keyframes letter-pop {
    from { 
        visibility: visible;
        opacity: 0; 
    }
    to { 
        visibility: visible;
        opacity: 1; 
    }
}

/* 3. Target the classes exactly as they appear in your SVG */
/* We use the ID prefix to beat theme styles */

#logo-id .text-v     { animation: letter-pop 0.1s forwards; animation-delay: 2.4s; }
#logo-id .text-i     { animation: letter-pop 0.1s forwards; animation-delay: 2.5s; }
#logo-id .text-l     { animation: letter-pop 0.1s forwards; animation-delay: 2.6s; }
#logo-id .text-l-2   { animation: letter-pop 0.1s forwards; animation-delay: 2.7s; }
#logo-id .text-a     { animation: letter-pop 0.1s forwards; animation-delay: 2.8s; }
#logo-id .text-g     { animation: letter-pop 0.1s forwards; animation-delay: 2.9s; }
#logo-id .text-e     { animation: letter-pop 0.1s forwards; animation-delay: 3.0s; }

#logo-id .text-g-2   { animation: letter-pop 0.1s forwards; animation-delay: 3.2s; } 
#logo-id .text-r     { animation: letter-pop 0.1s forwards; animation-delay: 3.3s; }
#logo-id .text-e-3   { animation: letter-pop 0.1s forwards; animation-delay: 3.4s; }
#logo-id .text-e-4   { animation: letter-pop 0.1s forwards; animation-delay: 3.5s; }
#logo-id .text-n     { animation: letter-pop 0.1s forwards; animation-delay: 3.6s; }

/* Ensure paths inside the 'i' group show up when the group does */
#logo-id .text-i path {
    visibility: inherit;
    opacity: inherit;
    animation: inherit;
}

#logo-id .logo-description {
    /* Initial State: Hidden and shifted down */
    opacity: 0;
    transform: translateY(15px);
    
    /* Centering and Font Styling */
    text-align: center;
    font-family: inherit; /* Or match your site's font */
    
    /* Animation: Slow and elegant */
    animation: description-rise 1s ease-out forwards;
    animation-delay: 4.0s; 
}

@keyframes description-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.duotone-image-container:hover > .duotone-image > img {
	filter: unset;
}
.duotone-image-container:hover > .duotone-image > .duotone-image-overlay {
	background-color: unset;
}
.duotone-image-container:hover > .duotone-image-text {
	transform: translate3d(0px, -10px, 0px);
}

#maintenance-form {
	color: var(--base) !important;
	font-family: var(--gp-font--messina-sans-web);
}
#maintenance-form label {
	color: var(--base) !important;
	margin-bottom: 1px !important;
}
#maintenance-form label > span {
	color: var(--base) !important;
	font-size: 14px !important;
	line-height: 1.2em;
}
#maintenance-form input,
#maintenance-form textarea {
	border-color: var(--base-2) !important;
	border-bottom-color: var(--base) !important;
	border-radius: 0 !important;
	background-color: var(--base-2) !important;
}
#maintenance-form textarea {
	max-height: 60px;
}
#maintenance-form input:focus,
#maintenance-form textarea:focus {
	box-shadow: unset !important;
}
#maintenance-form .happyforms-upload-area .happyforms-input-group__suffix {
	margin-right: 5px;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--base-2);
}
#maintenance-form .happyforms-upload-area .happyforms-input-group__suffix > button {
	height: auto !important;
	padding: 8px;
	border: 1px solid black;
	font-family: var(--gp-font--messina-sans-web);
}
#maintenance-form .happyforms-upload-area {
	padding-bottom: 10px;
	flex-direction: row-reverse;
	border-bottom: 1px solid var(--base);
}
#maintenance-form .happyforms-upload-area .happyforms-attachment-box {
	border: 0;
	background-color: var(--base-2);
}
#maintenance-form .happyforms-upload-area .happyforms-attachment-box > div:first-child {
	color: var(--base);
}
#maintenance-form .happyforms-part--submit button {
	font-size: 17px;
	padding: 10px 30px;
	border-radius: 100px !important;
	background-color: var(--base);
	font-family: var(--gp-font--messina-sans-web);
}


#vg-portfolio-map {
    height: 600px;
    width: 100%;
    margin: 40px 0;
    /*border: 1px solid #10513b; /* Brand Green Border */
    border-radius: 4px;
    box-shadow: 0 5px 16px rgba(16, 81, 59, 0.1); /* Subtle Green shadow */
}

/* Customizing the InfoWindow bubble slightly */
.gm-style-iw-c {
    background-color: #f9f6ef !important;
    padding: 0 !important;
}
.gm-style-iw-d {
	margin-top: -50px;
    overflow: hidden !important;
}
.vg-filter-btn {
    background: transparent;
    border: 1px solid #10513b;
    color: #10513b;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 400;
    transition: 0.3s;
	font-family: var(--gp-font--messina-sans-web);
}
.vg-filter-btn:hover {
	color: var(--base-2);
    background-color: var(--contrast);
}
.vg-filter-btn.active {
    background: #10513b;
    color: #f9f6ef;
}