/*
 * fonts.css
 * Self-hosted font declarations for the Greens Rent Calculator theme.
 * woff2 is the primary format (all modern browsers).
 * woff is the fallback for legacy browsers (IE11, old Android).
 * font-display: swap keeps text visible during font load.
 */


/* =============================================================================
   ANTON
   Display font — one weight only (regular renders as bold display)
============================================================================= */

@font-face {
    font-family: 'Anton';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('Anton-Regular.woff2') format('woff2'),
         url('Anton-Regular.woff')  format('woff');
}


/* =============================================================================
   ROBOTO CONDENSED
   UI and body condensed variant — regular, semibold, bold
============================================================================= */

@font-face {
    font-family: 'Roboto Condensed';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('Roboto_Condensed-Regular.woff2') format('woff2'),
         url('Roboto_Condensed-Regular.woff')  format('woff');
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url('Roboto_Condensed-SemiBold.woff2') format('woff2'),
         url('Roboto_Condensed-SemiBold.woff')  format('woff');
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url('RobotoCondensed-Bold.woff2') format('woff2'),
         url('RobotoCondensed-Bold.woff')  format('woff');
}


/* =============================================================================
   ROBOTO
   General body and UI text — regular, medium, bold
============================================================================= */

@font-face {
    font-family: 'Roboto';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('Roboto-Regular.woff2') format('woff2'),
         url('Roboto-Regular.woff')  format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url('Roboto-Medium.woff2') format('woff2'),
         url('Roboto-Medium.woff')  format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url('Roboto-Bold.woff2') format('woff2'),
         url('Roboto-Bold.woff')  format('woff');
}


.z-index-99 {
	z-index: 99;
}

.grc-btn-back {

}



.grc-field-wrap {
    margin-left: 0 !important;
}

.grc-canvas-wrap {
    overflow: visible;
}

@keyframes grc-polaroid-pulse {
    0%, 100% { opacity: 0.9; }
    50%       { opacity: 0.75; }
}

.grc-canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
    display: block;
    margin-inline: auto;
}

.grc-canvas[height="1920"] {
        aspect-ratio: calc(1080/1920);
}

.grc-canvas[height="1350"] {
        aspect-ratio: 4:5;
}

.grc-canvas-toggle {
flex-wrap: wrap;
    justify-content: center;
}

#grc-savings-output {
    color: white;
    background-color: var(--wp--preset--color--greens-body-text);
    padding-inline: .4em;
    margin: 0 !important;
}

.grc-output-wrap {
    text-align: center;
}

.grc-output-wrap + p {
    margin-top: 0;
    text-wrap-style: balance;
    max-width: 300px;
    line-height: 1.4em;
    margin-inline: auto;
}

.grc-canvas-btn {
    transition: all 0.2s ease-in;
}

.grc-canvas-btn.grc-btn-download {
    background-color: var(--wp--preset--color--orange-primary);
    border-color: var(--wp--preset--color--orange-primary);
    text-transform: uppercase;
	    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
	text-decoration-color: transparent;
}

.grc-canvas-btn.grc-btn-download:hover,
.grc-canvas-btn.grc-btn-download:focus-visible {
        background-color: #ca7017;
    border-color: #ca7017;
    opacity: 1;
	    text-decoration-color: white;
}

.grc-canvas-btn.grc-btn-share {
    background-color: var(--wp--preset--color--greens-secondary);
    border-color: var(--wp--preset--color--greens-secondary);
    text-transform: uppercase;
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
	text-decoration-color: transparent;
}

.grc-canvas-btn.grc-btn-share:hover,
.grc-canvas-btn.grc-btn-share:focus-visible {
        background-color: var(--wp--preset--color--greens-deep);
    border-color: var(--wp--preset--color--greens-deep);
    opacity: 1;
    color: white;
    text-decoration-color: white;
}


.grc-canvas-secondary {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
	margin-bottom: 4px;
}

.grc-canvas-secondary button {
    padding: 0;
    font-weight: 400;
    background: transparent;
    border: none;
    font-size: .825rem;
}

.grc-field-wrap label {
	font-weight: 500 !important;
}

.invisible-text.has-anton-font-family {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: -99999px;
}

html {
      overflow-y: scroll;
}

#page-container {
    min-height: 100vh;
    min-height: 100dvh;
}

.grc-canvas-actions {
    justify-content: center;
	margin-top: 3px;
}

.wp-block-button.grc-btn-show-maths .wp-block-button__link.wp-element-button {
    color: var(--wp--preset--color--greens-deep);
    background-color: transparent;
    padding: 0;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: underline;
    font-size: 90%;
}

body,
#page-container {
    background-image: url('/wp-content/themes/greens-theme/assets/greenscalc-bg.png');
    background-repeat: repeat repeat;
    background-size: 750px;
}

#step-3.bad-output .step-3-hide-output {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    max-height: 1px;
    overflow: hidden;
}

.grc-suburb-suggestions {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    /* remove any position/top/left/width being set by JS */
}

#page-container {
    display: flex;
}

#calculator-container,
#content-container {
    width: 100%;
}

#footer-area {
	margin-top: auto !important;
}

.grc-savings-output {
    color: transparent !important;
}

.grc-savings-display {
    color: white !important;
}

#hidden-images {
	position: absolute;
	visibility: hidden;
	left: -9999px;
	max-height: 1px;
	overflow: hidden;
	opacity: 0;
	max-width: 1px;
}

.grc-canvas.reduced-motion { opacity: 1 !important; } 
.grc-canvas.pre-effect { 
	opacity: 0; 
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0);
		transition: all 0.2s ease-in;
} 
.grc-canvas.pre-effect.in-effect { 
	opacity: 1; 
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0);
}
.grc-canvas.pre-effect.in-effect.after-effect {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
} 





#step-2 .grc-field-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

#step-2 .grc-field-wrap label {
    line-height: 1.2em;
    font-size: var(--wp--preset--font-size--large);
    text-align: left;
    color: var(--wp--preset--color--greens-body-text);
    font-weight: 600 !important;
}

#grc-postcode,
#grc-weekly-rent,
#grc-suburb{
    border-radius: 28px;
    border-color: var(--wp--preset--color--greens-accent);
    padding: 15px 17px;
    font-size: 1.2rem;
    color: var(--wp--preset--color--greens-body-text);
}

#grc-postcode:focus,
#grc-weekly-rent:focus,
#grc-suburb:focus{ 
    border-color: var(--wp--preset--color--greens-primary);
    box-shadow: 0 0 0 2px var(--wp--preset--color--greens-primary) !important
}

.grc-has-suggestions:focus-within .grc-suburb-suggestions {
    top: calc(100% + 3px) !important;
    padding-top: 0;
    z-index: 5;
    margin-left: 0px;
    margin-right: 0px;
    width: 100% !important;
        box-shadow: 0 0 0 2px var(--wp--preset--color--greens-primary);
        border-color: var(--wp--preset--color--greens-primary);
        transition: 0 all ease-in;
    opacity: 1;
      overscroll-behavior: contain;
}

.grc-has-suggestions:focus-within .grc-suburb-suggestions li {
    padding-left: 16px;
}

.grc-has-suggestions:not(:focus-within) .grc-suburb-suggestions {
    display: none;
}

.grc-suburb-suggestions {
 opacity: 0;  
            transition: 0 all ease-in;
}

.grc-field-wrap:not(:focus-within) .grc-suburb-suggestions {
opacity: 0;
visibility: hidden;
}



.grc-field-wrap.grc-has-suggestions:focus-within input#grc-suburb{
    z-index: 99;
    position: relative;
    border-radius: 28px 28px 0 0;
    border-bottom-color: transparent;
    border-bottom-width: 0;
    transition: 0s box-shadow ease-in;
}

.grc-field-wrap:has(#grc-weekly-rent) span:before {
    content: "$";
    position: absolute;
    left: 13px;
    top: 12px;
    pointer-events: none;
    z-index: 1;
    color: var(--wp--preset--color--greens-accent);
    font-weight: 100;
    font-size: 1.2rem;

}

.grc-field-wrap:has(#grc-weekly-rent) span {
	position: relative;
}

.grc-field-wrap #grc-weekly-rent {
    padding-left: 24px;
}

.rent-logo img {
    aspect-ratio: 300/221;
}
.grc-back-link {
    margin-top: -10px;
}


.grc-back-link button {
    display: flex;
    background-color: transparent;
    border: none;
    flex-direction: row;
    opacity: 1;
    align-items: center;
    gap: .25em;
    font-weight: 700;
    /* overflow: visible; */
    color: var(--wp--preset--color--greens-body-text);
           fill: var(--wp--preset--color--greens-body-text);
    transition: color  .1s ease-in, fill .1s ease-in, gap .1s ease-in;
    z-index: 99;
}

.grc-back-link button svg {
    margin-top: -2px;
    transition: fill .1s ease-in, color .1s ease-in, transform .1s ease-in;
        transform: rotate(0deg) scale(1);
    transform-origin: 50% 75%;
}

.grc-back-link button:focus-visible,
.grc-back-link button:hover {
        color: var(--wp--preset--color--greens-deep);
               fill: var(--wp--preset--color--greens-deep);
    text-decoration: none;
    gap: .35em;
    cursor: pointer;
}

.grc-back-link button:focus-visible svg,
.grc-back-link button:hover svg {
    transform: rotate(5deg) scale(1.15);
    transform-origin: 50% 75%;
}


@media screen and (max-width: 500px) {
    #calculator-container #step-2:has(.grc-back-link),    
	#calculator-container #step-3:has(.grc-back-link),
    #calculator-container #step-4:has(.grc-back-link),
	    #calculator-container #step-5:has(.grc-back-link){
        padding-top: var(--wp--preset--spacing--50) !important;
    }
    .rent-logo {
        max-width: 90%;
        transform: translateY(-10px)
    }
}

.min-height-500 > .grc-canvas-wrap {
	min-height: 312px;
}


#grc-canvas-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}


#grc-canvas-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}

.grc-canvas-btn.grc-btn-size,
.grc-canvas-btn.grc-btn-copy-link{
    display: flex;
    flex-direction: row;
    align-items: center;
       text-decoration: underline;
    text-decoration-color: transparent;
    transition: all 0.2s ease-in;
    color: var(--wp--preset--color--greens-deep);
    font-weight: 700;
}

.grc-canvas-btn.grc-btn-size:hover,
.grc-canvas-btn.grc-btn-copy-link:hover{
    color:  var(--wp--preset--color--greens-secondary);
 text-decoration-color: currentcolor;
    opacity: 1;
}

.grc-canvas-btn.grc-btn-size svg {
    max-height: 14px;
    max-width: 17px;
    margin-right: 0px;
    position: relative;
    display: inline;
    fill: var(--wp--preset--color--greens-deep);
        transition: all 0.2s ease-in;
}

.grc-canvas-btn.grc-btn-copy-link svg {
    max-height: 15px;
    max-width: 15px;
    margin-right: 1px;
    position: relative;
    display: inline;
    fill: var(--wp--preset--color--greens-deep);
        transition: all 0.2s ease-in;
}

.grc-canvas-btn.grc-btn-size span {
    margin-right: 1px;
}

.grc-canvas-btn.grc-btn-size:hover svg,
.grc-canvas-btn.grc-btn-copy-link:hover svg{
    box-shadow: none;
    border: none;
    text-decoration: none;
    transform: none;
    margin: 0;
    fill: var(--wp--preset--color--greens-secondary);
    padding: 0;
        transition: all 0.2s ease-in;
}

.grc-canvas-btn.grc-btn-copy-link:hover svg {
	margin-right: 1px;
}

.grc-canvas-btn.grc-btn-download,
.grc-canvas-btn.grc-btn-share{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.grc-canvas-btn.grc-btn-download svg {
    fill: white;
    max-height: 16px;
    margin-right: 4px;
}

.grc-canvas-btn.grc-btn-share svg {
    fill: white;
    max-height: 16px;
    margin-right: 4px;
}

/* =============================================================================
   CONTACT FORM — CF7
   Greens Rent Calculator
   ============================================================================= */

/* --- Wrapper --- */
.wpcf7 {
    width: 100%;
}

/* Hide the screen-reader response block visually but keep it accessible */
.wpcf7 .screen-reader-response {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hide the hidden fields fieldset entirely */
.wpcf7 fieldset.hidden-fields-container {
    border: none;
    padding: 0;
    margin: 0;
    display: none;
}

/* --- Field rows --- */
.wpcf7-form p {
    margin-bottom: 1rem;
}

/* --- Labels --- */
.wpcf7-form label {
    display: block;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--greens-body-text);
    line-height: 1.2em;
    margin-bottom: 0;
}

/* --- Input wrapper (for positioning error tips) --- */
.wpcf7-form-control-wrap {
    display: block;
    position: relative;
    margin-top: 6px;
}

/* --- Text / email / tel inputs --- */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel {
    width: 100%;
    border-radius: 8px;
    border: 1.5px solid var(--wp--preset--color--greens-accent);
    padding: 15px 17px;
    font-size: 1.1rem;
    color: var(--wp--preset--color--greens-body-text);
    background-color: white;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in, box-shadow 0.15s ease-in;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus {
    outline: none;
    border-color: var(--wp--preset--color--greens-primary);
    box-shadow: 0 0 0 2px var(--wp--preset--color--greens-primary);
}

/* --- Invalid state --- */
.wpcf7-form-control.wpcf7-not-valid {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2);
}

.wpcf7-form-control.wpcf7-not-valid:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px #c0392b;
}

/* --- Inline validation error tip --- */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    padding-left: 4px;
    font-size: 0.825rem;
    color: #c0392b;
    font-weight: 500;
}

/* --- Submit button --- */
.wpcf7-form-control.wpcf7-submit {
    display: inline-flex;
        font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background-color: var(--wp--preset--color--orange-primary);
    border: 2px solid var(--wp--preset--color--orange-primary);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 11px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-form-control.wpcf7-submit:hover,
.wpcf7-form-control.wpcf7-submit:focus-visible {
    background-color: #ca7017;
    border-color: #ca7017;
    text-decoration-color: white;
    outline: none;
}

.wpcf7-form-control.wpcf7-submit:focus-visible {
    box-shadow: 0 0 0 3px var(--wp--preset--color--greens-primary);
}

/* --- Spinner (CF7 loading indicator) --- */
.wpcf7-spinner {
    margin-left: 8px;
    vertical-align: middle;
}

/* --- Response output (success / error message after submit) --- */
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}

.wpcf7-response-output[aria-hidden="false"],
.wpcf7-response-output:not([aria-hidden="true"]):not(:empty) {
    display: block;
}

/* Sent successfully */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: #eaf3de;
    border: 1.5px solid var(--wp--preset--color--greens-primary);
    color: var(--wp--preset--color--greens-deep);
}

/* Validation failed */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background-color: #fdf0ef;
    border: 1.5px solid #c0392b;
    color: #922b21;
}

/* Spam / failed */
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    background-color: #fdf0ef;
    border: 1.5px solid #c0392b;
    color: #922b21;
}

.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wpcf7-form > p {
    flex: 1 1 min(300px, 100%);
    margin: 0;
}


.wpcf7-form > p:has(input[type="submit"]) {
    flex-basis: 100%;
}

@media screen and (max-width: 781px) {
    .wp-block-button.grc-btn-show-maths {
        margin-top: -15px; font-size: .875rem;
        margin-bottom: 5px;
    }
}

.grc-canvas-secondary button:focus {
    outline: none;
}

.turn-into-button button {
    background-color: var(--wp--preset--color--greens-secondary);
    border-radius: 4px;
    text-decoration: 2px solid underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    transition: all 0.2s;
}

.turn-into-button button:focus {
    outline: none;
}

.turn-into-button button:hover,
.turn-into-button button:focus-visible {
        text-decoration-color: white;
    background-color: var(--wp--preset--color--greens-deep);
    color: white;
}

#grc-canvas-wrap p.has-text-align-center.has-small-font-size {
    margin: 0;
}

.wpcf7 .wpcf7-form .wpcf7-response-output {
    display: inline-block;
    position: relative;
    margin: 0;
    
}

/* button on 404 page */
.is-style-outline  .wp-block-button__link {
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.is-style-outline .wp-block-button__link.has-white-color.has-text-color.has-link-color.has-text-align-center.wp-element-button:hover,
.is-style-outline .wp-block-button__link.has-white-color.has-text-color.has-link-color.has-text-align-center.wp-element-button:focus-visible {
    background-color: var(--wp--preset--color--greens-accent);
    color: var(--wp--preset--color--greens-body-text);
    border-color: var(--wp--preset--color--greens-body-text);
}

/* logo pointer events */
.rent-logo,
.rent-logo img {
	pointer-events: none;
}

.grc-back-link.back-link-icon,
.grc-back-link.back-link-icon button {
	position: relative;
	z-index: 10;
}