/* ### TOPBAR ### */
.topbar {
    background-color: var(--c-primary);
    padding-block: 0.625rem;
    transition: padding-block var(--trans-3);
}

.topbar *::selection {
    background-color: #fff;
    color: var(--c-primary);
}

.topbar .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.topbar .email {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    color: #fff;
    transition: gap var(--trans-3);
}

.topbar .email:hover span {
    text-decoration: underline;
}

.topbar ul {
    display: none;
    align-items: center;
    gap: 1rem;
    transition: gap var(--trans-3);
}

.topbar li a {
    transition: transform var(--trans-3);
}

.topbar li a:hover {
    transform: scale(1.15);
}

/* ### HEADER ### */
header {
    background-color: #fff;
    padding-block: 0.625rem 1.125rem;
    transition: padding-block var(--trans-3);
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    padding-block: 1rem;
    z-index: 10;
    box-shadow: var(--shdw-primary-drk);
    transform: translateY(-100%);
    animation: slideDown 0.3s forwards ease;
}

@keyframes slideDown {
    to {
        transform: translateY(0);
    }
}

header.sticky :where(hr, form, nav) {
    display: none;
}

header .wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 0.875rem;
    transition: gap var(--trans-3);
}

header .logo {
    width: 36%;
    max-width: 9rem;
    margin: 0 auto 0.5rem;
    transition: width var(--trans-3),
                margin var(--trans-3);
}

header .logo img {
    width: 100%;
}

header .search-bar {
    position: relative;
    order: 5;
    width: calc(100% - 2.5rem);
    margin-left: auto;
    transition: max-width var(--trans-3);
}

header .search-bar input {
    padding: 0.75rem 1rem;
    border-radius: 2rem;
    box-shadow: var(--shdw-primary);
    transition: height var(--trans-3),
                padding-inline var(--trans-3),
                box-shadow var(--trans-3);
}

header .search-bar:hover input {
    box-shadow: var(--shdw-drk);
}

header .search-bar button {
    position: absolute;
    inset: 0 0.5rem 0 auto;
    width: 2rem;
    height: 2rem;
    line-height: var(--lh-tight);
    margin-block: auto;
    transition: right var(--trans-3);
}

header .shell {
    width: calc(64% - 0.875rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.375rem;
    transition: width var(--trans-3),
                gap var(--trans-3);
}

header .shell .btn {
    gap: 0.375rem;
}

header .btn .bound {
    transition: width var(--trans-3),
                height var(--trans-3),
                background-color var(--trans-3);
}

header .btn img {
    transition: height var(--trans-3),
                filter var(--trans-3);
}

header .btn--quote:hover img {
    filter: var(--fltr-white);
}

header .btn--contact img {
    filter: var(--fltr-white);
}  

header .btn--contact:hover img {
    filter: none;
}

header nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header #navToggler {
    transition: transform var(--trans-3);
}

header #navToggler:hover {
    transform: rotate(45deg);
}

header .menu-links {
    position: absolute;
    inset: calc(100% + 1.5rem) 0 0;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-height: 0;
    background-color: #fff;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    border-radius: var(--br-base, 5px);
    z-index: 10;
    transform: translateY(-10px);
    transition:
        max-height var(--trans-3),
        opacity var(--trans-3),
        padding var(--trans-3),
        transform var(--trans-3);
}

header .menu-links.open {
    max-height: fit-content;
    padding: 0.25rem;
    opacity: 1;
    transform: translateY(0);
}

header:has(.menu-links.open) {
    background-color: var(--c-secondary-subtle);
}

header .menu-links li {
    position: relative;
    width: 100%;
}

header .menu-links > li {
    background-color: #fff;
    border-radius: var(--br-base, 5px);
    box-shadow: var(--shdw-primary);
}

header .menu-links > li:hover {
    box-shadow: var(--shdw-drk);
}

header .menu-links > li:first-of-type {
    order: 2;
}

header .menu-links > li:nth-of-type(2) {
    order: 1;
}

header .menu-links > li:nth-of-type(n+3) {
    order: 3;
}

header .menu-links > li:first-of-type li:has(.btn) {
    display: none;
}

header .menu-links a {
    width: 100%;
}

header .menu-links > li > a {
    background-color: #fff;
    padding: 1rem;
    border-radius: var(--br-base, 5px);
    transition: background-color var(--trans-3), border-radius var(--trans-3);
}

header .menu-links > li:has(ul) > a {
    border-bottom: 1px solid var(--c-border);
}

header .menu-links > li:first-of-type > a img {
    display: none;
}

header .menu-links > li:has(ul.open) {
    box-shadow: var(--shdw-drk);
}

header .menu-links .dropdown-arrow {
    position: absolute;
    inset: 1.25rem 1rem auto auto;
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-primary);
    border-radius: 50%;
    transition: background-color var(--trans-3);
}

header .menu-links .dropdown-arrow.active {
    background-color: #fff;
}

header .menu-links .dropdown-arrow img {
    transition: filter, transform var(--trans-3);
}

header .menu-links .dropdown-arrow.active img {
    filter: var(--fltr-primary);
    transform: rotate(180deg);
}

header .menu-links ul {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    transition:
        max-height var(--trans-3),
        opacity var(--trans-3),
        padding var(--trans-3),
        transform var(--trans-3);
}

header .menu-links ul.open {
    max-height: 300vh;
    opacity: 1;
    padding-block: 0.25rem;
    transform: translateY(0);
}

header .menu-links ul a {
    position: relative;
    padding: 0.75rem 2.25rem;
    transition: padding var(--trans-3);
}

header .menu-links ul a:hover {
    color: var(--c-primary);
    padding-left: 2.5rem;
}

header .menu-links ul a::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 1rem;
    width: 0.625rem;
    height: 0.625rem;
    background: no-repeat center/cover url('../images/icons/forward-arrow.png');
    margin-block: auto;
    transition: transform var(--trans-3);
}

header .menu-links ul a:hover::before {
    transform: translateX(0.25rem);
}

header .menu-links ul .dropdown-arrow  {
    top: 1rem;
}

header .menu-links > li:first-of-type > ul.open {
    padding-block: 0.375rem;
}

header .menu-links > li:first-of-type > ul > li > a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem;
}

header .menu-links > li:first-of-type > ul > li > a::before {
    content: none;
}

header .menu-links > li > ul > li:has(ul.open) > a {
    border-bottom: 1px solid var(--c-border);
}


/* ~~~~~ MEDIA QUERIES ~~~~~ */
/* ===== MOBILE (Potrait) : 480px ===== */
@media screen and (min-width: 30rem) {
    /* {{{ Topbar }}} */
    .topbar .wrapper {
        justify-content: space-between;
    }
    
    .topbar ul {
        display: flex;
    }

    /* {{{ Header }}} */
    header .logo {
        width: calc(30% - 0.375rem);
        margin: 0;
    }

    header .shell {
        width: calc(70% - 0.5rem);
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }

    header .btn--quote > span span {
        display: none;
    }
}

/* ===== MOBILE (Lanscape) : 608px ===== */
@media screen and (min-width: 38rem) {
    /* {{{ Header }}} */
    header .btn .bound {
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border: 1px solid var(--c-primary);
        border-radius: 50%;
    }

    header .btn--quote:hover img {
        filter: none;
    }

    header .btn--contact img {
        filter: none;
    }  

    header .btn--contact:hover .bound {
        background-color: var(--fltr-white);
    }

    header .btn--contact:hover img {
        filter: var(--fltr-white);
    }

    header .btn--quote > span span {
        display: inline;
    }
}

/* ===== LAPTOP : 992px ===== */
@media screen and (min-width: 62rem) {
    /* {{{ Topbar }}} */
    .topbar {
        padding-block: 0.75rem;
    }
    
    .topbar .email {
        gap: 0.375rem;
    }
    
    .topbar .email img {
        height: 0.875rem;
    }

    .topbar ul {
        gap: 1.125rem;
    }

    .topbar li:is(:nth-of-type(4), :nth-of-type(6)) img {
        height: 1.125rem;
    }

    .topbar a img {
        width: auto;
        height: 1rem;
    }

    /* {{{ Header }}} */
    header {
        padding-block: 1.75rem 1.875rem;
    }

    header .wrapper {
        gap: 0.75rem 1rem;
    }

    header .search-bar {
        order: initial;
        width: 100%;
        max-width: 22rem;
        margin-inline: auto 0;
    }

    header .search-bar input {
        height: 2.75rem;
        padding-inline: 1.875rem;
        box-shadow: var(--_shdw-primary-lght);
    }

    header .search-bar button {
        right: 1rem;
    }

    header .search-bar button img {
        width: auto;
        height: 1.125rem;
    }

    header .search-bar button:hover img {
        filter: var(--fltr-primary);
    }

    header .shell {
        width: fit-content;
        gap: 1rem;
    }

    header .shell .btn {
        gap: 0.5rem;
        height: 2.75rem;
        line-height: var(--lh-sm);
        padding-inline: 0.875rem;
    }

    header .shell .btn img {
        width: auto;
    }

    header .btn--quote img {
        height: 1rem;
        margin-left: 2px;
    }

    header .btn--contact img {
        height: 1.125rem;
    }

    header hr {
        margin-top: 0.75rem;
    }

    header nav {
        width: 100%;
    }

    header #navToggler {
        display: none;
        transition: none;
    }

    header .menu-links {
        position: static;
        max-height: unset;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        opacity: 1;
        overflow: visible;
        transform: none;
        transition: none;
    }

    header .menu-links li {
        width: fit-content;
    }

    header .menu-links > li:nth-of-type(n+1) {
        order: initial;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    header .menu-links a {
        width: fit-content;
    }

    header .menu-links > li > a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 500;
        background-color: transparent;
        color: var(--c-text);
        padding: 0;
        border-radius: 0;
        transition: none;
    }

    header .menu-links > li > a:hover {
        color: var(--c-primary);
    }

    header .menu-links > li:has(ul) > a {
        position: relative;
        padding-right: 1rem;
        border: none;
    }

    header .menu-links > li:has(> ul):not(:first-of-type) > a::before {
        content: '';
        position: absolute;
        inset: 0 0 0 auto;
        width: 0.5rem;
        height: 0.318rem;
        background: no-repeat center/cover url('../images/icons/caret-down.png');
        margin-block: auto;
    }

    header .menu-links > li:not(:first-of-type) > a::after {
        content: '';
        position: absolute;
        inset: auto 0 -0.375rem;
        width: 0;
        height: 0.125rem;
        background-color: var(--c-primary);
        border-radius: 1rem;
        margin-inline: auto;
        transition: var(--trans-5);
    }

    header .menu-links > li:not(:first-of-type) > a:hover::after {
        width: 75%;
    }

    header .menu-links > li:first-of-type > a img {
        display: block;
    }

    header .menu-links > li:not(:first-of-type):has(ul)::after,
    header .menu-links > li:first-of-type > a:after {
        content: none;
        position: absolute;
        inset: 100% 0 0;
        width: 100%;
        height: 1.875rem;
    }

    header .menu-links > li:not(:first-of-type):has(ul):hover::after,
    header .menu-links > li:first-of-type:hover > a:after {
        content: '';
    }

    header .menu-links ul {
        position: absolute;
        inset: calc(100% + 1.875rem) 0 0;
        width: max-content;
        min-width: 16rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    header .menu-links > li:not(:first-of-type) ul {
        background-color: #fff;
        border-radius: var(--br-base, 5px);
        box-shadow: var(--shdw-primary);
    }

    header .menu-links li:hover > ul {
        max-height: 1000px;
        overflow: visible;
        opacity: 1;
        transform: translateY(0);
    }

    header .menu-links ul li {
        width: 100%;
    }
    
    header .menu-links ul a {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 1.875rem;
    }

    header .menu-links ul a::before {
        left: 0.75rem;
    }

    header .menu-links > li:first-of-type {
        position: static;
    }

    header .menu-links > li:first-of-type > ul {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem 0.25rem;
        background-color: #fff;
        border-radius: var(--br-base, 5px);
        box-shadow: var(--shdw-primary);
    }

    header .menu-links > li:first-of-type:hover > ul {
        padding: 1.25rem 0.5rem;
    }
    
    header .menu-links > li:first-of-type > ul::before {
        content: '';
        position: absolute;
        inset: -4.25rem 0 0;
        width: 100%;
        height: 1px;
        background-color: var(--c-border);
        margin-block: auto;
    }

    header .menu-links > li:first-of-type > ul > li:nth-of-type(n+1):nth-of-type(-n+5) {
        margin-bottom: 1rem;
    }

    header .menu-links > li:first-of-type li:has(.btn) {
        display: block;
        grid-column: 1 / -1;
    }
    
    header .menu-links > li:first-of-type .btn {
        font-size: var(--fs-base, 1rem);
        background-color: var(--c-primary);
        padding: 0.625rem 1.375rem;
        border-radius: var(--br-base, 5px);
        margin-inline: auto;
        transition: background-color var(--trans-3);
    }

    header .menu-links > li:first-of-type .btn:hover {
        background-color: transparent;
    }

    header .menu-links > li:first-of-type > ul a {
        padding: 0.25rem 0.75rem 0.25rem 1.25rem;
        border-radius: 0;
        box-shadow: none;
    }

    header .menu-links > li:first-of-type > ul > li > a {
        font-weight: 600;
        padding: 0;
    }

    header .menu-links ul ul {
        position: static;
        display: block;
        min-width: auto;
        max-height: unset;
        opacity: 1;
        transform: none;
        margin-top: 0.5rem;
    }

    header .menu-links ul ul a::before {
        left: 0;
    }
}

/* ===== DESKTOP : 1200px ===== */
@media screen and (min-width: 75rem) {
    /* {{{ Header }}} */
    header .wrapper {
        column-gap: 2rem;
    }
    
    header .search-bar {
        max-width: 35rem;
        margin-inline: 0;
    }

    header .shell {
        margin-left: auto;
    }

    header .menu-links > li:first-of-type:hover > ul {
        padding-inline: 1rem;
    }
}