/* ==========================================================
   BUTTONS.CSS
   SovereignAqua Research & Development Foundation
========================================================== */

/* ==========================================================
   BASE BUTTON
========================================================== */

.button,
.button-outline,
.button-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-height:52px;

    padding:14px 32px;

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

    font-size:1rem;

    font-weight:600;

    text-decoration:none;

    transition:all var(--transition);

    cursor:pointer;

    user-select:none;

}

/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.button{

    background:var(--primary);

    color:#ffffff;

    border:2px solid var(--primary);

}

.button:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

    transform:translateY(-3px);

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

}

/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.button-outline{

    background:transparent;

    color:#ffffff;

    border:2px solid #ffffff;

}

.button-outline:hover{

    background:#ffffff;

    color:var(--background);

    transform:translateY(-3px);

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

}

/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.button-secondary{

    background:var(--secondary);

    color:#ffffff;

    border:2px solid var(--secondary);

}

.button-secondary:hover{

    background:var(--accent);

    border-color:var(--accent);

    transform:translateY(-3px);

}

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

.nav-cta{

    margin-left:20px;

}

/* ==========================================================
   DISABLED
========================================================== */

.button:disabled,
.button-outline:disabled,
.button-secondary:disabled{

    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;

}

/* ==========================================================
   KEYBOARD ACCESSIBILITY
========================================================== */

.button:focus-visible,
.button-outline:focus-visible,
.button-secondary:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}

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

@media (max-width:768px){

    .button,
    .button-outline,
    .button-secondary{

        width:100%;

    }

    .nav-cta{

        margin:20px auto;

    }

}