/* --- MASTER TYPOGRAPHY IMPORT --- */
@import url('https://press.daisychainbiannual.com/assets/css/dc-typography.css');

/* --- GLOBAL PROTECTION --- */
IMG { pointer-events: none; }
body {
    -webkit-user-select: none;
    user-select: none;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #FCFBFE;
}

/* --- SYSTEM VARIABLES --- */
:root {
    --dc-header-height: 48px;
    --dc-edge-x: 24px;
    --dc-edge-x-mobile: 10px;
    --dc-hit: 44px; /* Shopify uses 44x44 */
    --dc-icon: 20px; /* Icon size adjusted */
    --dc-stroke: 1.5;
    --dc-menu-shift-y: -44px;
    --dc-black: #231F20;
    --dc-white: #FCFBFE;
    --dc-gap-desktop: 10px; /* Gap between icons on desktop */
    --dc-gap-mobile: 5px; /* Gap between icons on mobile */
}


:root {
    --dc-header-height: 48px;
    --dc-edge-x: 24px;
    --dc-edge-x-mobile: 10px;
	--dc-menu-shift-y: -44px;
    --dc-stroke: 1.5;
	--dc-black: #231F20;
    --dc-white: #FCFBFE;
	--dc-gap-desktop: 10px; /* Gap between icons on desktop */
	--dc-hit-height: 44px; 
    --dc-icon: 20px;
	
    /* SHOPIFY MOBILE DIMENSIONS */
    --dc-hit-width: 34px;  /* The narrower mobile hit area */
    --dc-gap-mobile: 5px; /* Gap between icons on mobile */
}

@media (min-width: 750px) {
    :root {
    /* SHOPIFY DESKTOP DIMENSIONS */
    --dc-hit-width: 44px; /* Back to square on desktop */
    }
}

/* --- 1. THE RESET --- */
button, .header__icon-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--dc-black);
}

/* --- 2. HEADER LAYOUT --- */
.header {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    height: var(--dc-header-height);
    background: var(--dc-white);
    z-index: 1000;
    border-bottom: 1px solid rgba(35, 31, 32, 0.1);
}

.header__row {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 var(--dc-edge-x-mobile); /* Mobile-first */
    box-sizing: border-box;
    align-items: center;
    position: relative;
}

/* --- 3. SLOT LOGIC --- */
/* Left: Account + Cart (desktop) / Hamburger (mobile) */
.header__slot--left {
    display: flex;
    align-items: center;
    gap: var(--dc-icon-gap-mobile); /* Mobile-first */
    flex: 1;
}

/* Center: Wordmark (absolute centered) */
.header__slot--center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Right: Hamburger + Search (desktop) / Search + Cart (mobile) */
.header__slot--right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--dc-icon-gap-mobile); /* Mobile-first */
}

/* --- 4. ICON SIZING --- */
.header__icon-btn {
    width: var(--dc-hit-width); !important;
    height: var(--dc-hit-height); !important;
    display: inline-flex; /* Match Shopify's inline-flex */
    align-items: center; !important;
    justify-content: center; !important;
	background: none !important;
    text-decoration: none; !important;
    position: relative; !important;
    padding: 0; !important;
    margin: 0; !important;
}

.header__icon-btn svg {
    width: var(--dc-icon);
    height: var(--dc-icon);
    display: block;
}

/* --- 5. WORDMARK STYLING --- */
.header__wordmark-link {
    text-decoration: none;
    color: var(--dc-black);
    display: block;
    line-height: 0;
}

/* Desktop: 350x24 */
.header__wordmark-link svg {
    display: block;
    width: 350px;
    height: 24px;
}

/* --- 6. RESPONSIVE LAYOUT --- */

/* Mobile-first: Show mobile elements by default */
.mobile-only {
    display: flex;
}

.desktop-only {
    display: none;
}

/* Mobile: 212.8 x 14.6 wordmark */
.header__wordmark-link svg {
    width: 212.8px;
    height: 14.6px;
}

/* Desktop: Show desktop elements, hide mobile elements */
@media (min-width: 750px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: flex;
    }
    
    /* Desktop: 350 x 24 wordmark */
    .header__wordmark-link svg {
        width: 350px;
        height: 24px;
    }
    
    /* Desktop spacing */
    .header__row {
        padding: 0 var(--dc-edge-x); /* 24px on desktop */
    }
    
    .header__slot--left,
    .header__slot--right {
        gap: var(--dc-icon-gap); /* 8px gap on desktop */
    }
}

/* --- 7. DRAWER STYLES --- */
.dc-hamburger-drawer__dialog {
    position: fixed !important;
    inset: 0 !important;
    background: var(--dc-black);
    display: none;
    pointer-events: auto;
    z-index: 9999;
}

.dc-hamburger-drawer__dialog.open { 
    display: block !important; 
}

.dc-hamburger-drawer__close-button {
    position: fixed !important;
    top: calc((var(--dc-header-height) - var(--dc-hit)) / 2) !important;
    right: var(--dc-edge-x-mobile) !important; /* Mobile-first */
    width: var(--dc-hit) !important;
    height: var(--dc-hit) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none; 
    border: 0; 
    color: var(--dc-white); 
    cursor: pointer;
    z-index: 10000;
}

@media (min-width: 750px) {
    .dc-hamburger-drawer__close-button {
        right: var(--dc-edge-x) !important; /* 24px on desktop */
    }
}

.dc-hamburger-drawer__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--dc-edge-x-mobile); /* Mobile-first */
}

@media (min-width: 750px) {
    .dc-hamburger-drawer__content {
        padding: 0 var(--dc-edge-x); /* 24px on desktop */
    }
}

.dc-hamburger-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
    transform: translateY(var(--dc-menu-shift-y));
}

.dc-menu-item { 
    text-decoration: none; 
    color: var(--dc-white); 
    display: block; 
    font-family: 'DC Sans Condensed', sans-serif;
    line-height: 1.4;
}

/* --- THE PORTAL CONTAINER --- */
#dc-portal {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* Maximum possible depth */
    pointer-events: none;
    transform: scale(var(--dc-inv-scale));
    transform-origin: top left;
    width: calc(100% / var(--dc-inv-scale));
    height: calc(100% / var(--dc-inv-scale));
}

/* Enable pointer events only for the buttons and menu */
#dc-portal .dc-hamburger,
#dc-portal .dc-hamburger-drawer__dialog,
#dc-portal .dc-hamburger-drawer__close-button {
    pointer-events: auto;
}


/* --- DRAWER FONTS & STYLING --- */

.dc-hamburger-drawer__dialog {
    position: fixed !important;
    inset: 0 !important;
    background: #231F20; /* Dark background from reference */
    color: #FCFBFE;
    display: none;
    z-index: 9999;
}

.dc-hamburger-drawer__dialog.open {
    display: block !important;
}

.dc-hamburger-drawer__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dc-hamburger-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Spacing between menu blocks */
}

/* --- MENU ITEM TYPOGRAPHY --- */
.dc-menu-heading {  /* Mobile-first */
	font-family: 'DC Sans Bold', Helvetica, 'Arial Black', Gadget, sans-serif;
    font-size: 28px !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.dc-menu-subtext {  /* Mobile-first */
	font-family: 'DC Sans Condensed','Helvetica Neue Light', 'Helvetica Neue', Helvetica, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial Narrow', sans-serif;
    font-size: 14px !important;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
}

.dc-menu-item:hover .dc-menu-heading { color: #E71411; }

@media (min-width: 750px) {

	.dc-menu-heading { 
		font-family: 'DC Sans Bold', Helvetica, 'Arial Black', Gadget, sans-serif;
		font-weight: 700 !important; 
		font-size: 28px !important;
		letter-spacing: 0.1em;
		padding-left: 20px;
		line-height: 1;
		text-transform: uppercase;
	}	
	
	.dc-menu-subtext {
		font-family: 'DC Sans Condensed','Helvetica Neue Light', 'Helvetica Neue', Helvetica, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial Narrow', sans-serif;
		font-weight: 300 !important;
		font-size: 14px !important;
		padding-left: 20px;
		opacity: 0.8;
	}

/* Active State Logic */
.dc-menu-item.is-active,
.dc-menu-item.is-active * {
    pointer-events: none !important;
    cursor: default !important;
}

.dc-menu-item.is-active .dc-menu-heading,
.dc-menu-item.is-active .dc-menu-subtext {
    opacity: 0.4;
}
/* Close Button Positioning */
.dc-hamburger-drawer__header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 24px;
}

.dc-hamburger-drawer__close-button {
    background: none;
    border: none;
    color: #FCFBFE;
    cursor: pointer;
    padding: 0;
}

/* Prevent body scroll when menu is open */
html.dc-menu-open,
html.dc-menu-open body {
    overflow: hidden;
    height: 100%;
}