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

    Copyright 2023 Michael J. Miller, All rights reserved

    Purpose: rules for basic page layout

    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
    --------    --------    --------------------------------------------

************************************************************************/
/*****************  No JS ***************/
@layer page {
    .page-close {
        position: absolute;
        top: 6px;
        left: 12px;
/*        z-index: 2;
        */
        padding: 4px;
        border-radius: 4px;
    }
    .dialog-close {
        position: absolute;
        top: 8px;
        left: 12px;
        border-radius: 4px;
        cursor: pointer;
        padding: 2px 4px;
        font-size: 16px;
    }
}
@layer generic {
    .js-warning {
        display: block;
        border: 3px solid #000;
        text-align: center;
        background-color: red;
        color: white;
        padding: 2em;
    }
    /***********************************************************
        BASE DOCUMENT LAYOUT
    ***********************************************************/

    html {
        height: calc(100vh - 2px);
        width: var(--design-page-width);
        max-width: 100vw;
        margin: 0 auto;
        background-color: var(--background-color);
/*        overflow: hidden;*/
    }
    body {
        height: calc(100% - 2px);
        margin: 0;
        display: flex;
        flex-direction: column;
        background-color: var(--background-color);
        color: var(--text-color);
        flex: 0 1 auto;
        background-color: var(--background-color);
        color: var(--text-color);
    }
    header {
        background-color: var(--header-background-color);
        color: var(--header-text-color);
        width: 100%;
        width: 100vw;
        position: relative;
        left: calc((100vw - 100%) * -.5);
    }
    .content {
        flex: 1 0 auto;
    }
    main {
        flex: 1 1 0;
        overflow: auto;
    /*    border: thin dotted green;*/
    }
    footer {
        flex: 0 0 auto;
        height: 2em;
    /*    z-index: 2;*/
        margin-top: .25em;
        padding-top: .25em;
        border-top: var(--footer-border);
        background-color: var(--footer-background-color);
        overflow: hidden;
    }

    /***********************************************************
        HEADER
    ***********************************************************/
    #nav-group {
        display: flex;
        flex-flow: row wrap;
        margin: 0 auto;
/*        align-items: center;*/
        max-width: var(--design-page-width);
        justify-content: space-between;
    }
    .logo-image {
/*        width: 200px;*/
        padding-left: 6px;
        padding-top: 8px;
        padding-bottom: 2px;
/*        margin: 0 auto;*/
/*        max-height: 86px;*/
        min-height: 3em;
    }
    .logo-image > img {
        width: 100px;
    }
    #nav-group-buttons{
        display: flex;
        align-self: center;
        justify-content: flex-end;
        height: 1.5lh;
        width: 60%;
    }
    #nav-home {
/*        align-self: center;*/
        border-radius: 4px;
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 8px;
/*        padding-bottom: 2px;   */
        box-sizing: border-box;
        min-height: 2em;
    }
    #nav-account {
        margin-top: 6px;
    }
    #nav-home:hover {
        color: black;
        background-color: rgba(235, 235, 235, 1.00);
    }
    #nav-group a, #nav-group button, #nav-group ul, #nav-group span, #nav-group2 a {
        color: var(--navbar-inverse-color);
        text-decoration: none;
        cursor: pointer;
    }
    .nav-text {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/*        font-size: clamp(.78rem, 2.5vw, 1rem);*/
        font-size: var(--dynamic-font--xlg);
        margin: 0 .5ch;
        white-space: nowrap;
    }
    .nav-text:hover {
        color: blue;
    }
    .dropdown-list {
        position: fixed;
        border: thin solid rgba(203, 203, 203, 1.00);
        box-shadow: 0 1px 3px 0px rgba(203, 203, 203, 1.00);
        border-radius: 5px;
        box-sizing: border-box;
        padding: .5rem 1rem .75rem;
        text-align: left;
        list-style: none;
        line-height: 1.2rem;
        background-color: white;
    /*    was 110 but google map widget uses 1000002 internally so calendar
        now uses 2000000 and menus need to be on top of those
        8/30/24 - I don't think this is the case - trying a lower value of 10
        9/26/24 - scroll bars have an insanely high z-index so back to 2 million*/
        z-index: 2000000;
/*        z-index: 10;*/
        max-width: 84vw;
        overflow: hidden;
        transform: translateY(2.75em); 
    }

    .dropdown-list:focus {
        outline: none;
    }
    .dropdown-item {
        z-index: 110;
        line-height: 1.25em;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        color: gray;
/*        cursor: pointer;*/
    }
    .dropdown-list li:hover {
        background-color: lightgrey;
    }
    .dropdown-item-disabled {
        color: lightgray;
        padding: 5px;
    }
    .dropdown-item-separator {
/*        color: lightgrey;*/
/*        font-size: small;*/
/*        padding-left: 90%;*/
/*        padding-top: 0;*/
/*        padding-bottom: 0;*/
        margin: 4px 6px;
        border-bottom: thin solid;
        border-bottom-color: lightgrey;
/*        text-decoration-line: line-through;*/
    }
    .dropdown-item-disabled:hover, .dropdown-item-separator:hover {
        background-color: white;
    }


    .message-banner {
        font-weight: 400;
        line-height: 2rem;
        margin-bottom: .25em;
    }
/*    controls message banner on mail page*/
    .message-banner-main {
        position: relative;
        width: 100%;
        z-index: 2;
    }
    #message {
        margin-bottom: 0;
    }
    .message-banner div {
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
    }
    .message-error {
        background-color: var(--message-error-color);
        color: var(--text-color);
    }
    .message-notice {
        background-color: var(--message-notice-color);
        color: var(--text-color);
    }

    /***********************************************************
        FOOTER
    ***********************************************************/
    footer h5 {
        font-size: 1rem;
        margin-top: .8rem;
        margin-bottom: 0px;
        text-align: center;
    }
    footer h6 {
        font-size: .6rem;
        margin-top: 0;
        margin-bottom: .25rem;
        page-break-inside: avoid;
        text-align: center;
    }
    /***********************************************************
        GENERIC DIALOG RULES
    ***********************************************************/

/*    this is generally set up as a button with classes: btn--icon clickable*/
    .prompt-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(2em, min-content);
    }
    /***********************************************************
        MODAL SPINNER DIALOG
    ***********************************************************/
    #page-spinner {
        font-size: 72px;
        color: blue;
        padding: 0 .4em 0;
        background-color: white;
        border-radius: 16px;
    /*    transform: translateY(calc(100vh / 6));*/
        border: none;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .dialog-spinner {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 72px;
        color: blue;
        padding: 0 .4em 0;
        background-color: white;
        border-radius: 16px;
        transform: translate(calc(100vw / 8),calc(100vh / 6));
        border: none;
        padding-top: 12px;
        padding-bottom: 12px;
        display: none;
    }
    .spinner-title {
        font-size: 1rem;
    }
    modal-spinner::backdrop {
        background-color: var(--dialog-backdrop);
    }

    /***********************************************************
        CONTACT FORM DIALOG
    ***********************************************************/
    #contact-form {
        display: flex;
        flex-flow: column wrap;
        grid-row-gap: .5em;
        min-width: 530px;
        max-width: 95vw;
    }
    #contact-form h2 {
        margin-top: 0;
        margin-bottom: .25em;
    }
    #contact-form label {
        width: 100px;
/*        text-align: right;*/
    }
    #contact-form input {
        width: 300px;
        max-width: 80vw;
        margin-bottom: .5em;

        font-size: 1rem;
        padding-left: 6px;
        padding-top: .5em;
        padding-bottom: .5em;
    }
    #contact-form textarea {
        font-size: 1em;
        min-width: 90%;
        height: 3.25em;
    }

    #contact-form button {
        max-width: 200px;
        margin-left: auto;
    }

}

/*****************************************************************/
@layer override {
    .silvia, .local {
        background-color: var(--silvia-tint);
        color: inherit;
    }
    .airbnb {
        background-color: var(--airbnb);
        color: inherit;
    }
    .booking {
        background-color: var(--booking);
        color: inherit;
    }
    .direct {
        background-color: var(--direct);
        color: inherit;
    }
    .expedia {
        background-color: var(--expedia);
        color: inherit;
    }
/* used to highlight elements that are only shown to webmaster   */
    .webmaster {
        font-style: italic;
/*        text-decoration: underline;*/
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
/*        color: black;*/
    }
}

@layer generic {
    @media (max-width: 820px) {
        header>div {
            flex-flow: row nowrap;
            align-items: center;
        }
        .logo-image {
            margin: 0;
            left: 16px;
            width: 45%;
            max-height: 90px;
        }

        #nav-group {
            display: none;
        }
        #nav-group2 {
            display: inline;
            width: 55%;
        }
    }
}