/*
 * Gebruik nested CSS in je wrapper div: .awcf-page-layers-display
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

.awcf-page-layers-display { 
    display: block; 

    & .voorbeeld-nested-css { 
        display: block; 
    } 

    & > a { 
        display: block; 
    } 
} 
/* .awcf-page-layers-display {
  list-style: none;
  padding: 0;
  margin: 0; 
	li {
	  margin-bottom: 0.5em;
	}
	li a {
	  text-decoration: none;
	  color: #0073aa;
	  transition: color 0.2s;
	}
	li a:hover {
	  color: #005177;
	}
} */
/* awcf_page_layers_display.css */

.awcf-page-layers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--e-global-color-702ab0e);

    .awcf-page-layer {
        background-color: var(--e-global-color-702ab0e);
/*         border: 1px solid #e1e1e1; */
        padding: 15px;
        flex: 1 1 calc(33.333% - 1rem);
        transition: transform 0.2s ease, box-shadow 0.2s ease;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			background-color: var(--e-global-color-72e0246);
			a{
	            color: white;				
			}
        }

        .awcf-page-layer-link {
            font-weight: 600;
            color: #333;
            text-decoration: none;
            width: 100% !important;
            display: block;
			word-wrap: break-word;
			
            &:hover {
				color: white; 
            }
        }

        .awcf-page-layer-excerpt {
            margin-top: 0.5rem;
            font-size: 0.9rem;
            color: #666;
        }
    }

    .awcf-no-pages {
        font-style: italic;
        color: #999;
    }
}

@media only screen and (max-width: 1500px) {
	.aw-hide-empty-container {
		width: 0 !important;
		padding: 7.5px !important;
	}
	.aw-page-layers-shortcode{
		padding: 15px !important;
	}
}
@media only screen and (max-width: 1024px) {
	.aw-hide-empty-container {
		width: 0 !important;
		padding: 7.5px !important;
	}
	.aw-page-layers-shortcode{
		padding: 0px !important;
	}
}
/* 1500 */