/**
 * SNW Glossary - Frontend Styles
 *
 * Styles for the glossary term display and blocks.
 * Designed for compatibility with Twenty Twenty-Five theme.
 */

/* ==========================================================================
   Single Glossary Term Template
   ========================================================================== */

.snw-glossary-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.snw-glossary-term {
    background: var(--wp--preset--color--base, #fff);
}

.snw-glossary-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

.snw-glossary-title {
    font-size: var(--wp--preset--font-size--x-large, 2.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.snw-glossary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-size: var(--wp--preset--font-size--medium, 1.125rem);
}

/* Single page glossary meta - larger display */
.snw-glossary-term .snw-glossary-meta {
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    margin-bottom: 1.5rem;
}

.snw-glossary-term .snw-glossary-meta .snw-glossary-pronunciation,
.snw-glossary-term .snw-glossary-meta .snw-glossary-part-of-speech {
    font-size: 0.85em;
    padding: 0.25rem 0.5rem;
}

.snw-glossary-pronunciation,
.snw-glossary-term-link .snw-glossary-pronunciation,
.snw-glossary-header .snw-glossary-pronunciation {
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial, sans-serif;
    color: var(--snw-pronunciation-color, #555) !important;
    background: var(--snw-pronunciation-bg, #e5e5e5);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: var(--snw-pronunciation-size, 0.85em);
}

.snw-glossary-part-of-speech {
    font-style: italic;
    color: var(--snw-pos-color, #666);
    background: var(--snw-pos-bg, transparent);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: lowercase;
    font-size: var(--snw-pos-size, 0.85em);
}

.snw-glossary-content {
    font-size: var(--wp--preset--font-size--medium, 1.125rem);
    line-height: 1.7;
}

/* Block theme single page content styling */
.snw-glossary-term .snw-glossary-content {
    margin-bottom: 2rem;
}

/* Inline "Learn More" link */
.snw-glossary-inline-link {
    color: var(--wp--preset--color--primary, #0073aa);
    text-decoration: underline;
    font-weight: 500;
}

.snw-glossary-inline-link:hover,
.snw-glossary-inline-link:focus {
    color: var(--wp--preset--color--contrast, #000);
}

.snw-glossary-footer {
    padding: 2rem 0;
}

/* Big black "Back to Glossary" button */
.snw-glossary-back-link {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--wp--preset--color--contrast, #000);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.snw-glossary-back-link:hover,
.snw-glossary-back-link:focus {
    opacity: 0.85;
    color: var(--wp--preset--color--base, #fff);
}

/* ==========================================================================
   Glossary Term Block
   ========================================================================== */

.snw-glossary-term-block {
    padding: 1.5rem;
    background: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
    border-radius: 8px;
}

.snw-glossary-term-block .snw-glossary-term-header {
    margin-bottom: 1rem;
}

.snw-glossary-term-block .snw-glossary-term-title {
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    margin: 0 0 0.5rem 0;
}

.snw-glossary-term-block .snw-glossary-term-title a {
    color: inherit;
    text-decoration: none;
}

.snw-glossary-term-block .snw-glossary-term-title a:hover,
.snw-glossary-term-block .snw-glossary-term-title a:focus {
    color: var(--wp--preset--color--primary, #0073aa);
}

.snw-glossary-term-block .snw-glossary-term-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.snw-glossary-term-block .snw-glossary-term-definition {
    line-height: 1.6;
}

.snw-glossary-term-block .snw-glossary-term-definition > *:last-child {
    margin-bottom: 0;
}

.snw-glossary-term-block .snw-glossary-term-external {
    margin-top: 1.25rem;
}

/* ==========================================================================
   Glossary List Block
   ========================================================================== */

.snw-glossary-list-block {
    container-type: inline-size;
}

/* Alphabet Filter */
.snw-glossary-alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

.snw-glossary-filter-btn {
    padding: 0.5rem 1rem;
    background: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 500;
    color: var(--wp--preset--color--contrast, #000);
    transition: all 0.2s ease;
}

.snw-glossary-filter-btn:hover,
.snw-glossary-filter-btn:focus {
    background: var(--wp--preset--color--contrast-3, #f5f5f5);
    border-color: var(--wp--preset--color--contrast-2, #999);
}

.snw-glossary-filter-btn.active {
    background: var(--wp--preset--color--contrast, #000);
    border-color: var(--wp--preset--color--contrast, #000);
    color: var(--wp--preset--color--base, #fff);
}

/* Terms Container */
.snw-glossary-terms-container {
    --snw-glossary-columns: 1;
}

@container (min-width: 600px) {
    .snw-glossary-terms-container {
        column-count: var(--snw-glossary-columns);
        column-gap: 2rem;
    }
}

/* Letter Groups */
.snw-glossary-letter-group {
    break-inside: avoid;
    margin-bottom: 2rem;
}

.snw-glossary-letter-heading {
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wp--preset--color--contrast, #000);
}

.snw-glossary-terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.snw-glossary-term-item {
    margin-bottom: 0.75rem;
}

.snw-glossary-term-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.snw-glossary-term-link:hover,
.snw-glossary-term-link:focus {
    border-bottom-color: var(--wp--preset--color--contrast-3, #ddd);
}

.snw-glossary-term-name {
    font-weight: 500;
    font-size: var(--snw-term-name-size, 1em);
    color: var(--snw-term-name-color, var(--wp--preset--color--primary, #0073aa));
}

.snw-glossary-term-link:hover .snw-glossary-term-name,
.snw-glossary-term-link:focus .snw-glossary-term-name {
    text-decoration: underline;
}

.snw-glossary-term-excerpt {
    margin: 0.25rem 0 0 0;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    color: var(--wp--preset--color--contrast-2, #666);
    line-height: 1.5;
}

/* No terms message */
.snw-glossary-no-terms {
    text-align: center;
    padding: 2rem;
    color: var(--wp--preset--color--contrast-2, #666);
    font-style: italic;
}

/* ==========================================================================
   Glossary Archive Page
   ========================================================================== */

.snw-glossary-archive {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.snw-glossary-archive-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

.snw-glossary-archive-header .page-title {
    font-size: var(--wp--preset--font-size--x-large, 2.5rem);
    font-weight: 700;
    margin: 0;
}

/* Term items with excerpts */
.snw-glossary-term-item--with-excerpt {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wp--preset--color--contrast-3, #eee);
}

.snw-glossary-term-item--with-excerpt:last-child {
    border-bottom: none;
}

.snw-glossary-term-item--with-excerpt .snw-glossary-term-link {
    padding: 0;
    border-bottom: none;
}

.snw-glossary-term-item--with-excerpt .snw-glossary-term-excerpt {
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

/* Dark mode colors are controlled via Glossary > Settings */
@media (prefers-color-scheme: dark) {
    .snw-glossary-term-block,
    .snw-glossary-list-block {
        --wp--preset--color--base: #1a1a1a;
        --wp--preset--color--contrast: #fff;
        --wp--preset--color--contrast-2: #aaa;
        --wp--preset--color--contrast-3: #333;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .snw-glossary-alphabet-filter {
        display: none;
    }

    .snw-glossary-link-button {
        background: transparent;
        color: inherit;
        border: 1px solid currentColor;
    }

    .snw-glossary-link-button::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
    }
}