/* ==========================================================================
   BUTTONS.CSS
   Project: Luxury Destination Wedding Videographer
   Author: Cyber Master Studio
   Version: 1.0
   Description: Global button system
   ========================================================================== */


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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0;

    border: none;
    background: none;

    font: inherit;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--cms-transition-fast),
        opacity var(--cms-transition-fast);
}


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

.button--primary {
    font-size: var(--cms-text-xs);
    font-weight: var(--cms-font-semibold);
    line-height: 1;
	font-family: var(--cms-font-sans-bot);

    color: var(--cms-color-heading);

    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.button--primary:hover {
    color: var(--cms-color-accent);
}


/* ==========================================================================
   Scrolled Header CTA
   ========================================================================== */

.site-header--scrolled .site-header__cta {
    color: var(--cms-color-button-scrolled);
}

.site-header--scrolled .site-header__cta:hover {
    color: var(--cms-color-button-scrolled-hover);
}


/* ==========================================================================
   Secondary Button
   ========================================================================== */

.button--secondary {
    font-size: var(--cms-text-xs);
    font-weight: var(--cms-font-semibold);
	font-family: var(--cms-font-sans-bot);
	text-transform: uppercase;
	letter-spacing: 0.1em; 

    color: var(--cms-color-text);

    text-decoration: underline;
    text-underline-offset: 6px;
}


/* ==========================================================================
   Button Icon
   ========================================================================== */

.button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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


/* ==========================================================================
   Hover Animation
   ========================================================================== */

.button:hover .button__icon {
    transform: translateX(4px);
}


/* ==========================================================================
   Focus
   ========================================================================== */

.button:focus-visible {
    outline: 2px solid var(--cms-color-accent);
    outline-offset: 6px;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
	
	
	.button--primary {   
	
	font-size: var(--cms-text-base);
    }
	
	
	.button--secondary {  
	
	
	font-size: var(--cms-text-base);


	}
	
	
}



/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 600px) {
	
	
	.button--primary {   
	
	font-size: var(--cms-text-xs);
    }
	
	
	.button--secondary {  
	
	
	font-size: var(--cms-text-xs);


	}
	
	
}