/*
	Theme Name: John Gushue
	Theme URI: https://matthewhollett.com/design/
	Author: Matthew Hollett
	Author URI: https://matthewhollett.com/
	Description: John Gushue is a responsive WordPress theme, custom designed for John Gushue by Matthew Hollett.
	Version: 1.0
	Text Domain: johngushue
*/



/* Google Web Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');



*, *::after, *::before {box-sizing: border-box; text-rendering: optimizeLegibility;}
html, body {overflow-x: hidden;}
html {font-size: 100%; scroll-behavior: smooth; color-scheme: light dark;}
body {
 margin: 0; background-color: light-dark(#fff, #222); color: light-dark(#222, #e0dcd3);
 font-family: 'Red Hat Display', 'Lucida Grande', 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

a {text-decoration: none; transition: color 0.15s ease-out;}
a:link, a:visited {color: #58b9b6;}
a:hover, a:active {color: #ffb78c;}
img {max-width: 100%; height: auto;}
a img {border: none;}
iframe, .mejs-container {max-width: 100% !important;}

ul {list-style: none; margin: 0; padding: 0;}
ul li {margin: 0; padding: 0 0 0 21px;}
ol {margin: 0; padding: 0;}
ol li {margin: 0; padding: 0 0 0 21px;}
table {max-width: 100%;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; color: light-dark(#222, #fff); line-height: 1.3;}
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child, blockquote:first-child, p:first-child {margin-top: 0;}
h1 {font-size: 2.4rem;}
.wp-block-cover h1 {font-size: 3rem;}
h2 {font-size: 1.9rem;}
h3 {font-size: 1.7rem;}
h4 {font-size: 1.55rem;}
h5 {font-size: 1.45rem;}
h6 {font-size: 1.35rem;}

hr, hr.wp-block-separator {clear: both; height: 0; border: 0; border-top: 1px #ccc solid; margin: 3em auto;}

article blockquote {
 position: relative; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019";
 font-size: 1.65rem; color: #43618d;
}
article blockquote p {display: inline;}

article .wp-block-pullquote p {font-size: 1.35em;}
article .has-large-font-size {font-size: 1.5em;}

article blockquote cite, article .wp-block-quote cite {
 display: block; margin: 1em 0 0 0; font-size: 1.1rem; color: #222; text-align: right; font-style: normal;
}

.embed-container, .wp-block-embed__wrapper {
 position: relative; width: 100%; max-width: 1500px; height: 0; margin: 0 auto; padding-bottom: 56.25%;
 text-align: center; overflow: hidden;
}
.embed-container iframe, .embed-container object, .embed-container embed, .wp-block-embed__wrapper iframe {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.clear {font-size: 0; height: 0; clear: both;}

.logo, .nav, .button, .wp-block-button, .emm-paginate, form label, #wpadminbar {
	-webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

.screenreader-text {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.screenreader-text:focus {
 display: inline-block; position: static; width: auto; height: auto; margin: auto; padding: 3px; color: black;
}

#scrollToTop {
 position: fixed; display: none; bottom: 20px; right: 20px; width: 49px; height: 49px; margin: 0; padding: 10px;
 background-color: #58b9b6; border-radius: 12px; color: #fff; font-size: 24px; line-height: 26px; text-align: center;
 opacity: 0.5; cursor: pointer; z-index: 1000;
}
#scrollToTop .svg-inline--fa {margin: 0;}
#scrollToTop:hover {background-color: #ffb78c; opacity: 1.0; transition: background-color 0.1s ease-out, opacity 0.1s ease-out;}



/* announcement banner */
.announcement-wrapper {margin: 0; padding: 0.75em 20px; background-color: light-dark(#ffecc2, #ffd4a0);}
.announcement {position: relative; width: 1500px; margin: 0 auto; font-size: 1.15rem; font-weight: 500; text-align: center;}
.announcement a:link, .announcement a:visited {color: #111;}
.announcement a:hover, .announcement a:active {color: #fff;}



/* dark mode switch */
.dark-switch-div {position: absolute; top: 6px; right: 0; color: light-dark(#222, #fff); z-index: 1000;}
.dark-switch-div label {position: relative; top: 1px; font-size: 1.3rem; padding-right: 3px;}
.dark-switch-div label .fa-sun {display: inline;}
.dark-switch-div label .fa-moon {display: none;}
#dark-switch {
 padding: 1px 6px; font-size: 1.1rem; color: light-dark(#222, #fff);
 background-color: light-dark(#fff, #222); border: 1px light-dark(#d2e0e3, #325156) solid; border-radius: 10px;
}

body.home-body .dark-switch-div {top: 10px; right: 25px;}



/* landscape */
.landscapewrapper {position: relative; width: 1500px; margin: 0 auto;}
#landscape {
 position: relative; height: clamp(350px, 42vw, 600px); overflow: hidden;
 background: linear-gradient(135deg, rgba(189,222,218,1) 0%,rgba(255,185,120,1) 100%);
}
.landscapelayer {
 transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0)));
	@media (prefers-reduced-motion: reduce) {transform: translateY(0);}
}

#glare {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
 background: radial-gradient(ellipse at bottom 56% right 26%, rgba(255,246,226,0.7) 0%,rgba(255,255,255,0) 100%);
}
#sun {
 position: absolute; bottom: 56%; right: 26%; width: 2.6vw; height: 2.6vw; margin: 0;
 background: #fff; background-image: none; border-radius: 50%;
}
#water {
 position: absolute; bottom: 0; left: 0; width: 100%; height: 42%; margin: 0;
 background: #6d979e;
}
#signal {
 position: absolute; bottom: 7.5%; left: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#signallights {
 display: none; position: absolute; bottom: 7.5%; left: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#light {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
 background: radial-gradient(ellipse at bottom 56% right 26%, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 50%);
}
#south3 {
 position: absolute; bottom: 7.5%; right: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#south2 {
 position: absolute; bottom: 7.5%; right: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#south1 {
 position: absolute; bottom: 7.5%; right: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#boats {
 position: absolute; bottom: 7.5%; right: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#southlights {
 display: none; position: absolute; bottom: 7.5%; right: 0; width: 100%; height: min(calc(1580px * .368), calc(100vw * .368)); margin: 0;
}
#waves4 {
 position: absolute; top: 76%; left: 0; width: 100%; height: 90px; margin: 0;
 background: url('images/landscape-wave-70.png') 0 0 repeat-x; background-size: 35px;
 animation: movewaves35 9s linear infinite;
}
#waves3 {
 position: absolute; top: 80%; left: 0; width: 100%; height: 130px; margin: 0;
 background: url('images/landscape-wave-100.png') 0 0 repeat-x; background-size: 50px;
 animation: movewaves50 8s linear infinite;
}
#waves2 {
 position: absolute; top: 85%; left: 0; width: 100%; height: 190px; margin: 0;
 background: url('images/landscape-wave-140.png') 0 0 repeat-x; background-size: 70px;
 animation: movewaves70 7s linear infinite;
}
#waves1 {
 position: absolute; top: 91%; left: 0; width: 100%; height: 260px; margin: 0;
 background: url('images/landscape-wave-200-light.png') 0 0 repeat-x; background-size: 100px;
 animation: movewaves100 6s linear infinite;
}

@keyframes movewaves35 {
 from { background-position: 0 0; }
 to { background-position: 35px 0; }
}

@keyframes movewaves50 {
 from { background-position: 0 0; }
 to { background-position: 50px 0; }
}

@keyframes movewaves70 {
 from { background-position: 0 0; }
 to { background-position: 70px 0; }
}

@keyframes movewaves100 {
 from { background-position: 0 0; }
 to { background-position: 100px 0; }
}



/* if colour-scheme is auto */
@media (prefers-color-scheme: light) {
 .dark-switch-div label .fa-sun {display: inline;}
 .dark-switch-div label .fa-moon {display: none;}
 #landscape {background: linear-gradient(135deg, rgba(189,222,218,1) 0%,rgba(255,185,120,1) 100%);}
 #glare {display: block;}
 #sun {background: #fff; background-image: none;}
 #light {display: block;}
 #signallights, #southlights {display: none;}
 #waves1 {background-image: url('images/landscape-wave-200-light.png');}
}
@media (prefers-color-scheme: dark) {
 .dark-switch-div label .fa-sun {display: none;}
 .dark-switch-div label .fa-moon {display: inline;}
 #landscape {background: linear-gradient(-2deg, rgba(39,42,58,1) 0%,rgba(28,28,28,1) 90%);}
 #glare {display: block; opacity: 0.5;}
 #sun {background: transparent url('images/landscape-moon.png') center center no-repeat; background-size: cover;}
 #light {display: none;}
 #signallights, #southlights {display: block;}
 #waves1 {background-image: url('images/landscape-wave-200-dark.png');}
}

/* if colour-scheme is explicit */
body.lightMode .dark-switch-div label .fa-sun {display: inline;}
body.lightMode .dark-switch-div label .fa-moon {display: none;}
body.lightMode #landscape {background: linear-gradient(135deg, rgba(189,222,218,1) 0%,rgba(255,185,120,1) 100%);}
body.lightMode #glare {display: block;}
body.lightMode #sun {background: #fff; background-image: none;}
body.lightMode #light {display: block;}
body.lightMode #signallights, body.lightMode #southlights {display: none;}
body.lightMode #waves1 {background-image: url('images/landscape-wave-200-light.png');}

body.darkMode .dark-switch-div label .fa-sun {display: none;}
body.darkMode .dark-switch-div label .fa-moon {display: inline;}
body.darkMode #landscape {background: linear-gradient(-2deg, rgba(39,42,58,1) 0%,rgba(28,28,28,1) 90%);}
body.darkMode #glare {display: block; opacity: 0.5;}
body.darkMode #sun {background: transparent url('images/landscape-moon.png') center center no-repeat; background-size: cover;}
body.darkMode #light {display: none;}
body.darkMode #signallights, body.darkMode #southlights {display: block;}
body.darkMode #waves1 {background-image: url('images/landscape-wave-200-dark.png');}



/* page and head */
.wrapper {position: relative; width: 1500px; margin: 0 auto;}

.header-wrapper {
 margin: 0 0 2em 0; border-top: 6px light-dark(#ffd4a0, #d78d60) solid; border-bottom: 1px light-dark(#fff, #222) solid;
}

body.home-body .header-wrapper {margin-bottom: 0; border-top: 1px light-dark(#fff, #222) solid;}
.header {position: relative; width: 1500px; margin: 0 auto; padding-top: 8px; text-align: center;}

.logo {
 display: inline-block; margin: 0.5em 0 0 0; font-size: 3rem; font-weight: 700;
}
.logo a {display: block; width: 100%; height: 100%; margin: 0;}
.logo a:link, .logo a:visited {color: light-dark(#222, #fff);}
.logo a:hover, .logo a:active {color: #ffb78c;}

.nav {margin: 0.75em 0; padding: 0; font-size: 1.5rem; text-transform: lowercase; overflow: hidden;}
.nav ul {list-style: none; margin: 0; padding: 0;}
.nav ul li {display: inline-block; margin: 0; padding: 0;}
.nav ul li a, .nav ul li span {display: block; width: 100%; margin: 0; padding: 10px 16px;}
.nav ul li.current_page_item>a {color: light-dark(#222, #fff);}
.nav ul li a:hover, .nav ul li a:focus {background-color: light-dark(#e0eaec, #325156);}

.nav ul li ul {
 display: none !important; position: absolute; margin: -1px 0 0 0; padding: 0.5em 0 0.75em 0;
 font-size: 0.95rem; background-color: light-dark(#e0eaec, #325156); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); z-index: 1000;
}
.nav ul li ul li {display: block; margin: 0; padding: 0;}
.nav ul li ul li a {padding: 8px 16px;}
.nav ul li:hover ul {display: block !important;}
.nav ul li ul li ul {
 display: block !important; position: relative; margin: -0.25em 0 0 0; padding: 0 0 0 0.75em; font-size: 0.92rem;
 background-color: transparent; box-shadow: none; z-index: 1;
}
.nav ul li ul li ul li a {padding-top: 3px; padding-bottom: 3px;}
.nav ul li ul li ul li a::before {display: inline-block; content: '\2022'; vertical-align: top; margin-right: 5px;}

.nav #menuToggle {display: none; margin: 0; padding: 0.5em 0; text-align: center; cursor: pointer;}
.nav #menuToggle:hover, .nav #menuToggle:focus {color: #ffb78c;}
.nav #menuToggle .fa-times {display: none;}
.nav #menuToggle.expanded .fa-times {display: inline;}
.nav #menuToggle.expanded .fa-bars {display: none;}



/* search and social */
.social-header {position: relative; text-align: center;}
.social {margin: 1.4em 0 1.5em 0; padding: 0; line-height: 1;}
.social a {display: inline-block; margin: 0 9px; padding: 0; font-size: 2.25rem; vertical-align: middle;}
.social a:link, .social a:visited, .search-icon {color: light-dark(#d2e0e3, #325156);}
.social a:hover, .social a:active, .social a:focus, .search-icon:hover, .search-icon:focus {color: #ffb78c;}

.social a .svg-icon {position: relative; top: 2px; width: 2.5rem; height: 2.5rem; box-sizing: border-box; padding: 1px 5px;}
.social a .svg-icon path {fill: light-dark(#d2e0e3, #325156);}
.social a:hover .svg-icon path, .social a:active .svg-icon path, .social a:focus .svg-icon path {fill: #ffb78c;}


.search-div {
 display: inline-block; width: 50px; margin: 0; padding: 10px; vertical-align: middle;
 background-color: #fff; border-radius: 25px; transition: width 0.3s ease-out; z-index: 1000; cursor: pointer;
}
.search-form {position: relative; min-width: 28px; width: 100%; height: 28px; overflow: hidden;}
.search-input {
 top: 0; right: 0; width: 100%; height: 28px; margin: 0 !important; padding: 5px; border: 0 !important;
 font-size: 1rem; color: #222; font-family: 'Lucida Grande', 'Trebuchet MS', Helvetica, Arial, sans-serif;
 background-color: #fff; box-shadow: none !important; opacity: 0; transition: opacity 0.3s ease-out;
}
.search-input::-webkit-search-cancel-button {display: none;}
.search-icon, .search-submit {
 display: block; position: absolute; top: 1px; right: 0; width: 29px; height: 29px; padding: 0; margin: 0;
 color: light-dark(#d2e0e3, #325156); font-size: 24px !important; text-align: center; line-height: 1 !important;
 cursor: pointer; background: transparent !important; border: 0;
}
.search-submit {color: transparent !important;}
.search-icon {transition: all 0.3s ease-out;}
article input[type=submit].search-submit {
 padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
.search-div.expanded {width: 300px; border: 1px #ccc solid; cursor: default;}
.search-div.expanded .search-input {opacity: 1;}
.search-div.alwaysexpanded {width: 300px !important;}

.header-search-div {position: absolute; top: 45px; right: 0; display: block; margin: 0;}
.header-search-div .search-form {float: right;}
.header-search-div, .header-search-div .search-input {background-color: light-dark(#e0eaec, #58b9b6);}
.header-search-div .search-input {color: #222;}
.header-search-div .search-icon, .header-search-div .search-submit {color: light-dark(#fff, #222);}
.header-search-div.expanded {border: 0;}
.header-search-div.expanded, .header-search-div.expanded .search-input {background-color: light-dark(#e0eaec, #58b9b6) !important;}

.header-search-div:hover, .header-search-div:hover .search-input,
 .header-search-div:focus, .header-search-div:focus .search-input {background-color: #ffb78c;}



/* home and blog intros */
.intro {background-color: light-dark(#e0eaec, #325156);}
.intro-left {float: left; width: 48%; padding: 0 0 0 20px; text-align: right;}
.intro-right {float: right; width: 48%; padding: 20px; text-align: left;}

.intro-left img {
 width: 100%; max-width: 340px; margin: -20px 0 -30px 0; border: 8px light-dark(#ffd4a0, #d78d60) solid; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); border-radius: 50%;
}
.intro-title {max-width: 420px; margin-top: 0.75em !important;}
.intro-text {max-width: 420px; font-size: 1.2rem; line-height: 1.5;}



/* home blog */
.home-blog {position: relative; width: 100%;}
.home-blog h1 {margin-bottom: 1em;}
.home-blog-button {position: absolute; top: 3.5em; right: 0;}
.heading-beside-button {margin-right: 190px;}



/* substack form */
.section-substack div {padding: 40px; background-color: light-dark(#e0eaec, #325156); text-align: center;}
.section-substack iframe {width: 500px; height: 400px; margin: 0 auto;}



/* default images */
.default-image-1 {
 background: url(images/signalhill-1.jpg) center center no-repeat; background-size: cover;
 filter: contrast(25%) sepia(100%) saturate(40%) hue-rotate(130deg);
}
.default-image-2 {
 background: url(images/signalhill-2.jpg) center center no-repeat; background-size: cover;
 filter: contrast(25%) sepia(100%) saturate(40%) hue-rotate(130deg);
}
.default-image-3 {
 background: url(images/signalhill-3.jpg) center center no-repeat; background-size: cover;
 filter: contrast(25%) sepia(100%) saturate(40%) hue-rotate(130deg);
}

.default-image-filter {
 filter: contrast(25%) sepia(100%) saturate(40%) hue-rotate(130deg);
}




/* body */
.section {margin-top: 2.5em;}
.section-page, .section-single, .section-archive, .section-search, .section-404 {
 max-width: 1000px; margin-left: auto; margin-right: auto;
}
.section-404 {text-align: center;}
.blog-intro, .section-archive {max-width: none;}

.section-divider {margin-top: 7em; padding-top: 4em; border-top: 6px light-dark(#ffd4a0, #d78d60) solid;}
.section-divider-small {margin-top: 0.5em; padding-top: 3em; border-top: 1px light-dark(#e0eaec, #325156) solid;}

.section article {font-size: 1.35rem; font-weight: 200; line-height: 1.5;}
.section-search article, .emm-paginate {clear: both; width: 100%; padding-top: 3em; margin-top: 3em; font-size: 1.2rem; line-height: 1.5; border-top: 1px #ccc solid;}
.section-page article li, .section-single article li, .post-excerpt, .post-image-wrapper, .gallery dl dt {max-width: 750px;}

.section article a:link, .section article a:visited, .section .post-meta a:link, .section .post-meta a:visited {
 text-decoration: underline dotted light-dark(#d2e0e3, #325156);
}
.section article a:hover, .section article a:active, .section .post-meta a:hover, .section .post-meta a:active {
 text-decoration: underline solid #ffb78c;
}

.section-single article h2, .section-single article h3, .section-page article h2, .section-page article h3 {margin-top: 2em;}
.heading-sublink {margin: -1em 0 2em 0; padding: 0; font-size: 1rem; text-transform: uppercase;}

.section article ul {list-style: none; margin: 1em 0; padding: 0 0 0 1.2em; text-indent: -1.2em;}
.section article ul li {margin: 0; padding: 0 0 0 1.2em; text-indent: -1.2em;}
.section article ul li::before {content: "•"; display: block; float: left; width: 1.2em; color: light-dark(#222, #fff);}

.section article ol {list-style-position: inside; margin: 1em 0; padding: 0 0 0 1.2em; text-indent: -1.2em;}
.section article ol li {margin: 0 0 0 0.5em; padding: 0;}

.section article figure.wp-block-table {margin: 1em 0 !important;}
.section article table {table-layout: fixed; width: 100%; font-size: 1rem; border-collapse: collapse; border: 1px #ccc solid;}
.section article table thead {border-bottom-width: 1px;}
.section article table, .section article table td, .section article table th, .section article table thead {border-color: light-dark(#ddd, #444);}
.section article th {background-color: light-dark(#eee, #000);}
.section article th, .section article td {padding: 10px; vertical-align: top;}

.post-block-container {display: flex; flex-flow: row wrap; margin: 0 -1.5%;}
.post-block-container article h2 {margin-top: 0;}
.post-block {flex: 0 1 25%; margin: 0 0 3% 0; padding: 0 1.5%;}
.section-search .post-block {padding-left: 0; padding-right: 0;}
.post-excerpt {margin-top: -1em; font-size: 1.25rem; font-weight: 200;}

.post-block-container article h2 {margin: 0.5em 0; font-size: 1.3em;}
.post-block-container article h2 a, .section-search .post-block h2 a {text-decoration: none !important;}
.post-block-container p {margin-top: 1em; font-size: 1.1rem; font-weight: 200;}
.post-block-container p.featured-post-date {margin-top: -0.6em; color: #aaa;}

.post-meta {margin: 1em 0;}
.post-date, .post-type {font-size: 1.1rem; line-height: 1.4;}
.post-taxonomies {margin-top: 1em; font-size: 0.85em; line-height: 1.4;}
.post-type {margin: 1em 0 -1em 0; color: #aaa;}
.post-type-text {text-transform: uppercase;}
.taxonomy-description {color: #aaa; margin-bottom: 2em;}

.post-image-wrapper {position: relative; height: 0; padding-bottom: 70%; border: 1px light-dark(#e0eaec, #325156) solid; overflow: hidden;}

.post-image-link {
 display: block; position: absolute; width: 100%; height: 100%; box-shadow: none !important;
 background-position: top center; background-repeat: no-repeat; background-size: cover; transition: transform 0.4s ease-out;
}
.post-image-link:hover {transform: scale(1.07);}

.search-image {float: right; width: 200px; max-width: 50%; height: auto; margin: 15px 0 15px 15px; border: 1px light-dark(#e0eaec, #325156) solid;}
a:hover .search-image {border: 1px #ffb78c solid;}

.post-previous-next {clear: both; margin: 3em 0; font-size: 1.2rem; line-height: 1.4;}
.post-previous-next-label {font-size: 1rem; color: light-dark(#222, #fff); text-transform: uppercase;}
.previous-next-date {font-size: 0.9rem; color: #999;}
.post-previous, .post-next {
 position: relative; width: 48.5%; padding: 15px; border: 1px light-dark(#e0eaec, #325156) solid;
}
.post-previous-next a {text-decoration: none !important;}
.post-previous:hover, .post-previous:active, .post-next:hover, .post-next:active {border-color: #ffb78c;}
.post-previous {float: left; text-align: right;}
.post-next {float: right;}



/* writing */
.home-writing {position: relative; width: 100%;}

.writing-block-container .post-block {flex: 0 1 100%; margin: 0 0 3em 0;}
.writing-image {float: left; max-width: 40%; margin: 0 20px 0 0;}

.writing-block-container .post-block h2 {margin-top: 0; font-size: 2.2rem;}
.writing-block-container .post-excerpt {float: left; max-width: 55%; margin: 1em 0; font-size: 1.2rem;}



/* blog */
.section-single, .section-archive {margin-top: 4em;}
.section-blog-post {margin-top: 6em; padding-top: 0; border-top: 6px light-dark(#ffd4a0, #d78d60) solid;}

.section-blog-post article {float: right; width: 73%; padding: 20px;}

.blog-meta-box {float: left; width: 27%; padding: 25px; background-color: light-dark(#e0eaec, #325156);}
.blog-meta-box .post-meta {margin-top: 0;}

.section article h1.blog-post-title {line-height: 1.2;}
.section article h1.blog-post-title a {text-decoration: none;}

.blog-archives-button {text-align: center;}
.blog-archives-button .button {font-size: 1.4rem !important;}



/* cover blocks */
.wp-block-cover p {max-width: 900px; margin: 1em auto;}
.wp-block-cover p.has-x-large-font-size {
 font-size: 3.3rem !important; font-weight: 600; line-height: 1.4;
}
.wp-block-cover p.has-large-font-size {
 font-size: 2.8rem !important; font-weight: 600; line-height: 1.4;
}
.wp-block-cover p.has-medium-font-size {
 font-size: 2rem !important; font-weight: 600; line-height: 1.4;
}
.wp-block-cover p.has-small-font-size {
 font-size: 1.5rem !important; font-weight: 600; line-height: 1.4;
}



/* forms */
input, textarea {margin: 0.5em 0; padding: 15px; font-size: 1.1rem; line-height: 1.5; border-radius: 2px;}
textarea {width: 100%; max-width: 500px !important;}

.section article form input, .section article form textarea {
 display: block; max-width: 100%; margin-top: 0.3em;
 border: 1px #ccc solid; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 12px inset;
 transition: all 0.3s ease-in-out;
}
.section article form input:focus, .section article form textarea:focus {
 box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset, #fff 0 0 5px;
 border: 1px #ffb78c solid;
}

.section article form select {
 padding: 15px; font-size: 1.1rem; line-height: 1.5; box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
}

article input[type=image] {
 padding: 0 !important; border: none !important; border-radius: 0 !important;
 box-shadow: none !important; text-shadow: none !important;
}



/* buttons */
.button, article input[type=submit], .wp-block-button__link, .wp-block-file .wp-block-file__button,
 .nf-form-wrap input[type=button] {
 display: inline-block; padding: 8px 24px !important;
 border: 0 !important; border-radius: 2px !important; box-shadow: 0 1px 1px #222 !important;
 background: #58b9b6 !important;
 color: #fff !important; font-size: 1.2rem !important; font-weight: 400 !important; text-shadow: rgba(0,0,0,.6) 0 1px 1px; text-decoration: none !important;
 vertical-align: middle; cursor: pointer; transition: background 0.15s ease-out;
}
.button:hover, .button:active, .button:focus,
 .wp-block-button__link:hover, .wp-block-button__link:active,
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:active,
 article input[type=submit]:hover, article input[type=submit]:active, article input[type=submit]:focus,
 .nf-form-wrap input[type=button]:hover, .nf-form-wrap input[type=button]:active {
 background: #ffb78c !important;
}
.button:active, article input[type=submit]:active,
 .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active,
 .nf-form-wrap input[type=button]:active {
 box-shadow: none !important; transform: translateY(2px);
}
article input[type="submit"].search-submit {background: transparent !important; background-image: none !important;}



/* footer */
.footer-wrapper-edge {
 position: relative; height: 40px; margin: 6em 0 0 0;
 background: url('images/landscape-wave-140.png') 0 0 repeat-x; background-size: 70px;
 animation: movewaves70 7s linear infinite;
}

.footer-wrapper {
 position: relative; margin: 0; background-color: #325156; border-bottom: 1px #325156 solid;
}
footer {
 position: relative; width: 1500px; min-height: 300px; margin: 0 auto 2em auto; padding-top: 4em;
 font-size: 1.4rem; color: #fff; line-height: 1.5; text-align: center;
}
h1.footer-title {color: #fff; max-width: 500px; margin: 0 auto;}
.footer-text {max-width: 500px; margin: 0 auto;}

footer a:link, footer a:visited {color: #58b9b6;}
footer a:hover, footer a:active {color: #ffb78c;}

.social-footer {position: relative; margin: 4em 0; text-align: center;}
.social-footer a {margin: 0 9px; font-size: 3rem;}
.social-footer a:link, .social-footer a:visited {color: #d2e0e3;}
.social-footer a:hover, .social-footer a:active, .social-footer a:focus {color: #ffb78c;}

.social-footer a .svg-icon path {fill: #d2e0e3;}
.social-footer a .svg-icon {width: 3.25rem; height: 3.25rem;}

.footer .copyright {margin: 4em auto 2em auto; font-size: 0.88rem;}

.footer .copyright a:link, .footer .copyright a:visited {color: #e0eaec; text-decoration: underline dotted #e0eaec;}
.footer .copyright a:hover, .footer .copyright a:active {color: #ffb78c; text-decoration: underline solid #ffb78c;}



/* sidebar */
aside {}

.relatedPages-title {font-size: 1.1rem;}

aside ul {list-style: none; margin: 0; padding: 0; line-height: 1.3;}
aside ul li {margin: 0; padding: 0 0 0 0.5em; text-indent: -0.5em;}
aside ul li ul li::before {content: "•"; display: block; float: left; width: 1.2em; color: #222;}

aside .current_page_item a {color: #222 !important;}


/* misc */
.read-more {}

.gallery {display: flex; flex-flow: row wrap; margin: 0 -1.5%;}
.gallery dl {flex: 0 1 25%; margin: 0 0 3% 0; padding: 0 1.5%;}
.gallery dl dt {position: relative; height: 0; padding-bottom: 75%; overflow: hidden;}
.gallery dl dt a {display: block; position: absolute; width: 100%; height: 100%;}
.gallery dl dt a img {display: block; width: 100%; height: auto; transition: transform 0.4s ease-out;}
.gallery dl dt.landscape a img {width: auto !important; min-width: 100%; max-width: none; height: 100%;}
.gallery dl a:hover img {transform: scale(1.07);}

.wp-block-gallery ul.blocks-gallery-grid {margin-bottom: 0; padding: 0; text-indent: 0;}
.wp-block-gallery ul.blocks-gallery-grid li, .nf-form-wrap .list-wrap li {padding: 0; text-indent: 0;}
.wp-block-gallery ul.blocks-gallery-grid li::before, .nf-form-wrap .list-wrap li::before {content: none !important;}
.wp-block-gallery ul.blocks-gallery-grid figcaption {display: none;}
.wp-block-gallery ul.blocks-gallery-grid a img {border: 1px light-dark(#e0eaec, #325156) solid;}
.wp-block-gallery ul.blocks-gallery-grid a:hover img {border: 1px #ffb78c solid; outline: 3px #ffb78c solid;}

.emm-paginate {clear: both; display: block; margin: 3em 0 1em 0; font-size: 1.4rem; line-height: 1.4; overflow-wrap: break-word;}
.emm-paginate a {padding: 1px 7px; text-align: center;}
.emm-paginate a:link, .emm-paginate a:visited {}
.emm-paginate a:hover, .emm-paginate a:active, .emm-paginate a:focus {background-color: light-dark(#e0eaec, #325156);}
.emm-paginate .emm-title {color: light-dark(#222, #fff); margin-right: 4px;}
.emm-paginate .emm-gap {color: #999;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}
.emm-paginate .emm-current {background-color: light-dark(#e0eaec, #325156); color: light-dark(#222, #fff); padding: 1px 7px; cursor: default;}



/* hide input placeholder text on focus; fix for ios automatically styling phone numbers */
input:focus::-webkit-input-placeholder, input:focus::-moz-placeholder {color: transparent;}
a[href^="tel"] {color: inherit; text-decoration: none;}



/* wordpress core */
div#wpadminbar {z-index: 10000 !important;}

.alignnone {margin: 5px 20px 20px 0;}
.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;}
a img.alignright {float: right;	margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float: left;	margin: 5px 20px 20px 0;}
a img.aligncenter {display: block;	margin-left: auto;	margin-right: auto;}

.wp-block-cover {color: #fff;}

.wp-block-image.alignwide, .wp-block-cover.alignwide, .wp-block-gallery.alignwide, .wp-block-columns.alignwide {
 position: relative; left: -10vw; width: calc(100% + 20vw); margin-top: 2em;
}
.alignfull {width: 100vw !important; max-width: 1580px; margin: 2rem calc(70% - 790px) 2rem calc(30% - 790px) !important;}

.wp-caption {padding: 5px 3px 10px;	max-width: 100% !important;}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {border: 0 none; height: auto;	margin: 0;	padding: 0;	max-width: 100% !important;}
.wp-caption .wp-caption-text, .gallery-caption, figcaption {
 clear: both !important; display: block !important; width: 100% !important; margin: 0;	padding: 4px;
 font-size: 0.8rem; color: #888; line-height: 1.3;
 font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet MS', 'Arial', sans-serif;
}
.wp-block-image figcaption {margin-top: -0.3em !important;}

input[type="password"] {
 margin: 0 5px; padding: 5px 7px; font-size: 0.9rem;
 border: 1px #999 solid; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset;
 transition: all 0.30s ease-in-out;
}
input[type="password"]:focus {
 box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset, #fff 0 0 5px; border: 1px #ffb78c solid;
}
.post-password-form p {margin: 2em 0;}






/* responsive */

/* When width is less than 1580 */
@media only screen and (max-width: 1580px) {
 html {font-size: 95%;}
 .landscapewrapper {width: 100%; max-width: 1580px; min-width: 310px;}
 .wrapper, .announcement {width: 96%; max-width: 1500px; min-width: 300px;}
 .header, .footer {width: 96%; max-width: 1500px; min-width: 300px;}
 
 .post-block {flex: 0 1 33.33%;}
 .home-blog .post-block-container .post-block:nth-child(n+4) {display: none;}

 .alignfull {max-width: 100vw; margin: 2rem calc(70% - 50vw) 2rem calc(30% - 50vw) !important;}
}


/* When width is less than 1100 */
@media only screen and (max-width: 1100px) {
}


/* When width is less than 1050 */
@media only screen and (max-width: 1050px) {
}


/* When width is less than 950 */
@media only screen and (max-width: 950px) {
 .post-block {flex: 0 1 50%;}
 
 .wp-block-image.alignwide, .wp-block-cover.alignwide, .wp-block-gallery.alignwide, .wp-block-columns.alignwide {left: 0; width: 100%;}
}


/* When width is less than 900 */
@media only screen and (max-width: 900px) {
}


/* When width is less than 830 */
@media only screen and (max-width: 830px) {
 /*#signal, #south3, #south2, #south1, #boats {bottom: calc( (350px * 0.4) - (100vw * .368 / 2.5));}*/
 /*#signal, #south3, #south2, #south1, #boats {bottom: calc(140px - 14.72vw);} /* same as above but simplified */
 #signal, #signallights {bottom: calc(140px - 13vw);} /* modified */
 #south3 {bottom: calc(140px - 13.5vw);} /* modified */
 #south2 {bottom: calc(140px - 13.8vw);} /* slightly lower */
 #south1, #boats, #southlights {bottom: calc(140px - 14.2vw);} /* slightly lower */
}


/* When width is less than 800 */
@media only screen and (max-width: 800px) {
 .logo {margin-top: 0.75em;}
 .section, aside {display: block; float: none; width: 100%; top: auto; left: auto; right: auto; bottom: auto;}
 .gallery dl {flex: 0 1 33.33%;}

 .blog-meta-box {float: none; width: 100%;}
 .section-blog-post article {float: none; width: 100%; padding: 20px 15px;}

 .alignfull {max-width: 100vw; margin: 2rem calc(50% - 50vw) !important;}
}



/* When width is less than 750 */
@media only screen and (max-width: 750px) {
 .wp-block-cover p.has-large-font-size {font-size: 1.4rem;}
}


/* When width is less than 650 */
@media only screen and (max-width: 600px) {
 .intro-left {float: none; width: 100%; text-align: center;}
 .intro-right {float: none; width: 100%;}
 .intro-left img {margin: -20px auto;}

 .section article {font-size: 1.24rem;}

 .writing-image {float: none; max-width: 100%; margin: 0;}
 .writing-block-container .post-excerpt {max-width: 100%;}
}


/* When width is less than 600 */
@media only screen and (max-width: 600px) {
 body.home-body .dark-switch-div {top: 6px; right: 10px;}
 .alignright, .alignleft {
  display: block; float: none !important; width: auto; height: auto; margin: 1em 0 !important; padding: 0;
 }
 .post-block {flex: 0 1 100%; margin-bottom: 3em;}
}


/* When width is less than 480 (also prevent nav from staying hidden on wider screens) */
@media only screen and (min-width: 481px) { .nav ul {display: block !important;} }
@media only screen and (max-width: 480px) {
 html {font-size: 90%;}
 .wrapper {width: 100%; padding-left: 10px; padding-right: 10px;}

 .logo {display: block; margin: 1em auto 0.5em auto; text-align: center;}
 
 .header-search-div {top: 50px; transform: scale(0.9); transform-origin: 100% 0 0;}
 
 .nav #menuToggle {display: block; font-size: 1.35rem;}
 .nav ul {display: none; font-size: 1.35rem;}
 .nav ul li {display: block; margin: 0 0 0.5em 0;}
 .nav ul li ul {
  display: block !important; position: relative; margin: 0 0 0.5em 0.75em; padding: 0; box-shadow: none; z-index: 0;
 }
 .nav ul li ul li {display: block; margin: 0; padding: 0;}
 .nav ul li ul li a {display: block; margin: 0; padding: 6px 18px;}
  
 article blockquote {margin: 1em 0.5em;}
 .gallery dl {flex: 0 1 50%;}

 .post-taxonomies {font-size: 0.9em;}
 
 .post-previous, .post-next {width: 100%; float: none; text-align: left;}
 .post-next {margin-top: 1.5em;}
 
 .footer .copyright {text-align: center;}

 .wp-block-cover p.has-x-large-font-size {font-size: 2.8rem !important;}
 .wp-block-cover p.has-large-font-size {font-size: 2.5rem !important;}
}


/* When width is less than 360 */
@media only screen and (max-width: 360px) {
}






/* touch devices without hover */
@media (hover: none) {
 
}






/* higher-resolution images */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
/*
 .logo {
  background-image: url('images/logo-2x.png');
  background-size: 400px 50px;
 }
*/
}






/* print stylesheet */
@media print {
 html {font-size: 80%;}
 .landscapewrapper, .dark-switch-div, .search-div, aside, .post-previous-next, .section-substack, .footer-wrapper-edge, .footer-wrapper, .footer {
  display: none !important;
 }
 .header-wrapper {border-top: none;}
 .header-wrapper, .header, .wrapper, .section {width: 100% !important; max-width: 100% !important; font-size: 0.82em !important;}
 article, .post-excerpt {font-size: 13pt !important;}
 article .wp-block-image {max-width: 60% !important;}
 .post-block {flex: 0 1 50%;}
 .blog-meta-box {float: none; width: 100%;}
 .section-blog-post article {float: none; width: 100%; padding: 20px 15px;}
 .alignfull {max-width: 100vw; margin: 2rem calc(50% - 50vw) !important;}
}