/**
 * Radestrian Dictionary - Main Stylesheet
 * Organized by sections: Base, Header, Search, Entry Display, Navigation, etc.
 */

/* ==========================================================================
   RESPONSIVE OVERRIDES - Mobile & Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .site-banner-mobile {
        background: linear-gradient(
            to bottom,
            #00112a 0, #00112a 24px,
            #e6e5de 24px, #e6e5de 96px,
            #00112a 96px, #00112a 100%
        ) !important;
        color: #222 !important;
    }
}

@media (max-width: 900px) {
    .main-content {
        margin-top: 20px !important;
    }
    /* Show mobile banner and hide fixed header on smaller viewports */
    .header-fixed {
        display: none !important;
    }
    .site-banner-mobile {
        display: flex !important;
        margin-top: 0 !important; /* no offset when fixed header is hidden */
        position: fixed;
        top: 120px; /* Position below the mobile search bar */
        left: 0;
        right: 0;
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        z-index: 1000; /* Ensure it stays above page content */
    }
    /* Show mobile search bar with flag background pattern */
    .mobile-search-container {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        width: 100vw;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Add top padding to body to account for fixed mobile search bar and banner */
    body {
        padding-top: 260px !important; /* 120px search bar + 120px banner + 20px spacing */
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-search-flag-bg {
        background: linear-gradient(
            to bottom,
            #00112a 0, #00112a 24px,
            #e6e5de 24px, #e6e5de 96px,
            #00112a 96px, #00112a 100%
        );
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1em;
        box-sizing: border-box;
    }
    
    .mobile-search-container .search-form {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
    }
    
    /* Ensure mobile search bar matches desktop styling */
    .mobile-search-container .search-bar-bevel {
        display: flex;
        align-items: center;
        border: none !important;
        border-radius: 0 !important;
        overflow: hidden;
        width: 100%;
        background: #fff !important;
        height: 71px;
        box-shadow: none !important;
    }
    
    .mobile-search-container .search-input {
        flex: 1;
        min-width: 150px;
        padding: 12px;
        border: none !important;
        outline: none !important;
        font-size: 1.4em;
        font-family: 'Source Sans Pro', Arial, sans-serif;
        background: #fff !important;
    }
    
    .mobile-search-container .search-input:focus {
        outline: none !important;
        border: none !important;
    }
    
    .mobile-search-container .union-jack-section,
    .mobile-search-container .flag-display-container {
        background: #fff !important;
        border: none !important;
    }
}

@media (max-width: 1100px) {
    .flag-emblem {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .site-banner-mobile .dictionary-title .rrede-title,
    .site-banner-mobile .dictionary-title .radestrian-title {
        display: none !important;
    }
    .site-banner-mobile .dictionary-title .compact-title {
        display: block !important;
    }
}

.site-banner-mobile .dictionary-title .compact-title {
    display: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* ==========================================================================
   BASE LAYOUT
   ========================================================================== */

.main-content {
    margin-top: 130px;
}
/* ==========================================================================
   RADESTRIAN FLAG HEADER
   ========================================================================== */


.site-banner-mobile {
            display: none;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100vw;
            max-width: 100vw;
            box-sizing: border-box;
            overflow-x: hidden;
            height: 120px;
            background: #e0e0e0 !important;
            color: #111 !important;
            padding-left: 20px;
            padding-right: 20px;
        }

.site-banner-mobile * {
            color: #111 !important;
        }

/* Override for nav links in mobile banner to match desktop styling */
.site-banner-mobile .nav-link-native {
    color: #001024 !important;
    font-weight: 600 !important;
    /* Match desktop visual size regardless of parent font-size */
    font-size: 1rem !important;
}

.site-banner-mobile .nav-link-english {
    color: #222 !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
}

/* Remove hover effects from mobile banner navigation */
.site-banner-mobile .nav-link-bilingual:hover {
    background: none !important;
}

.site-banner-mobile .nav-link:hover {
    background: none !important;
    color: inherit !important;
}

@media (prefers-color-scheme: dark) {
            .site-banner-mobile {
                background: #e0e0e0 !important;
                color: #111 !important;
            }
            .site-banner-mobile * {
                color: #111 !important;
            }
            /* Override for nav links in mobile banner to match desktop styling */
            .site-banner-mobile .nav-link-native {
                color: #001024 !important;
                font-weight: 600 !important;
                font-size: 1rem !important;
            }
            .site-banner-mobile .nav-link-english {
                color: #222 !important;
                font-weight: 400 !important;
                font-size: 0.75rem !important;
            }
            
            /* Remove hover effects from mobile banner navigation */
            .site-banner-mobile .nav-link-bilingual:hover {
                background: none !important;
            }
            
            .site-banner-mobile .nav-link:hover {
                background: none !important;
                color: inherit !important;
            }
        }

.site-banner-mobile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 24px;
    background: #00112a;
    z-index: 1;
    pointer-events: none;
}
.site-banner-mobile::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 24px;
    background: #00112a;
    z-index: 900;
    pointer-events: none;
    }

/* Search bar in header */
.header .search-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
}
.header .search-bar-bevel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    background: #fff !important;
}

/* Ensure all elements in header search bar have white background */
.header .search-input,
.header .union-jack-section,
.header .flag-display-container {
    background: #fff !important;
    border: none !important;
}

.site-banner-mobile .flag-emblem {
        margin-left: 1em;
        margin-right: 0;
        height: 100px;
        width: auto;
    }

.site-banner-mobile .dictionary-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right;
        margin: 0 20px 0 1em;
        background: transparent !important;
}

.site-banner-mobile .dictionary-title * {
    background: transparent !important;
}

/* Badge-specific colors - override any parent color styles */
.rrede-badge, 
.radestrian-badge,
span.rrede-badge,
span.radestrian-badge,
.dictionary-title .rrede-badge,
.dictionary-title .radestrian-badge,
.site-title-container .rrede-badge,
.site-title-container .radestrian-badge {
    color: #c83737 !important;
    background: #e6e6e6 !important;
}

/* Dark mode overrides for header */
@media (prefers-color-scheme: dark) {
    .flag-header, .flag-header *, .dictionary-title, .dictionary-title * {
        color-scheme: light !important;
        background: #fff !important;
        color: #222 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-blend-mode: normal !important;
        box-shadow: none !important;
        border-color: #ddd !important;
        text-shadow: none !important;
    }
    
    /* Keep badge colors even in dark mode */
    .rrede-badge, 
    .radestrian-badge,
    span.rrede-badge,
    span.radestrian-badge,
    .dictionary-title .rrede-badge,
    .dictionary-title .radestrian-badge,
    .site-title-container .rrede-badge,
    .site-title-container .radestrian-badge {
        color: #c83737 !important;
        background: #e6e6e6 !important;
    }

    @media (max-width: 900px) {
        .flag-header, .flag-header *, .site-banner-mobile, .site-banner-mobile *, .dictionary-title, .dictionary-title * {
            color: #222 !important;
            text-shadow: none !important;
        }
        
        /* Keep badge colors in mobile dark mode too */
        .rrede-badge, 
        .radestrian-badge,
        span.rrede-badge,
        span.radestrian-badge,
        .dictionary-title .rrede-badge,
        .dictionary-title .radestrian-badge,
        .site-title-container .rrede-badge,
        .site-title-container .radestrian-badge {
            color: #c83737 !important;
            background: #e6e6e6 !important;
        }
    }
}
.dictionary-title a {
    font-size: 0.95em !important;
    font-weight: 600 !important;
}
.dictionary-title a span {
    font-size: 0.85em !important;
    font-weight: 600 !important;
}
.dictionary-title a span:first-child {
    font-size: 1.1em !important;
    font-weight: 600 !important;
}
.dictionary-title a span:last-child {
    font-size: 0.85em !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

body {
    background: #00112a;
}

/* Links hover effect */
a:hover, a:focus, a:active {
    color: #c20000 !important;
    transition: color 0.2s;
}

/* ==========================================================================
   FLAG HEADER LAYOUT
   ========================================================================== */
.flag-header {
    color-scheme: light;
    position: absolute;
    top: 0;
    width: 100%;
    min-width: 100%;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 120px;
    background: linear-gradient(
        to bottom,
        #00112a 0, #00112a 24px,
        #e6e5de 24px, #e6e5de 96px,
        #00112a 96px, #00112a 100%
    ) !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 10;
    padding-left: 0px;
    clip-path: inset(0 0 0 0);
    color: #222 !important;
}

.flag-header * {
    color: #222 !important;
    background: none !important;
}

/* Badge colors must be preserved - don't override with generic span rules */

/* Bottom ribbon overlay above emblem */
.flag-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 24px;
    background: #00112a;
    z-index: 100;
    pointer-events: none;
}

.flag-emblem {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    height: 90px;
    width: 200px;
    max-width: 90vw;
    z-index: 1;
    pointer-events: none;
    display: block;
    margin-left: -1.2em;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 20px 0;
    gap: 8px;
}
.pagination-info {
    font-size: 1em;
    color: #666;
    margin-bottom: 4px;
}
.pagination-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ==========================================================================
   ENTRY DISPLAY STYLES
   ========================================================================== */

.sense-italic {
    font-style: normal;
    color: #2c3e50;
}
.example-block {
    margin-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
}
.example-rad {
    display: block;
    font-weight: 600;
    font-size: 1em;
    color: #2c3e50;
    margin-bottom: 2px;
}
.example-trans {
    display: block;
    font-weight: 400;
    font-size: 1em;
    color: #2c3e50;
    margin-bottom: 2px;
    margin-left: 2em;
}
.example-block u {
    text-decoration: underline;
    color: inherit;
    font-weight: inherit;
        text-underline-position: under;
}

/* ==========================================================================
   FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/* ==========================================================================
   IPA FORMATTING
   ========================================================================== */

.ipa {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1.15em;
    letter-spacing: 0.02em;
    font-style: normal;
    font-weight: 400;
}

.ipa::before {
    content: "/";
}
.ipa::after {
    content: "/";
}

/* IPA line below a form */
.ipa-line {
    display: block;
    margin-top: 2px;
}
/* Scope smaller IPA only inside inflection modal (tables), not entry headers */
.inflection-modal .ipa-line .ipa {
    font-size: 0.9em; /* slightly smaller on the IPA line */
    color: #555; /* subtle, readable tone */
}

/* Make forms in inflection tables thicker */
.inflection-modal .form-text {
    font-weight: 600 !important;
}

/* ==========================================================================
   BASE TYPOGRAPHY & LAYOUT
   ========================================================================== */

body {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    line-height: 1.5;
    padding: 20px;
    background-color: #fefefe;
    font-weight: 400;
    /* Ensure padding doesn't cause horizontal overflow at desktop widths */
    box-sizing: border-box;
    /* Let body span the viewport width (fit-content here caused overflow/inconsistencies) */
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.header {
    text-align: center;
    padding-bottom: 20px;
    background: none !important;
    color: #222 !important;
}
.header h1 {
    font-size: 2.5em;
    color: #2c3e50;
    margin: 0;
    font-weight: 900;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.navigation {
    text-align: center;
}
.nav-link {
        position: relative;
        padding-bottom: 12px;
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #ddd;
        position: relative;
        padding-bottom: 12px;
        margin-top: 0; /* Reset individual link movement */
}
.nav-link:hover {
    background: #2c3e50;
    color: white;
    }

    .nav-link::after {
        content: "";
        display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c83737;
    border: 1px solid #00112a;
    display: block;
    margin-left: auto;
    margin-right: auto;
        margin-top: 5px;
    margin-bottom: 0;
    box-sizing: content-box;
    transition: width 0.2s cubic-bezier(0.4,0,0.2,1), border-radius 0.2s cubic-bezier(0.4,0,0.2,1);
    }

    /* Hover effect for nav-link circle to expand to rounded line */
    .nav-link:hover::after {
    width: calc(100% + 6px);
    height: 3px;
    border-radius: 999px;
    background: #c83737;
    border: 1px solid #00112a;
        margin-top: 5px;
    display: block;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: 0;
    box-sizing: content-box;
}

/* Additional header and navigation classes for inline style cleanup */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 1000;
}

.flag-header-relative {
    position: relative;
}

.header-flex-container {
    display: flex;
    align-items: center;
    height: 180px;
    width: 100vw;
    max-width: 100vw;
    gap: 0;
}

.flag-emblem {
    margin-left: 1em;
    margin-right: 0;
}

.search-form {
    pointer-events: auto;
    flex: 1;
    margin: 0;
    min-width: 220px;
    max-width: 100%;
}

.search-bar-bevel {
    display: flex;
    align-items: center;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    width: 100%;
    background: #fff !important;
    height: 71px;
    box-shadow: none !important;
}

.union-jack-section {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    margin: 0;
}

.flag-display-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    vertical-align: middle;
    margin: 0;
}

.search-btn-custom {
    border: none !important;
    border-radius: 0 !important;
    background: #00112b !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 1.1em;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    padding: 0 1em;
    width: auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.search-btn-title {
    font-weight: bold;
    font-size: 1em;
    color: #fff !important;
}

.search-btn-subtitle {
    font-size: 0.8em;
    font-weight: semibold;
    color: #fff !important;
    margin-top: 2px;
}

.dictionary-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    height: fit-content;
    margin: 0 20px 0 1em;
}

.title-flex-container {
    display: flex;
    align-items: center;
    gap: 2em;
    margin: 0;
}

.nav-links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
}

.nav-links-group {
    display: flex;
    gap: 1.5em;
    margin: 0;
}

.nav-link-bilingual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
}

.nav-link-native {
    font-weight: 600;
    font-size: 1.2em;
    color: #001024;
}

.nav-link-english {
    font-size: 0.9em;
    font-weight: 400;
    color: #222;
    margin-top: 2px;
}

.site-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin: 0;
}

.site-title-link {
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
}

.rrede-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
    line-height: 1;
    margin: 0;
}

.rrede-badge {
    font-size: 1.6rem;
    font-weight: 600 !important;
    color: #c83737 !important;
    background: #e6e6e6 !important;
    border-radius: 8px;
    border: 2px solid #000 !important;
    box-shadow: none;
    padding: 3px 6px;
}

.title-spacer {
    height: 3px;
}

.radestrian-title {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.radestrian-badge {
    color: #c83737 !important;
    font-weight: 600 !important;
    background: #e6e6e6 !important;
    border-radius: 8px;
    border: 2px solid #000 !important;
    box-shadow: none;
    padding: 3px 6px;
}

.site-banner-mobile {
    margin-top: 120px;
}

/* Hidden by default; displayed only on mobile via media query */
.mobile-search-container {
    display: none;
}

.site-banner-flex {
    display: flex;
    align-items: center;
    gap: 2em;
    width: 100%;
    justify-content: space-between;
}

.site-banner-nav {
    display: flex;
    gap: 2em;
}

.site-banner-nav-group {
    display: flex;
    gap: 1.5em;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.compact-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
    line-height: 1;
    margin: 0;
}

.compact-title span {
    display: block;
    line-height: 1;
    margin: 0;
}

.main-content-with-header {
    margin-top: 120px;
}

.browse-nav-flex {
    pointer-events: auto;
    flex: 1;
    margin: 0;
    min-width: 220px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2em;
    height: 71px;
    background: #fff !important;
}

.pagination-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
}

.pagination-links {
    display: flex;
    gap: 0.5em;
}

.page-link {
    padding: 0.4em 0.9em;
    border-radius: 6px;
    border: 1px solid #bbb;
    color: #222;
    font-weight: 600;
    text-decoration: none;
}

.page-link.active {
    padding: 0.4em 1.2em;
    border: 1px solid #c83737 !important;
    background: #fff;
    color: #c83737 !important;
    font-weight: 700;
}

.page-link.disabled {
    color: #888;
    pointer-events: none;
    opacity: 0.5;
}

.page-link.ellipsis {
    padding: 0.4em 0.7em;
    color: #888;
    border: none;
}

.page-link.btn-clear {
    margin-left: 0.5em;
    padding: 0.15em 0.7em !important;
    height: fit-content;
}

.browse-shrink-fit {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
    box-sizing: border-box;
}

.pagination-info {
    font-size: 1em;
    color: #222;
    font-weight: 600;
    display: block;
    margin-bottom: 1em;
}

.entry {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 10px;
}

.entry:last-child {
    border-bottom: none;
}

/* ==========================================================================
   DICTIONARY ENTRY COMPONENTS
   ========================================================================== */

.headword {
    font-size: 1.4em;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headword-content {
    display: inline;
}

.headword-ref {
    font-size: 0.8em;
    vertical-align: super;
    color: #666;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-weight: 400;
    position: relative;
    top: -0.3em;
    margin-left: 2px;
}
.pos, .pronunciation {
    vertical-align: baseline;
    position: static;
    font-size: inherit;
    font-style: normal;
    color: #666;
    margin-left: 10px;
    font-weight: 400;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    display: inline-block;
}
.pos {
    font-size: 0.8em !important;
    font-style: italic;
    color: #666;
    margin-left: 10px;
    font-weight: 400;
    font-family: 'Noto Sans', 'Source Sans Pro', Arial, sans-serif;
    display: inline-block;
    vertical-align: baseline;
    position: static;
}
.labels {
    margin: 5px 0;
}
.label {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin-right: 5px;
}

/* Add space between POS and first label */
.pos + .label {
    margin-left: 0.7em;
}

.label:first-of-type {
    margin-left: 0.7em;
}

.label-separator {
    font-size: 0.7em;
    font-weight: 400;
    color: #666;
    margin-right: 0.3em;
}
.inflections {
    margin: 8px 0;
    font-size: 0.95em;
}
.inflection {
    margin-right: 15px;
    color: #666;
}
.inflection-form {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    margin-left: 5px;
    color: #495057;
}
.inflection-text {
    font-weight: 700;
    color: #2c3e50;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.senses {
    margin: 10px 0;
}
.sense {
    text-align: left;
    margin: 8px 0 8px 20px;
}
.sense-number {
    font-weight: 700;
    color: #2c3e50;
    margin-right: 8px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.entry * {
    text-align: left !important;
}

.gloss {
    font-weight: 400;
    color: #2c3e50;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
        text-underline-position: under;
        transition: text-decoration-style 0.2s;
}
    /* Hover effect for English glosses in senses */
    .gloss:hover {
        text-decoration: underline solid;
        text-underline-offset: 2px;
        text-underline-position: under;
    }
.radestrian-word {
    color: #2c3e50;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.note {
    font-style: normal;
    color: #666;
    font-size: 0.9em;
}
.sub-block {
    margin-left: 2em;
    margin-top: 0.3em;
    display: block;
}
.sub-heading {
    font-style: normal;
    color: #888;
    font-size: 0.9em;
    font-weight: 500;
}
.sub-list {
    font-style: normal;
    color: #888;
    font-size: 0.9em;
}
sub l, .sub l {
    font-weight: 500;
}
.sub a {
    font-weight: 500;
}
.etymology {
    margin: 10px 0;
    font-size: 0.95em;
    color: #555;
    font-style: normal;
    background: #f8f9fa;
    padding: 8px;
    border-left: 3px solid #2c3e50;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.etymology .gloss,
.etymology a {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-weight: bold;
}

.proto-form {
    font-family: 'Noto Sans', 'Source Sans Pro', Arial, sans-serif;
    background: #e9ecef;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: normal;
    font-size: 0.925em;
    line-height: 1.4;
    display: inline-block;
}
.gl-marker {
    font-size: 0.9em;
    color: #666;
}
.t-marker {
    font-size: 0.9em;
    color: #666;
    font-style: normal;
}
.language-name {
    font-variant: small-caps;
    font-weight: 700;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.see-refs {
    margin: 8px 0;
    font-size: 0.95em;
}

.see-refs::before {
    content: "See also: ";
    font-style: normal;
    color: #666;
}
.see-refs .see-ref {
    margin-right: 0;
    margin-left: 0;
}
.see-refs .see-ref:last-child {
    margin-right: 0;
}
.see-ref {
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.see-ref:hover {
    text-decoration: none;
}
.see-ref-sep {
    margin: 0;
    color: #666;
}

/* ==========================================================================
   INFLECTION TABLES & MODALS
   ========================================================================== */

.inflection-tables {
    margin: 10px 0 6px 0;
}

/* Inflection button styling */
.inflection-button-container {
    margin: 12px 0 16px 0;
}

.inflection-button {
    cursor: pointer;
    font-weight: 700;
    color: #2c3e50;
    padding: 10px 18px;
    margin: 0;
    user-select: none;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: background 0.2s, transform 0.1s;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    text-align: left;
}

.inflection-button:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.inflection-button:active {
    transform: translateY(0);
}

/* Modal overlay */
.inflection-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000; /* above mobile banners and search (1000/1001) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Modal content */
.inflection-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
}

.inflection-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inflection-modal-title {
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    font-size: 1.1em;
}

.inflection-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.inflection-modal-close:hover {
    background: #e9ecef;
    color: #333;
}

.inflection-modal-body {
    padding: 0;
    overflow: auto;
    flex: 1;
}
/* Table styling within modals */
.inflection-modal table.wikitable.inflection.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    min-width: max-content;
}

.inflection-modal table.wikitable.inflection.table th,
.inflection-modal table.wikitable.inflection.table td {
    border: 0.5px solid #ddd;
    padding: 4px 6px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    min-width: fit-content;
}

.inflection-modal table.wikitable.inflection.table th {
    background: #f3f4f6;
    font-weight: 700;
}

.inflection-modal .note {
    font-size: 0.9em;
    font-style: italic;
    color: #666;
    margin: 8px 0;
}

/* ==========================================================================
   SEARCH INTERFACE & RESULTS
   ========================================================================== */

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}
.no-results {
    text-align: center;
    padding: 30px;
    color: #666;
    font-style: italic;
}
.sample-entries {
    margin-top: 30px;
}
.sample-entries h3 {
    color: #2c3e50;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 5px;
}

/* Highlight search terms */
.entry .highlight, 
.gloss .highlight, 
.headword .highlight, 
.sense .highlight, 
.results-section .highlight, 
.results-header .highlight, 
.inflection-text .highlight, 
.inflection-form .highlight, 
.labels .highlight, 
.note .highlight, 
.proto-form .highlight, 
.see-ref .highlight {
    background-color: yellow !important;
    color: inherit !important;
    border-radius: 2px;
    font-weight: inherit;
}

.search-section {
    background: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 30px;
    border: none;
    /* Constrain main page content to match browse width */
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
}
.search-form {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.search-input {
    flex: 1;
    min-width: 250px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1.6em;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.search-input:focus {
    outline: none;
    border-color: #2c3e50;
}

/* Search button with slide animation */
.search-btn {
    background: #2c3e50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    transform: translateX(1px);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}

.search-btn.slide-right,
.search-btn.slide-out {
    transform: translateX(101%);
    pointer-events: none;
}

.search-btn.slide-in {
    transform: translateX(1px);
    pointer-events: auto;
}

.search-btn:hover {
    background: #34495e;
}
.search-options {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    width: 220px; /* Fixed width for flag selection area */
    min-width: 220px;
    max-width: 220px;
}

.search-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* ==========================================================================
   RESPONSIVE - MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .search-btn {
        background: #2c3e50;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Source Sans Pro', Arial, sans-serif;
        transform: translateX(1px); /* Shift right by 1px to fix gap */
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        will-change: transform;
    }
}

/* ==========================================================================
   ALPHABET NAVIGATION
   ========================================================================== */

.alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 30px auto 20px auto;
    justify-content: center;
    /* Constrain width to prevent desktop overextension */
    max-width: 900px;
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
}
.alphabet-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 18px 24px;
    box-shadow: 0 2px 8px rgba(44,62,80,0.04);
    min-width: 220px;
    text-align: center;
}
.alphabet-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}
.alphabet-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 5px;
}
.letter-link {
    display: inline-block;
    font-size: 1.15em;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 5px;
    text-decoration: none;
    color: #2c3e50;
    background: #e9ecef;
    border: 1px solid #ddd;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    margin-bottom: 2px;
}
.letter-link.available {
    cursor: pointer;
}
.letter-link.unavailable {
    color: #aaa;
    background: #f3f3f3;
    border: 1px solid #eee;
    cursor: not-allowed;
    opacity: 0.7;
}
.letter-link.active {
    background: #2c3e50;
    color: #fff;
    border: 1.5px solid #2c3e50;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
}
.letter-link.available:hover {
    background: #34495e;
    color: #fff;
    border: 1.5px solid #34495e;
}

.letter-link.available:hover, 
.letter-link.active {
    color: #fff !important;
    background: #34495e !important;
    border-color: #34495e !important;
}

/* Non-native letters (e.g., Q and W) use a dashed outline to distinguish them */
.letter-link.non-native {
    border-style: dashed;
}

.letter-link.unavailable.non-native {
    border-style: dashed;
}

.letter-link.non-native.available:hover,
.letter-link.non-native.active {
    border-style: dashed;
}

/* Subtle styling for separator between native and non-native letters */
.alphabet-letters .letter-separator {
    color: #6b7280;
    font-size: 1.7em;
}

/* ========================================================================
   VIEWPORT LAYOUT FIXES
   Ensure the page root spans the viewport so headers can full-bleed to 100vw
   ======================================================================== */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden; /* prevent horizontal scroll from full-bleed headers */
}

/* ==========================================================================
   LINK STYLES
   ========================================================================== */

a.see-ref, 
a.gloss-link {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
        text-underline-position: under;
    transition: text-decoration-style 0.2s;
}

a.see-ref:hover, 
a.gloss-link:hover {
    text-decoration: underline solid;
    text-underline-offset: 2px;
    text-underline-position: under;
}
.ref-number {
    font-size: 0.95em;
    vertical-align: super;
    margin-left: 1px;
    color: #2c3e50;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.results-section {
    margin-bottom: 30px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* Constrain results on the home/search page to the same content width as browse */
.results-section {
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
}

/* ==========================================================================
   COPY LINK BUTTON
   ========================================================================== */

.copy-link-btn {
    margin-left: 10px;
    padding: 2px 4px;
    background: #e9ecef;
    color: #2c3e50;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.copy-link-btn:hover {
    background: #dee2e6;
    border-color: #bbb;
}

.copy-link-btn svg {
    display: block;
}