/*
 **********************************************************************
 * File       : components/glossary.css
 * Author     : Edmund Mulligan <edmund@edmundmulligan.name>
 * Copyright  : (c) 2026 The Embodied Mind
 * License    : MIT License (see license-and-credits.html page)
 * Description:
 *   Styles for glossary term/definition list presentation.
 **********************************************************************
 */

 @layer pages {
    .glossary {
        max-width: 100%;
        box-sizing: border-box;

        & dl {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0;
            padding: 0 1rem;
            align-items: stretch;
            font-size: var(--fontsize-normal);
            max-width: 100%;
            box-sizing: border-box;
        }

        & dt {
            font-weight: bold;
            grid-column: 1;
            padding: 0 0.5rem;
            margin: 0;
            border: var(--border-weight) var(--border-style) var(--colour-effective-page-text);
            background-color: var(--colour-effective-page-background);
            text-align: left;
            align-items: center;
            overflow-wrap: break-word;
            hyphens: auto;
            min-width: 0;
            box-sizing: border-box;
        }

        & dd {
            grid-column: 2;
            padding: 0 0.5rem;
            margin: 0;
            border: var(--border-weight) var(--border-style) var(--colour-effective-page-text);
            border-left: none;
            background-color: var(--colour-effective-page-background);
            text-align: left;
            align-items: center;
            overflow-wrap: break-word;
            hyphens: auto;
            min-width: 0;
            box-sizing: border-box;
        }
    }

    /* Responsive layout for small screens */
    @media (width < 800px) {
        .glossary {
            & dl {
                grid-template-columns: 1fr;
                padding: 0;
            }

            & dt {
                grid-column: 1;
            }

            & dd {
                grid-column: 1;
                border-left: var(--border-weight) var(--border-style) var(--colour-effective-page-text);
            }
        }
    }
}