/*


Theme Name: Journo


Theme URI: https://giorgininos.com/themes/journo


Author: Your Name


Author URI: https://giorgininos.com


Description: A custom WordPress theme for an independent journalist website.


Version: 1.0


License: GNU General Public License v2 or later


License URI: https://www.gnu.org/licenses/gpl-2.0.html


Text Domain: journo


*/





/* Global Styles */


* {


  box-sizing: border-box;


  margin: 0;


  padding: 0;


  font-family: "Helvetica Neue", Arial, sans-serif;


}


html, body {


  scroll-behavior: smooth;


  height: 100%;


}





/* Top Bar */


.top-bar {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 50px;


  display: flex;


  align-items: center;


  z-index: 1000;


  padding: 0 20px;


  background: transparent;


}


.seen-in {


  color: white;


  font-weight: bold;


  margin-right: 20px;


  white-space: nowrap;


  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);


}


.logo-marquee {


  flex-grow: 1;


  overflow: hidden;


  position: relative;


  height: 100%;


}


.logo-container {


  position: absolute;


  display: flex;


  align-items: center;


  height: 100%;


  animation: scroll 30s linear infinite;


  animation-delay: 1s;


  opacity: 0;


  animation-fill-mode: forwards;


}


.logo-container img {


  height: 30px;


  margin-right: 30px;


  object-fit: contain;


  filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0,0,0,0.5));


}


@keyframes scroll {


  0% { transform: translateX(100%); opacity: 1; }


  100% { transform: translateX(-100%); opacity: 1; }


}





/* Background and Overlay */


.background-wrapper {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100vh;


  background-size: cover;


  background-position: center;


  background-repeat: no-repeat;


  z-index: -2;


  transition: background-image 1s ease-in-out;


  background-color: white !important;


}


.overlay {


  position: fixed;


  top: 0; left: 0;


  width: 100%;


  height: 100vh;


  background: rgba(0,0,0,0.4);


  z-index: -1;


}





/* Updated hero section styles */


.hero {


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  text-align: center;


  height: 100vh;


  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/global-voices.png') no-repeat center center;


  background-size: cover;


  color: white;


}





/* Updated typography for hero section */


.name {


  font-size: 3em;


  font-weight: bold;


  margin-bottom: 10px;


}


.roles {


  font-size: 1.5em;


  margin-bottom: 20px;


}


.contact-btn {


  font-size: 1.2em;


  padding: 12px 25px;


  background: #4CAF50;


  color: white;


  border: none;


  border-radius: 5px;


  text-decoration: none;


  transition: background 0.3s ease;


}


.contact-btn:hover {


  background: #45a049;


}





/* Menu and Social Icons */


.menu {


  display: flex;


  flex-direction: column;


  gap: 20px;


  margin-top: 20px;


}


.menu a {


  color: white;


  text-decoration: none;


  font-size: 18px;


  text-transform: uppercase;


}


.social-icons-small {


  margin-top: 15px;


}


.social-icons-small a {


  color: white;


  margin-right: 15px;


  font-size: 20px;


  text-decoration: none;


  transition: color 0.3s ease, transform 0.3s ease;


}


.social-icons-small a:hover {


  color: #ccc;


  transform: scale(1.2);


}





/* Podcast Section */


.podcast-section {


  background: transparent;


  padding: 60px 20px;


  text-align: center;


  color: white;


  position: relative;


  z-index: 1;


}


.podcast-section h2 {


  font-size: 36px;


  font-weight: bold;


  text-transform: uppercase;


  margin-bottom: 20px;


  letter-spacing: 2px;


  animation: slideIn 1s ease-out;


}


.podcast-section p {


  font-size: 18px;


  margin-bottom: 30px;


  max-width: 600px;


  margin-left: auto;


  margin-right: auto;


}


.podcast-frame {


  max-width: 600px;


  margin: 0 auto;


  transition: transform 0.3s ease;


}


.podcast-frame:hover {


  transform: scale(1.02);


}





/* Updated contact modal styles */


.contact-modal {


  display: none;


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: rgba(0, 0, 0, 0.8);


  z-index: 1000;


  justify-content: center;


  align-items: center;


}


.modal-content {


  background: white;


  padding: 20px;


  border-radius: 8px;


  max-width: 500px;


  width: 90%;


  text-align: center;


}


.modal-content h2 {


  margin-bottom: 20px;


  font-size: 1.8em;


}


.modal-content input,


.modal-content textarea {


  width: 100%;


  padding: 10px;


  margin-bottom: 10px;


  border: 1px solid #ccc;


  border-radius: 4px;


}


.modal-content button {


  background: #4CAF50;


  color: white;


  padding: 10px 20px;


  border: none;


  border-radius: 4px;


  cursor: pointer;


  transition: background 0.3s ease;


}


.modal-content button:hover {


  background: #45a049;


}





/* Media Queries for Mobile Devices */


@media (max-width: 600px) {


  .name {


    font-size: 36px;


  }


  .roles {


    font-size: 14px;


  }


  .contact-btn {


    padding: 8px 20px;


    font-size: 14px;


  }


  .menu a {


    font-size: 16px;


  }


  .social-icons-small a {


    font-size: 18px;


    margin-right: 12px;


  }


  .top-bar {


    height: 40px;


    padding: 0 10px;


  }


  .seen-in {


    font-size: 14px;


    margin-right: 10px;


  }


  .logo-container img {


    height: 20px;


    margin-right: 20px;


  }


  .modal-content {


    margin: 20% auto;


    padding: 20px;


  }


}


/* MOBILE FULL-SCREEN MENU */


.mobile-nav-overlay {


  display: none;


  position: fixed;


  top: 0; left: 0;


  width: 100%;


  height: 100vh;


  background: rgba(0, 0, 0, 0.95);


  z-index: 2000;


  justify-content: center;


  align-items: center;


  flex-direction: column;


  animation: fadeIn 0.3s ease;


}





.mobile-nav-overlay ul {


  list-style: none;


  padding: 0;


  margin: 0;


  text-align: center;


}





.mobile-nav-overlay ul li {


  margin: 20px 0;


}





.mobile-nav-overlay ul li a {


  color: white;


  text-decoration: none;


  font-size: 1.5rem;


  font-weight: bold;


  transition: color 0.3s ease;


}





.mobile-nav-overlay ul li a:hover {


  color: #ccc;


}





.nav-toggle,


.nav-close {


  font-size: 2rem;


  color: white;


  cursor: pointer;


  z-index: 2001;


}





.nav-toggle {


  display: none;


}





@media (max-width: 768px) {


  .nav-toggle {


    display: block;


  }


  .desktop-nav {


    display: none;


  }


  .mobile-nav-overlay.open {


    display: flex;


  }


}





@keyframes fadeIn {


  from { opacity: 0; }


  to { opacity: 1; }


}


/* Make space for the fixed top-bar */


.content-wrapper {


  padding-top: 120px; /* adjust if needed */


  font-family: "Helvetica Neue", Arial, sans-serif;


}


@media (max-width: 768px) {


  .blog-post-container {


    margin: 0 15px;


    padding: 25px 20px;


    background: white; /* Set white background for mobile */


  }


  .blog-post-container {


    background-color: white !important; /* Ensure white background for mobile */


  }


}


body {


  padding-bottom: 60px;


}


@media (max-width: 768px) {


  .top-bar {


    padding: 8px 16px;


    height: 70px;


  }





  .branding h1 {


    font-size: 1.2rem; /* Make Giorgi Ninos text smaller */


  }





  .branding p {


    font-size: 0.75rem;


    line-height: 1;


  }





  .nav-toggle {


    font-size: 1.5rem;


  }





  .content-wrapper {


    padding-top: 90px; /* match height of the mobile top bar */


  }


  body {


    background-color: white !important; /* Ensure white background behind .blog-post-container */


  }


}


.recent-posts-widget {


  max-width: 600px; /* match Spotify size */


  margin: 40px auto;


  padding: 0 15px;


  font-family: "Helvetica Neue", Arial, sans-serif;


}


.recent-title {


  font-size: 1.2rem;


  margin-bottom: 20px;


  color: white;


  text-transform: uppercase;


  letter-spacing: 1px;


}


.recent-posts-list {


  list-style: none;


  margin: 0;


  padding: 0;


}


.recent-post-item {


  display: flex;


  align-items: center;


  margin-bottom: 20px;


  gap: 15px;


  background: rgba(255,255,255,0.05);


  padding: 10px;


  border-radius: 8px;


}


.recent-post-item .thumbnail img {


  width: 60px;


  height: 60px;


  object-fit: cover;


  border-radius: 6px;


}


.recent-post-item .post-title a {


  color: white;


  text-decoration: none;


  font-size: 0.95rem;


  font-weight: 500;


  transition: color 0.3s ease;


}


.recent-post-item .post-title a:hover {


  color: #ccc;


}





@media (max-width: 600px) {


  .recent-post-item {


    flex-direction: row;


  }


  .recent-post-item .post-title a {


    font-size: 0.9rem;


  }


}





.social-icons-small {


  margin-top: 15px;


}





.social-icons-small a {


  color: white;


  margin-right: 15px;


  font-size: 20px;


  text-decoration: none;


  transition: color 0.3s ease, transform 0.3s ease;


}





.social-icons-small a:hover {


  color: #ccc;


  transform: scale(1.2);


}





@media only screen and (max-width: 768px) {


  body {


    margin: 0;


    padding: 0;


    overflow-x: hidden; /* Prevent horizontal scrolling */


    touch-action: none; /* Prevent unintended touch interactions */


  }





  .transparent-layer {


    display: none; /* Remove the left transparent layer for mobile */


  }





  .right-layer {


    position: fixed; /* Ensure the layer remains static */


    left: 0;


    top: 0;


    width: 100%;


    height: auto;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: flex-start;


    padding: 20px;


    box-sizing: border-box;


    text-align: left;


    transform: none; /* Remove transform to prevent movement */


  }





  .name-profession h1 {


    font-size: 40px !important; /* Ensure the font size is applied by using !important */


    line-height: 1.2em;


    margin: 0;


    white-space: nowrap;


    color: white;


  }





  .name-profession h2 {


    font-size: 14px; /* Adjusted font size to fit in one line */


    margin: 10px 0 20px;


    white-space: nowrap; /* Ensure text stays in one line */


    color: white;


  }





  .contact-button {


    margin-bottom: 40px; /* Increased space between CONTACT and the menu items */


  }





  .contact-button a {


    padding: 10px 20px;


    background: white;


    color: black;


    text-decoration: none;


    border-radius: 0;


    border: 2px solid white;


  }





  .menu-list {


    margin-top: 40px; /* Adjusted margin to balance space between Portfolio and Contact */


  }





  .menu-list ul {


    list-style: none;


    padding: 0;


    margin: 0;


  }





  .menu-list ul li {


    margin-bottom: 15px;


  }





  .menu-list ul li a {


    text-decoration: none;


    color: white;


    font-weight: bold;


  }





  .social-icons {


    margin-top: 20px;


    display: flex; /* Align icons in one line */


    justify-content: flex-start;


    gap: 10px; /* Add spacing between icons */


  }





  .social-icons a {


    margin: 0 10px;


    color: black;


  }


}


/* Add this CSS to hide the left transparent layer on mobile devices */
@media (max-width: 768px) {
  .left-layer {
    display: none;
  }
}


/* Ensure scrolling is enabled on mobile devices */
@media (max-width: 768px) {
  body, html {
    overflow: auto !important;
    touch-action: auto !important;
  }
}


.name-profession h1 {


  font-size: 50px; /* Set font size to 50 for desktop */


}