/*
Theme Name: Teo Foto
Author: 
Description: Your description goes here
Version: 1.0
Template: twentytwentyfour

This is the child theme for Twenty Twenty-Four theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/*
Theme Name: Matteo Franchi Foto
Author: 
Description: Your description goes here
Version: 1.0
Template: twentytwentyfour

This is the child theme for Twenty Twenty-Four theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  body, h1, h2, h3, h4, h5, h6 {
    --wp--preset--color--base: #272727 !important;
/*    --wp--preset--color--base-2: #303030 !important;*/
    --wp--preset--color--contrast: #282828 !important;
    --wp--preset--color--contrast-2: #B7B7B7 !important;
    --wp--preset--color--contrast-3: #BDBDBD !important;
    --wp--preset--color--custom-testo: #F9F9F9 !important;
    --wp--preset--color--custom-sfondo: #282828 !important;
    --wp--preset--color--custom-sfondo-home-page: #0e0d12 !important;
    --wp--preset--color--custom-sfondo-trasparente: #2828288f !important;
    background-color: #282828 !important;
    color: #f9f9f9 !important;
  }
	
  a {
    color: #F9F9F9 !important;
  }	
	
  a:hover,
  .wp-block-navigation a:hover {
    color: var(--wp--preset--color--custom-hover) !important;
  }
  
  .wp-elements-cfe0809ddf931d75fe1d45ac132df524 a,
  .wp-elements-38edf91bd99992a38c2fa703731f5d74 a {
    color: #282828 !important;
  }
		
  .custom-logo {
    content: url("https://www.teofranchi.com/wp-content/uploads/2024/07/Logo-Text-White-Transparent.webp");
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #282828 !important;
  }

  .wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: #282828 !important;
  }	
	
}

/* =========================
   Padding mobile/tablet
   ========================= */
@media only screen and (max-width: 1023px) {
  .blog-content,
  .page-content,
  .home .parallax:first-child {
    padding-top: 1.5rem; /* header mobile + spazio */
  }
	
  /* Overlay a tutto schermo */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Contenitore voci */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important; 
    width: 100%;
  }

  /* Singole voci */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    width: 100%;
    display: block;
  }
	
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
  	font-size: 1.3rem !important;
  	text-align: center !important;
  }	
	
}

/* =========================
   Focus accessibility outline
   ========================= */
:where(.wp-site-blocks *:focus) {
  outline-width: 0.125rem; /* 2px ≈ 0.125rem */
  outline-style: solid;
}

/* =========================
   Headline scroll margin
   ========================= */
h1, .wp-block-heading {
  scroll-margin-top: calc(3.2rem + 1rem);
}

/* Desktop */
@media only screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 2rem; /* altezza admin bar desktop */
  }
}

/* Mobile */
@media only screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 2.875rem; /* altezza admin bar mobile */
  }
}

.container {
	position: relative;
	width: 100%;
	height: 100vh;
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-x: auto;
	overflow-y: auto;
}
.parallax {
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}
.background {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: translateZ(-1px) scale(2);
}
.normal {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	background: #F9F9F9;
}

.parallax:nth-child(3) h1 { 
color: #282828;
}