/* Basic Resets & Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Georgia', serif; /* A classic, readable serif font */
    line-height: 1.6;
    color: #333; /* Dark grey for text for good contrast */
    background-color: #fcfcfc; /* A very light off-white, easy on the eyes */
    padding: 20px; /* Add some padding around the whole body */
}

/* Page Break Styling (for visual separation, not actual printing) */
.page-break {
    border-top: 1px dashed #ccc;
    margin-top: 40px; /* More space before a new "page" */
    padding-top: 40px; /* More padding after the dashed line */
}

/* Headings */
h1 {
    font-size: 2.2em; /* Larger for main title */
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.8em;
    color: #2a2a2a;
    border-bottom: 1px solid #eee; /* Subtle underline for sections */
    padding-bottom: 5px;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.4em;
    color: #3a3a3a;
    margin-bottom: 15px;
}

/* Corrected .section-title usage */
/* Apply this to the main section title, typically an H2 or H1 */
.section-title {
    font-size: 1.5em; /* Adjust as needed, but typically slightly smaller than main H1 */
    font-weight: bold;
    margin-bottom: 25px;
    color: #0056b3; /* A soft blue for section titles */
    /* If this class is on an h1 or h2, their existing text-align might apply */
    text-align: left; /* Ensure it's left-aligned if it's a section header */
}

/* Specific adjustment for "Section 1" span in H1/H2 (if HTML structure is like this) */
/* This targets the <span> inside an <h2>, which is how 'Section 1' is structured in your HTML */
h1 span.section-title, /* If you had <h1 class="main-title">Ngaanyatjarra Word List <span class="section-title">Section 1</span></h1> */
h2 span.section-title { /* For <h2 class="section-title">Section 1</h2> or <h2><span class="section-title">Section 1</span></h2> */
    font-size: 0.8em; /* Make it smaller relative to its parent heading */
    color: #555; /* Mute its color */
    margin-left: 10px; /* Space it from the main heading text */
    display: inline; /* Ensure it behaves like text within the heading */
}


/* Paragraphs */
p {
    margin-bottom: 1em;
}

/* List Items (for introduction and pronunciation guide) */
ul {
    list-style-type: disc;
    margin-left: 25px;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

/* Description List for Pronunciation Guide */
dl {
    margin-bottom: 20px;
    display: grid; /* Use grid for a more organized layout */
    grid-template-columns: auto 1fr; /* First column fits content, second takes rest */
    gap: 5px 15px; /* Row and column gap */
}

dt {
    font-weight: bold;
    color: #555; /* Slightly muted for the sound itself */
}

dd {
    margin-left: 0; /* Remove default margin */
}

/* Individual Word List Item (Ngaanyatjarra word and its English meaning) */
/* This is crucial: .word-list-item is the direct container of strong and span */
.word-list-item {
    display: flex; /* Use flexbox to align the strong and span horizontally */
    align-items: baseline; /* Align text at the baseline */
    margin-bottom: 5px; /* Add vertical spacing between individual word entries */
    /* flex-wrap: wrap; if you expect meanings to sometimes wrap below the word */
}

/* Styling for the Ngaanyatjarra word itself */
.word-list-item strong.ngaanyatjarra-word { /* More specific selector */
    flex-shrink: 0; /* Prevent the word from shrinking */
    margin-right: 10px; /* Space between word and definition */
    color: #007bff; /* A distinct color for the word itself */
    font-size: 1.1em; /* Make the word slightly larger and bolder */
    min-width: 120px; /* Give the Ngaanyatjarra words a minimum width for alignment */
    /* Adjust min-width as needed to align the English meanings better */
}

/* Styling for the English meaning */
.word-list-item span.english-meaning {
    flex-grow: 1; /* Allows the meaning to take up available space */
}

/* Source Information (for introduction pages) */
.source-info {
    font-style: italic;
    color: #666;
    margin-top: 20px;
    border-left: 3px solid #ccc;
    padding-left: 15px;
}

.source-info p {
    margin: 5px 0;
}

.source-info strong {
    font-weight: normal; /* Override default strong for subtle source labels */
    color: #444;
}

/* Page Numbers (from the original PDF, kept for visual reference) */
/* More robust selector for page numbers */
.page-break > p:last-child {
    text-align: right;
    font-size: 0.9em;
    color: #888;
    margin-top: 20px;
    margin-bottom: 0;
}