/* ==========================================================================
   HAUS OF LESS
   Buttons
   Version: 3.0
   Last Updated: July 2026

   Changes
   - Unified design tokens
   - Improved accessibility
   - Smoother animations
   - Production-ready button system
   ========================================================================== */


/* ==========================================================
   Base Button
========================================================== */

.button{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;

    min-height:var(--button-height);
    padding:1.1rem 2.8rem;

    border:none;
    border-radius:var(--button-radius);

    cursor:pointer;

    overflow:hidden;
    white-space:nowrap;

    text-decoration:none;

    font-family:var(--font-body);
    font-size:1.02rem;
    font-weight:500;
    letter-spacing:.02em;

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

    will-change:transform;

}


/* ==========================================================
   Premium Inner Ring
========================================================== */

.button::before{

    content:"";

    position:absolute;
    inset:2px;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.18);

    pointer-events:none;

    transition:inherit;

}


/* ==========================================================
   Hover States
========================================================== */

.button:hover{

    transform:translateY(-4px);

}

.button:active{

    transform:translateY(-1px);

}

.button:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(176,138,78,.28);

}


/* ==========================================================
   Primary Button
========================================================== */

.button-primary{

    color:var(--color-white);

    background:var(--color-forest);

    box-shadow:
        0 24px 70px rgba(20,35,28,.22);

}

.button-primary:hover{

    background:var(--color-forest-light);

    box-shadow:
        0 26px 60px rgba(20,35,28,.30);

}


/* ==========================================================
   White Button
========================================================== */

.button-white{

    background:#ffffff;

    color:var(--color-forest);

    border:1px solid rgba(255,255,255,.2);

    box-shadow:0 18px 45px rgba(0,0,0,.16);

}

.button-white::before{

    border:1px solid rgba(255,255,255,.45);

}

.button-white:hover{

    background:var(--color-brass);

    color:#ffffff;

}


/* ==========================================================
   Outline Button
========================================================== */

.button-outline{

    color:var(--color-forest);

    background:transparent;

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

}

.button-outline::before{

    display:none;

}

.button-outline:hover{

    color:var(--color-white);

    background:var(--color-forest);

}


/* ==========================================================
   Ghost Button
========================================================== */

.button-ghost{

    min-height:auto;

    padding:0;

    color:var(--color-forest);

    background:none;

    box-shadow:none;

}

.button-ghost::before{

    display:none;

}

.button-ghost:hover{

    transform:none;

}


/* ==========================================================
   Sizes
========================================================== */

.button-sm{

    min-height:48px;

    padding:.8rem 1.6rem;

    font-size:.95rem;

}

.button-lg{

    min-height:68px;

    padding:1.2rem 3rem;

    font-size:1.08rem;

}


/* ==========================================================
   Width
========================================================== */

.button-full{

    width:100%;

}


/* ==========================================================
   Icons
========================================================== */

.button svg{

    width:18px;
    height:18px;

    flex-shrink:0;

    transition:transform var(--transition);

}

.button:hover svg{

    transform:translateX(4px);

}


/* ==========================================================
   Disabled
========================================================== */

.button:disabled,
.button.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

}


/* ==========================================================
   Motion Preference
========================================================== */

@media (prefers-reduced-motion:reduce){

    .button,
    .button::before,
    .button svg{

        transition:none;

    }

}


/* ==========================================================
   Home page footer book a consultation button
========================================================== */


.button-light{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.85rem;

    padding:1rem 2.25rem;

    background:var(--color-white);

    color:var(--color-forest);

    text-decoration:none;

    font-weight:600;

    letter-spacing:.02em;

    border-radius:999px;

    border:none;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:all .35s ease;

}

.button-light:hover{

    background:var(--color-linen);

    color:var(--color-forest);

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(0,0,0,.22);

}