/* ============================================================
   1. EXTERNAL RESOURCES
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* ============================================================
   2. VINTAGE BRAND VARIABLES
   ============================================================ */
:root {
    --typewriter-font: 'Special Elite', Courier, serif;
    --vintage-charcoal: #2c2a27;
    --brick-stamp: #8b3a2b;
    --ledger-line: rgba(44, 42, 39, 0.4);
    --button-accent: #8b2222;
    --story-spacing: 1.5em; 
}

/* ============================================================
   3. SHARED GLOBAL STYLES
   ============================================================ */
body, h1, h2, h3, p, a, li, span, .wp-block-navigation-item__content {
    font-family: var(--typewriter-font);
    color: var(--vintage-charcoal);
    text-decoration: none;
}

a {
    color: var(--vintage-charcoal);
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

body {
    background: url(https://sidneystreetstories.com/wp-content/uploads/2026/01/91513.jpg) fixed repeat;
    margin: 0;
}

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1800px; 
    margin: 0 auto; 
    padding: 40px;
}

/* ============================================================
   4. NAVIGATION MENU LOGIC
   ============================================================ */
.wp-block-navigation ul {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    list-style: none;
    padding: 0;
    gap: 10px;
}

/*top ledger line*/
.wp-block-navigation-item:first-child { 
    border-bottom: 3px double var(--ledger-line); 
    padding-bottom: 10px; 
    width: 200px; 
}

.wp-block-navigation-item:first-child .wp-block-navigation-item__content { 
    font-size: 20px; 
    font-weight: bold; 
    text-transform: uppercase; 
    white-space: nowrap; 
}

/*bottom ledger line*/
.wp-block-navigation-item:nth-child(6) { 
    border-top: 3px double var(--ledger-line); 
    padding-top: 25px; 
    width: 200px; 
}
/* THE ANCHOR: Prevents item 6 from vanishing or resizing the container */
.wp-block-navigation-item:nth-child(7) { 
    min-width: 200px;
	width: 200px; 
}

/*----------------------*/
/* UNIFIED RED STAMP: Era + Chapter Level */
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content,
.parent-pageid-181 .wp-block-navigation ul li:nth-child(3) .wp-block-navigation-item__content {
    color: var(--brick-stamp);
    font-weight: 900;
    text-transform: uppercase;
    display: inline-block;
    -webkit-text-stroke: 0.5px var(--brick-stamp); 
    transform: rotate(-2deg) skewX(-3deg);
    letter-spacing: 0.5px;
}
/*-----------------------*/
/* Force Menu Visibility */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { display: none; }

.wp-block-navigation__responsive-container {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
}

/* ============================================================
   5. COLUMN LAYOUT
   ============================================================ */
.wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    gap: 10px; /* Space between sidebar and story */
}

/* THE SIDEBAR (Column 1) */
.wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 300px;
    min-width: 300px;
    position: sticky;
    top: 40px;
    height: fit-content;
} /* Added missing closing brace here */

/* THE STORY CONTENT (Column 2) */
.wp-block-columns > .wp-block-column:last-child {
    flex: 0 1 850px; 
    max-width: 850px;
    margin-left: 0; 
    margin-right: auto; /* Pushes empty space to the far right */
	/* Internal padding: Pushes text away from BOTH lines */
    padding-left: 60px;
    padding-right: 60px;

}
/* ============================================================
   6. STORY CONTENT & CHAPTER NAVIGATION
   ============================================================ */
.entry-content p {
    text-align: justify;
    text-justify: inter-word;
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: var(--story-spacing);
}

/* The Container: This keeps the links aligned with your text */
.chapter-navigation {
    display: flex;
    justify-content: space-between; /* Pushes 'Previous' left and 'Next' right */
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
}

.chapter-navigation a {
    color: var(--vintage-charcoal);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    padding: 4px 0;
    border-top: 1px solid var(--ledger-line);
    border-bottom: 1px solid var(--ledger-line);
    line-height: 1.2;
    white-space: nowrap; /* Prevents the text from wrapping weirdly */
}
/* ============================================================
   8. SEPARATOR STYLING
   ============================================================ */
hr.wp-block-separator, 
.wp-block-separator {
    width: 150px;           /* Sets the specific length of the line */
    margin-left: auto;      /* Centers the line */
    margin-right: auto;     /* Centers the line */
    border: none;
    border-bottom: 2px solid var(--ledger-line); /* Uses your existing gray color */
    opacity: 1;             /* Makes sure it's not too faint */
    margin-top: 3em;        /* Space above the line */
    margin-bottom: 3em;     /* Space below the line */
}