/*
Theme Name: Agency 15 Custom Theme
Author: Agency 15
Author URI: https://agency15.com/
Description: Custom theme developed by Agency 15 - The agency you love to work with.
Version: 1.0
Requires at least: 5.2
Requires PHP: 8.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: agency15
*/

/* ── Brand Colors & Layout Variables ── */
:root {
    --color-dark_green:     #14452D;
    --color-maroon:           #58111A;
    --color-maroon-light:     #8B3040;
    --color-blue:           #ABB6D1;
    --color-white:          #FFFFFF;
    --color-tan:            #F5F0E8;
    --color-copy:           #333745;
    --border-radius:        8px;
    --container-max-width:  1200px;
    --network-bar-height:   44px;
}

/* ── Utility: Navy accent border frame ── */
.navy-frame {
    border-radius: 25px;
    border-right: 15px solid var(--color-dark_green);
    border-bottom: 15px solid var(--color-dark_green);
}

/* ── Base Reset ── */
body, html {
    overflow-x: hidden;
    margin: 0;
    scroll-behavior: smooth;
}

/* ── Global Typography & Background ── */
body {
    font-family: 'Work Sans', sans-serif;
    color: var(--color-copy);
    background-color: var(--color-tan);
}

/* Fixed background via ::before so it works on iOS (background-attachment: fixed
   is ignored on mobile WebKit). The pseudo-element is fixed to the viewport and
   sits behind all content via z-index: -1. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('assets/images/Background-Graphic.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', sans-serif;
}

[class*="__subhead"],
[class*="__subheadline"] {
    font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Search: nav form (mobile only) ── */
#nav-search {
    display: block;
}

#search-modal {
    display: none; /* overridden below when not [hidden] */
}

#search-toggle {
    appearance: none;
    background: none;
    border: none;
}


/* ── Search: modal (desktop only) ── */
@media (min-width: 768px) {
    #nav-search {
        display: none;
    }

    #search-modal {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
    }

    #search-modal[hidden] {
        display: none;
    }

    #search-modal-inner {
        position: relative;
        background: var(--color-white);
        padding: 3rem;
        width: min(620px, 90vw);
        border-radius: 25px;
        font-family: 'Work Sans', sans-serif;
    }

    #search-modal-close {
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        background: none;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.35);
        transition: color 0.2s ease;
    }

    #search-modal-close:hover {
        color: var(--color-dark_green);
    }

    .search-form {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    .search-field {
        flex: 1;
        font-family: 'Work Sans', sans-serif;
        font-size: 1rem;
        padding: 0.85rem 1.5rem;
        border-radius: 50px;
        border: 1.5px solid rgba(0, 0, 0, 0.15);
        background: var(--color-white);
        color: var(--color-copy);
        outline: none;
        transition: border-color 0.2s ease;
    }

    .search-field::placeholder {
        color: rgba(0, 0, 0, 0.35);
    }

    .search-field:focus {
        border-color: var(--color-dark_green);
    }

    .search-submit {
        flex-shrink: 0;
        font-family: 'Work Sans', sans-serif;
        background-color: var(--color-dark_green) !important;
        color: var(--color-white) !important;
    }

    .search-submit:hover {
        background-color: var(--color-maroon) !important;
    }
}

.custom-logo-link {
    padding: 0;
    width: 225px;

    img {
        max-width: 100%;
        height: auto;
    }
}

.mobile-menu-toggle {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#header {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
    position: fixed;
    background-color: #fff;
    z-index: 100;
    width: 100%;
    top: var(--network-bar-height);
    left: 0px;
    height: 112px;

    @media (max-width: 767px) {
        height: 74px;
    }
}

#container {
    margin-top: calc(112px + var(--network-bar-height));

    @media (max-width: 767px) {
        margin-top: calc(74px + var(--network-bar-height));
    }
}

.admin-bar {
    #header {
        top: calc(32px + var(--network-bar-height));
    }
}

@media (max-width: 1023px) {
    #header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 1rem;
    }

    .custom-logo-link {
        padding: 0;
        width: 200px;
    }
}

@media (min-width: 1024px) {
    .sub-menu {
        display: none;
    }

    #header {
        display: flex;

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;

            .menu-main-menu-container {
                height: 100%;
            }

            ul#menu-main-menu {
                display: flex;
                list-style-type: none;
                height: 100%;

                li.menu-item {
                    height: 100%;

                    > a {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }

    .menu-item-has-children {
        position: relative;
    }

    .menu-item-has-children > .sub-menu {
        list-style-type: none;
        z-index: 3;
        display: none;
        position: absolute;
        left: -15px;
        width: 100%;
        background: var(--color-dark_green);
        color: var(--color-white);
        text-align: center;
        text-decoration: none;
        padding: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        a {
            display: block;
            color: var(--color-white);
            text-align: center;
            text-decoration: none;
            padding: 10px 0px;
        }
    }

    .menu-item-has-children:hover > .sub-menu {
        display: block;
    }
}

/* ── HubSpot form overrides ── */

.hsfc-Form {
    max-width: 800px;
    margin: 0 auto !important;
    font-family: 'Work Sans', sans-serif !important;
}

.hsfc-Form *,
.hsfc-Form input,
.hsfc-Form textarea,
.hsfc-Form select,
.hsfc-Form button,
.hsfc-Form label {
    font-family: 'Work Sans', sans-serif !important;
}