/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Hide Top Menu */
@media (max-width: 768px) {
    nav.secondary-navigation {
        display:none;
    }
}

/* Search Box */
.gp-modal__overlay {
    backdrop-filter: blur(10px);
}

/* Sticky Header Shadow */
#site-navigation, #sticky-navigation {
    box-shadow: 0 0 25px rgba(10,36,88,.35);;
}

/* Overflow Menu */

@media (max-width: 768px) {
.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header {
    padding: 10px 10px 10px 10px;
}
}

@media (max-width: 768px) {
.main-navigation ul ul {   
    box-shadow: 0px 0px 0 rgba(0,0,0,.1);
}
}

/* Table Layout */
.wp-block-table th {
	background-color: #1e73be;
	color: white;
	border: 1px solid black !important;
}
.wp-block-table thead {
	border: 0px solid black !important;
}

.wp-block-table td {
	width: 50%;
}

.wp-block-table tbody{background-color: #f0f0f0;}

/* Overflow Notice Fade */
.notice-overflow {
	overflow-y: auto !important;
}

.notice-overflow::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
.notice-overflow {
    /* scroll bar width, for use in mask calculations */
    --scrollbar-width: 0px;

    /* mask fade distance, for use in mask calculations */
    --mask-height: 15px;

    /* If content exceeds height of container, overflow! */
    overflow-y: auto;

    /* Need to make sure container has bottom space,
  otherwise content at the bottom is always faded out */
    padding-bottom: var(--mask-height);

    /* Keep some space between content and scrollbar */
    padding-right: 10px;

    /* The CSS mask */

    /* The content mask is a linear gradient from top to bottom */
    --mask-image-content: linear-gradient(
        to bottom,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent
    );

    /* Here we scale the content gradient to the width of the container 
  minus the scrollbar width. The height is the full container height */
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;

    /* The scrollbar mask is a black pixel */
    --mask-image-scrollbar: linear-gradient(black, black);

    /* The width of our black pixel is the width of the scrollbar.
  The height is the full container height */
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    /* Apply the mask image and mask size variables */
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);

    /* Position the content gradient in the top left, and the 
  scroll gradient in the top right */
    mask-position: 0 0, 100% 0;

    /* We don't repeat our mask images */
    mask-repeat: no-repeat, no-repeat;
}
}

/* Secondary Menu Width */
.secondary-navigation ul ul {
     width:230px !important;
}

/* Sub-Menu z-index fix */
.main-navigation {
  position: relative;
}

/* Subm Menu Two Columns*/
@media(min-width: 769px) {
    /* 2 column sub menu */
    .sub-menu-columns>.sub-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(10, 1fr);
        grid-auto-flow: column;
        width: 45vw;
		align-items: right;
    }
}

/* Justify Text */
justify-text-block {

text-align: justify;

}