/*
Theme Name:   Astra Child
Description:  Astra Child theme 
Author: Sunflowers and Sky
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

@import url("https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --primary-color: #ffcc4a;
  -secondary-color-1: #96bc7a;
  --secondary-color-1: #2a9d8f;
  --secondary-color-2: #56ccf2;
  --accent-color-1: #f78b34;
  --accent-color-2: #e63946;
  --accent-color-3: #8c5546;
  --accent-color-4: #6a0572;
  --accent-color-5: #ffd871;

  --light: #fcfaf2;
  --dark: #222222;

  --white: #ffffff;
  --black: #000000;
  --grey: #777;
}

body {
  font-family: "Playwrite DE Grund", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
}

h1,
h2,
h3,
h4,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
}
h1 {
  color: var(--secondary-color-1);
}
.entry-content h3,
.entry-content h4 {
  color: var(--accent-color-1);
}

.ast-single-post .entry-content a {
  text-decoration: none;
}

/* page init */

#page .site-content {
  background-image: url(assets/images/home-background-top.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
}

/* page end*/

/* header init*/

.site-header {
  position: fixed;
  width: 100%;
}
.site-primary-header-wrap {
  max-height: 80px;
}

.ast-mobile-header-wrap .ast-above-header-bar,
.ast-above-header-bar .site-above-header-wrap {
  min-height: 20px;
}

.ast-above-header.ast-above-header-bar {
  background-color: var(--secondary-color-1);
  color: var(--white);
}

.ast-primary-header-bar.scrolled,
#ast-mobile-header {
  /* TODO: Fix the mobile header (#ast-mobile-header) to be transparent at the beginning and with color after scroll  */
  background-color: var(--light);
}

/* header end*/

/* content init */

#content {
  padding-top: 120px;
}

/* Wrap images home */

/* .uagb-block-7c06a87a,
.uagb-block-3b1545eb {
  border-radius: 20px;
  overflow: clip;
  -webkit-mask-image: url(assets/images/card.svg);
  mask-image: url(assets/images/card.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
} */

.uagb-block-75fa35c0,
.uagb-block-7c06a87a,
.uagb-block-3b1545eb {
  border-radius: 20px;
  overflow: clip;
  -webkit-mask-image: url(assets/images/hero.svg);
  mask-image: url(assets/images/hero.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Our story */

.our-story .wp-block-media-text__media {
  border-radius: 20px;
  overflow: clip;
  -webkit-mask-image: url(assets/images/square.svg);
  mask-image: url(assets/images/square.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Collections */

.collections {
  /*  padding: 10px 15px; */
}

.collection-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}
.collection-text {
  box-shadow: 0px 30px 30px -10px rgba(0, 0, 0, 0.05);
  background-color: var(--white);
  border-radius: 15px;
  padding: 5%;
}
.collection-img {
  border-radius: 20px;
  overflow: clip;
  -webkit-mask-image: url(assets/images/square.svg);
  mask-image: url(assets/images/square.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.collection-img img {
  min-width: 280px;
  height: auto;
  text-align: center;
}

/* FAQ */

.wp-block-details {
  border-width: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

.wp-block-details p {
  color: var(--grey);
}

.woocommerce-message:focus-visible {
  outline-color: var(--primary-color);
}

/* content end */

/* footer init*/
.site-footer {
  background-image: url(assets/images/home-background.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 21%;
}

.footer-copyright {
  background-color: var(--secondary-color-1);
  color: var(--white);
  text-align: center;
}

.footer-copyright img {
  max-width: 20px;
}

/* footer end*/

/* --- Smartphones (portrait and landscape) --- */
@media (max-width: 640px) and (min-width: 280px) {
  .collection-item {
    flex-wrap: wrap;
  }
  /* #ast-mobile-header {
    background-color: var(--light);
    padding-bottom: 10px;
  } */
}

/* --- Tablets --- */
@media (max-width: 769px) and (min-width: 640px) {
  /* #ast-mobile-header {
    background-color: var(--light);
    padding-bottom: 10px;
  } */
}

/* --- Desktops & laptops --- */
@media (max-width: 1824px) and (min-width: 769px) {
}

/* --- Larger Screens --- */
@media (min-width: 1824px) {
}