/*
    STYLE GUIDE

    Heading Font: Mrs Saint Delafield // MRS SAINT DELAFIELD
    Body: Raleway

    Gold: #B6A260
    Pink: #E14190
    Darker Purple: #FFFFFF
    Lighter Purple: #6D5395
    Very Light Pink: #FCECF4

*/

html, body {
    scroll-behavior: smooth;
}

a[href^="tel"] {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use the current text color */
    cursor: pointer; /* Ensure it's still clickable but without link styling */
}

/* Standard parallax for desktop */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* iOS-specific fix */
@supports (-webkit-overflow-scrolling: touch) {
    .parallax {
        background-attachment: scroll;
        -webkit-transform: translate3d(0, 0, 0); /* Use this only for iOS */
        will-change: transform;
        background-size: cover;
    }
}


a, a:link, a:active, a:visited {
    color: var(--navy);
    text-decoration: none;
}

    a::after {
        content: ''; /* Empty content for the pseudo-element */
        position: absolute; /* Position it absolutely */
        left: 0; /* Start from the left */
        bottom: 0; /* Align to the bottom of the text */
        height: 1px; /* Thickness of the underline */
        width: 0; /* Start with width 0 */
        background-color: var(--orange); /* Underline color */
        transition: width 0.3s ease; /* Smooth transition for width */
    }

    
.header, .header a,
.footer a {
    color: white;
    text-decoration: none;
    position: relative;
    padding: 0 5px;
}

    /* The underline effect */
    .header a::after,
    .footer a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px; /* adjust for spacing under the text */
        width: 0;
        height: !px;
        background-color: white;
        transition: width 0.3s ease;
    }

    /* Hover state: reveal underline */
    .header a:hover::after,
    .footer a:hover::after {
        width: 100%;
    }



/*------------------------Footer-------------------------------------*/

footer a, footer a:link, footer a:active, footer a:visited, .footerbase a {
    position: relative; /* Position relative for pseudo-element */
    display: inline-block; /* Make the element inline-block to fit the text */
    color: white; /* Start color */
    text-decoration: none; /* Remove default underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

    footer a::after, .footerbase a::after {
        content: ''; /* Empty content for the pseudo-element */
        position: absolute; /* Position it absolutely */
        left: 0; /* Start from the left */
        bottom: 0; /* Align to the bottom of the text */
        height: 1px; /* Thickness of the underline */
        width: 0; /* Start with width 0 */
        background-color: #ffffff; /* Underline color */
        transition: width 0.3s ease; /* Smooth transition for width */
    }

    /* Underline effect for main nav item on hover, but not for images */
    footer a:not(:has(img)), .footerbase a:not(:has(img)) {
        color: white; /* Start color */
    }

        /* Underline effect on hover */
        footer a:not(:has(img)):hover, .footerbase a:not(:has(img)):hover {
            color: #ffffff; /* Change text color on hover */
        }

            /* Underline for text links on hover */
            footer a:not(:has(img)):hover::after, .footerbase a:not(:has(img)):hover::after {
                content: ""; /* Create an empty content for the pseudo-element */
                position: absolute;
                left: 0;
                bottom: 0; /* Position at the bottom of the anchor */
                width: 100%; /* Expand to full width on hover */
                height: 1px; /* Height of the border */
                background-color: #ffffff; /* Border color */
                transition: width 0.3s; /* Smooth transition for width */
            }

    /* For images within anchor tags in the footer */
    footer a img {
        transition: transform 0.3s ease; /* Smooth scaling transition */
    }

    /* Scale images on hover */
    footer a:hover img {
        transform: scale(1.1); /* Slightly scale the image */
    }

.footerbase {
    color: #fff;
    background-color: #162454;
    padding: 10px 0;
    font-size: 9pt;
}