/* ==========================================================================
   Button Components
   ========================================================================== */

/* Base Button Reset */
.btn-primary,
.btn-outline,
.btn-nav,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* ==========================================================================
   Primary Button - Solid orange, main CTA
   ========================================================================== */

.btn-primary {
    background-color: var(--primary-009);
    color: var(--primary-colour-001);
    padding: 0.875rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-primary span {
    color: var(--primary-colour-001);
}

.btn-primary i {
    font-size: 1.25rem;
    color: var(--primary-colour-001);
}

/* Primary with icon */
.btn-primary.has-icon {
    gap: 0.5rem;
    min-width: 10rem;
}

@media (hover: hover) {
    .btn-primary:hover {
        background-color: var(--primary-004);
        opacity: 1;
    }
}

/* ==========================================================================
   Outline Button - Bordered with cream background
   ========================================================================== */

.btn-outline {
    background-color: var(--primary-003);
    color: var(--neutral-004);
    padding: 0.875rem 1.5rem;
    border: 2px solid var(--neutral-004);
    border-radius: 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-outline span {
    color: var(--neutral-004);
}

.btn-outline i {
    font-size: 1.25rem;
    color: var(--neutral-004);
}

/* Outline with icon */
.btn-outline.has-icon {
    gap: 0.5rem;
}

@media (hover: hover) {
    .btn-outline:hover {
        background-color: var(--primary-002);
        opacity: 1;
    }
}

/* ==========================================================================
   Nav Button - Bordered header navigation style
   ========================================================================== */

.btn-nav {
    background: transparent;
    border: none;
    color: var(--neutral-004);
    padding: 0.5rem 0 0.25rem 0;
    font-size: 0.875rem;
    text-transform: uppercase;

    position: relative;
}

/* Animated underline */
.btn-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--neutral-004);
    transition: width 0.3s ease;
}

.btn-nav span {
    color: var(--neutral-004);
}

.btn-nav i {
    font-size: 1rem;
    color: var(--neutral-004);
}

/* Nav with icon */
.btn-nav.has-icon {
    gap: 0.5rem;
}

/* Nav Button - Underlined variant (underline shown by default) */
.btn-nav--underlined::after {
    width: 100%;
}

@media (hover: hover) {
    .btn-nav:hover {
        opacity: 1;
    }

    .btn-nav:hover::after {
        width: 100%;
    }
}

/* ==========================================================================
   Icon Button - Circular icon-only
   ========================================================================== */

.btn-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--primary-colour-001);
    border: 2px solid var(--neutral-004);
}

.btn-icon svg,
.btn-icon i {
    width: 24px;
    font-size: 1.25rem;
    color: var(--neutral-004);
    fill: var(--neutral-004);
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .btn-icon:hover {
        background-color: var(--primary-003);
        opacity: 1;
    }

    /* Only translate on hover, keep color */
    .btn-icon:hover svg,
    .btn-icon:hover i {
        transform: translateX(3px);
    }
}

/* ==========================================================================
   Minimal Button - Text-heavy style (e.g., Hero Link)
   ========================================================================== */

.btn-minimal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
    padding-bottom: 2px;
    /* Desktop baseline alignment */
    position: relative;
    /* For pseudo-element border */
    cursor: pointer;
}

/* Animated Border via Pseudo-element */
.btn-minimal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transition: width 0.3s ease;
}

.btn-minimal span {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.btn-minimal i {
    font-size: 1.5rem;
}

/* Light Variant (for dark backgrounds) */
.btn-minimal--light {
    color: var(--primary-colour-001);
}

.btn-minimal--light::after {
    background-color: var(--primary-colour-001);
}

.btn-minimal--light span,
.btn-minimal--light i {
    color: var(--primary-colour-001);
}

/* Dark Variant (for light backgrounds) */
.btn-minimal--dark {
    color: var(--neutral-004);
}

.btn-minimal--dark::after {
    background-color: var(--neutral-004);
}

.btn-minimal--dark span,
.btn-minimal--dark i {
    color: var(--neutral-004);
}

@media (hover: hover) {
    .btn-minimal:hover {
        opacity: 1;
    }

    .btn-minimal:hover::after {
        width: 0%;
    }
}

/* Mobile/Tablet Styles */
@media screen and (max-width: 1100px) {
    .btn-minimal {
        padding: 0.875rem 1.5rem;
        border-radius: 1rem;
        background-color: transparent;
        width: auto;
    }

    /* Hide pseudo-border on mobile by default */
    .btn-minimal::after {
        display: none;
    }

    .btn-minimal i {
        display: none;
        /* Hide icon on mobile */
    }

    .btn-minimal--light {
        border: 2px solid var(--primary-colour-001);
    }

    .btn-minimal--dark {
        border: 2px solid var(--neutral-004);
    }

    /* --- New Variant: Preserve Text Style on Mobile --- */
    .btn-minimal--mobile-text {
        padding: 0 0 2px 0;
        /* Reset padding to minimal */
        border: none;
        border-radius: 0;
        width: auto;
    }

    .btn-minimal--mobile-text::after {
        display: block;
        /* Restore underline */
    }

    /* Icon remains hidden per user request ("don't need to store icon") */

    /* Remove overrides for light/dark borders if this class is present */
    .btn-minimal--mobile-text.btn-minimal--light,
    .btn-minimal--mobile-text.btn-minimal--dark {
        border: none;
    }
}

/* ==========================================================================
   Mobile Button Width Consistency
   Match follow buttons: 250px default, 100% at 480px
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* Primary and Outline buttons get consistent width on tablet/mobile */
    .btn-primary,
    .btn-outline {
        width: 250px;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {

    /* Full width on small mobile */
    .btn-primary,
    .btn-outline {
        width: 100%;
    }
}