/*==================================================
    WARDROBE.CSS
    My Lolita Wardrobe
    Baby, the Stars Shine Bright Theme
==================================================*/


/*==============================
    PAGE TITLE
==============================*/

.pageTitle{

    text-align:center;

}

.pageTitle p{

    max-width:700px;

    margin:15px auto 0;

    color:var(--ink-soft);

}



/*==============================
    SEARCH PANEL
==============================*/

.searchPanel{

    background:#fbf9f7;

}

.searchPanel h3{

    margin-bottom:12px;

    color:var(--wine);

}

#searchInput{

    width:100%;

    padding:14px;

    border:1px solid var(--gold-line);

    border-radius:14px;

    background:var(--card);

    font-size:16px;

    font-family:inherit;

}

#searchInput:focus{

    outline:none;

    border-color:var(--wine);

    box-shadow:0 0 10px rgba(92,22,38,.18);

}



/*==============================
    FILTERS
==============================*/

.filters{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.filters div{

    display:flex;

    flex-direction:column;

}

.filters label{

    font-weight:bold;

    color:var(--wine);

    margin-bottom:6px;

}

.filters select{

    padding:10px;

    border-radius:14px;

    border:1px solid var(--gold-line);

    background:var(--card);

    font-family:inherit;

}



/*==============================
    TAG BUTTONS
==============================*/

.tagFilters{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:center;

}

.tagFilters button{

    background:#faf9f7;

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

    color:var(--wine);

    border-radius:20px;

    padding:8px 16px;

    cursor:pointer;

    transition:.25s;

}

.tagFilters button:hover{

    background:var(--ivory-deep);

    transform:translateY(-2px);

}



/*==============================
    COLLECTION STATS
==============================*/

.collectionStats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.statCard{

    background:var(--ivory);

    border:1px dashed var(--gold);

    border-radius:16px;

    text-align:center;

    padding:20px;

    position:relative;

}

.statCard::before{

    content:"❦";

    position:absolute;

    top:8px;

    right:12px;

    color:var(--gold);

    font-size:.9rem;

}

.statCard h3{

    color:var(--wine);

    margin-bottom:10px;

    font-size:1rem;

}

.statCard span{

    display:block;

    font-size:2rem;

    font-weight:bold;

    color:var(--wine-deep);

}



/*==============================
    WARDROBE GRID
==============================*/

#wardrobeGrid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:25px;

}



/*==============================
    DRESS CARD
==============================*/

.dressCard{

    background:var(--card);

    border:1px solid var(--gold-line);

    border-radius:20px;

    overflow:hidden;

    transition:.3s;

    box-shadow:0 5px 12px rgba(194,24,91,.15);

    position:relative;

}

/* Cards that link out to lolibrary need the anchor's default link
   styling reset (and a pointer cursor to signal they're clickable);
   plain cards (no link on file) are untouched, same as before. */
a.dressCard{

    display:block;

    color:inherit;

    text-decoration:none;

    cursor:pointer;

}

.lolibraryBadge{

    position:absolute;

    top:14px;

    right:12px;

    z-index:2;

    background:var(--rose);

    color:#fff;

    font-size:.75rem;

    padding:4px 10px;

    border-radius:999px;

    box-shadow:0 2px 6px rgba(0,0,0,.2);

    pointer-events:none;

}

/* Rounded bunting-flag trim across the top of every card, like a
   hem of tiny pennants */
.dressCard::before{

    content:"";

    display:block;

    height:14px;

    background-color:var(--rose-soft);

    -webkit-mask-image:var(--bunting);

    mask-image:var(--bunting);

    -webkit-mask-size:22px 14px;

    mask-size:22px 14px;

    -webkit-mask-repeat:repeat-x;

    mask-repeat:repeat-x;

    opacity:.9;

}

/* Tiny bow charm perched on the corner of each card */
.dressCard::after{

    content:"";

    position:absolute;

    top:14px;

    left:8px;

    width:34px;

    height:24px;

    background-image:url("../images/gifs/bow.svg");

    background-size:contain;

    background-repeat:no-repeat;

    transform:rotate(-10deg);

    filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)) sepia(.3) saturate(2) hue-rotate(-20deg);

    pointer-events:none;

}

.dressCard:hover{

    transform:translateY(-8px);

    box-shadow:0 10px 22px rgba(194,24,91,.22);

}

.dressCard img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    border-bottom:1px solid var(--gold-line);

}

.dressInfo{

    padding:18px;

}

.dressInfo h3{

    color:var(--wine);

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    margin-bottom:12px;

}

.dressInfo p{

    margin-bottom:8px;

    color:var(--ink-soft);

}



/*==============================
    TAGS
==============================*/

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:15px 0;

}

.tags span{

    background:var(--ivory-deep);

    color:var(--wine);

    border-radius:20px;

    padding:6px 12px;

    font-size:.85rem;

    border:1px solid var(--gold-line);

}



/*==============================
    CARD BUTTONS
==============================*/

.cardButtons{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-top:15px;

}

.cardButtons a{

    flex:1;

    text-align:center;

    background:linear-gradient(180deg,var(--wine),var(--wine-deep));

    color:var(--gold-pale);

    padding:10px;

    border:1px solid var(--gold);

    border-radius:14px;

    font-weight:600;

    font-family:'Cormorant Garamond',serif;

    letter-spacing:.4px;

    transition:.25s;

}

.cardButtons a:hover{

    background:linear-gradient(180deg,var(--rose),var(--wine));

    color:#fff;

    transform:translateY(-2px);

}



/*==============================
    RANDOM COORDINATE
==============================*/

.randomCoordinate{

    text-align:center;

}

.randomCoordinate p{

    margin:15px auto;

    max-width:600px;

}

#coordinateButton{

    font-size:18px;

    padding:14px 30px;

}



/*==============================
    ACTIVE NAV LINK
==============================*/

nav a.active{

    background:var(--ivory-deep);

    border-left:4px solid var(--gold);

    font-weight:bold;

}



/*==============================
    HOVER EFFECTS
==============================*/

.dressCard:hover h3{

    color:var(--gold-deep);

}

.dressCard:hover img{

    filter:brightness(1.03);

}



/*==============================
    SCROLL ANIMATION
==============================*/

.dressCard{

    animation:fadeIn .6s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==============================
    RESPONSIVE
==============================*/

@media (max-width:1000px){

.filters{

    grid-template-columns:repeat(2,1fr);

}

.collectionStats{

    grid-template-columns:repeat(2,1fr);

}

}



@media (max-width:700px){

.filters{

    grid-template-columns:1fr;

}

.collectionStats{

    grid-template-columns:1fr;

}

#wardrobeGrid{

    grid-template-columns:1fr;

}

.cardButtons{

    flex-direction:column;

}

.dressCard img{

    height:auto;

}

}