/*******************************************************

    polo.gr hand-made pages (inc/functions/polo-pages.php): the page frame,
    the header like the category pages, the "useful links" pills. Each page
    adds its own stylesheet (polo.contact.css, polo.about.css).

 *******************************************************/



    .polo-frame {
        --polo-page-soft: #f5f5f4;

        max-width: 1360px;
        margin: 8px auto 72px;
        padding: 0 20px;
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
    }



    /* Header */

    .polo-page-head {
        margin-bottom: clamp( 28px, 3.5vw, 48px );
    }

    .polo-page-head__crumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        margin: 0 0 14px;
        color: var( --polo-grey );
        font-size: 13px;
    }

    .polo-frame-page .polo-page-head__crumbs a {
        color: var( --polo-grey );
        text-decoration: none;
    }

    .polo-frame-page .polo-page-head__crumbs a:hover,
    .polo-frame-page .polo-page-head__crumbs a:focus-visible {
        color: var( --polo-black );
        text-decoration: underline;
    }

    .polo-page-head__sep {
        color: #b9bcbf;
    }

    .polo-frame-page .polo-page-head__title {
        margin: 0;
        color: var( --polo-black );
        font-family: var( --polo-font-zona );
        font-size: clamp( 30px, 3.4vw, 48px );
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.05;
        text-align: left;
        text-transform: uppercase;
    }

    .polo-page-head__lead {
        max-width: 620px;
        margin: 12px 0 0;
        color: #45494d;
        font-size: 16px;
        line-height: 1.6;
    }



    /* Blog posts shown as pages (nvm_polo_page_post_as_page): Storefront's post column at full width. */

    .polo-frame-page .site-main .hentry {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .polo-frame-page .entry-content {
        width: auto;
        max-width: none;
        float: none;
        margin: 0;
    }



    /* Useful links */

    .polo-frame-page .polo-page-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 28px 0 0;
        padding: 0;
        list-style: none;
    }

    .polo-page-links li {
        margin: 0;
    }

    .polo-frame-page .polo-page-links a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px 9px 16px;
        border-radius: 999px;
        background-color: var( --polo-page-soft );
        color: var( --polo-black );
        font-size: 14px;
        text-decoration: none;
        transition: background-color 0.2s var( --polo-ease );
    }

    .polo-frame-page .polo-page-links a:hover,
    .polo-frame-page .polo-page-links a:focus-visible {
        background-color: #e8e8e6;
    }

    .polo-page-links .polo-page-icon {
        width: 16px;
        height: 16px;
        transition: transform 0.2s var( --polo-ease );
    }

    .polo-page-links a:hover .polo-page-icon {
        transform: translateX( 3px );
    }



    /* YouTube on click (nvm_polo_page_video) */

    .polo-video {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 8px;
        background-color: var( --polo-black );
        aspect-ratio: 16 / 9;
    }

    .polo-frame-page .polo-video img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        opacity: 0.85;
        transition: opacity 0.2s var( --polo-ease );
    }

    .polo-video__play {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        margin: -38px 0 0 -38px;
        border-radius: 50%;
        background-color: var( --polo-red );
        color: var( --polo-white );
        transition: transform 0.2s var( --polo-ease );
    }

    .polo-video:hover img,
    .polo-video:focus-visible img {
        opacity: 1;
    }

    .polo-video:hover .polo-video__play,
    .polo-video:focus-visible .polo-video__play {
        transform: scale( 1.08 );
    }

    .polo-video:focus-visible {
        outline: 3px solid var( --polo-black );
        outline-offset: 3px;
    }

    .polo-video iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }



    @media ( max-width: 900px ) {

        .polo-frame {
            margin-bottom: 48px;
        }

    }