/*
 Theme Name:   Skydive Ostschweiz
 Description:  Child-Theme von Storefront für Skydive Ostschweiz.
 Author:       Lukas Kurtz
 Author URI:   https://www.10min.ch
 Template:     storefront
 Version:      1.1
 Text Domain:  skydive-ostschweiz
*/

/* ===========================
   GLOBAL FIX
   =========================== */

/* Kein horizontaler Scroll */
html,
body {
    overflow-x: hidden;
}

/* Abstand oberhalb der main entfernen */
.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hentry {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-group:first-child {
    margin-top: 0 !important;
}

.red{
	color: #cb2146 !important;
}

.fat{
	font-weight: bold;
}

.white{
	color: white !important;
}

/* ===========================
   HEADER
   =========================== */

header#masthead,
#masthead.site-header {
    background-repeat: no-repeat !important;
    background-image: url("https://webshop.skydive-ostschweiz.ch/wp-content/uploads/2020/05/bg_skydiveostschweiz.png");
    background-size: cover;
    background-position: center center;
    background-color: #cb2146 !important;
    padding-top: 1em;
    padding-bottom: 0;
    height: 170px !important;
    width: 100% !important;
    margin-bottom: 0;
}

.site-header .custom-logo-link img,
.site-header .site-logo-anchor img,
.site-header .site-logo-link img {
    margin-bottom: -45px;
    height: auto;
    max-height: 120px;
}

.woocommerce-products-header {
    display: none !important;
}

.site-header {
    padding-top: 0.5em;
    padding-bottom: 0;
    border-bottom: none;
}

@media only screen and (max-width: 480px) {
    #masthead.site-header {
        height: 80px !important;
        margin-bottom: 0;
        padding-top: 0.5em;
    }

    .site-header .custom-logo-link img,
    .site-header .site-logo-anchor img,
    .site-header .site-logo-link img {
        margin-bottom: -25px;
        max-height: 70px;
    }
}

/* ===========================
   NAVIGATION
   =========================== */

.storefront-primary-navigation a,
.cart-contents a {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
	color: white !important;
	padding-bottom: 0.2em;
}

.sub-menu{
	background-color: #cb2146 !important;
	color: white !important;
	margin-top: 1em !important;
}

.sub-menu a:hover{
	text-decoration: underline !important;
}

.main-navigation ul {
    padding: 0 0 10px 4px !important;
}

.main-navigation li {
    height: 38px !important;
    line-height: 38px;
}

.menu-toggle {
    background-color: #cb2146 !important;
    color: #ffffff !important;
    border: none;
}

.handheld-navigation {
    background-color: #cb2146 !important;
}

@media only screen and (max-width: 480px) {
    .main-navigation ul {
        background: #cb2146 !important;
    }
}

/* ===========================
   FOOTER
   =========================== */

.site-footer {
    padding: 0.5em 0 0.7em !important;
    background-repeat: no-repeat !important;
    background-image: url("https://webshop.skydive-ostschweiz.ch/wp-content/uploads/2020/05/bg_skydiveostschweiz.png");
    background-size: cover;
    background-position: center center;
    background-color: #cb2146 !important;
    color: #ffffff;
}

.site-info {
    padding: 0.5em 0 !important;
    text-align: center;
    font-size: 0.85rem;
}

/* ===========================
   HERO STARTSEITE
   =========================== */

.hero-home {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    background: url("DEIN-HINTERGRUND-BILD") center center / cover no-repeat;
}

.hero-home-inner {
    max-width: 900px;
    padding: 3rem 1.5rem;
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.hero-home h1 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-home h2 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1.8rem;
}

.hero-button {
    display: inline-block;
    padding: 0.9rem 1.9rem;
    background-color: #cb2146;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
}

/* ===========================
   STARTSEITE – 3 KACHELN
   =========================== */

.home-sections {
    padding: 3rem 1.5rem;
    background-color: #f5f5f5;
}

.home-sections-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.home-section-box {
    background: #ffffff;
    padding: 1.8rem 1.6rem;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    text-align: left;
}

.home-section-box h2 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.home-section-box p {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.home-section-link {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #cb2146;
}

@media (max-width: 768px) {
    .home-sections-inner {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   STARTSEITE – KALENDER
   =========================== */

/* -----------------------------
   Kalender Hintergrund (100VW + Parallax)
   ----------------------------- */
.home-calendar {
    width: 100vw;
    height: 60vh;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
	padding-top: 2em !important;
    margin-top: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Parallax */
    overflow: hidden; /* verhindert Scrollbars */
}

/* Overlay */
.home-calendar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 0;
}

/* Inhalt über Overlay */
.home-calendar-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}


/* ===========================
   CUSTOM SLIDER
   =========================== */

.custom-slider {
    width: 100vw;
    height: 60vh;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
    padding: 0;
    margin-top: 0;
	top: -2em;
	margin-bottom: -6em;
}

.custom-slider-track {
    display: flex;
    height: 60vh;
    transition: transform 0.8s ease-in-out;
}

.custom-slider .slide {
    min-width: 100vw;
    height: 60vh;
    flex-shrink: 0;
    display: block;
}

.custom-slider img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
	object-position: center center;
    display: block;
}

/* Optional: leichter Zoom beim aktiven Slide */
.custom-slider .slide.active img {
    transition: transform 6s ease;
}

.wp-block-cover{
	opacity: 1;
	background-color: black !important;
	transition: 0.3s;
}

.wp-block-cover a{
	display: none;
	color: white;
	padding: 0.5em;
	background-color: #cb2146;
	border: 0px solid #cb2146;
	border-radius: 10px;
}

.wp-block-cover:hover a{
	transition: 0.3s;
	display: block;
}

.wp-block-cover:hover img{
	opacity: 0.6;
	transition: 0.3s;
}

/* ===========================
   STAFF
   =========================== */

.staff-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.staff-member {
    position: relative;
    width: 200px;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

.staff-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.staff-member:hover img {
    transform: scale(1.1);
}

.staff-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    text-align: center;
    padding: 1rem;
    transition: opacity 0.3s ease;
}

.staff-member:hover .staff-info {
    opacity: 1;
}


/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {

    .custom-slider,
    .custom-slider-track,
    .custom-slider .slide,
    .custom-slider img {
        height: 50vh;
    }
}