/*
Theme Name: Élan Store Theme
Theme URI: https://élan.store
Author: Élan Styling Team
Description: A minimalist custom theme designed for subscription-based apparel styling.
Version: 1.0.0
Text Domain: elan-theme
*/
/* 
Theme Name: Élan Store Theme
Version: 1.0.0
*/

/* Reset & Global Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1e1e24;
    background-color: #ffffff;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 1. Mint Green Promo/Announcement Bar */
.promo-bar {
    background-color: #a3e2d5; /* Stitch Fix exact mint green shade */
    color: #1a3c34;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

.promo-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-link {
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}

.promo-close {
    position: absolute;
    right: 24px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #1a3c34;
    font-weight: bold;
}

/* 2. Main Navigation Bar (Flexbox Centered) */
.main-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    border-bottom: 1px solid #eaeaea;
    background-color: #ffffff;
}

/* Left Section */
.nav-left {
    display: flex;
    gap: 24px;
    flex: 1; /* Equal spacing allocation */
}

.nav-item {
    font-size: 15px;
    font-weight: 500;
    color: #2b3a8f; /* Deep Stitch Fix blue */
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Center Section (Logo) */
.nav-center {
    display: flex;
    justify-content: center;
    flex: 1;
}

.brand-logo {
    font-family: 'Playfair Display', serif; /* Serif bold look for premium feel */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #2b3a8f;
    text-transform: uppercase;
}

/* Right Section */
.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-end;
    flex: 1;
}

.nav-utility-item {
    font-size: 14px;
    font-weight: 500;
    color: #2b3a8f;
}

.nav-utility-item:hover {
    color: #000;
}

/* Take Your Style Quiz (Yellow Button) */
.cta-quiz-btn {
    background-color: #e4e234; /* Stitch Fix signature soft yellow button */
    color: #1e1e24;
    padding: 10px 24px;
    border-radius: 50px; /* Fully rounded capsules */
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.cta-quiz-btn:hover {
    background-color: #d1cf2c;
    transform: translateY(-1px);
}

.cta-quiz-btn:active {
    transform: translateY(0);
}



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

.mobile-menu-btn{
    display:none;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
    font-size:28px;
    color:#2b3a8f;
    line-height:1;
}


/* Tablet */
@media (max-width:992px){

.main-navbar{

    padding:15px 22px;

}

}


/* Mobile */
@media (max-width:768px){

/* Announcement Bar */

.promo-bar{

    padding:10px 45px 10px 16px;
    font-size:13px;

}

.promo-close{

    right:15px;

}


/* Navbar */

.main-navbar{

    height:72px;

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

    padding:0 18px;

    flex-direction:row;

    position:relative;

}


/* Left */

.nav-left{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:0;

}


/* Hide Desktop Links */

.nav-left .nav-item{

    display:none;

}


/* Show Menu */

.mobile-menu-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

}


/* Logo */

.nav-center{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.brand-logo{

    font-size:26px;

    letter-spacing:3px;

}


/* Right */

.nav-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0;
}

/* Hide Everything */

.nav-right .nav-utility-item{
    display:none;
}

.cta-quiz-btn{
    display:none;
}

/* Show only Sign In */

.sign-in-link{
    display:block !important;
    font-size:15px;
    font-weight:600;
    color:#2b3a8f;
}

.sign-in-link:hover{
    color:#000;
}


/* Hide Quiz Button */

.cta-quiz-btn{

    display:none;

}

}