/* ===================================== */
/* 1. Global Resets and Variables        */
/* ===================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-color: #333;
    --background-color: #f8f8f8;
    --link-color: blue; /* Consider if this is used or overridden elsewhere */
}

body {
    font-family: sans-serif;
    line-height: 1.7;
    background-color: var(--background-color); /* Use variable for consistency */
    color: var(--primary-color);
}

/* ===================================== */
/* 2. Layout and Structural Elements     */
/* ===================================== */
.wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
}

header {
    /* If you want the header to span full width and have a background,
       add styles here, e.g., background-color: #555; padding: 10px 0; */
}

main {
    /* Styles for your main content area */
}

footer {
    text-align: center;
    margin-top: 40px;
    clear: both; /* Ensures footer clears any floated elements */
    color: #fff;
    background-color: #555;
    height: 40px;
    line-height: 40px; /* Vertically aligns text in the middle */
}

/* ===================================== */
/* 3. Navigation Bar (Navbar)            */
/* ===================================== */
nav {
    background-color: #555; /* Background for the nav bar itself */
    height: 40px;
    line-height: 40px; /* Vertically aligns list items on desktop */
    clear: both; /* Ensures nav clears any floated elements above it */
    position: relative; /* Important for positioning the nav-toggle button */
}

nav ul {
    list-style: none; /* Removes bullet points */
    display: flex; /* Uses Flexbox for horizontal layout on desktop */
    justify-content: flex-start; /* Aligns items to the start of the flex container */
    padding: 0 20px; /* Padding inside the nav bar */
}

nav li {
    margin-right: 20px; /* Spacing between navigation items on desktop */
}

nav li a {
    color: #fff; /* White text for nav links */
    text-decoration: none; /* Removes underline from links */
    padding: 10px; /* Padding around each link for click area */
}

nav li a:hover,
nav li a.current {
    color: #ffc107; /* Highlight color for hover and current page */
}

/* Mobile Menu Toggle Button (Hamburger) */
.nav-toggle {
    display: none; /* Hidden by default, only shown on mobile via media query */
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    position: absolute; /* Position relative to the nav element */
    top: 0;
    right: 10px;
    z-index: 20; /* Ensure it's above other elements */
}

/* Accessibility for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================== */
/* 4. Content Specific Styles            */
/* ===================================== */
.breadcrumbs {
    margin-bottom: 20px;
}

h1 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

h2, h3, h4 {
    margin-bottom: 15px; /* Add some default margin for other headings */
    color: var(--primary-color);
}

p {
    margin-bottom: 20px;
}

blockquote {
    margin: 0 0 20px 40px; /* Indent and add bottom margin */
    padding-left: 15px;
    border-left: 5px solid #ccc; /* Visual cue for blockquote */
    font-style: italic;
}

blockquote p {
    margin-bottom: 10px; /* Reduce bottom margin for paragraphs inside blockquote */
}

cite {
    display: block; /* Ensure cite is on its own line */
    text-align: right;
    font-size: 0.9em;
    color: #777;
    margin-top: 5px;
}

/* Images and Figures */
.expandable-image {
    margin-bottom: 20px; /* Space below figures */
    text-align: center; /* Center image and caption if possible */
}

.expandable-image img {
    max-width: 100%; /* Ensure images don't overflow their container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes extra space below image */
    margin: 0 auto; /* Center block-level image */
}

figcaption {
    margin-top: 10px;
    font-style: italic;
    color: #666;
}

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    margin: 20px auto; /* Center the video */
    max-width: 800px; /* Adjust as needed */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse; /* Removes space between borders */
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    color: var(--primary-color);
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ===================================== */
/* 5. Responsive Design / Media Queries  */
/* ===================================== */
@media (max-width: 768px) {
    .wrapper {
        padding: 15px; /* Reduce padding on smaller screens */
    }

    nav {
        height: auto; /* Allow nav height to expand when menu is open */
        line-height: normal; /* Reset line-height for mobile, as list items will stack */
        padding-bottom: 0; /* Adjust if you had extra padding here */
    }

    /* Hide the default desktop flex layout for UL on mobile and stack items vertically */
    nav ul {
        flex-direction: column; /* Stack items vertically */
        position: absolute;
        top: 100%; /* Positions the dropdown below the nav bar */
        left: 0;
        width: 100%;
        background-color: #555; /* Same background as nav bar */
        z-index: 10;
        padding: 0; /* Reset padding for stacked items */
        display: none; /* Hide by default on mobile */
    }

    /* Show the menu when 'show' class is added by JS */
    nav ul.show {
        display: flex; /* Overrides 'display: none' when the 'show' class is present */
    }

    nav li {
        margin-right: 0; /* Remove horizontal spacing */
        width: 100%; /* Make each list item take full width */
    }

    nav li a {
        padding: 15px; /* Increase clickable area for touch */
        text-align: center; /* Center text within mobile menu items */
        display: block; /* Make the whole link area clickable */
    }

    /* Show the new HTML nav-toggle button on mobile */
    .nav-toggle {
        display: block;
    }

    /* Hide the old pseudo-element hamburger icon */
    nav::after {
        display: none;
    }

    /* Article images for smaller screens */
    article img {
        max-width: 100%;
        height: auto;
        float: none;
        margin-right: 0;
        margin-bottom: 15px;
    }
}
/* ===================================== */
/* 6. Prominent Link Styles              */
/* ===================================== */

.dictionary-promo {
    margin: 30px 0; /* Adds vertical spacing around the link */
    text-align: center; /* Centers the link horizontally */
}

.dictionary-promo a {
    display: inline-block; /* Allows setting padding, width, height, and transforms */
    background-color: #007bff; /* A prominent blue background */
    color: white; /* White text for contrast */
    padding: 20px 30px; /* Large padding for a substantial button feel */
    font-size: 1.5em; /* Larger font size */
    font-weight: bold;
    text-decoration: none; /* Removes underline from the link */
    border-radius: 8px; /* Slightly rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
}

.dictionary-promo a:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Lifts the button slightly on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhances the shadow on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .dictionary-promo a {
        font-size: 1.2em; /* Adjust font size for smaller screens */
        padding: 15px 20px; /* Adjust padding for smaller screens */
        width: calc(100% - 30px); /* Make it fill almost full width, accounting for wrapper padding */
        display: block; /* Make it a block element on small screens for better touch targets */
    }
}