/*
Theme Name: MART
Description: custom theme for tschickautomart.com
Author: Ines Mayer
Version: 1.0.0
*/

:root {
    --main-bottom-padding-desktop: var(--wp--preset--spacing--70);
    --main-bottom-padding-mobile: var(--wp--preset--spacing--40);
    --header-padding-desktop: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--60);
    --header-padding-mobile: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40);
}

/*
 * link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

/*
 * progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
    text-wrap: pretty;
}

/*
 * change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
    display: block;
}

/*
 * prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
    overflow-x: auto;
}

/* custom styles */

a.visited-hidden,
a.visited-hidden:visited,
a.visited-hidden:hover,
a.visited-hidden:active {
    color: black;
    text-decoration: none;
}

/* header */

.fixed-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: var(--header-padding-desktop);
}

.relative-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: var(--header-padding-desktop);
}

/* wrapper */

.mart-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100vh;
}

/* video page (horizonzal scroll) */

.mart-video-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    align-items: baseline;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding-bottom: var(--main-bottom-padding-desktop);
}

.mart-video-item {
    flex: 0 0 clamp(360px, 70vw, 800px);
    scroll-snap-align: start;
}

/* posts horizontal scroll layout */
.mart-scroll {
    /* padding-bottom: var(--main-bottom-padding-desktop);*/
}

.mart-scroll .wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* firefox */
    scrollbar-width: none;
    align-items: flex-start;
}

/* chrome, safari, edge */
.mart-scroll ::-webkit-scrollbar {
    display: none;
}

.mart-scroll-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: max-content;
}

.mart-scroll img {
    width: auto !important;
    height: 25rem;
    display: block !important;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.mart-scroll :where(.is-layout-flow)>* {
    margin-block-start: 0 !important;
}

.mart-scroll li {
    flex: 0 0 auto;
}

/* content scroll */
.mart-contentScroll-scroll {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* padding-bottom: var(--main-bottom-padding);*/
}

.mart-contentScroll-item {
    flex: 0 0 clamp(360px, 40vw, 800px);
    scroll-snap-align: start;
}

.mart-fullheight {
    min-height: 100%;
    /*  padding-bottom: var(--main-bottom-padding-desktop);*/
}

/* photos page */
.mart-main-padding {
    padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}


/* about page */
.mart-about {
    margin: 3.5rem;
    width: 60%;
}

/* back button */
.mart-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.mart-back-icon {
    width: 30px;
    height: 30px;
    display: block;
}

/* post-title lowercase */
.wp-block-post-title {
    text-transform: lowercase;
}

/* custom border-class for nav link */
.mart-nav-border {
    border: 2px solid black;
    border-radius: 28px;
    padding: 0rem 0.5rem !important;
}

/* home page */
.mart-main {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.mart-hero {
    position: static;
    width: 100%;
    height: 100%;
}

.mart-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.mart-item {
    position: absolute;
    display: block;
    width: clamp(180px, 15%, 180px);
    transition: transform 0.3s ease;
}

.mart-item img {
    width: 100%;
    height: auto;
}

/* icon positions */
.mart-camera {
    top: 28%;
    left: 60%;
    transform: rotate(25deg);
}

.mart-camera:hover {
    transform: rotate(25deg) scale(1.2);
}

.mart-tape {
    top: 35%;
    left: 22%;
    transform: rotate(-25deg);
}

.mart-tape:hover {
    transform: rotate(-25deg) scale(1.2);
}

.mart-cassette {
    top: 48%;
    left: 40%;
    transform: rotate(5deg);
}

.mart-cassette:hover {
    transform: rotate(5deg) scale(1.2);
}

/* tooltip */
.tooltip .tooltiptext {
    visibility: hidden;
    color: #000;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    transition-property: visibility;
    transition-delay: 0s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.3s;
}

/* photos page */
.mart-photos-menu {
    padding-bottom: var(--main-bottom-padding-desktop);

}

.mart-photos-menu ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    width: 100%;
}

.mart-photos-menu ul li {
    padding: 1rem;
    width: clamp(500px, 10%, 400px);
}

.mart-photos-menu ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mart-photos-menu ul li img {
    width: 100%;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }

    /* header */
    .fixed-header {
        padding: var(--header-padding-mobile);
    }

    .relative-header {
        padding: var(--header-padding-mobile);
    }

    /* about page */
    .mart-about {
        margin: 1.5rem;
        width: auto;
    }

    .mart-tape {
        top: 35%;
        left: 7%;
        transform: rotate(-25de);
    }

    .mart-cassette {
        top: 50%;
        left: 45%;
    }

    .mart-camera {
        top: 27%;
        left: 60%;
    }

    /* photos page */
    .mart-photos-menu {
        padding-bottom: 0;
    }

    .mart-photos-menu ul {
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
    }

    .mart-photos-menu ul li {
        padding: 1rem;
        width: auto;
    }

    /* video page */
    .mart-video-scroll {
        flex-direction: column;
        padding-top: 100px;
    }

    .mart-video-item {
        flex: 1;
        width: 100%;
    }
}