:root {
--color-bg: #3d4428;
--color-cream: #f7efdc;
--color-gold: #9c7e44;
--color-dark-olive: #353929;
--font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
}

/* ================================
    HEADER
    ================================ */
.site-header {
background-color: var(--color-cream);
color: var(--color-dark-olive);
font-family: var(--font-serif);
padding: 4rem;
position: relative;
z-index: 50;
}

.header-grid {
max-width: 1920px;
margin: 0 auto;
display: grid;
/* Equal side columns keep the center column (logo) perfectly centered */
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 2rem;
}

/* ----- Left: Primary nav ----- */
.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*gap: 0.9rem;*/
}

.primary-nav a {
    color: var(--color-dark-olive);
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    white-space: nowrap;
    position: relative;
    font-weight: normal;
}

.primary-nav a::after{ content:""; position: absolute; bottom: -10px; height: 3px; background-color: var(--color-gold); left: 0; width: 100%; opacity: 0; transition: all 0.3s;}

.primary-nav a:hover {
    font-weight: 600;
}

.primary-nav a:hover::after{ opacity: 1;}

.primary-nav a.is-active {
font-weight: 600;
}

.primary-nav ul li{ display: flex; align-items: center;}
.primary-nav ul li:first-child::before{ display: none;}
.primary-nav ul li::before {
    content: "";
    display: inline-block;
    margin: 2px 0.9rem 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-gold);
    display: inline-block;
    flex-shrink: 0;
}

/* ----- Center: Logo ----- */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 225px;
    width:23.02vw;
    max-width: 442px;
}

.brand-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* ----- Right: Brighter Day Press ----- */
.header-endmark {
    justify-self: end;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.225rem;
    color: var(--color-dark-olive);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    padding: 10px 12px;
    position: relative;
    text-transform: uppercase;
}
.header-endmark:after{ content:""; position: absolute; bottom: 0; width: 100%; height: 2px; background-color: var(--color-gold); left: 0; right: 0;}
.header-endmark:hover{ background-color: var(--color-gold); color: var(--color-cream); }

/* ----- Hamburger (hidden on desktop) ----- */
.nav-toggle {
display: none;
background: none;
border: none;
padding: 0.5rem;
margin: 0;
cursor: pointer;
color: var(--color-dark-olive);
-webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 4px;
border-radius: 2px;
}

.nav-toggle .bar {
display: block;
width: 28px;
height: 1.5px;
background-color: currentColor;
margin: 6px 0;
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}

/* ================================
    RESPONSIVE
    ================================ */
@media all and (min-width: 1800px) {
    .site-header {
        padding: 6rem 1.5rem;
    }
}

@media all and (max-width: 1400px) {
   .primary-nav ul li::before{ margin: 2px 0.5em 0;}
}

/* Tablet / smaller desktop: tighten spacing */
@media (max-width: 1200px) {
    .primary-nav ul li::before{ margin: 2px 0.5em 0 -0.25em;}

    .site-header {
        padding: 4rem 2.5rem;
    }

    .primary-nav ul {
        gap: 0.7rem;
    }

    .primary-nav a {
        font-size: 1.05rem;
    }

    .header-endmark {
        font-size: 1.05rem;
        letter-spacing: 0.22em;
    }
}

@media (max-width: 1024px) {
.primary-nav a {
    font-size: 0.95rem;
}

.primary-nav ul {
    gap: 0.5rem;
}

.header-endmark {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
}
}

/* Mobile: switch to hamburger */
@media (max-width: 960px) {
.site-header {
    padding: 3.5rem 1.5rem;
}

.header-grid {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
}

.primary-nav {
    display: none;
}

.nav-toggle {
    display: block;
    justify-self: start;
}

.brand {
    justify-self: center;
    width: 80%;
    max-width: 280px;
}

.header-endmark {
    /* Hide end-mark on mobile to keep the logo centered cleanly;
        it reappears inside the slide-out nav panel. */
    display: none;
}
}

@media (max-width: 400px) {
}

/* ================================
    MOBILE NAV PANEL
    ================================ */
.mobile-nav {
position: fixed;
inset: 0 0 0 0;
background-color: var(--color-bg);
color: var(--color-cream);
z-index: 100;
display: flex;
flex-direction: column;
padding: 1.5rem;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
}

.mobile-nav.is-open {
transform: translateX(0);
visibility: visible;
}

.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3rem;
}

.mobile-nav-close {
background: none;
border: none;
color: var(--color-cream);
cursor: pointer;
padding: 0.5rem;
-webkit-tap-highlight-color: transparent;
}

.mobile-nav-close:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 4px;
border-radius: 2px;
}

.mobile-nav-close svg {
width: 26px;
height: 26px;
display: block;
}

.mobile-nav-brand {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--color-cream);
    width: 100%;
    max-width: calc(100% - 40px - 2em);
    
}

.mobile-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: 1.25rem;
text-align: center;
}

.mobile-nav a {
color: var(--color-cream);
text-decoration: none;
font-size: 1.75rem;
letter-spacing: 0.01em;
transition: color 0.2s ease;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
color: var(--color-gold);
outline: none;
}

.mobile_bdp_logo a{
    font-size: 0.95rem;
    letter-spacing: 0.2em;
}

.mobile-nav-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(247, 239, 220, 0.15);
}

.mobile-nav-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-gold);
display: inline-block;
}

.mobile-nav-footer span {
font-size: 0.9rem;
letter-spacing: 0.25em;
font-weight: 600;
color: var(--color-cream);
}

/* Prevent body scroll when nav is open */
body.nav-open {
overflow: hidden;
}

/* Staggered entry for nav items when the panel opens */
.mobile-nav.is-open li {
animation: fadeUp 0.45s ease both;
}
.mobile-nav.is-open li:nth-child(1) { animation-delay: 0.08s; }
.mobile-nav.is-open li:nth-child(2) { animation-delay: 0.14s; }
.mobile-nav.is-open li:nth-child(3) { animation-delay: 0.20s; }
.mobile-nav.is-open li:nth-child(4) { animation-delay: 0.26s; }
.mobile-nav.is-open li:nth-child(5) { animation-delay: 0.32s; }

@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(12px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media (prefers-reduced-motion: reduce) {
.mobile-nav,
.mobile-nav.is-open li,
.nav-toggle .bar {
    animation: none !important;
    transition: none !important;
}
}