/**
The starting point for this theme was that it didn't contain any CSS at all.
The idea was that the styling is provided using the Global Styles solution,
which is implemented in experimental-theme.json.

In practice, we need some CSS since the browser defaults need a little overriding.
*/

/**
 Override the 8px margin from user agent stylesheet
 */
body {  margin: 0px;  }

/**
Override top and bottom margins on h1 - user agent stylesheet
 */
h1 { margin-block-start: 0px; margin-block-end: 0px;}

/**
Override margin bottom added by Gutenberg inline styling
 */
.wp-block-columns { margin-bottom: 0px;}

/**
 Style the current-menu-item
 */
li.current-menu-item  {
    color: var( --wp--preset--color--current-menu ) !important;
}

/*
Styling for blocks with class="WP_DEBUG"
 */
div.WP_DEBUG { height: 1px;
    border-top: 1px dotted red;
    width: 100%;
    overflow: hidden;
    position: relative;
}

div.WP_DEBUG:hover {
    height: auto;
    overflow: auto;
    position: relative;
}

div.WP_DEBUG.END {
    border-bottom: 1px solid green;
}

div.wp-site-blocks > div.WP_DEBUG:first-of-type {
    background-color: white;
    position: absolute;
    top: 0;
    z-index: 100000;
    color: white;
    height: auto;
    overflow: auto;
    width: auto;
    border-top: 1px solid green;
    background: transparent;
    left: 40%;
    padding: 0 1em;
}

div.wp-site-blocks > div.WP_DEBUG:first-of-type:hover {
// margin-top: -1.1em;
    position: absolute;
    z-index: 100000;
    padding: 0 1em;
    height: auto;
    top: 0px;
    left: 40%;
    color: black;

}

/**
 Style the title on the attachment template over the top of the image
 */
.attachment h1.wp-block-post-title { position: absolute; z-index: 100; border: 1px solid green; width: 100%; height: 45px;
margin: 0px; padding: 25px 0px 0px 30%; opacity: 0.8; background-color: #0693e3; color: #ffffff;
text-shadow: 1px 1px #333333;}

/**
 Style the featured image - from [bw_field featured] to max width 100%
 */
img.featured { max-width: 100%; border-bottom: 1px solid grey; top: 40px; }

/**
 Put a border around gallery images
 */
li figure img { border: 1px solid grey; }