/*
 Theme Name: thezurichrunner Theme
 Description: thezurichrunner Child Theme
 Author: Thezurichrunner
 Author URI: https://zurichrunner.com
 Template: twentytwentyfour
 Version: 1.0
*/

/* The below code controls the appearance and behaviour of the sticky and transparent header. */

.site-header {
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(249, 249, 249, 0.5);
  /*background-image: linear-gradient(to bottom, rgba(249, 249, 249, 0.9) 0%, rgba(249, 249, 249, 0) 100%);*/
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.site-header.sticky {
  position: fixed;
  top: 0;
}

/* The below code ensures the hero-section1 has the correct height with no borders or padding visible at the top. Further, hero-section1 triggers the header behaviour where the header appears at the bottom of the hero-section1*/

.hero-section1 {
  height: 100vh;
  /*background-image: url('https://zurichrunner.com/wp-content/uploads/2023/11/Aerial_Zurich.jpeg');*/
  background-size: cover;
  background-position: center;
}

/* The below code ensures the hero-section2 has the correct height with no borders or padding visible at the top. Further, hero-section2 makes the header a regular sticky header */

.hero-section2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

/* The below code aligns the H1 title text on the home page. */

.center-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.center-text h1 {
  transform: translateY(-15vh); /* adjust this value to move the text up or down */
}

/*.has-background {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/

/* The below code contains the animated scroll button */

.scroll-button {
	position: absolute;
	height: 10em;
	width: 6em;
	border: 0.5em solid #ffffff;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10vh;
	border-radius: 3em;
}

.scroll-button:before {
	position: absolute;
	content: "";
	margin: auto;
	left: 0;
	right: 0;
	height: 1.5em;
	width: 1.5em;
	background-color: #ffffff;
	border-radius: 50%;
	animation: move-down 2s infinite;
}

@keyframes move-down {
	80% {
		opacity: 0.5;
	}
	100% {
		transform: translateY(3.5em);
		opacity: 0;
	}
}

/* The below code is used to fade in the scroll button and the title of the home page. */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.center-text h1,
.scroll-button {
  opacity: 0;
  animation: fade-in 3s forwards;
}

/* The below code allows a custom css class called 'strava-icon' to be added to any social media icon, to turn it into a Strava icon. */

.strava-icon:before {
  content: "";
  display: inline-block;
  width: 55px;
  height: auto;
  background-image: url('https://zurichrunner.com/wp-content/uploads/2023/11/strava_black_logo_icon_147077.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* The below code overwrites the parent theme's margin value for the wp-site-blocks, i.e. defines the top margin of the header and footer. */

:where(.wp-site-blocks) > * {
    margin-block-start: 0; margin-block-end: 0;/* Your custom value */
}

/* The below code styles the reading progress bar. Adjust the height, color etc. as needed */

#progress-bar {
    height: 3px;
    background-color: blue;
    position: fixed;
    top: var(--header-height); /* Set the top position based on the header's height */
    left: 0;
    right: 0;
    z-index: 9999;
    transition: width 0.3s ease;
}