/*
 Theme Name:   NYC Chess 2024 (twenty twenty theme mod)
 GitHub Theme URI: https://github.com/ngolebiewski/nyc-knights
 GitHub Branch: main
 Description:  The NYC Knights child theme for the Twenty Twenty theme.
 Author:       Nick Golebiewski
 Author URI:   https://tech.nickgolebiewski.com
 Template:     twentytwenty
 Version:      1.0.0
 Text Domain:  twentytwenty-nyc-chess
 Screenshot:   screenshot.png
*/

/*
  Hi next person or parent updating the PS41 chess webpage. Well, it's on Wordpress, 
  I needed to switch templates in 2024 when PHP 7.4 went defunct and the wordpress.com server was updating everything to PHP 8.1
  The template designed after 10/15 years ago isn't compatible, I tried updating it, but it was a no go. 
  I decided to use a default wordpress template: twenty twenty, and create a child theme for it, in order for updates to be able to be applied for the longest time.
  I thought everything would be Node and Javascript in the web, but here it is, this will seem so "legacy" when you read it.
  I made a github repo so you can grab all this code, since it is inacessable even if you ssh into the sever.
  https://github.com/ngolebiewski/nyc-knights
  All the best and watch out for the 4 move checkmate,
  Nick
  6-24-2024
*/

/*
Nice background blue: #b3ddf2
*/

/* Import the parent theme's stylesheet */
@import url("../twentytwenty/style.css");

/* Add your custom styles below */

* {
  font-family: "greycliff-cf", Helvetica, Futura, Arial, sans-serif !important;
}

h1 {
  font-size: 3em !important;
}

@media (max-width: 700px) {
  h1 {
    font-size: 2em !important;
  }
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: 75rem;
  width: calc(100% - 4rem);
}

@media (min-width: 700px) {
  .singular .entry-header {
    padding: 2rem 0;
  }
}

@media screen and (min-width: 700px) {
  .header-titles img.logo-img {
    max-width: 33%; /* Make the logo half-width */
    height: auto; /* Maintain aspect ratio */
  }
  #header-logo {
    max-width: 100%;
    height: auto;
  }
}

/* CSS for adjusting menu positioning */
@media screen and (min-width: 1024px) {
  .header-titles {
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Spread items apart */
  }
  .header-navigation-wrapper {
    flex: 1; /* Fill remaining space */
  }
}

/* Media query for adjusting logo size */
@media (max-width: 768px) {
  .centered-logo {
    max-width: 70%; /* Adjust the maximum width as needed */
  }
}

@media (min-width: 1000px) {
  .centered-logo {
    max-width: 100%; /* Ensure the logo doesn't exceed its container's width */
    height: auto; /* Maintain aspect ratio */
  }
  .header-titles-wrapper {
    max-width: 30%;
  }
}