/* ==========================================================================
   EXTERNAL IMPORTS
   ========================================================================== */

/* Imports core typography from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=IM+Fell+English+SC&family=Libre+Baskerville:wght@400;700&display=swap');

/* Imports FontAwesome icons used throughout the interface */
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.2.0/css/all.min.css');

/* ==========================================================================
   VARIABLES & THEMING
   ========================================================================== */

/* Defines the high-contrast color palette, font families, and global layout constraints */
:root {
    /* High-Contrast Palette for 65+ Readers (WCAG AAA) */
    --bg-body: #141210;
    --bg-surface: #F9F5EC;
    --text-primary: #1C1814;
    --text-secondary: #3D352E;
    --text-muted: #4E433B;
    --text-ink: #100D0B;

    --accent-brass: #873600;
    --accent-brass-glow: rgba(135, 54, 0, 0.08);
    --accent-copper: #6E2C00;
    --accent-warning: #78281F;
    --border-elegant: #BDB09E;

    --font-header: "IM Fell English SC", serif;
    --font-body: "EB Garamond", Georgia, serif;
    --font-nav: "Libre Baskerville", Georgia, serif;
    --max-width: 820px;
}

/* ==========================================================================
   GLOBAL STYLES & RESETS
   ========================================================================== */

/* Establishes smooth scrolling and the baseline rem measurement */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* Applies standard box-sizing to all elements for predictable layouts */
* {
    box-sizing: border-box;
}

/* Sets the base background, typography, and rendering properties for the document body */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.35rem; 
    line-height: 1.75;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Hides elements visually while keeping them accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Enhances keyboard navigation visibility with a custom brass outline */
:focus-visible {
    outline: 3px solid var(--accent-brass);
    outline-offset: 3px;
}

/* Applies small-caps formatting with adjusted tracking for specialized text spans */
.sc {
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

/* ==========================================================================
   LAYOUT & CONTAINERS
   ========================================================================== */

/* Styles the main centered paper-like wrapper containing the page content */
#pap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--bg-surface);
    padding: 1.5rem 1.15rem;
    min-height: 100vh;
    border-left: 1px solid var(--border-elegant);
    border-right: 1px solid var(--border-elegant);
}

/* ==========================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */

/* Standardizes touch-friendly buttons across the interface with motor accessibility in mind */
#expand-all, #collapse-all, .nav-btn, .action-btn {
    background: #EFE8DA;
    color: var(--text-ink);
    border: 2px solid var(--border-elegant);
    padding: 0.65rem 1.15rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    font-family: var(--font-nav);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

/* Provides visual feedback when interactive buttons are actively clicked or pressed */
#expand-all:active, #collapse-all:active, .nav-btn:active, .action-btn:active {
    background: var(--border-elegant);
}

/* ==========================================================================
   HEADER & BREADCRUMBS
   ========================================================================== */

/* Defines the layout and spacing for the archival title plate at the top of the index */
.archival-plate {
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-elegant);
    padding-bottom: 1rem;
}

/* Formats the primary logo text with the specialized header font */
.logo-text {
    display: block;
    font-family: var(--font-header);
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--accent-brass);
}

/* Styles the subtitle motto directly underneath the main logo */
.motto {
    font-family: var(--font-header);
    font-size: 1.25rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.25rem;
}

/* Centers the header wrapper inside individual content pages */
.content-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Styles the structural container for breadcrumb navigation trails */
.breadcrumbs {
    font-family: var(--font-nav);
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Formats the clickable links within the breadcrumb navigation */
.breadcrumbs a {
    color: var(--accent-brass);
    text-decoration: underline;
    font-weight: 600;
    padding: 6px; 
}

/* ==========================================================================
   DOCUMENT CORE (PROSE)
   ========================================================================== */

/* Styles the primary title headers within the reading document */

.document-core h1.chapterTitle {
    font-family: var(--font-header);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--accent-copper);
    text-align: center;
    margin: 0.5rem 0 1.5rem 0;
    font-weight: 400; 
}
/*delete after all web pages updated with chapter Title*/
h1.chapterTitle {
    font-family: var(--font-header);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--accent-copper);
    text-align: center;
    margin: 0.5rem 0 1.5rem 0;
    font-weight: 400; 
}

/* Establishes margins and colors for the main prose paragraphs */
.document-core p {
    margin: 0 0 1.4rem 0;
    color: var(--text-primary);
}

/* Formats blockquotes to stand out with a distinct background and accent border */
.document-core blockquote {
    font-style: italic;
    font-weight: 400;
    padding: 1rem 1.25rem;
    margin: 1.75rem 0;
    border-left: 4px solid var(--accent-brass);
    background: #EFE6D6;
    border-radius: 0 6px 6px 0;
}

/* Removes default margins for paragraphs nested specifically within blockquotes */
.document-core blockquote p {
    margin: 0;
}

/* ==========================================================================
   PROGRESS MARKERS & STATS
   ========================================================================== */

/* Centers and aligns the three visual circuit markers below breadcrumbs */
.circuit-markers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

/* Styles the first dot in the circuit marker sequence */
.circuit-markers i:nth-child(1) { font-size: 0.35rem; color: var(--text-muted); opacity: 0.5; }

/* Styles the second dot in the circuit marker sequence */
.circuit-markers i:nth-child(2) { font-size: 0.45rem; color: var(--accent-brass); opacity: 0.8; }

/* Styles the third dot in the circuit marker sequence */
.circuit-markers i:nth-child(3) { font-size: 0.55rem; color: var(--accent-copper); opacity: 1; }

/* Structures the boundary and spacing for the calibration statistics dashboard */
#stats-container {
    padding: 1rem 0;
    border-top: 2px solid var(--border-elegant);
    border-bottom: 2px solid var(--border-elegant);
    margin-bottom: 1.5rem;
}

/* Aligns the textual statistics headers in a flex row */
.stats-header-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-nav);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-ink);
}

/* Defines the background track of the calibration progress bar */
.progress-bar-bg {
    background: #D9CEBD;
    height: 14px;
    border-radius: 7px;
    margin-top: 0.6rem;
    overflow: hidden;
}

/* Styles the dynamic fill level of the calibration progress bar */
#stats-fill {
    background: var(--accent-brass);
    height: 100%;
    width: 0%;
    transition: width 0.6s ease;
}

/* ==========================================================================
   DIRECTORY TREE NAVIGATION
   ========================================================================== */

/* Defines the indentation and elegant border line for nested tree lists */
.tree ul {
    list-style: none;
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    border-left: 2px solid var(--border-elegant);
}

/* Creates spacing between individual list items in the tree hierarchy */
.tree li {
    margin: 0.65rem 0;
}

/* Styles the interactive folding headers (summaries) for directory categories */
.tree summary {
    cursor: pointer;
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1.35rem;
    padding: 0.85rem;
    background: #EFE7D8;
    border: 1px solid var(--border-elegant);
    border-radius: 6px;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Aligns the icon and text within the folder/summary titles */
.summary-title {
    display: flex;
    align-items: center;
    gap: 12px; 
    width: 100%;
}

/* Formats the italicized index list positioned beneath main directory titles */
.circuit-index {
    width: 100%; 
    font-family: var(--font-nav);
    font-size: 0.95rem;
    font-weight: 400; 
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-elegant);
    letter-spacing: 0.05em;
    font-style: italic;
    line-height: 1.4;
}

/* Styles the individual chapter link blocks within the directory tree */
.toc-link {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.5rem;
    min-height: 48px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-elegant);
}

/* Highlights the chapter prefix number inside the table of contents links */
.toc-link .chapter-ref {
    font-family: var(--font-nav);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-brass);
}

/* Formats the descriptive chapter titles in the table of contents */
.toc-link .chapter-title {
    font-size: 1.25rem;
    color: var(--text-ink);
    line-height: 1.4;
}

/* Establishes flex layout for the global expand/collapse tree control buttons */
.tree-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Ensures tree control buttons share equal width */
.tree-controls button {
    flex: 1;
}

/* Colors standard folder icons in the tree summary using the brass accent */
.summary-title i.fa-solid {
    color: var(--accent-brass);
}

/* Highlights top-level master circuit folder icons using the copper accent */
.top-level .summary-title i.fa-solid {
    color: var(--accent-copper);
}

/* Provides a direct utility class to force the brass color on icons */
.icon-brass { color: var(--accent-brass) !important; }

/* ==========================================================================
   REFLECTIONS & ACTIONS
   ========================================================================== */

/* Defines the spacing and top border separating the main text from user tools */
.reflection-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-elegant);
}

/* Stacks action buttons (like journaling and printing) on mobile views */
.reflection-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Styles the hidden textarea box that allows users to record notes */
.reflection-box {
    display: none;
    width: 100%;
    min-height: 180px;
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.6;
    padding: 1rem;
    margin-top: 1rem;
    border: 2px solid var(--border-elegant);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--text-ink);
}

/* Hides the print-only reflection rendering div from digital screens */
.print-reflection-output {
    display: none;
}

/* ==========================================================================
   FOOTER & PAGINATION
   ========================================================================== */

/* Structures the bottom next/previous/map navigation grid */
.circuit-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-elegant);
}

/* Adjusts padding and sizing specifically for the bottom pagination buttons */
.circuit-navigation .nav-btn {
    padding: 0.65rem 0.25rem;
    font-size: 0.95rem;
    text-align: center;
}

/* Wraps the reset and export action buttons at the bottom of the index */
.reset-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-elegant);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Centers and formats the copyright footer string */
.content-footer {
    text-align: center;
    font-family: var(--font-nav);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 2.5rem;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Enhances readability and spacing for laptop screens and larger displays */
@media (min-width: 769px) {
    /* Increases overall font scale for larger viewports */
    body {
        font-size: 1.45rem;
        line-height: 1.85;
    }

    /* Adds outer padding and a drop shadow to the central paper element */
    #pap {
        padding: 3rem 3.5rem;
        margin: 2rem auto;
        border-radius: 8px;
        box-shadow: 0 4px 25px rgba(0,0,0,0.5);
    }

    /* Upscales reading document titles for wide screens */
    .document-core h1.chapterTitle {
        font-size: 1.5rem;
    }

/*delete after all web pages updated with chapter Title*/
    h1.chapterTitle {
        font-size: 1.5rem;
    }

    /* Converts chapter links to a horizontal row layout instead of a stack */
    .toc-link {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }

    /* Orients reflection tools horizontally on wide screens */
    .reflection-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    /* Spreads reset buttons across the page row on laptops */
    .reset-container {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Forces optimal black-and-white ink layouts when printing the page */
@media print {
    /* Establishes standard letter-sized print margins */
    @page {
        margin: 1.5cm;
        size: letter portrait;
    }

    /* Strips out background colors and sets a strict 11pt font for physical paper */
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }

    /* Removes digital borders and drop shadows from the main wrapper */
    #pap {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Hides digital-only interface elements, interactive trackers, and buttons */
    .circuit-markers,
    .tree-controls,
    #stats-container,
    .reflection-actions,
    .reflection-box,
    .circuit-navigation,
    .reset-container,
    button {
        display: none !important;
    }

    /* Ensures the breadcrumb trail is visible on print to track location */
    .breadcrumbs {
        display: block !important;
        font-size: 9pt !important;
        color: #555555 !important;
        margin-bottom: 0.5cm !important;
    }

    /* Strips link formatting from printed breadcrumbs */
    .breadcrumbs a {
        text-decoration: none !important;
        color: #555555 !important;
    }

    /* Aligns title headers to the left and prevents page breaks immediately after */
    .document-core h1.chapterTitle {
        font-size: 14pt !important;
        color: #000000 !important;
        margin-bottom: 0.4cm !important;
        text-align: left !important;
        page-break-after: avoid;
    }
	
/*delete after all web pages updated with chapter Title*/
    h1.chapterTitle {
        font-size: 14pt !important;
        color: #000000 !important;
        margin-bottom: 0.4cm !important;
        text-align: left !important;
        page-break-after: avoid;
    }

    /* Controls paragraph orphans and widows for clean printed page breaks */
    .document-core p {
        color: #111111 !important;
        margin-bottom: 0.35cm !important;
        orphans: 3;
        widows: 3;
    }

    /* Re-styles blockquotes with a static physical background color for printing */
    .document-core blockquote {
    	font-style: italic;
   		font-weight: 400;
    	padding: 1rem 1.25rem;
    	margin: 1.75rem 0;
    	border-left: 4px solid var(--accent-brass);
    	background: #EFE6D6;
    	border-radius: 0 6px 6px 0;
    }

    /* Defines a clean separator line before the printed reflection section */
    .reflection-section {
        border-top: 1pt solid #444444 !important;
        margin-top: 0.6cm !important;
        padding-top: 0.4cm !important;
        page-break-inside: avoid;
    }

    /* Renders the user's typed digital notes cleanly into the physical print output */
    .print-reflection-output {
        display: block !important;
        background: #FAFAFA !important;
        border: 1pt solid #CCCCCC !important;
        border-left: 3pt solid #666666 !important;
        padding: 0.4cm !important;
        font-size: 10pt !important;
        color: #000000 !important;
        white-space: pre-wrap !important;
    }

    /* Prepends a static label above the user's printed notes */
    .print-reflection-output::before {
        content: "Field Reflections & Notes:";
        display: block;
        font-weight: bold;
        margin-bottom: 0.2cm;
        text-transform: uppercase;
        font-size: 8pt;
        letter-spacing: 0.05em;
    }

    /* Shrinks the footer copyright information on the final printed page */
    .content-footer {
        margin-top: 0.5cm !important;
        font-size: 8pt !important;
        color: #666666 !important;
    }
}