/*home hero mask*/
#home-hero.logo-mask .wp-block-cover__background {
/* Set initial values using CSS Custom Properties */
  --mask-scale: 1; /* Starts at 100% */
  --overlay-opacity: 1; /* Starts fully opaque */    
  -webkit-mask-image: url('../../../uploads/2026/03/westnine-logo-mask.svg');
  mask-image: url('../../../uploads/2026/03/westnine-logo-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-mode: alpha;
  
  /* Use calc() to apply the scale to your base size */
   -webkit-mask-size: auto calc(190% * var(--mask-scale));
  mask-size: auto calc(190% * var(--mask-scale));
  
  /* Apply opacity */
  opacity: var(--overlay-opacity);
  
  /* This will help smooth out tiny scroll jitters */
  transition: mask-size 0.1s linear, opacity 0.1s linear;
  
}

@media screen and (max-width: 900px){
    
    #home-hero.logo-mask .wp-block-cover__background {
        /* Use calc() to apply the scale to your base size */
       -webkit-mask-size: auto calc(120% * var(--mask-scale));
        mask-size: auto calc(120% * var(--mask-scale));
    }
    
}

@media screen and (max-width: 650px){
    
    #home-hero.logo-mask .wp-block-cover__background {
        /* Use calc() to apply the scale to your base size */
       -webkit-mask-size: auto calc(100% * var(--mask-scale));
        mask-size: auto calc(100% * var(--mask-scale));
    }
    
}

@media screen and (max-width: 500px){
    
    #home-hero.logo-mask .wp-block-cover__background {
        
        -webkit-mask-image: url('../../../uploads/2026/03/westnine-mask.svg');
        mask-image: url('../../../uploads/2026/03/westnine-mask.svg');
        
    }
    
}

body.hide-hero-overlay #home-hero .wp-block-cover__background {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .logo-mask .wp-block-cover__background {
    /* Instantly set the overlay to be fully transparent */
    opacity: 0;

    /* Remove the transition to prevent any accidental animation */
    transition: none;
  }
}





/* header */
.viewport-middle #header-cover,
.viewport-base #header-cover {
    max-width: 180px;
    margin-right:auto;
    margin-left:auto;
    min-height:70px !important;
    padding:0 0.5em !important;
}

.viewport-middle header .menu-btn,
.viewport-base header .menu-btn {
	border: 1px solid white;
	padding: 0;
}

.viewport-middle header .menu-btn .wp-block-navigation__responsive-container-open,
.viewport-base header .menu-btn .wp-block-navigation__responsive-container-open {
    display:block;
    padding:0.25em 0.5em;
    text-transform:uppercase;
}
.viewport-middle #header-cover .home-logo,
.viewport-base #header-cover .home-logo {
    padding: 0px 5px;
}
/*.site-header > .wp-block-cover::before,*/
#mid-logo {
    background-image:url('../../../uploads/2025/08/wn-text.svg');
    width:260px;
    height:56px !important;
    position:absolute;
    right:50%;
    margin-right:-130px !important;
    top:50%;
    margin-top:-30px !important;
    transition: width 0.5s ease, margin-right 0.5s ease, opacity 0.5s ease;
    cursor:pointer;
    z-index:3;
}

/*.alt-header .site-header > .wp-block-cover::before,*/
.alt-header #mid-logo {
    background-image:url('../../../uploads/2025/11/logo-text-alt.svg');
}

.viewport-middle .site-header > .wp-block-cover::before,
.viewport-base .site-header > .wp-block-cover::before {
    width:100px;
    margin-right:-50px;
    opacity:0;
}

@media screen and (max-width: 700px){
    .viewport-middle #header-cover .home-logo img,
    .viewport-base #header-cover .home-logo img{
        width: 40px !important;
        height: 40px !important;
    }
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 1; /* Optional: Fade it in at the same time */
  }
  to {
    transform: translateY(0);
    opacity: 1; /* Optional: Fade it in at the same time */
  }
}

.viewport-middle .site-header #mid-logo,
.viewport-base .site-header #mid-logo {
    display:none;
}

.viewport-middle .site-header > .wp-block-cover > .wp-block-cover__background,
.viewport-base .site-header > .wp-block-cover > .wp-block-cover__background {
    opacity:1 !important;
background: rgba(35, 31, 32, 0.7);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.7px);
-webkit-backdrop-filter: blur(7.7px);
border: 1px solid rgba(35, 31, 32, 0.4);
    border-radius: 0 0 10px 10px;
    animation: slideInFromTop 0.15s ease-out;
}

.viewport-middle .site-header > .wp-block-cover > .wp-block-cover__inner-container,
.viewport-base .site-header > .wp-block-cover > .wp-block-cover__inner-container {
    padding: 0 0.5em !important;
    animation: slideInFromTop 0.15s ease-out;
}

.viewport-middle .site-header > .wp-block-cover > .wp-block-cover__inner-container > .wp-block-group,
.viewport-base .site-header > .wp-block-cover > .wp-block-cover__inner-container > .wp-block-group {
    padding: 0 !important;
}

 

/*greyscale*/
.greyscale img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-transition: -webkit-filter 2s ease;
    transition: filter 2s ease;
    z-index:999;
}

.greyscale img:hover,
.greyscale .wp-block-image:hover,
.greyscale .most-central img,
.wp-block-telex-block-carousel-row.greyscale .carousel-track .carousel-row-content .wp-block-image.stats,
.wp-block-telex-block-carousel-row.greyscale .carousel-track .carousel-row-content .wp-block-image.stats img {
    -webkit-filter: grayscale(0) !important;
    filter: grayscale(0) !important;
    -webkit-transition: -webkit-filter 2s ease;
    transition: filter 2s ease;
}



/* footer */

/* footer form */

/* * Gravity Form Toggle Solution - Overlay Method (v3 Animation, new parent)
 */

/* Prepare the button's container for positioning the overlay */
#gform_1 .gform_footer {
  position: relative;
}

/* Style the invisible cover element */
.gform-reveal-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

/* Hide the form body when the helper class is on the new parent */
#contact-peek.form-minimised .gform_body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* Define the 'open' state and slide-down transition for the form body */
#gform_1 .gform_body {
  max-height: 1000px; /* Target height for the animation */
  transition: max-height 0.5s ease-in-out,
              opacity 0.4s ease-in-out 0.1s; /* Fade is slightly delayed */
}

/* Hide the captcha credit when the new parent is minimised */
#contact-peek.form-minimised #gform1-captchacredit {
  opacity: 0;
  pointer-events: none; /* Prevents interaction when invisible */
}

/* Define the fade-in transition for the captcha credit */
#gform1-captchacredit {
  opacity: 1;
  transition: opacity 0.5s ease 0.2s; /* 200ms delay */
}

/* Hide the spacer when parent is minimised */
#contact-peek.form-minimised #gform1-spacer {
max-height:0;
}

#gform1-spacer {
  max-height:1000px;
  transition: max-height 0.5s ease 0.1s; /* 100ms delay */
}

/* Hide the cover once the form is revealed */
#contact-peek:not(.form-minimised) .gform-reveal-trigger {
  display: none;
}


/* request access form */
/* Styling the new Request Access button */
.request-access-custom-btn {
    /* Your original shared submit/after styles */
    border: solid 1px #fff;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    color: #fff;

    /* Your original ::after specific styles */
    font-size: 1em;
    line-height: 2em;

    text-align: center;
    font-weight: 400;

    /* New resets to make the <button> behave like your old ::after */
    background: transparent;
    display: block;
    padding: 0;
    margin-top: 15px; /* Adds a little breathing room between the submit button and this one */
    box-sizing: border-box;
}

/* Hide the Gravity Form container by default */
#request-access-gf-container {
    display: none; 
    margin-top: 30px;
    padding: 20px;
}

/* ----------------------------------------------------
   1. MATCH HEIGHTS: Login & Request Access Buttons
---------------------------------------------------- */
/* Give both buttons identical padding and vertical alignment */
.locked-login input[type="submit"],
.request-access-custom-btn {
    padding: 12px 0 !important; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important; /* Overrides any previous margin we added */
}

/* Ensure the new button takes up the remaining 49% space */
.request-access-custom-btn {
    flex-grow: 1;
}

/* ----------------------------------------------------
   2. GF SUBMIT BUTTON: Match the Login Form Submit
---------------------------------------------------- */
#request-access-gf-container input[type="submit"],
#request-access-gf-container button[type="submit"] {
    padding: 12px 0 !important;
    font-size: 1.2em;
    line-height: 2em;

}

/* ----------------------------------------------------
   3. LABELS & REQUIRED TEXT: Force White
---------------------------------------------------- */
/* Fixes the black "First", "Last", "Title" sub-labels */
#request-access-gf-container .gform_wrapper .gfield_label,
#request-access-gf-container .gform_wrapper .ginput_complex label,
#request-access-gf-container .gform_wrapper .gfield_description {
    color: #fff !important;
}

/* Fixes the red "(Required)" text / asterisks */
#request-access-gf-container .gfield_required,
#request-access-gf-container .gfield_required_text {
    color: #fff !important;
}

/* ----------------------------------------------------
   4. DROPDOWN (SELECT) STYLING
---------------------------------------------------- */
/* Make the dropdown match the text inputs */
#request-access-gf-container select {
    display: block;
    width: 100%;
    background-color: transparent !important;
    border: solid 1px #fff !important;
    border-right: none 0 !important;
    border-left: none 0 !important;
    font-size: 1.2em;
    line-height: 1em;
    color: #fff !important;
    -webkit-appearance: none; /* Removes default OS styling */
    appearance: none;
    padding: 5px 0;
    text-align: center;
}

/* Make the dropdown options readable when clicked (black text on white) */
#request-access-gf-container select option {
    color: #000;
    background-color: #fff;
}

/* ----------------------------------------------------
   5. CHECKBOX STYLING
---------------------------------------------------- */
/* Strip the solid white background and create a transparent box */
#request-access-gf-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent !important;
    border: 1px solid #fff !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    margin-right: 10px;
}

/* Create a white checkmark when checked */
#request-access-gf-container input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    line-height: 1;
}