/*
 Theme Name:   OGAL 2022
 Theme URI:    https://ogalweb.com
 Description:  OGAL Web Design Theme
 Author:       Kyle Van Deusen
 Author URI:   https://ogalweb.com
 Template:     generatepress
 Version:      2022.1
*/


/* Set the main content area to a minimum of 65vh */
#main {
	min-height: 65vh;
}



/* Site Wrapper to set overall site max width */
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	background-color: #0f0f0f;
} 

body {
	background-color: #000000;
}


/* HELPER CLASSES */

/* Standard Shadow(s) */

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}


.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin */

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}


.margin-0{
	margin-top: 0px !important;
}

/* Position Properties */

.relative{
	position: relative;
}

.absolute{
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky{
	position: sticky;
	top: 24px;
}

/* Image Aspect Ratios */

.aspect-1-1 img{
    aspect-ratio: 1/1;
	object-fit: cover;
}

.aspect-3-2 img{
    aspect-ratio: 3/2;
	object-fit: cover;
}

.aspect-2-3 img{
    aspect-ratio: 2/3;
	object-fit: cover;
}

.aspect-4-3 img{
    aspect-ratio: 4/3;
	object-fit: cover;
}

.aspect-3-4 img{
    aspect-ratio: 3/4;
	object-fit: cover;
}

.aspect-16-9 img{
    aspect-ratio: 16/9;
	object-fit: cover;
}

.aspect-9-16 img{
    aspect-ratio: 9/16;
	object-fit: cover;
}

/* Site Specific CSS */
/* Navigation */

/* Primary Nav - Float Buttons Right */
@media(min-width: 1024px) {
  .main-navigation .inside-navigation .main-nav {
      flex: 1;
  }
  .main-navigation li:nth-last-child(1) {
      margin-left: auto;
  }
}

.site-wrapper{
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 6px solid var(--brand);
}



@media (min-width: 1140px) {
.main-navigation .main-nav ul li.nav-button a {
  background: var(--brand);
  color: var(--neutral-800);
  padding:  16px 32px !important;
  line-height: 1em;
  border-radius: 4px;
  transition: background .2s ease-in;
	}
	
.main-navigation .main-nav ul li.nav-button a:hover {
  background: var(--neutral-0);
  color: var(--neutral-800);
  padding:  16px 32px !important;
	line-height: 1em;
  margin-left: 16px;
  border-radius: 4px;
  }	
}

.site-logo{
	padding-right: 24px;
}

@media (max-width: 768px) {
#site-navigation {
	padding-left: 8px;
	padding-right: 8px;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
#site-navigation {
	padding-left: 16px;
	padding-right: 16px;
}
}



}

/* Utility */

.max-width-80-p{
	max-width: 80%;
}

.site-wrapper{
	overflow: hidden;
}

/* text bars */

.right-bar {
	position: relative;
	background-color: var(--neutral-900);
	width: max-content;
	padding-right: 16px;
}

.right-bar:after{
	content:'';
	position: absolute; 
	width: 300vw;
	height: 4px;
	background: var(--brand);
	left: 0px;
	bottom: .5em;
	z-index:-1;
}

.left-bar {
	position: relative;
	background-color: var(--neutral-900);
	width: max-content;
}

.left-bar:after{
	content:'';
	position: absolute; 
	width: 300vw;
	height: 4px;
	background: var(--brand);
	right: 224px;
	bottom: .5em;
	z-index:-1;
}


@media (min-width: 1025px) {
.page-title-bar	{
	position: relative;
	background-color: var(--neutral-850);
	width: max-content;
	padding-right: 16px;
	z-index: 4;
}

.page-title-bar:after{
	content:'';
	position: absolute; 
	background-color: var(--neutral-850);
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: -1;
}

.page-title-bar:before	{
	content:'';
	position: absolute; 
	width: 300vw;
	height: 4px;
	background: var(--brand);
	left: 0px;
	bottom: .5em;
	z-index: -1;
}
}


.page-hero-container {
	overflow: hidden;
}

/* blog posts */

.post-content-wrapper p {
	line-height: 1.6em;
	max-width: 65ch;  
}

.post-content-wrapper a{
	color: var(--neutral-0);
	text-decoration-color: var(--brand);
	transition: all .2s ease-in;
}

.post-content-wrapper a:hover{
	color: var(--brand);
}

.post-content-wrapper{
		position: relative;
}

.post-content-wrapper h2, .post-content-wrapper h3, .post-content-wrapper h4 {
	margin-top: 60px;
}



.post-content-wrapper h2{
	font-size: 2.25rem;
}

@media (max-width: 768px) {
.post-content-wrapper h2 {
	font-size: 2.0em;
}
}

.blog-join-cta-box {
	position: relative;
}

.blog-join-cta-box:after{
	content: '';
	width: 32px;
	height: 32px;
	background-color: var(--neutral-850);
	position: absolute; 
	right: 60px;
	transform: rotate(45deg) translatey(-21px);
	border-bottom: 1px solid var(--neutral-800);
	border-right: 1px solid var(--neutral-800);
	z-index: 0;
	border-bottom-right-radius: 4px;
}

.blog-card .dynamic-entry-excerpt {
	font-size: 1rem;

}

.blog-card{
	position: relative;
}

.blog-card .blog-card-button{
	position: absolute; 
	bottom: 32px;
}

/* dark mode switcher */
@media (min-width: 769px) { 
	.mode-switch-button{
	width: 24px;
	height: 24px;
	cursor: pointer;
	position: absolute; 
	left: -40px;
}
}

@media (max-width: 768px) {
.mode-switch-button{
	width: 24px;
	height: 24px;
	cursor: pointer;
	margin-bottom: 16px;
}
}

g#moon{
	opacity: 0;
	transition: .5s opacity ease-in;
}

g#sun{
	opacity: 1;
	transition: .5s opacity ease-in;
}

.light-mode g#moon{
	opacity: 1;
}

.light-mode g#sun{
	opacity: 0;
}

.light-mode{
	background-color: var(--neutral-0);
	color: var(--neutral-700);
}

.light-mode h2, .light-mode h3, .light-mode h4{
	color: var(--neutral-850);
}

.light-mode a{
	color: var(--neutral-900);
	text-decoration-color: var(--brand);
}

.light-mode a:hover{
	color: var(--neutral-900);
	text-decoration-color: var(--neutral-900);
}

.light-mode .blog-sidebar {
	background-color: var(--neutral-50);
	border-color: var(--neutral-100)
}

.light-mode .blog-join-cta-box:after {
	background-color: var(--neutral-50);
	border-color: var(--neutral-100)
}

.light-mode .blog-sidebar-social-button {
	background-color: var(--neutral-100);
	color: var(--neutral-500)
}

.light-mode .blog-sidebar-social-button:hover {
	background-color: var(--neutral-200);
	color: var(--neutral-600)
}

#blogContent{
	transition: .2s all ease-in;
}

/* general tweaks */

a {

	text-decoration-color: var(--brand);
	transition: all .2s ease-in;
}

 a:hover{
text-decoration-color: var(--neutral-0);
}

/* Podcast Wrapper */

.podcast-wrapper .dynamic-entry-content {
	margin-top: 48px;
}

/* Fluent Forms */

.fluentform .frm-fluent-form input:not([type="submit"]),
.fluentform .frm-fluent-form textarea {
	border-width: 1px;
	border-radius: 4px;
	border-color: var(--neutral-800);
	background-color: var(--neutral-850);
	padding: 12px 16px;
	color: var(--neutral-300);
}



.fluentform .ff-el-group {
  margin-bottom: 15px;
}

.fluentform .frm-fluent-form input:not([type="submit"]):focus ,
.fluentform .frm-fluent-form textarea:focus {
	border-width: 1px;
	border-color: var(--neutral-700);
	background-color: var(--neutral-800);
	color: var(--neutral-0);
}

.fluentform .ff_t_c {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-300);
  padding-left: 5px;
  padding-bottom: 16px;	
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border: 1px solid red;
}

.fluentform .ff-el-is-error .text-danger {
  font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
  color: red;
}

.fluentform .ff-el-form-check-label .ff-el-form-check-input {
  top: -1px;
}

.fluentform .frm-fluent-form .ff-el-input--label label {
	font-size: .9rem;
	font-weight:500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--neutral-300);
}

.fluentform .frm-fluent-form input::placeholder,
.fluentform .frm-fluent-form textarea::placeholder {
	font-size:16px;
	font-weight:400;
	color: var(--neutral-300);
}

.fluentform .frm-fluent-form button[type='submit'] {
	font-size:16px;
	font-weight:600;
	color: var(--neutral-800);
	background-color: var(--brand);
	padding:12px 32px;
	height: auto;
	display: block;
	margin-right: auto;
	text-transform: uppercase; 
	letter-spacing: .1em;
}

.fluentform .frm-fluent-form button[type='submit']:hover {
	color: var(--neutral-900);
	background-color: var(--neutral-0);
}

.ff-message-success {
  position: relative;
  border: 1px solid #fec200;
  box-shadow: none;
  color: white;
  padding: 0px;
  margin-top: 20px;
}


.home-podcast-grid {
	flex-direction: row-reverse;
}

/* search */

.wp-block-search__inside-wrapper {
	border: 0px solid var(--neutral-900) !important;
		background-color: var(--neutral-700) !important; 
	border-radius: 4px;
} 

.wp-block-search__button {
		background-color: var(--neutral-700) !important; 
	color: var(--neutral-200);
	border: none;
}


.wp-block-search__input {
	background-color: var(--neutral-700) !important;
}



 .post-type-post .block-editor-block-list__layout {
    max-width: 728px;
    margin-inline: auto;
}

.post-type-post .edit-post-visual-editor__post-title-wrapper .editor-post-title {
	max-width: 728px;
    margin-inline: auto;
}