/**
  Theme Name:   GoGrid
  Description:  GoGrid is a blogging and general purpose theme made for ClassicPress. Features include fast loading templates. Sets the width of the content area. Set excerpt length for posts. Add page log and header image. Demo at https://gogrid.tswdev.com/
  Author:       Larry@tradesouthwest
  Author URI:   http://tradesouthwest.com/
  Theme URI:    https://github.com/tradesouthwest/gogrid
  Requires PHP: 7.4
  Requires CP:  2.0
  Version:      1.0.3
  CMS required: wp_body_open WP action or function call not inserted
  Tags:         two-columns, translation-ready, featured-images, blog, e-commerce, news, custom-menu, custom-background, custom-logo, custom-header
  License:      GPL 3
  License URI:  https://www.gnu.org/licenses/quick-guide-gplv3.en.html
  Text domain:  gogrid
 */

/* latin */

/* -------------------------------------------------------------
TABLE OF CONTENTS
=================
- CSS Reset
- Accessibility
- Typography
- General styles
- Featured Image
- WP Requires/defaults
- Gallery
- Comments
- No grid support
- CSS Grid layout for wider screens
--------------------------------------------------------------*/

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;

}

body {
    margin: 0;
}

img {
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar */
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1,
h2,
h3 {
    margin: 1.22rem 0 0;
    padding: 0;
}

p {
    margin: 0;
    padding: .5em 0;
}

/* Avoid text overflows */
p,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    line-height: 1.485;
}

img {
    border-style: none;
    height: auto;
    max-width: 100%;
    /* Adhere to container width. vertical-align: middle; */
}

a {
    text-decoration: none;
}

article a:not(h2 a) article a:not(figure) {
    border-bottom: thin dashed currentColor;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
body {
    background: #fafdfc;
}

.site {
    background: inherit;
    min-height: 100vh;
}

.masthead,
.main-content,
.sidebar,
.gogridtwin,
.gogridquad,
.footer {
    padding: 1em 2em;
}

.main-content {
    background: inherit;
}

.masthead {
    background: inherit;
    color: inherit;
    margin-top: 1em;
}

.sidebar {
    background: inherit;
}

.gogridtwin {
    background: #ffffff;
}

.gogridtwin:last-of-type {
    background: #fafafa;
}

.colophon {
    padding: 2em;
    background: inherit;
    color: inherit;
}

.colophon a:hover,
.colophon a:focus {
    border-bottom: 1px solid currentColor;
}

.navigation-top {
    min-height: 4em;
    margin: 0;
    display: inherit;
    width: 100%;
    position: fixed;
    top: 1em;
}

.site-header-menu {
    background-color: #dedede33;
    background: linear-gradient(45deg, #f5f5f5 0%, #ffffff 100%);
}

.site-title {
    position: absolute;
    width: fit-content;
    top: -.63em;
    left: calc(20vw + 10px);
	font-size: 75%;
}

.site-title a {
    color: #3d3d3d;
}

.primary-menu {
    background: linear-gradient(45deg, rgba(30, 30, 28, .9) 0%, rgba(251, 253, 254, .3) 50%);
    padding: .938em;
    border-width: 8px;
    border-left: 8px solid #a753;
}

.navigation-top {

    margin-right: 50px;
}

.admin-bar .navigation-top {
    margin-top: 2em;
}

.ltr .navigation-top {
    margin-left: 50px;
}

#menu-toggle details[open] summary~* {
    animation: mtsweep .33s ease-in-out;
}

@keyframes mtsweep {
    0% {
        opacity: 0;
        margin-top: -10px
    }

    100% {
        opacity: 1;
        margin-top: 0px
    }
}

#menu-toggle details summary {
    cursor: pointer;
}

#menu-toggle details summary::marker {
	color: transparent;
}

summary.mobil-only-button {
    z-index: 2;
}

#menu-toggle details summary::marker {
    display: inline;
}

.navigation-top ul {
    display: grid;
    list-style: inside none;
    z-index: 999;
    position: relative;
    left: 1px;

}

.ltr .navigation-top ul {
    left: 0;
    right: 1px;
}

.navigation-top li {
    margin-bottom: 2.5px;
}

.navigation-top li:last-child {
    margin-bottom: 0;
}

.navigation-top .menu-item-has-children {
    max-width: 60%;
}

.navigation-top .menu-item-has-children ul li {
    background: none;
}

.navigation-top a {
    padding: 5px 10px 2px 10px;
    border: thin solid rgba(192, 232, 242, .32);
    background: rgba(25, 25, 25, .84);
    text-decoration: none;
    color: lightcyan;
    letter-spacing: 2px;
}

.navigation-top a:hover {
    opacity: .82;
    color: black;
    background: beige;
}
.navigation-top a.nobkg {
	background: transparent;
	color: #3d3d3d;
}

#menu-toggle details summary>.menu-toggle {
    font-weight: 900;
    font-size: 1.4em;
    color: #050505;
    text-shadow: 2px 0px 3px gray;
    letter-spacing: 2px;
    background: #fff;
    border: thin solid #eee;
    padding: 3px 3px 0px 4px;
    box-shadow: 0 0 1px 1px #aaa;
    background: #cccc;
}

#menu-toggle span.menu-toggle {
    display: inline-block;
    transform: rotate(90deg);
}

.social-links-menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.header-logo {
    position: relative;

    display: flex;
    z-index: 1;
}

.site-logo-container {
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
}

.gogrid-logo-container {
    display: flex;
    width: 100%;
    justify-content: end;
}

.header-logo img {
    box-shadow: 1px 1px 5px 5px #eee;
    position: relative;

}

.has-banner .site-logo-container {
    margin-top: 0;
}

.header-banner {
    margin: 0 auto;
    z-index: 2;
}

.site-description {
    min-width: fit-content;
    padding: 15px 15px 5px 18px;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    background: #eee7;
    border-bottom: thin solid antiquewhite;
    background: linear-gradient(45deg, rgba(240, 250, 240, .9) 0%, rgba(245, 235, 220, .3) 100%);
    text-shadow: 0px 2px 3px #daa;
}

.article-info:after,
.article-info:before {
	content: "";
	display: block;
	clear:both;
	width: 100%;
	background: #eee;
	height: 1px;
}

.post-nav-links span {
	letter-spacing: .45rem;
	font-weight: bold;
}

abbr[title],
abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
    margin-bottom: 0;
}

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}

code,
xmp,
pre,
samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

.ltr .search-submit {
	top: -50%;
	left: 0;
}

.search-submit {
	display: flex;
    position: relative;
    justify-content: flex-end;
    margin: -1.88em auto auto 88%;
    height: 30px;
    line-height: 1.82;
}

/*--------------------------------------------------------------
Featured Image
--------------------------------------------------------------*/
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

.gogrid-featured {
    margin: 5px;
    padding: 10px;
    border: solid gray 1px;
}

.linked-attachment-container {
    width: auto;
    max-width: 100%;
    max-height: 380px;
    display: initial;
    padding: 0;
    margin: .128em 0 .75em 0;
    background: #eee;
}

.gogrid-heading-meta small {
	font-size: 82.5%;
}
/*--------------------------------------------------------------
WP Requires
--------------------------------------------------------------*/
.alignnone {
    margin: 5px 20px 20px 0;
    display: block;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

#wp-calendar {
    table-layout: fixed;
}

#wp-calendar td {
    padding: 3px 4px;
    border-top: thin solid #ddd;
    border-right: thin solid #ddd;
}

.comment-form label+input,
.comment-form label+textarea,
.comment-form label+select {
    display: flex;
    flex-direction: column;
    border: 1px solid #818181;
}

.wp-caption {
    max-width: 100%;
}

p img.alignright,
p img.alignleft,
p img.alignnone,
p img.aligncenter {
    display: flex;
    max-width: calc(100% - 20vw)
}

.wp-caption.alignnone,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
    max-width: calc(100% - 20vw)
}

a > .post-publish-date em{
	color: gray;
	font-size: x-small;
}

/*--------------------------------------------------------------
Gallery
--------------------------------------------------------------*/
.gallery {
    margin: 10px -10px;
}

.gallery>p {
    margin: 0;
    height: 0;
}

.gallery-item {
    margin: 0 0 10px;
    float: left;
    padding: 0 10px;
}

.gallery-item .gallery-icon img {
    width: 100%;
}

.gallery-item .gallery-caption {
    padding: 10px 0;
    margin: 0;
    color: #444;
    clear: both;
    font-size: 12px;
    text-align: center;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    width: 50%;
}

.gallery-columns-3 .gallery-item {
    width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    width: 25%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.gallery-columns-6 .gallery-item {
    width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    width: 11.11%;
}

@media (max-width: 480px) {
    .gallery .gallery-item {
        width: 100%;
        margin-bottom: 20px;
    }
}

/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/
#comments,
#respond,
.commentlist,
.commentlist ul.children,
.commentlist li.comment,
.commentlist li.pingback,
.commentlist .comment-body {
    width: 100%;
    clear: both;
    float: left;
}

#comments-title,
#reply-title {
    font-size: 1.5em;
    margin-bottom: 0;
}

.comment-content p {
    padding: 1px 3px;
    line-height: 1.2;
}

.logged-in-as {
    margin-top: 0;
    font-size: 14px;
}

.logged-in-as a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

.commentlist li.comment,
.commentlist li.pingback {
    padding-bottom: 1px;
}

.commentlist,
.commentlist ul.children {
    list-style: none;
    padding: 0;
}

.commentlist ol li {
    color: inherit;
}

.commentlist ul.children,
.commentlist ol.children {
    margin: 10px 0 0;
    padding-left: 10px;
}

.commentlist .children .comment {
    border-left: 1px solid #e6e6e6;
    position: relative;
}

.commentlist .children .comment:before {
    width: 12px;
    height: 12px;
    display: block;
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    position: absolute;
    top: 30px;
    left: -7px;
    content: "";
    z-index: 60;
}

.commentlist .children .comment:after {
    width: 100px;
    height: 1px;
    border-top: 1px solid #e6e6e6;
    display: block;
    position: absolute;
    top: 36px;
    left: -5px;
    content: "";
    z-index: 50;
}

.commentlist .comment-body {
    padding: 8px 12px;
    background: #fff;
    display: block;
    border: 1px solid #bbb;
    position: relative;
    z-index: 100;
}

.commentlist .children>li.comment {
    padding-left: 23px !important;
}

.comment-notes {
    line-height: 1.2em;
    clear: both;
}

.commentlist li.comment .avatar {
    float: left;
    padding: 0;
    border-color: #CCC;
}

.commentlist li.comment .comment-author {
    width: 100%;
    color: #222;
    text-decoration: none;
}

.commentlist li.comment .comment-author {
    font-size: 130%;
    padding-left: 75px;
    line-height: 1;
}

.commentlist li.comment .comment-meta {
    padding-left: 75px;
    font-size: 80%;
    color: #888;
    font-style: italic;
}

.commentlist li.comment .comment-text {
    padding: 0 0 0 75px;
}

#cancel-comment-reply-link {
    font-size: 1em;
    float: right;
}

.comment-reply-link {
    float: right;
    margin: 0;
}

.commentlist pre {
    background: #eee;
    border-color: #e2e2e2;
}

.pingback a,
.comment a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

.comment .url {
    font-style: italic;
}

.bypostauthor>.comment-body {
    border: 1px dashed #888;
}

#respond>* {
    font-size: 90%
}

h3#reply-title {
    text-align: center;
}

#comment {
    height: 100px;
}

#commentform {
    width: 78%;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: .852em;
}

#commentform input {
    float: right;
    border-radius: 3px;
    width: 82%;
    padding: 5px;
    color: #000;
    font-size: 1.126em;
}

#commentform textarea {
    color: #000;
    font-size: 1.126em;
    border-radius: 3px;
}

#commentform #submit {
    width: auto;
    text-align: center;
    float: none;
    position: relative;
    left: 39.5%;
}

form#commentform {
    display: none;
}

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
    .site {
        max-width: 50em;
        margin: 0 auto;
    }
}
/* Adjust menu according to screen size less than 980px */
@media screen and (max-width: 980px) {
	.admin-bar .navigation-top,
	.navigation-top {
		margin-top: -.98em;
	}
    .site-title{
        font-size:100%;
    }
    .search-submit {
        margin: -1.88em auto auto 44%;
    }
} 
/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 981px) {
    @supports (display: grid) {

        .site {
            display: grid;
            grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
            grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
        }

        .site-title {
            left: calc(28vw + 2em);
			font-size: 1.58em;
        }

        /* Position and size elements within the grid container defined.  */
        .masthead,
        .colophon {
            grid-column: span 8;
        }

        .navigation-top {
            top: .2em;
        }

        .navigation-top .menu-item-has-children {
            max-width: fit-content;
        }

        .main-content {
            grid-column: 2/6;
            /* start at the second column and end at the sixth  */
        }

        .sidebar {
            grid-column: 6/8;
            /* start at the sixth column and end at the eighth */
        }

        .gogridtwin {
            grid-column: 2/5;
            /* start at the second column and end at the fifth column. */
            grid-row: 3/4;
            /* start at the third row and end at the fourth row. */
        }

        .gogridtwin:last-of-type {
            grid-column: 5/8;
            /* start at the fifth column and end at the eighth column */
        }

        .gogridquad {
            display: flex;
            flex-direction: row;
        }

        .gogridquad:last-of-type {
            flex-basis: auto;
        }

    }
}