/*
Theme Name: Rent Manager Core Child
Text Domain: rmcorechild -
Template: rmcore
Author: Rent Manager
Author URI: https://www.rentmanager.com
Description: Custom theme created by Rent Manager
Version: 1.1.5
License: Proprietary, non-distributed
*/

@import url('assets/css/_episodes.css');

body {
background-repeat: no-repeat;
padding-top: 140px;
box-sizing: border-box;
background: #031022;
background: linear-gradient(300deg,#0d2546,#2a659c,#0d2546);
background-size: 120% 120%;
}

body * {
  box-sizing: inherit; }



@keyframes gradient-animation {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

img {
  max-width: 100%;
  height: auto; }

a {
	text-decoration: none;
}


/* Gutenberg alignment sample */
@media screen and (min-width: 68em) {
  .main-wrapper {
    overflow: hidden; }
  .main {
    max-width: 60em;
    margin: 0 auto; }
  .entry-content .alignfull {
    margin-left: calc( -100vw / 2 + 100% / 2);
    margin-right: calc( -100vw / 2 + 100% / 2);
    max-width: 100vw; }
  .entry-content .alignwide {
    margin-left: -4em;
    margin-right: -4em;
    max-width: 68em; } }

/* Gutenberg custom color sample */
.has-branding-color {
  color: #f53333; }

.has-branding-background-color {
  background-color: #f53333; }


/* Below is customization of RM Core */

/* =============================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Font Family: Figtree is used throughout */
body {
	font-family: "Figtree", sans-serif;
}

h1 {
	font-size: 3.815rem;
	font-family: Figtree, sans-serif;
}

h2 {
	font-size: 2.441rem;
	font-family: Figtree, sans-serif;
}

h3 {
	font-size: 2.441rem;
	font-family: Figtree, sans-serif;
}

h4 {
	font-size: 1.953rem;
	font-family: Figtree, sans-serif;
}

h5 {
	font-size: 1.563rem;
	font-family: Figtree, sans-serif;
}

h6 {
	font-size: 1.25rem;
	font-family: Figtree, sans-serif;
}

small {
	font-size: 0.8rem;
	font-family: Figtree, sans-serif;
}

p {
	font-size: 1em;
	line-height: 2em;
	font-family: Figtree, sans-serif;
	font-weight: 100;
}

/* =============================================================================
   LAYOUT
   ========================================================================== */



.wrap {
	margin: 1rem;
	padding: 2rem;
	background-color: #eee;
	border-radius: 5px;
}

.logo-area {
	height: 14vh;
	z-index: 99999;
	width: 105%;
	position: fixed;
	top: 0;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
	background-color: #0D2546;
	margin-left: -1em;
	margin-right: -1em;
}

.logo-area img {
	height: 12vh;
}

.primary-menu-area {
	float: right;
	width: 600px;
	position: absolute;
	top: 5vh;
	right: 20%;
}

.primary-menu-area li {
	float: right;
	padding: 0 2vh;
	list-style-type: none;
}

.primary-menu-area li a {
	font-size:1.2rem;
	font-family: Figtree, sans-serif;
	color: #bbb;
	text-decoration: none;
	border-bottom: 2px solid #99C8FF;
}

.primary-menu-area li a:hover {
	color: #fff;
	border-bottom: 2px solid #fff;
}


/* =============================================================================
   RESPONSIVE / MOBILE STYLES
   ========================================================================== */

/* Desktop: Hide mobile-only elements */
@media screen and (min-width: 1024px) {
	.mobile-only {
		display: none;
	}
}

/* Mobile: Show mobile-only elements and adjust layout */
@media screen and (max-width: 1024px) {
	.mobile-only {
		display: block;
		margin: 20px;
		padding: 10px;
	}
	
	.mobile-only h2 {
		font-size: 2.25em;
	}
	
	.firstsection {
		display: none;
	}
	
	
	 .featured-video iframe {
		width: 100% !important;
		height: 169px !important;
	} 
}

/* =============================================================================
   HERO / FIRST SECTION
   ========================================================================== */

.firstsection {
	color: #ffffff;
	height: 60vh;
}

.wp-block-embed__wrapper {
	width: 460px;
	margin: 0;
}

/* =============================================================================
   EPISODE NAVIGATION
   ========================================================================== */
.episode-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.episode-navigation a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.2s;
}

.episode-navigation a:hover {
    background: #e0e0e0;
}

.episode-navigation .nav-label {
    font-size: 0.9em;
    color: #666;
}

.episode-navigation .nav-title {
    font-weight: 600;
    color: #333;
}

.episode-navigation .nav-episode-number {
    color: #0073aa;
    margin-right: 5px;
}

.episode-navigation .nav-placeholder {
    flex: 1;
}


/* =============================================================================
   SLIDE
   ========================================================================== */

@-webkit-keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
@keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
@-webkit-keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -400px;
    opacity: 0;
  }
}
@keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -400px;
    opacity: 0;
  }
}

#scene {
  color:#ffffff;
  background: #0d25467a;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 90%;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}
#scene #left-zone {
  color: #ffffff;
  background: #0D2546;
  height: 75%;
  flex-grow: 0;
  display: flex;
  width: 105px;
  align-items: center;
  justify-content: left;
}
#scene #left-zone .list {
  display: flex;
  list-style: none;
  align-content: stretch;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
  padding: 0;
}
#scene #left-zone .list li.item input[type=radio] {
  display: none;
}
#scene #left-zone .list li.item input[type=radio] ~ label {
  display: block;
  color: #ffffff;
  height: 50px;
  text-align: left;
  line-height: 50px;
  margin-left: 5px;
}
#scene #left-zone .list li.item input[type=radio] ~ label:first-letter {
  text-transform: uppercase;
}
#scene #left-zone .list li.item input[type=radio] ~ label:hover {
  opacity: 0.75;
  cursor: pointer;
}

#scene #left-zone .list li.item input[type=radio] ~ label:before {
  content: " ";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
}
#scene #left-zone .list li.item input[type=radio] ~ .content {
  position: absolute;
  left: 105px;
  top: -400px;
  height: 400px;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-name: slideout;
          animation-name: slideout;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#scene #left-zone .list li.item input[type=radio] ~ .content {
  height: 100px;
  width: 100px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


#scene #left-zone .list li.item input[type=radio] ~ .content h1:first-letter {
  text-transform: uppercase;
}
#scene #left-zone .list li.item input[type=radio] ~ .content p {
  max-width: 80%;
  text-align: left;
}
#scene #left-zone .list li.item input[type=radio]:checked ~ label {
  opacity: 1;
  -webkit-animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#scene #left-zone .list li.item input[type=radio]:checked ~ label {
  color: #c0dff2;
  border-right: solid 4px #c0dff2;
}
#scene #left-zone .list li.item input[type=radio]:checked ~ .content {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-name: slidein;
          animation-name: slidein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#scene #middle-border {
  height: 75%;
  flex-grow: 1;
  max-width: 2px;
  z-index: 0;
}
#scene #right-zone {
  height: 100%;
  flex-grow: 3;
}