/* ==========================================================
   SONARIA Components
   ========================================================== */


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-xs);

    padding: 14px 28px;

    border-radius: var(--radius-pill);

    font-family: var(--font-body);

    font-size: var(--fs-body);

    font-weight: var(--fw-medium);

    transition:
        background var(--transition-base),
        color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);

}

.btn:hover {

    transform: translateY(-2px);

}

.btn-primary {

    background: var(--color-accent);

    color: var(--color-background);

}

.btn-primary:hover {

    background: #232326;

    box-shadow: var(--shadow-md);

}

.btn-secondary {

    border: 1px solid var(--color-border);

    color: var(--color-primary);

    background: transparent;

}

.btn-secondary:hover {

    border-color: var(--color-accent);

    color: var(--color-accent);

}


/* ==========================================================
   CARDS
   ========================================================== */

.card {

    background: white;

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    border: 1px solid var(--color-border);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);

}

.card:hover {

    transform: translateY(-6px);

    border-color: rgba(176,122,69,.25);

    box-shadow: var(--shadow-lg);

}

.card-title {

    margin-bottom: var(--space-sm);

}

.card-text {

    margin-bottom: 0;

}


/* ==========================================================
   ICON CONTAINER
   ========================================================== */

.icon-box {

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-inline: auto;
    margin-bottom: var(--space-md);

}

.icon-box svg {
    width: 88px;
    height: 88px;

    display: block;
    color: var(--color-accent);
}

.icon-box img {

    width: 56px;

    height: 56px;

    stroke: var(--color-accent);

}


/* ==========================================================
   BADGE
   ========================================================== */

.badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: var(--radius-pill);

    background: rgba(176,122,69,.08);

    color: var(--color-accent);

    font-size: var(--fs-small);

    font-weight: var(--fw-medium);

}


/* ==========================================================
   INPUTS
   ========================================================== */

.input {

    width: 100%;

    padding: 16px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: white;

    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base);

}

.input:focus {

    outline: none;

    border-color: var(--color-accent);

    box-shadow: 0 0 0 4px rgba(176,122,69,.12);

}


/* ==========================================================
   TEXTAREA
   ========================================================== */

textarea.input {

    min-height: 160px;

}


/* ==========================================================
   IMAGE
   ========================================================== */

.image-rounded {

    border-radius: var(--radius-lg);

    overflow: hidden;

}


/* ==========================================================
   GLASS
   ========================================================== */

.glass {

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    background: rgba(255,255,255,.65);

}


/* ==========================================================
   HOVER LINK
   ========================================================== */

.link-arrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: var(--fw-medium);

    color: var(--color-primary);

}

.link-arrow svg {

    transition: transform var(--transition-fast);

}

.link-arrow:hover svg {

    transform: translateX(4px);

}

/* ==========================================================
   SITE FOOTER
   ========================================================== */

.site-footer {

    padding-top:
        var(--space-lg);

    padding-bottom:
        var(--space-xl);

    background:
        var(--color-primary);

    color:
        var(--color-background);

    border-top:
        1px solid
        rgba(245,243,239,.12);

}


/* ==========================================================
   MAIN FOOTER ROW
   ========================================================== */

.site-footer-content {

    display:
        flex;

    align-items:
        left;

    justify-content:
        left;

    gap:
        var(--space-lg);

}


/* ==========================================================
   BRAND
   ========================================================== */

.site-footer-brand {

    display:
        flex;

    align-items:
        left;

    flex-shrink:
        0;

}


.site-footer-logo {

    display:
        inline-block;

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-h3);

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        .12em;

    color:
        var(--color-background);

    transition:
        color var(--transition-fast);

}


.site-footer-logo:hover {

    color:
        var(--color-accent);

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.site-footer-nav {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        left;

    gap:
        var(--space-md);

}


.site-footer-nav a {

    color:
        rgba(245,243,239,.72);

    font-size:
        var(--fs-small);

    transition:
        color var(--transition-fast);

}


.site-footer-nav a:hover {

    color:
        var(--color-accent);

}


/* ==========================================================
   CONTACT
   ========================================================== */

.site-footer-contact {

    display:
        flex;

    align-items:
        left;

    flex-shrink:
        0;

}


.site-footer-contact a {

    color:
        var(--color-secondary);

    font-size:
        var(--fs-small);

    transition:
        color var(--transition-fast);

}


.site-footer-contact a:hover {

    color:
        var(--color-accent);

}


/* ==========================================================
   COPYRIGHT
   ========================================================== */

.site-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        var(--space-md);

    padding-top:
        var(--space-sm);

    border-top:
        1px solid
        rgba(245,243,239,.08);

    text-align:
        center;

}


.site-footer-bottom span {

    color:
        var(--color-secondary);

    font-size:
        var(--fs-small);

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .site-footer {

        padding-top:
            var(--space-lg);

    }


    .site-footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            var(--space-lg);

    }


    .site-footer-nav {

        flex-wrap:
            wrap;

        gap:
            var(--space-md)
            var(--space-lg);

    }


    .site-footer-contact {

        margin-top:
            0;

    }


    .site-footer-bottom {

        margin-top:
            var(--space-lg);

    }

}