/*
Theme Name: My Simple Responsive
Theme URI: https://idoweb.work
Author: Michael Mann
Author URI: https://idoweb.work
Description: Responsive Mobile First Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-simple-responsive
Tags: mobile first

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

My Simple Responsive is (C) 2025 I Do Web Work.
My Simple Responsive is distributed under the terms of the GNU GPL v2 or later.

Modern CSS Reset allows for creating a level field across browsers
https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Reset
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Pagination
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Reset
--------------------------------------------------------------*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

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

p {
	margin-bottom: 1em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

header#masthead {
	grid-area: header;
}

nav#site-navigation {
	grid-area: nav;
}

#content {
	grid-area: content;
}

.sidebar-1 {
	grid-area: sidebar-1;
}
.sidebar-2 {
	grid-area: sidebar-2;
}

footer#colophon {
	grid-area: footer;
}

.mobile-menu {
	grid-area: mobilemenu;
}

body {
	margin: 0 auto;
	width: 90vw;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"nav"
		"content"
		"footer"
		"sidebar-1"
		"sidebar-2"
		"mobilemenu"
	;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

  body {
    	grid-template-columns: repeat(5,1fr);
    	grid-template-areas:
        "header header nav nav nav"
        "content content content content sidebar-1"
        "footer footer footer footer footer sidebar-2"
      ;
  }

}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 1.5em 1.5em 1.5em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, .8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}

textarea {
	padding-left: 3px;
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.full .headerImage {
	padding: 20px;
}

.headerImage {
	width: auto;
	max-width: 100%;
	padding: 10px 0;
}

#site-navigation button {
	background: transparent;
	border: 0;
	font-size: 20px;
	font-weight: 700;
	-moz-box-shadow: 0px 0px 0px transparent inset;
	-webkit-box-shadow: 0px 0px 0px transparent inset;
	box-shadow: 0px 0px 0px transparent inset;
	padding: 10px 0px;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	#site-navigation {
		float: left;
	}

	#site-navigation ul li:last-child ul.sub-menu {
		right: 0;
	}

	nav#site-navigation {
		padding-right: 5vw;
	}

}

.main-navigation .menu-item-has-children > a::after {
	font-family: FontAwesome;
	content: " \00a0 \f0d7";
	float: right;
}

/* WordPress SEO Breadcrumbs */

#breadcrumbs {
    list-style: none;
    margin: 0;
	padding: 0.75em 0 0 0;
    overflow: hidden;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

  .main-navigation ul {
	  display: flex;
  }

}

/* Phone Only */
@media screen and (max-width: 599px) {

	.main-navigation li {
		float: none;
		width: 100%;
		display: block;
		margin: 8px 0;
	}
	#site-navigation {
		padding: 5px;
	}

	.main-navigation ul ul a {
		width: 100%;
		float: none;
		display: block;
	}

}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul ul {
	display: flex;
	flex-direction: column;
	float: left;
	position: absolute;
	margin-top: 0px;
	left: -999em;
	z-index: 99999;
	padding: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: flex;
	flex-direction: column;
	padding: 0 20px;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
	display: flex;
	flex-direction: row;
	}

}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# 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: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-size: 0.875rem;
	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. */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft,
.alignright,
.aligncenter {
	float: none;
	clear: both;
	display: block;
	margin: 0 auto;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	.alignleft {
		display: inline;
		float: left;
		margin-right: 1.5em;
	}

	.alignright {
		display: inline;
		float: right;
		margin-left: 1.5em;
	}

	.aligncenter {
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

.widget ul {
	margin: 0 0 1.5em 0;
	list-style: inside disc;
	padding: 0;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

#primary {
	margin: 0 auto;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {
	
	#content {
		padding-right: 0;
	}

	#primary {
		width: 100%;
	}

}

.full #content .wp-block-columns h2 {
	padding: 0;
}

#primary.wide #main {
	width: 100%;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

}

/* Adds minimal side padding for content */
.full .entry-header,
.full .entry-content > p,
.full .wp-block-group,
.full .entry-content > h2,
.full .entry-content > h3,
.full .entry-content > h4,
.full .entry-content > h5,
.full .entry-content > h6,/*
.full .wp-block-columns,
.full .entry-content > .wp-block-columns,*/
.full #breadcrumbs,
.full .site-branding,
.full article footer {
	padding: 0 20px;
}

/* Strip header padding in blockgroup */
.full .wp-block-group h2 {
	padding: 0;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	.boxed #masthead,
	.boxed #content,
	.boxed #footer,
	.boxed #colophon {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
	}

	pre.boxed {
		margin: 0 20px;
		padding: 20px;
	}

	#footer {
		display: flex;
		flex-direction: column;
	}

	#footercols {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}
}

/*--------------------------------------------------------------
# Sidebars
--------------------------------------------------------------*/

.entry-content p:first-child {
		margin-top: .75em;
}

.one-half,
.one-third,
.one-fourth,
.one-fifth,
.one-sixth {
	display: inline-block;
	width: 100%;
	margin: 4px;
	vertical-align: top;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {
	.one-half {
		width: 47%;
	}
	.one-third {
		width: 32%;
	}
	.one-fourth {
		width: 23%;
	}
	.one-fifth {
		width: 19%;
	}
	.one-sixth {
		width: 16%;
	}
}

#colophon {
	padding-top: 20px;
}

.footer,
.footercol {
	width: 100%;
	display: block;
}

.full #colophon,
.full .footercol {
	padding: 0 20px;
}

.footercol:not(:last-child) {
    margin-right: 20px;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	.footercol {
		flex-grow: 1;
	}

}

span.posted-on {
	font-size: 75%;
}

span.posted-on .posted {
	margin-right: 10px;
	padding: 5px;
	font-weight: 700;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

/** Full width pages **/

.full #footer {
    padding: 0;
}

.full > #content,
.full > #colophon,
#masthead,
#footer {
	width: 100%;
	margin: 0 auto;
}

.full #masthead {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

/*.full .entry-meta,
.full .entry-footer,
.full .navigation {
	margin: 0 20px;
}

.full #comments {
	margin: 0 20px;
}*/

.widget h2, #footer h2 {
	margin-bottom: 5px;
}
.full #comments h3 {
	padding: 0;
}

.content-area.wide {
	width: 100%;
	max-width: 100%;
}

.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
	padding: 0;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	.page-content,
	.entry-summary {
		margin: 1.5em 0 0;
	}

	.entry-content {
		margin: 0;
	}

}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.wp-caption-text {
    font-size: .7em;
}

/* Post Formats */
.format-status .post-title {
display:none;
}


.page .wp-block-latest-posts {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2em;
	margin: 0;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}
.blog .page-title {
	display: block;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Responsive Video */
.wp-video,
video.wp-video-shortcode,
.mejs-container,
.mejs-overlay.load {
	width: 100% !important;
	height: 100% !important;
}
.mejs-container {
	padding-top: 56.25%;
}
.wp-video,
video.wp-video-shortcode {
	max-width: 100% !important;
}
video.wp-video-shortcode {
	position: relative;
}
.mejs-mediaelement {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.mejs-controls {
	display: none;
}
.mejs-overlay-play {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
	width: auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

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

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

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

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

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

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

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

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

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/

.pagination {
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 11px;
	line-height: 13px;
	margin-bottom: 30px;
	}
 
.pagination span,
.pagination a {
	display: block;
	float: left;
	margin: 2px 2px 2px 0;
	padding: 6px 9px 5px 9px;
	text-decoration: none;
	width: auto;
	color: #fff;
	background: #555;
}

.pagination a:link {
	color: #999;
}
 
.pagination a:hover {
	color: #fff;
	background: #3279BB;
}
 
.pagination .current {
	padding: 6px 9px 5px 9px;
	background: #3279BB;
	color: #fff;
}

time.published.updated {
	display: inline-block;
}
time.updated {
	display: none;
}

.cat-links,
.tags-links,
.comments-link,
.edit-link {
	display: block;
	width: 100%;
	margin: 10px 5px 10px 0;
}

.tags-links,
.cat-links {
	padding: 5px 0;
}
.tags-links .tagstart,
.cat-links .catstart {
	padding: 5px 10px;
	margin-right: 10px;
}
.tags-links .tagstart {
	background: #ccc;
}
.cat-links .catstart {
	background: #ccc;
}

/** Theme Options **/
#section-post_types input {
	display: inline-block;
}


/** Gutenberg **/
.wp-block-latest-posts.homepage {
	margin: 20px;
	padding: 20px;
	background-color: #041e42;
}

.wp-block-latest-posts.homepage li {
	font-weight: 700;
}

.wp-block-latest-posts.homepage a {
	color: #ffffff;
}

.wp-block-latest-posts.columns-2 li {
    padding: 10px;
    margin: 0;
}

a.more-link {
	padding: 0 20px;
}

.wp-block-button.lgtype a {
	font-size: 36px;
}

/* Columns */
.wp-block-column:last-child {
    margin-right: 0;
}

.wp-block-columns.social p {
	margin: 0;
	padding: 10px 0;
	font-weight: 700;
}

/* Posted in & edit link */
.cat-links,
.edit-link {
	font-size: 70%;
}

.sidebar-1,
.sidebar-2 {
	padding: 0 20px;
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	nav#site-navigation {
		display: grid;
		height: 100%;
		width: 100%;
	}

	nav#site-navigation > div {
		align-self: center;
		justify-self: end;
	}

	footer#colophon {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"footercol-1 footercol-2 footercol-3"
		;
	}
	
	.footercol-1 {
	grid-area: footercol-1;
	}
	.footercol-2 {
	grid-area: footercol-2;
	}
	.footercol-3 {
	grid-area: footercol-3;
	}

	header#masthead {
		padding-left: 5vw;
	}

}

/* Tablet Landscape */
@media screen and (min-width: 1200px) {

	nav#site-navigation {
		justify-content: right;
	}

}

.sidebar aside h2 {
	margin: 0 0 .25em 0;
}
.sidebar .widget ul {
	list-style: none;
}

.sidebar .widget ul li::before {
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: #ffffff; /* Change the color */
	font-size: inherit;
	font-weight: bold; /* If you want it to be bold */
	display: inline-block; /* Needed to add space between the bullet and the text */
	width: 1em; /* Also needed for space (tweak if needed) */
  
}

/* Phone Only */
@media screen and (max-width: 599px) {

	.sidebar-1,
	.sidebar-2,
	footer {
		padding: 20px;
	}

	.mobile-menu {
		position: sticky;
		bottom: 0;
		width: 100%;
		text-transform: uppercase;
		line-height: 3;
		background: #041e42;
	}
	.mobile-navigation ul {
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.mobile-navigation ul li {
		display: inline;
	}
	.mobile-navigation a:visited,
	.mobile-navigation a:active,
	.mobile-navigation a:hover,
	.mobile-navigation a:link {
		color: #fff;
		text-decoration: none;
	}

}

/* Tablet Portrait */
@media screen and (min-width: 600px) {
	.mobile-menu {
		display: none;
	}
}

/* Tablet Landscape */
@media screen and (min-width: 900px) {

	body {
		grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr;
		grid-template-areas:
			"header nav nav nav"
			"content content content content"
			"footer footer footer footer"
		;
	}
	
	/* 			"content content content sidebar-1"
			"content content content sidebar-2"*/

	#content {
		padding-left: 5vw;
	}

	.sidebar-1,
	.sidebar-2 {
		padding-right: 5vw;
	}

	body.page-template-template-landing {
		grid-template-areas:
			"content content content content"
		;			
	}

	body.page-template-template-landing .wp-block-columns {
		margin: 0;
	}

	nav {
		justify-self: end;
		align-self: center;
	}

}

figcaption {
	font-size: 75%;
}

/* Page Templates */
.page-template-page-full-width #content {
	padding: 0;
	width: 90vw;
}

.wp-element-caption {
	padding: 20px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	padding: 10px 20px;
	background-color: #000;
}

.wp-lightbox-container .lightbox-trigger {
	top: 0;
}

.wp-block-embed {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

.wp-block-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hide the checkbox */
.menu-toggle-checkbox {
  display: none;
}

/* Hamburger label */
.menu-toggle-label {
  display: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1002;
  width: 40px;
  height: 30px;
  position: relative;
}

/* Hamburger lines */
.menu-toggle-label span {
  display: block;
  width: 100%;
  height: 3px;
  background: #333;
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.4s ease;
  position: relative;
}

/* Animate into "X" */
.menu-toggle-checkbox:checked + .menu-toggle-label span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle-checkbox:checked + .menu-toggle-label span:nth-child(2) {
  opacity: 0;
}

.menu-toggle-checkbox:checked + .menu-toggle-label span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Backdrop (mobile only) */
.menu-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle-label {
    display: block;
    position: relative;
    z-index: 1002;
  }

  .menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity 0.3s ease;
  }

  .menu-toggle-checkbox:checked ~ .menu-backdrop {
    display: block;
  }

  #primary-menu {
    display: none;
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    position: relative;
    z-index: 1001;
  }

  .menu-toggle-checkbox:checked + .menu-toggle-label + .menu-backdrop + #primary-menu {
    display: block;
  }

  #primary-menu li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  #primary-menu li:last-child {
    border-bottom: none;
  }

  #primary-menu a {
    text-decoration: none;
    color: #333;
    display: block;
  }
}

/* Desktop styles */
@media (min-width: 769px) {
  .menu-toggle-label,
  .menu-backdrop {
    display: none !important;
  }

  #primary-menu {
    display: flex !important;
    gap: 1rem;
    list-style: none;
    padding-left: 0;
    margin: 0;
    justify-content: flex-end;
  }

  #primary-menu li {
    padding: 0;
    border: none;
  }

  #primary-menu a {
    text-decoration: none;
    color: #000;
    padding: 10px 15px;
    display: block;
  }
}