/*
Theme Name: Diva Summer
Theme URI: https://24sata.hr/
Author: Marko Kosić
Author URI: https://24sata.hr/
Description: WordPress tema za Diva summer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diva-summer
*/
/* CSS Reset */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Imperial+Script&display=swap');

:root {
  --black: #000000;
  --white: #ffffff;
  --red: #e22027;
  --fashion: #f9d2d5;
  --travel: #c7ebeb;
  --beauty: #d1e5d0;
  --gourmet: #fef4d3;
  --health: #e7e5e5;
  --h1: #f3dfc6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Albert Sans', sans-serif;
  background: var(--black);
  color: var(--white);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
pre {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1;
}

@media screen and (max-width: 960px) {
  h1,
  h2,
  h3 {
    line-height: 1.3;
  }
}
section {
  width: 100%;
}

/*------------------*/
/*--- CATEGORIES ---*/
/*------------------*/
.home-categories {
  position: relative;
  width: 100%;
  padding: 10rem 0;
  background: url(img/background-gradient.png) no-repeat center center;
  background-size: cover;
}
@media screen and (max-width: 751px) {
  .home-categories {
    padding: 10rem 0 36rem 0;
  }
}
.home-categories-grid {
  width: 100%;
  max-width: 120rem;
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 0 2rem;
  margin: 0 auto;
  row-gap: 10rem;
  justify-content: space-between;
}
@media screen and (max-width: 1341px) {
  .home-categories-grid {
    gap: 10rem;
    justify-content: center;
  }
}
@media screen and (max-width: 751px) {
  .home-categories-grid {
    grid-template-columns: repeat(1, auto);
    gap: 5rem;
  }
}
.home-category {
  position: relative;
}
.home-category-image {
  display: block;
  width: 100%;
  max-width: 52rem;
  height: auto;
}
@media screen and (max-width: 1341px) {
  .home-category-image {
    max-width: calc(52rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .home-category-image {
    max-width: calc(52rem * 0.6);
  }
}
.summer-icons {
  position: absolute;
  bottom: 30px;
  right: 0;
  width: 100%;
  max-width: 75.4rem;
  aspect-ratio: 754 / 530;
}
@media screen and (max-width: 1341px) {
  .summer-icons {
    max-width: calc(75.4rem * 0.7);
  }
}
@media screen and (max-width: 1051px) {
  .summer-icons {
    max-width: calc(75.4rem * 0.5);
  }
}
.fashion-1 {
  position: absolute;
  top: -13%;
  left: 31%;
  width: 12.1rem;
  aspect-ratio: 161 / 229;
}
@media screen and (max-width: 1341px) {
  .fashion-1 {
    max-width: calc(12.1rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .fashion-1 {
    max-width: calc(12.1rem * 0.6);
  }
}
.fashion-2 {
  position: absolute;
  bottom: -8%;
  right: -23%;
  width: 44.6rem;
  aspect-ratio: 376 / 298;
}
@media screen and (max-width: 1341px) {
  .fashion-2 {
    max-width: calc(44.6rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .fashion-2 {
    max-width: calc(44.6rem * 0.6);
  }
}
@media screen and (max-width: 751px) {
  .fashion-2 {
    right: -12%;
    max-width: calc(44.6rem * 0.5);
  }
}
.travel-1 {
  position: absolute;
  top: 23%;
  left: -12%;
  width: 30.7rem;
  aspect-ratio: 417 / 359;
}
@media screen and (max-width: 1341px) {
  .travel-1 {
    max-width: calc(30.7rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .travel-1 {
    max-width: calc(30.7rem * 0.6);
  }
}
.travel-2 {
  position: absolute;
  bottom: -7%;
  right: -10%;
  width: 24.5rem;
  aspect-ratio: 295 / 285;
}
@media screen and (max-width: 1341px) {
  .travel-2 {
    max-width: calc(24.5rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .travel-2 {
    max-width: calc(24.5rem * 0.6);
  }
}
@media screen and (max-width: 751px) {
  .travel-2 {
    right: -5%;
    max-width: calc(24.5rem * 0.5);
  }
}
.gourmet-1 {
  position: absolute;
  top: -7%;
  left: 34%;
  width: 16.8rem;
  aspect-ratio: 201 / 286;
  transform: rotate(-30deg);
}
@media screen and (max-width: 1341px) {
  .gourmet-1 {
    max-width: calc(16.8rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .gourmet-1 {
    max-width: calc(16.8rem * 0.6);
  }
}
.health-1 {
  position: absolute;
  top: 29%;
  left: -7%;
  width: 11.1rem;
  aspect-ratio: 1 / 1;
}
@media screen and (max-width: 1341px) {
  .health-1 {
    max-width: calc(11.1rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .health-1 {
    max-width: calc(11.1rem * 0.6);
  }
}
.health-2 {
  position: absolute;
  top: 37%;
  right: -7%;
  width: 12.1rem;
  aspect-ratio: 1 / 1;
}
@media screen and (max-width: 1341px) {
  .health-2 {
    max-width: calc(12.1rem * 0.8);
  }
}
@media screen and (max-width: 1051px) {
  .health-2 {
    max-width: calc(12.1rem * 0.6);
  }
}

/*--------------*/
/*--- FOOTER ---*/
/*--------------*/
.footer {
  width: 100%;
  padding: 5rem 0;
  background: #705284;
}
@media screen and (max-width: 981px) {
  .footer {
    padding: 4rem 0;
  }
}
.footer-wrap {
  width: 100%;
  max-width: 140rem;
  padding: 0 2rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 481px) {
  .footer-wrap {
    flex-direction: column;
    gap: 1rem;
  }
}
.diva-logo {
  width: 100%;
  max-width: 17.2rem;
  aspect-ratio: 172 / 80;
}
@media screen and (max-width: 981px) {
  .diva-logo {
    max-width: 12rem;
  }
}
@media screen and (max-width: 481px) {
  .diva-logo {
    order: 1;
  }
}
.policies {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
}
@media screen and (max-width: 481px) {
  .policies {
    order: 3;
    margin-top: 3rem;
  }
}
.policy {
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
@media screen and (max-width: 981px) {
  .policy {
    font-size: 1.6rem;
  }
}
.vecernji-logo {
  width: 100%;
  max-width: 9.2rem;
  aspect-ratio: 92 / 42;
}
@media screen and (max-width: 981px) {
  .vecernji-logo {
    max-width: 8rem;
  }
}
@media screen and (max-width: 481px) {
  .vecernji-logo {
    order: 2;
  }
}
/*----------------*/
/*--- CATEGORY ---*/
/*----------------*/
.categories {
  position: relative;
  width: 100%;
  padding: 10rem 2rem;
  background: url(img/background-gradient.png) no-repeat center center;
  background-size: cover;
}
.categories-wrap {
  position: relative;
  width: 100%;
  max-width: 120rem;
  padding: 10rem 2rem 5.5rem 2rem;
  margin: 0 auto;
  background: var(--fashion);
  border-radius: 33px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10rem;
}
@media screen and (max-width: 681px) {
  .categories-wrap {
    padding: 6rem 2rem 6rem 2rem;
    gap: 6rem;
  }
}
.h1 {
  color: var(--h1);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
  font-family: 'Imperial Script', sans-serif;
  font-size: 17rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media screen and (max-width: 981px) {
  .h1 {
    font-size: 12rem;
  }
}
.articles {
  width: 100%;
  max-width: 83.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4rem;
}
.article {
  background: var(--white);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 33px;
}
@media screen and (max-width: 681px) {
  .article {
    max-width: 35rem;
    flex-direction: column;
    margin: 0 auto;
  }
}
.article-image {
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 360 / 251;
  object-fit: cover;
  border-radius: 33px;
}
@media screen and (max-width: 981px) {
  .article-image {
    max-width: 30rem;
  }
}
@media screen and (max-width: 681px) {
  .article-image {
    max-width: 35rem;
  }
}
.article-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem 3rem 2rem 5rem;
}
@media screen and (max-width: 981px) {
  .article-content {
    gap: 2rem;
    padding: 3rem 2rem 2rem 4rem;
  }
}
@media screen and (max-width: 681px) {
  .article-content {
    gap: 2rem;
    padding: 4rem;
  }
}
@media screen and (max-width: 481px) {
  .article-content {
    gap: 2rem;
    padding: 3rem;
  }
}
.article-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 981px) {
  .article-title {
    font-size: 1.6rem;
  }
}
.article-text {
  color: var(--black);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: normal;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 981px) {
  .article-text {
    font-size: 1.4rem;
  }
}
.read-more {
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: normal;
}
@media screen and (max-width: 981px) {
  .read-more {
    font-size: 1.4rem;
  }
}
.fashion-cat,
.travel-cat,
.beauty-cat,
.gourmet-cat,
.health-cat {
  position: relative;
}
.fashion-cat {
  background: var(--fashion);
  .article-title {
    color: var(--fashion);
  }
}
.travel-cat {
  background: var(--travel);
  .article-title {
    color: var(--travel);
  }
}
.beauty-cat {
  background: var(--beauty);
  .article-title {
    color: var(--beauty);
  }
}
.gourmet-cat {
  background: var(--gourmet);
  .article-title {
    color: var(--gourmet);
  }
}
.health-cat {
  background: var(--health);
  .article-title {
    color: var(--health);
  }
}
@keyframes wiggleY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes wiggleX {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
/*------------*/
/*--- POST ---*/
/*------------*/
.post {
  position: relative;
  width: 100%;
  padding: 10rem 2rem 17.5rem 2rem;
  background: url(img/background-gradient.png) no-repeat center center;
  background-size: cover;
}
.post-wrap {
  position: relative;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  background: var(--fashion);
  border-radius: 33px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10rem;
}
.post-image {
  width: 100%;
  aspect-ratio: 1140 / 674;
  object-fit: cover;
  border-radius: 33px;
}
.wp-block-image img {
  border-radius: 33px;
}
.wp-block-heading {
  margin: 3rem 0 2rem 0;
}
.wp-block-image {
  margin: 5rem 0 4rem 0;
}
.post-paragraph p {
  margin: 2rem 0 0 0;
}
.wp-block-list li {
  margin: 0.5rem 0 0 0;
}
strong {
  font-weight: 500;
}
.post-content-wrap {
  width: 100%;
  max-width: 80.3rem;
  margin: 0 auto;
  padding: 15.6rem 2rem 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 561px) {
  .post-content-wrap {
    padding: 10rem 2rem 0 2rem;
  }
}
.author {
  position: relative;
  color: #3d3d3d;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  margin-right: -5rem;
}
.author::before {
  content: 'Autor:';
  position: absolute;
  top: 50%;
  left: -5rem;
  transform: translateY(-50%);
  width: max-content;
  height: auto;
}
.post-topper {
  color: #3d3d3d;
  text-align: center;
  font-size: 4rem;
  font-weight: 400;
  margin-top: 1rem;
}
@media screen and (max-width: 561px) {
  .post-topper {
    font-size: 2.8rem;
  }
}
.post-h1 {
  color: #f3dfc6;
  text-align: center;
  -webkit-text-stroke-width: 1.23px;
  -webkit-text-stroke-color: var(--black);
  font-size: 6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 67.667px; /* 112.778% */
  margin: 7rem 0 13rem 0;
}
@media screen and (max-width: 561px) {
  .post-h1 {
    font-size: 3.4rem;
    -webkit-text-stroke-width: 0.9px;
    line-height: 1.12;
    margin: 5rem 0 10rem 0;
  }
}
.post-paragraph {
  max-width: 67.6rem;
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: normal;
}
@media screen and (max-width: 561px) {
  .post-paragraph {
    font-size: 1.4rem;
  }
}
.post-h2 {
  width: 100%;
  max-width: 67.6rem;
  color: var(--black);
  font-size: 2rem;
  font-weight: 400;
  line-height: normal;
  margin: 4rem auto 3rem auto;
  align-self: flex-start;
  text-align: left;
}
.in-post-image {
  width: 100%;
  margin: 8rem 0;
}
@media screen and (max-width: 561px) {
  .in-post-image {
    margin: 4rem 0;
  }
}
.skoljka {
  position: absolute;
  top: 1000px;
  left: 5%;
  max-width: 11.2rem;
  aspect-ratio: 112 / 110;
  animation: wiggleX 2s ease-in-out infinite;
}
.skoljka-i-zvijezda {
  position: absolute;
  top: 1100px;
  left: -8%;
  max-width: 26.9rem;
  aspect-ratio: 269 / 180;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 481px) {
  .skoljka {
    top: 200px;
    left: 9%;
    max-width: 5.2rem;
  }
  .skoljka-i-zvijezda {
    top: 250px;
    left: -13%;
    max-width: 15.9rem;
  }
}

/* CATEGORY ICONS */
.fashion-cat-icon-1 {
  position: absolute;
  top: -111px;
  left: 159px;
  max-width: 16.1rem;
  aspect-ratio: 161 / 229;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .fashion-cat-icon-1 {
    max-width: 10rem;
    top: -98px;
    left: 118px;
  }
}
.fashion-cat-icon-2 {
  position: absolute;
  top: 57px;
  left: 0;
  max-width: 36.7rem;
  aspect-ratio: 367 / 367;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .fashion-cat-icon-2 {
    max-width: 25rem;
    top: 0;
  }
}
.fashion-cat-icon-3 {
  position: absolute;
  top: 31px;
  right: -95px;
  max-width: 37.6rem;
  aspect-ratio: 376 / 298;
  animation: wiggleX 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .fashion-cat-icon-3 {
    max-width: 25rem;
    right: -41px;
  }
}

/* === TRAVEL === */
.travel-cat-icon-1 {
  position: absolute;
  top: 2%;
  left: -10%;
  width: 41.7rem;
  aspect-ratio: 417 / 359;
  animation: wiggleX 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .travel-cat-icon-1 {
    max-width: 28rem;
  }
}
.travel-cat-icon-2 {
  position: absolute;
  top: 2%;
  right: -5%;
  width: 29.5rem;
  aspect-ratio: 295 / 285;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .travel-cat-icon-2 {
    max-width: 19rem;
  }
}
.beauty-cat-icon-1 {
  position: absolute;
  top: -11%;
  left: -10%;
  width: 58.4rem;
  aspect-ratio: 584 / 548;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .beauty-cat-icon-1 {
    max-width: 38rem;
  }
}
.beauty-cat-icon-2 {
  position: absolute;
  top: -9%;
  right: -8%;
  width: 27.4rem;
  aspect-ratio: 274 / 447;
  animation: wiggleX 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .beauty-cat-icon-2 {
    max-width: 17rem;
  }
}
.gourmet-cat-icon-1 {
  position: absolute;
  top: -2%;
  right: -6%;
  width: 38.7rem;
  aspect-ratio: 387 / 334;
  animation: wiggleX 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .gourmet-cat-icon-1 {
    max-width: 20rem;
  }
}
.gourmet-cat-icon-2 {
  position: absolute;
  top: -10%;
  left: -11%;
  width: 46.8rem;
  aspect-ratio: 468 / 468;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .gourmet-cat-icon-2 {
    max-width: 30rem;
  }
}
.health-cat-icon-1 {
  position: absolute;
  top: 1%;
  right: 5%;
  width: 14.1rem;
  aspect-ratio: 141 / 142;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .health-cat-icon-1 {
    max-width: 7rem;
  }
}
.health-cat-icon-2 {
  position: absolute;
  top: 12%;
  right: -3%;
  width: 14.1rem;
  aspect-ratio: 141 / 142;
  animation: wiggleX 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .health-cat-icon-2 {
    max-width: 7rem;
  }
}
.health-cat-icon-3 {
  position: absolute;
  top: -3%;
  left: -9%;
  width: 39.2rem;
  aspect-ratio: 392 / 335;
  animation: wiggleY 2s ease-in-out infinite;
}
@media screen and (max-width: 981px) {
  .health-cat-icon-3 {
    max-width: 22rem;
  }
}
@media screen and (max-width: 981px) {
  .fashion-cat-icon-1,
  .fashion-cat-icon-2,
  .fashion-cat-icon-3,
  .travel-cat-icon-1,
  .travel-cat-icon-2,
  .travel-cat-icon-3,
  .beauty-cat-icon-1,
  .beauty-cat-icon-2,
  .beauty-cat-icon-3,
  .gourmet-cat-icon-1,
  .gourmet-cat-icon-2,
  .gourmet-cat-icon-3,
  .health-cat-icon-1,
  .health-cat-icon-2,
  .health-cat-icon-3 {
    transform: scale(0.65);
  }
}
@media screen and (max-width: 681px) {
  .fashion-cat-icon-1,
  .fashion-cat-icon-2,
  .fashion-cat-icon-3,
  .travel-cat-icon-1,
  .travel-cat-icon-2,
  .travel-cat-icon-3,
  .beauty-cat-icon-1,
  .beauty-cat-icon-2,
  .beauty-cat-icon-3,
  .gourmet-cat-icon-1,
  .gourmet-cat-icon-2,
  .gourmet-cat-icon-3,
  .health-cat-icon-1,
  .health-cat-icon-2,
  .health-cat-icon-3 {
    display: none;
  }
}