/*
Theme Name: Woostify Child
Theme URI: https://thehouseofbadshabrand.com/
Description: Custom child theme for The House of Badshah
Author: Mubeen
Template: woostify
Version: 1.0.0
*/

/* Custom Header Styles will be added here */
/* =========================================
   THE HOUSE OF BADSHAH - CUSTOM HEADER
   ========================================= */

:root {

    --ink: #0a0908;
    --panel: #151210;
    --panel-2: #1c1815;
    --panel-3: #242019;
    --line: #2f291f;

    --gold: #c9a227;
    --gold-light: #e9cd6f;
    --gold-dim: #8a7126;

    --ivory: #f4efe3;
    --muted: #a89d87;

    --wine: #7c232a;
    --wine-light: #a13a3a;

    --shadow: 0 20px 50px -20px rgba(0,0,0,.7);

    --radius: 14px;

    --ease: cubic-bezier(.22,.9,.32,1);
}


/* BASIC RESET */

.site-header *,
.mobile-nav *,
.site-header *::before,
.site-header *::after,
.mobile-nav *::before,
.mobile-nav *::after {

    box-sizing: border-box;

}


.site-header a,
.mobile-nav a {

    text-decoration: none;

}


/* =========================================
   HEADER
   ========================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(10,9,8,.78);

    backdrop-filter: blur(14px) saturate(140%);

    -webkit-backdrop-filter: blur(14px) saturate(140%);

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

}


.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px clamp(20px,4vw,48px);

    max-width: 1180px;

    margin: 0 auto;

    gap: 18px;

}


/* =========================================
   LOGO
   ========================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.brand-logo {

    height: 50px;

    width: auto;

    max-width: 180px;

    object-fit: contain;

    flex-shrink: 0;

    border-radius: 50px;

}


/* =========================================
   TAGLINE
   ========================================= */

.brand-tagline {

    display: block;

    max-width: 360px;

    color: var(--muted);

    font-family: 'Jost', sans-serif;

    font-size: .72rem;

    line-height: 1.35;

    text-align: center;

    flex: 1;

    min-width: 0;

}


.brand-tagline h2 {

    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 600;

}


/* =========================================
   DESKTOP NAV
   ========================================= */

.nav {

    display: flex;

    align-items: center;

    gap: 2px;

    list-style: none;

    margin: 0;

    padding: 0;

}


.nav li {

    list-style: none;

}


.nav a {

    position: relative;

    display: block;

    padding: 10px 16px;

    font-family: 'Jost', sans-serif;

    font-size: .92rem;

    letter-spacing: .02em;

    color: var(--muted);

    transition: color .3s var(--ease);

}


.nav a::after {

    content: "";

    position: absolute;

    left: 16px;

    right: 16px;

    bottom: 6px;

    height: 1px;

    background: var(--gold);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s var(--ease);

}


.nav a:hover,
.nav a:focus-visible {

    color: var(--ivory);

}


.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.active::after {

    transform: scaleX(1);

}


.nav a.active {

    color: var(--gold-light);

}


/* =========================================
   HEADER ACTIONS
   ========================================= */

.header-actions {

    display: flex;

    align-items: center;

    gap: 6px;

}


.nav-toggle {

    display: none;

    width: 42px;

    height: 42px;

    border-radius: 50%;

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

    background: transparent;

    color: var(--ivory);

    align-items: center;

    justify-content: center;

    cursor: pointer;

}


.nav-toggle svg {

    width: 20px;

    height: 20px;

    stroke: currentColor;

    fill: none;

    stroke-width: 1.6;

}


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

.mobile-nav {

    position: fixed;

    inset: 0 0 0 auto;

    width: min(320px,84vw);

    height: 100vh;

    background: var(--panel);

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

    z-index: 200;

    transform: translateX(100%);

    transition: transform .45s var(--ease);

    display: flex;

    flex-direction: column;

    padding: 24px;

    box-shadow: -30px 0 60px rgba(0,0,0,.5);

}


.mobile-nav.open {

    transform: translateX(0);

}


.mobile-nav-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 32px;

}


.mobile-nav-head .brand-logo {

    height: 36px;

}


.icon-btn {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid transparent;

    color: var(--ivory);

    background: transparent;

    cursor: pointer;

}


.icon-btn svg {

    width: 19px;

    height: 19px;

    stroke: currentColor;

    fill: none;

    stroke-width: 1.4;

}


.icon-btn:hover {

    border-color: var(--gold-dim);

    background: rgba(201,162,39,.08);

}


.mobile-nav ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin: 0;

    padding: 0;

}


.mobile-nav li {

    list-style: none;

}


.mobile-nav a {

    display: block;

    padding: 14px 4px;

    font-size: 1.15rem;

    font-family: 'Cormorant Garamond', serif;

    color: var(--ivory);

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

}


.mobile-nav a:hover {

    color: var(--gold-light);

}


/* =========================================
   DARK SCRIM
   ========================================= */

.scrim {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    z-index: 150;

    opacity: 0;

    pointer-events: none;

    transition: opacity .4s var(--ease);

}


.scrim.show {

    opacity: 1;

    pointer-events: auto;

}


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

@media (max-width: 1100px) {

    .nav a {

        padding-left: 9px;

        padding-right: 9px;

    }

    .nav a::after {

        left: 9px;

        right: 9px;

    }

    .brand-tagline {

        max-width: 260px;

        font-size: .65rem;

    }

}


@media (max-width: 900px) {

    .nav {

        display: none;

    }

    .nav-toggle {

        display: flex;

    }

    .brand-tagline {

        max-width: 300px;

    }

}


@media (max-width: 600px) {

    .header-inner {

        padding: 10px 16px;

    }

    .brand-logo {

        height: 42px;

        max-width: 130px;

    }

    .brand-tagline {

        display: none;

    }

    .nav-toggle {

        width: 40px;

        height: 40px;

    }

}