/***********************************************************************
    File name: layout.css
    Site: al-porto.org

    Copyright 2026 Michael J. Miller, All rights reserved

    Purpose: rules for showing popovers

    This file also defines the layer structure for all css where:
        generic         -general styles in base and layout files
        theme           - not sure if needed using for button styles and such
        page            - page specific css
        override        - rules which override page rules
        superoverride   - used for things like .selected which must always show

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------
    3/18/26     4.0a        Created.

************************************************************************/
@layer page {
    menu[popover] {
        margin-top: 4px;
        max-width: 84vw;

        border: thin solid rgba(203, 203, 203, 1.00);
        box-shadow: 0 1px 3px 0 rgba(203, 203, 203, 1.00);
        border-radius: 12px;
        box-sizing: border-box;
        /*padding: .5rem 1rem .75rem;*/
        padding: 8px 12px;
        text-align: left;
        list-style: none;
        line-height: 1.2rem;
        background-color: var(--menu-background);
        color: var(--menu-text-color);
        /*overflow: hidden;*/
        /*transform: translateY(2.75em);*/
    }
    .dropdown {
        position-area: bottom span-right;
    }

    .menu-item {
        border-radius: 8px;
        line-height: 1.25em;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        color: var(--menu-text-color);
        cursor: pointer;
    }

    .menu-item a {
        text-decoration: none;
        /*color: var(--menu-text-color);*/
        color: inherit;
    }

    .menu-item-disabled, .menu-item:disabled {
        color: lightgray;
        /*padding: 5px;*/
    }

    .menu-item-separator {
        margin: 4px 6px;
        border-bottom: thin solid;
        border-bottom-color: lightgrey;
    }
}
@layer override {
    /*.menu-item:hover, .menu-item a:hover {*/
    .menu-item:hover {
        background-color: var(--menu-hover-background);
        color: var(--menu-hover-color);
    }
    /*.menu-item:active, .menu-item a:active {*/
    .menu-item:active {
        background-color: var(--menu-active-background);
        color: var(--menu-active-color);
    }
}
@layer page {
    #password-copy {
        margin-left: 40px;
    }

    .anchor-copy {
        anchor-name: --copy;
    }
    .copied-anchor{
        position: absolute;
        position-anchor: --copy;
        position-area: center bottom;
    }


    .popover[popover="hint"], .hint {
        background-color: honeydew;
        border-radius: 4px;
        border: thin solid gray;
        font-size: small;
        max-width: 300px;
        padding: 6px;

        position-area: bottom;
        position-try-fallbacks: flip-inline;
        margin: 4px 12px;
    }
    .pop-dialog {
        border-radius: 16px;
        border-style: solid;
        border-width: 4px;
        border-color: var(--dialog-border-color);
        background-color: var(--dialog-background-color);
        color: var(--dialog-text-color);
        padding: 16px;
    }

    .hint-dark {
        background-color: cornflowerblue;
        color: white;
        /*border: none;*/
        /*border-radius: 4px;*/
        /*width: fit-content;*/
        /*padding: 4px 6px;*/
        /*font-size: small;*/
        /*margin: 2px;*/
    }

}