/* Fonts */
@font-face {
  font-family: "Texgyreheros";
  src: url("/wp-content/themes/petikat/fonts/texgyreheros-regular.woff") format("woff");
}

@font-face {
  font-family: "Texgyreheros-cn";
  src: url("/wp-content/themes/petikat/fonts/texgyreheroscn-regular.woff") format("woff");
}



/* Scroll */
html {
    scroll-behavior: smooth;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

body,
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Sitewide */

:root {
  --pink: #ffdbff;
}

* {
    min-width: 0;
}

body {
    margin: 0;
    padding-top: 0;
}

img,svg, video {
    max-width: 100%;
    width: 100%;
    display: block;
    height: auto;
}

h1,h2,h3,h4,h5,h6,p,a,span {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}

p, li {
    margin-bottom: 1em;
}

figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

a {
    text-decoration: none;
    color: inherit;
}


ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

.hidden {
    display: none!important;
}

/* Fonts */
.fontLarge {
    font-size: 46px;
    line-height: 50px;
    font-family: "Texgyreheros-cn";
    letter-spacing: 0.3px;
}

.fontMedium {
    font-size: 24px;
    line-height: 28px;
    font-family: "Texgyreheros";
    letter-spacing: 0.1px;
}

.fontBody {
    font-size: 24px;
    line-height: 30px;
    font-family: "Texgyreheros";
    letter-spacing: 0.5px;
}
 
.fontSmall {
    font-size: 19px;
    line-height: 23px;
    font-family: "Texgyreheros";
    letter-spacing: 0.5px;
}

.fontSingleTitle {
    font-size: 21px;
    line-height: 24px;
    font-family: "Texgyreheros";
    letter-spacing: 0.1px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.main_width {
    background-color: var(--pink);
    min-height: 100vh;
    padding-top: 10vw;
}

/* Header */
.page-id-8 .header,
.category .logo {
    display: none;
}

.header {
    position: fixed;
    background: linear-gradient(0deg, rgba(255, 219, 255, 0) 0%, rgba(255, 219, 255, 1) 100%);
    padding-bottom: 3vw;
    width: 100vw;
}

.header {
    transition: transform 0.3s ease;
}

.header.headerHidden {
    transform: translateY(-100%);
}

.pageTitle {
    position: fixed;
    left: 50vw;
    top: 0.8vh;
}

.closeIcon {
    position: fixed;
    top: 0.8vh;
    right: 1vw;
}

.subcatMenuCurrent {
    display: inline-flex;
    gap: 11px;
}

.subcatArrow {
    width: 23px;
    padding-top: 17px;
}

/* Home */
/* Home Wrapper */
.home-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  isolation: isolate;
  background-color: #ffdbff; /* Your Pink Background */
}

/* The Polygon */
.polygon-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Same Pink */
  filter: invert(100%);     /* This turns the pink into its opposite (Black) */
  z-index: 0;
}

/* The Text */
.template_home h1,
.template_home a {
  color: #ffdbff;            /* Set text to Pink */
  mix-blend-mode: difference;
  position: relative;
  z-index: 2;
}

.logo {
    padding-top: 0.8vh;
    padding-left: 1vw;
    display: inline-block;
}

.logo a {
    text-decoration: none;
}

.homeList {
    position: absolute;
    left: 50vw;
    top: 0.8vh;
}

.homeList a {
    font-family: "Texgyreheros-cn";
}

.homeButtons {
    position: absolute;
    left: 50vw;
    bottom: 2.5vh;
}

.homeButtons a {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between box and text */
    color: #ffdbff;
    mix-blend-mode: difference;
}

/* The Square Box */
.homeButtons a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #ffdbff; /* The outline */
    background-color: transparent; /* Empty by default */
    transition: background-color 0.2s ease;
    margin-top: 0.4vw;
}

/* The Filled State */
.homeButtons a.is-active::before {
    background-color: #ffdbff; /* Fills the box when active */
}

/* Izdanja */
.izdanjaGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 1vw;
    margin-right: 1vw;
}

.item {
    width: 23.75vw;
    margin-bottom: 5vw;
}

.itemImage {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23.75vw;
    height: 23.75vw;
    margin-bottom: 0.5vw;
}

.itemImage img {
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
}

.item p {
    margin-bottom: 0;
}

/* Single */
.singleContent {

    display: flex;
    flex-direction: row;
    margin-left: 1vw;
    margin-right: 1vw;
}

.singleLeft {
    width: 49vw;
}

.singleRight {
    width: 49vw;
}

.singleImage {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37vw;
    height: 37vw;
}

.singleImage img {
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
}

/* Category */
.subcatMenu {
    padding-top: 0.8vh;
    padding-left: 1vw;
}

.submenuOpen {
    width: 99.5vw;
    height: 99.5vh;
    background-color: rgba(255, 219, 255, 0.7);
}

.subcatMenuCurrent {
    cursor: pointer;
}

.subcatMenuList {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 8.2vh;
    left: 1vw;
    z-index: 10;
}

.catPostGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

.catPostElement {
    width: 48.5vw;
    margin-bottom: 3vw;
}

@media (min-width: 1921px) {
    .catPostElement {
        width: 23.75vw;
    }
}

.catPostImage {
    margin-bottom: 0.5vw;
}

.catPostImage img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Bio */
.bioContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 1vw;
    margin-right: 1vw;
}

.bioLeft {
    width: 44vw;
    padding-right: 5vw;
}

.bioRight {
    width: 49vw;
}

.defaultContent {
    margin-left: 0.8vw;
    margin-right: 6vw;
    padding-bottom: 5vw;
}

.defaultContent .wp-block-image {
    display: flex;
    gap: 0.8vw; 
    margin-bottom: 2vw;
    cursor: pointer;
}

.defaultContent .wp-block-image img {
    max-width: 48.4vw;
}

.defaultContent .wp-block-image.lightbox {
    width: auto;
    cursor: auto;
    max-width: 90vw;
}

.defaultContent .wp-block-image.lightbox img {
    max-width: 90vw;
}

figcaption {
    font-style: italic;
    font-size: 19px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

/* Lightbox */
.defaultContent .wp-block-image.lightbox {
    flex-direction: column;
    margin-top: 2vw;
}


.wp-block-gallery {
    display: inline-block;
}

.openGallery {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin-left: 0.8vw;
    font-style: italic;
    font-size: 19px;
    line-height: 21px;
    letter-spacing: 0.5px;
    margin-top: -5px;
}

.customLightbox {
    position: fixed;
    inset: 0;
    background: var(--pink);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.customLightbox.active {
    display: flex;
}

.lightboxContent {
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
}

.lightboxImage {
    max-width: 100%;
    max-height: 80vh;
}

.lightboxClose {
    position: fixed;
    top: 0.8vh;
    right: 1vw;
    cursor: pointer;
}

.lightboxCounter {
    position: fixed;
    top: 0.8vh;
    left: 50%;
    transform: translateX(-50%);
}



.lightboxContent .logo {
    position: fixed;
    top: 0;
    left: 0;
}


/* Mobile */
@media (max-width:768px) {
    body {
        height: 100dvh;
    }
    
    .home-wrapper {
        min-height: 100%;
    }
    
    /* Fonts */
    .fontLarge {
        font-size: 36px;
        line-height: 42px;
        font-family: "Texgyreheros-cn";
        letter-spacing: 0.3px;
    }
    
    .fontMedium {
        font-size: 18px;
        line-height: 22px;
        font-family: "Texgyreheros";
        letter-spacing: 0.1px;
    }
    
    .fontBody {
        font-size: 18px;
        line-height: 23px;
        font-family: "Texgyreheros";
        letter-spacing: 0.5px;
    }
     
    .fontSmall {
        font-size: 14px;
        line-height: 18px;
        font-family: "Texgyreheros";
        letter-spacing: 0.5px;
    }
    
    .fontSingleTitle {
        font-size: 16px;
        line-height: 20px;
        font-family: "Texgyreheros";
        letter-spacing: 0.1px;
        text-transform: uppercase;
        margin-bottom: 30px;
    }
    
    /**/
    .header {
        padding-bottom: 50px;
    }
    
    .home .logo {
        margin-top: 0!important;
    }
    
    .main_width {
        background-color: var(--pink);
        min-height: 100vh;
        padding-top: 120px;
    }
    
    .subcatMenu {
        padding-top: 0.8vh;
        padding-left: 2vw;
    }
    
    .closeIcon {
        position: fixed;
        top: 0.8vh;
        right: 2vw;
    }
    
    .pageTitle {
        position: fixed;
        left: 2vw;
        top: 0.8vh;
    }
    
    .subcatMenuCurrent {
        margin-top: 40px;
        gap: 8px;
    }
    
    .subcatMenuList {
        top: 103px;
        left: 2vw;
    }
    
    .subcat {
        line-height: 40px;
    }
    
    .subcatArrow {
        width: 18px;
        padding-top: 15px;
    }
    
    .homeList {
        position: absolute;
        left: 2vw;
        top: 45dvh;
    }
    
    .homeButtons {
        position: absolute;
        left: 2vw;
        bottom: 2.5vh;
    }   
    
    .catPostGrid {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    
    .catPostElement {
        width: 96vw;
        margin-bottom: 14px;
    }
    
    .logo {
        padding-left: 2vw;
    }
    
    /* Single */
    .wp-singular .logo {
        margin-top: 35px;
    }
    
    .defaultContent {
        margin-left: 2vw;
        margin-right: 2vw;
        padding-bottom: 50px;
    }
    
    .wp-block-gallery {
        display: block;
    }
    
    .customLightbox {
        overflow: scroll;
    }
    
    .lightboxContent .logo {
        margin-top: 0;
        display: block;
        width: 100vw;
        background: linear-gradient(0deg, rgba(255, 219, 255, 0) 0%, rgba(255, 219, 255, 1) 100%);
        padding-bottom: 50px;
    }
    
    .openGallery {
        cursor: pointer;
        display: block;
        margin-top: 0;
        margin-bottom: 1.3em;
        margin-left: 0;
        font-size: 18px;
        line-height: 23px;
    }
    
    .lightboxImage:last-child {
        padding-bottom: 50px;
    }
    
    .lightboxClose {
        right: 2vw;
    }
    
    .defaultContent .wp-block-image img {
        max-width: none;
    }
    
    .customLightbox .lightboxContent img.lightboxImage {
        width: 100%;
        height: auto;
        margin-bottom: 2vw;
    }
    

    .lightboxContent {
        max-width: 96vw;
        margin-top: 60px;
    }

    .lightboxCounter {
        display: none;
    }
    
    /* Izdanja */
    .izdanjaGrid {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 2vw;
        margin-right: 2vw;
        gap: 15px;
    }
    
    .item {
        width: 96vw;
        margin-bottom: 20px;
    }
    
    .itemImage {
        width: 96vw;
        height: 96vw;
        margin-bottom: 5px;
    }
    
    /* Izdanja Single (single) */    
    .singleContent {
        display: flex;
        flex-direction: column-reverse;
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .singleImage {
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96vw;
        height: 96vw;
        margin-bottom: 20px;
    }
    
    .wp-singular.category_izdanja .logo {
        margin-top: 0;
    }
    
    .wp-singular.category_izdanja .pageTitle {
        margin-top: 35px;
    }
    
    .wp-singular .logo h1 {
        margin-top: 5px;
    }

    .bioContent {
        flex-direction: column;
        gap: 0;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    
    .bioLeft {
        width: auto;
        padding-right: 0;
    }
    
    .bioRight {
        width: auto;
    }
    
    .defaultContent .wp-block-image {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 1em;
        cursor: pointer;
    }
    
    figcaption {
        font-style: italic;
        font-size: 13px;
        line-height: 17px;
        letter-spacing: 0.5px;
        margin-top: 5px;
    }
    
    .singleLeft {
        width: auto;
    }

    
    .category_izdanja .pageTitle {
        position: relative;
        margin-top: 0!important;
        max-width: 80vw;
        top: 0;
    }
    
    .page-id-42 .logo {
        margin-top: 0;
        padding-top: 0.3vh;
    }
    
    .page-id-42 .pageTitle {
        margin-top: 35px;
    }
    
    .catergory_izdanja .header {
        display: flex;
        flex-direction: column;
    }
    
    .category_izdanja .logo h1 {
        margin-top: 0;
    }
}