/* handbook-style.css */
/* Consolidated styles V3 for Suzega Handbook: Responsive Header, Font Size Change */

/* --- Base & Body --- */
body {
    font-family: 'InriaSans-Regular', sans-serif; /* Base font */
    margin: 0; /* Remove default margin */
    padding-top: 60px; /* Add padding for sticky header height - ADJUST IF NEEDED */
    /* 'sidebar-open' class added/removed via JS */
    background-color: #fff; /* Optional: ensure body background */
    color: #333; /* Default text color */
}

/* --- Sticky Header --- */
.handbook-header {
    border-bottom: 1px solid #eee;
    background-color: #fff; /* Ensure header has solid background */
    position: sticky;
    top: 0;
    z-index: 900; /* Below sidebar/overlay */
    height: 60px; /* Explicit height - ADJUST IF NEEDED, match body padding-top */
    box-sizing: border-box;
}

/* Header Content Wrapper (Flexbox Layout) */
.header-content-wrapper {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Space out items */
    height: 100%; /* Fill header height */
    padding-left: 1.25rem; /* Approx px-5 */
    padding-right: 1.25rem; /* Approx px-5 */
    /* Optional: Constrain width and center */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Add this NEW rule */
.handbook-menu-trigger .menu-icon {
    margin-right: 0.5em; /* Space between icon and text */
    /* Optional: Adjust icon size or vertical alignment if needed */
    /* font-size: 1.1em; */
    /* line-height: 1; */
}

/* Styles for the Text Trigger Button */
.handbook-menu-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'InriaSans-Bold', sans-serif; /* Use Bold font */
    font-size: 1.2em; /* Match sidebar title size */
    color: #333; /* Darker color */
    cursor: pointer;
    font-weight: normal; /* Weight is handled by font-family now */
    text-align: left;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex; /* Aligns icon and text on one line */
    align-items: center;  /* Vertically centers icon and text */
}
.handbook-menu-trigger:hover,
.handbook-menu-trigger:focus {
    color: var(--color-accentPrimary, #b99273);
    outline: none;
}

/* Styles for the Centered Logo Link */
.handbook-header .logo-link {
    display: block;
    line-height: 0;
    text-align: center;
}
/* Styles for the Logo Image */
.header-logo-img {
    display: inline-block;
    height: 2rem;  /* 32px (h-8 equivalent) */
    width: auto;
    vertical-align: middle;
}

/* Styles for the Invisible Placeholder (for desktop) */
.header-placeholder {
    visibility: hidden;
    font-family: 'InriaSans-Bold', sans-serif; /* Match trigger */
    font-size: 1.2em; /* Match trigger */
    line-height: 1.2; /* Match trigger */
    flex-shrink: 0;
    white-space: nowrap;
    /* Text content inside HTML should match trigger for width balance */
}


/* --- Sidebar Navigation (Slide-out) --- */
#handbook-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; background-color: #f8f9fa;
    z-index: 1000; transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto; border-right: 1px solid #dee2e6;
    box-sizing: border-box; padding: 20px; padding-top: 55px;
    font-size: 0.95rem;
}
body.sidebar-open #handbook-nav { transform: translateX(0); }

/* Close Button */
#sidebar-close {
    position: absolute; top: 10px; right: 15px;
    background: none; border: none; font-size: 2rem; line-height: 1;
    color: #6c757d; cursor: pointer; padding: 5px;
}
#sidebar-close:hover { color: #333; }

/* Sidebar Header Block */
.sidebar-header { padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #dee2e6; }
.sidebar-header h2 {
    font-family: 'InriaSans-Bold', sans-serif; font-size: 1.2em;
    margin: 0 0 5px 0; color: #333;
}
.sidebar-header .subtitle { font-size: 0.9em; color: #6c757d; margin: 0; }

/* Sidebar Links */
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li a {
    display: block; padding: 12px 5px; color: #333; text-decoration: none;
    border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-links li a:hover { background-color: #e9ecef; color: #000; }
.sidebar-links li a.active {
    font-family: 'InriaSans-Bold', sans-serif;
    background-color: #ddeeff; color: #0056b3;
}

/* --- Content Overlay --- */
#sidebar-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 999;
}
body.sidebar-open #sidebar-overlay {
    opacity: 1; visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* --- Main Content Area --- */
#handbook-content {
    padding: 30px 40px; box-sizing: border-box;
    line-height: 1.6; max-width: 900px;
    /* Using "container mx-auto" class in template */
}

/* --- Content Typography --- */
#handbook-content h1, #handbook-content h2, #handbook-content h3, #handbook-content h4 {
    font-family: 'Adoretta-Holland-Serif', serif; color: #333;
    margin-top: 1.8em; margin-bottom: 1em; line-height: 1.3;
}
#handbook-content h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em;}
#handbook-content h2 { font-size: 1.6em; } #handbook-content h3 { font-size: 1.3em; } #handbook-content h4 { font-size: 1.1em; }
#handbook-content p { margin-bottom: 1.6em; text-align: left; font-size: 1.1rem; line-height: 1.7; }
#handbook-content a { color: var(--color-accentPrimary, #b99273); text-decoration: underline; }
#handbook-content a:hover { text-decoration: none; }
#handbook-content code { background-color: #f0f0f0; padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; font-size: 0.9em; word-wrap: break-word; }
#handbook-content pre { background-color: #f0f0f0; padding: 1em; border-radius: 4px; overflow-x: auto; margin-bottom: 1.6em; }
#handbook-content pre code { background-color: transparent; padding: 0; font-size: 0.9em; line-height: 1.4; white-space: pre; word-wrap: normal; }
#handbook-content ul, #handbook-content ol { margin-left: 2em; margin-bottom: 1.6em; padding-left: 0; }
#handbook-content li { margin-bottom: 0.6em; }
#handbook-content blockquote { border-left: 4px solid #ccc; margin-left: 0; margin-right: 0; margin-bottom: 1.6em; padding: 0.5em 1.5em; color: #666; font-style: italic; }
#handbook-content blockquote p { margin-bottom: 0.5em; }
#handbook-content hr { border: 0; border-top: 1px solid #eee; margin: 2.5em 0; }

/* --- Footer --- */
.handbook-footer {
    background-color: #000; color: #fff; padding: 20px;
    text-align: center; font-size: 0.9em; line-height: 1.5;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed */

    .handbook-header {
        height: auto; /* Allow header height to adjust */
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    body {
         /* Adjust body padding if header height changes, estimate or measure */
         /* padding-top: 80px;  Example if header grows */
         /* Keep current padding-top for now, adjust if needed after testing */
    }

    .header-content-wrapper {
        flex-direction: column; /* Stack items vertically */
        justify-content: center;
        align-items: center; /* Center horizontally */
        padding-left: 1rem; /* Adjust padding */
        padding-right: 1rem;
    }

    .handbook-menu-trigger {
        text-align: center; /* Center text */
        margin-bottom: 0.5rem; /* Add space below trigger */
        /* Adjust font size for mobile if needed */
        /* font-size: 1.1em; */
    display: inline-flex; /* Aligns icon and text on one line */
    align-items: center;  /* Vertically centers icon and text */
    justify-content: center; /* Explicitly center flex items */
    }

    .handbook-header .logo-link {
         margin-top: 0.5rem; /* Add space above logo */
    }

    .header-placeholder {
        display: none; /* Hide the placeholder entirely on mobile */
    }

    /* Main content padding adjustment for smaller screens */
    #handbook-content {
        padding: 20px;
    }

    /* Example: Make sidebar wider on mobile */
    /* #handbook-nav { width: 85%; } */
}