/*
 Theme Name:   Justine Stein Photography
 Theme URI:    https://justinestein-photography.de/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://mp-marketing.net/
 Template:     bricks
 Version:      1.1
 Text Domain:  MP Marketing
*/
/* #region Font Settings */
body {
  font-size: var(--text-m);
  background-color: var(--base);
  color: var(--body-color);
}
body a {
  color: var(--link-color);
  font-weight: 500;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
body a:hover {
  color: var(--link-color-hover);
}

h1 {
  line-height: 1.1;
  max-inline-size: 22ch;
  text-wrap: balance;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  max-inline-size: 45ch;
  text-wrap: balance;
}

/* #region Auto Spacing Text */
/* h1 + *,
h2 + *,
h3 + *,
h4 + *,
h5 + *,
h6 + * {
	margin-block-start: var(--heading-spacing);
} */
/* .brxe-text + * {
	margin-block-start: var(--paragraph-spacing);
} */
.brxe-text * + p,
.brxe-post-content:not([data-source=bricks]) * + p {
  -webkit-margin-before: var(--paragraph-spacing);
          margin-block-start: var(--paragraph-spacing);
}

.brxe-text * + :is(h1, h2, h3, h4, h5, h6),
.brxe-post-content:not([data-source=bricks]) * + :is(h1, h2, h3, h4, h5, h6) {
  -webkit-margin-before: var(--heading-spacing);
          margin-block-start: var(--heading-spacing);
}

.brxe-text * + ul,
.brxe-text * + ol,
.brxe-post-content:not([data-source=bricks]) * + ul,
.brxe-post-content:not([data-source=bricks]) * + ol,
body:not(.woocommerce-checkout) [class*=woocommerce] * + p * + ul,
body:not(.woocommerce-checkout) [class*=woocommerce] * + p * + ol {
  -webkit-margin-before: var(--list-spacing);
          margin-block-start: var(--list-spacing);
}

.brxe-text * + li,
.brxe-post-content:not([data-source=bricks]) * + li,
body:not(.woocommerce-checkout) [class*=woocommerce] * + p * + li {
  -webkit-margin-before: var(--list-item-spacing);
          margin-block-start: var(--list-item-spacing);
}

/* #endregion Auto Spacing Text */
/* #endregion Font Settings */
/* #region Accessebility Specials */
.focus-parent {
  --focus-color: var(var(--link-color));
  --focus-width: 2px;
  --focus-offset: 2px;
}

:root {
  --focus-color: var(--link-color);
  --focus-width: 2px;
  --focus-offset: 2px;
}

.focus-parent:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--shadow:focus-within {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.focus-parent--shadow :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--outline:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent--outline :focus {
  outline: none !important;
  box-shadow: none !important;
}

.hidden-accessible {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: rect(0, 0, 0, 0);
          clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}

.clickable-parent:not(a) {
  position: static;
}

.clickable-parent:not(a) a {
  position: static;
}

.clickable-parent:not(a) div > a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

button.clickable-parent,
a.clickable-parent {
  position: static !important;
}

button.clickable-parent::after,
a.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

.bricks-area a.clickable-parent::after,
.bricks-area .clickable-parent > a::after {
  content: "";
  position: relative;
}

/* #endregion Accessebility Specials */
/* #region Variables */
:root {
  --svg-filter-orange: invert(49%) sepia(87%) saturate(368%)
  	hue-rotate(337deg) brightness(87%) contrast(90%);
}

/* #region CSS Selection */
::-moz-selection {
  background: var(--link-color);
  color: var(--white);
}
::selection {
  background: var(--link-color);
  color: var(--white);
}

/* #endregion CSS Selection */
:root {
  /* #region Border Radius Variables */
  --radius-xs: 0.4444444444rem;
  --radius-s: 0.6666666667rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-xxl: 3.375rem;
  --radius-50: 50%;
  --radius-circle: 50%;
  /* #endregion Border Radius Variables */
  /* #region Grid Variables */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
}

.brxe-text strong {
  font-weight: 500;
}

/* #region Button Styling */
.button.product_type_variable.add_to_cart_button, form.cart .button.add_to_cart_button, form.cart .button.single_add_to_cart_button, .button--green, .button--white, .button--light, .button--primary-outline, .button--primary {
  border-radius: 50vw;
  color: var(--base);
  font-family: "Noto Serif Display";
  font-size: 2rem;
  font-style: italic;
  font-weight: 700;
  gap: 1rem;
  isolation: isolate;
  padding: 0.6em 3.3em 0.6em 1em;
  position: relative;
}
.button.product_type_variable.add_to_cart_button:hover, form.cart .button.add_to_cart_button:hover, form.cart .button.single_add_to_cart_button:hover, .button--green:hover, .button--white:hover, .button--light:hover, .button--primary-outline:hover, .button--primary:hover {
  color: var(--body-color);
}
.button.product_type_variable.add_to_cart_button::before, form.cart .button.add_to_cart_button::before, form.cart .button.single_add_to_cart_button::before, .button--green::before, .button--white::before, .button--light::before, .button--primary-outline::before, .button--primary::before {
  background-color: var(--primary);
  border-radius: 50vw;
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  transition: all 300ms ease-in-out;
  width: 100%;
  z-index: -1;
}
.button.product_type_variable.add_to_cart_button:hover::before, form.cart .button.add_to_cart_button:hover::before, form.cart .button.single_add_to_cart_button:hover::before, .button--green:hover::before, .button--white:hover::before, .button--light:hover::before, .button--primary-outline:hover::before, .button--primary:hover::before {
  width: 5.6rem;
}
.button.product_type_variable.add_to_cart_button::after, form.cart .button.add_to_cart_button::after, form.cart .button.single_add_to_cart_button::after, .button--green::after, .button--white::after, .button--light::after, .button--primary-outline::after, .button--primary::after {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 9.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath class='cls-1' d='m15.31.75l3.94,4-3.94,4'/%3E%3Cpath class='cls-1' d='m19.19,4.75H.75'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  position: absolute;
  width: 2.3rem;
  height: 2.5rem;
  filter: invert(1);
  right: 1.8rem;
}

.button--primary-outline {
  box-shadow: inset 0 0 0 2px var(--body-color);
  color: var(--body-color);
}
.button--primary-outline::after {
  filter: invert(0);
}
.button--primary-outline::before {
  background-color: transparent;
}
.button--primary-outline:hover::before {
  background-color: var(--body-color);
}
.button--primary-outline:hover::after {
  filter: invert(1);
}

.button--light::before {
  background-color: var(--light-brown);
}
.button--light:hover {
  color: var(--base);
}

.button--white {
  color: var(--primary);
}
.button--white::before {
  background-color: var(--base);
}
.button--white:hover {
  color: var(--base);
}
.button--white::after {
  filter: invert(58%) sepia(15%) saturate(735%) hue-rotate(277deg) brightness(93%) contrast(85%);
}

.button--green::before {
  background-color: var(--dark-green);
}

/* #endregion Button Styling */
/* #region Portfolio Gallery */
.portfolio-gallery__img:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
          animation: flash 1.5s;
}
.portfolio-gallery__img:hover .icon {
  opacity: 1;
  width: 5rem;
  height: 5rem;
}
.portfolio-gallery__img .icon {
  transition: all 300ms ease-in-out;
  width: 0px;
  height: 0px;
  opacity: 0;
}

@-webkit-keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
/* #endregion Portfolio Gallery */
/* #region Portfolio Cards Homepage */
.portfolio {
  grid-template-rows: repeat(3, 35rem);
}
@media screen and (width <= 650px) {
  .portfolio {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 25rem);
  }
}

.portfolio-card__content-wrapper::after {
  background: radial-gradient(transparent, black);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 300ms ease;
}
.portfolio-card__content-wrapper:hover::after {
  opacity: 1;
}
.portfolio-card__content-wrapper .portfolio-card__link {
  font-size: 2rem;
  /*&:hover::before {
  	width: 4rem;
  }
  &:hover {
  	color: var(--base);
  }*/
}
.portfolio-card__content-wrapper .portfolio-card__link .icon {
  padding-left: 0.5rem;
}
.portfolio-card__content-wrapper .portfolio-card__link::before {
  background-color: rgba(177, 127, 152, 0.9);
  border-radius: 50vw;
  content: "";
  position: absolute;
  right: 0;
  height: 4rem;
  width: 100%;
  z-index: -1;
  transition: all 300ms ease-in-out;
}
.portfolio-card__content-wrapper:hover .portfolio-card__link::before {
  width: 4rem;
}

.portfolio-card {
  /*&::after {
  	background: radial-gradient(transparent, black);
  	bottom: 0;
  	content: '';
  	left: 0;
  	opacity: 0;
  	position: absolute;
  	right: 0;
  	top: 0;
  	transition: all 300ms ease;
  }
  &:hover::after {
  	opacity: 1;
  }
  .portfolio-card__link {
  	font-size: 2rem;
  	.icon {
  		padding-left: 0.5rem;
  	}
  	&::before {
  		background-color: rgb(193, 147, 143, 0.9);
  		border-radius: 50vw;
  		content: '';
  		position: absolute;
  		right: 0;
  		height: 4rem;
  		width: 100%;
  		z-index: -1;
  		transition: all 300ms ease-in-out;
  	}
  	&:hover::before {
  		width: 4rem;
  	}
  	&:hover {
  		color: var(--base);
  	}
  }*/
  /*&:nth-of-type(7) {
  	grid-column: 3/5;
  	@media screen and (width <= 950px) {
  		grid-column: 1/4;
  	}
  	@media screen and (width <= 650px) {
  		grid-column: 1/7;
  		grid-row: 7;
  	}
  }
  &:nth-of-type(8) {
  	grid-column: 5/7;
  	@media screen and (width <= 950px) {
  		grid-column: 4/7;
  	}
  	@media screen and (width <= 650px) {
  		grid-column: 1/7;
  		grid-row: 8;
  	}
  }*/
}
.portfolio-card:nth-of-type(1) {
  grid-column: 1/3;
  grid-row: 1/3;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(1) {
    grid-column: 1/4;
    grid-row: 1;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(1) {
    grid-column: 1/7;
    grid-row: 1;
  }
}
.portfolio-card:nth-of-type(2) {
  grid-column: 3/7;
  grid-row: 1;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(2) {
    grid-column: 4/7;
    grid-row: 1;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(2) {
    grid-column: 1/7;
    grid-row: 2;
  }
}
.portfolio-card:nth-of-type(3) {
  grid-column: 3/5;
  grid-row: 2/3;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(3) {
    grid-column: 1/4;
    grid-row: 2;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(3) {
    grid-column: 1/7;
    grid-row: 3;
  }
}
.portfolio-card:nth-of-type(4) {
  grid-column: 5/7;
  grid-row: 2/4;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(4) {
    grid-column: 4/7;
    grid-row: 2;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(4) {
    grid-column: 1/7;
    grid-row: 4;
  }
}
.portfolio-card:nth-of-type(4) .portfolio-card__image {
  -o-object-position: center 5%;
     object-position: center 5%;
}
.portfolio-card:nth-of-type(5) {
  grid-column: 1/3;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(5) {
    grid-column: 1/4;
    grid-row: 3;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(5) {
    grid-column: 1/7;
    grid-row: 5;
  }
}
.portfolio-card:nth-of-type(6) {
  grid-column: 3/5;
}
@media screen and (width <= 950px) {
  .portfolio-card:nth-of-type(6) {
    grid-column: 4/7;
    grid-row: 3;
  }
}
@media screen and (width <= 650px) {
  .portfolio-card:nth-of-type(6) {
    grid-column: 1/7;
    grid-row: 6;
  }
}

/* #endregion Portfolio Cards Homepage */
/* #region Taxonomie (Fotokollektion) Pages */
.qick-nav__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(158px + var(--wp-admin--admin-bar--height, 0));
  z-index: 1;
}

.quick-nav__container {
  margin-block: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.quick-nav {
  list-style: none;
  -webkit-padding-end: 3rem;
          padding-inline-end: 3rem;
  position: relative;
}
.quick-nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--darker-pink);
  z-index: -1;
  transition: all 300ms ease;
}
.quick-nav:hover::before {
  width: calc(100% - 3rem);
  left: 0;
}
.quick-nav:not(:last-of-type)::after {
  content: "/";
  color: var(--darker-pink);
  font-family: inherit;
  font-size: var(--text-xl);
  position: absolute;
  right: 1rem;
  bottom: -1.3rem;
}

.fotokollektion-tax__section:last-of-type {
  padding-bottom: var(--space-xxl);
}

.term-portrait .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--dark-green);
}

.term-mit-tieren .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--light-brown);
}

.term-bewerbung-passbilder .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--body-color);
}

.term-indoor .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--blue-green);
}

.term-kindergarten .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--brown);
}

.term-liebesmomente .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--link-color);
}

.term-newborn .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--light-green);
}

.term-tiere .fotokollektion-tax__section .brxe-container.fotokollektion__background {
  background-color: var(--dark-blue);
}

/* #endregion Taxonomie (Fotokollektion) Pages */
/* #region FAQs */
.faq .title {
  max-inline-size: 100%;
}
.faq li:not(:last-of-type) {
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
}

/* #endregion FAQs */
/* #region JetForm Builder */
form .wp-block-columns {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
}

.jet-form-builder__field-label.for-checkbox:has(.checkbox_link) > span {
  display: inline;
  -webkit-padding-start: 3rem;
          padding-inline-start: 3rem;
  position: relative;
}
.jet-form-builder__field-label.for-checkbox:has(.checkbox_link) > span::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.jet-form-builder__action-button.jet-form-builder__submit.button--primary {
  border: none;
  background: transparent;
  line-height: 1.7;
  display: inline-flex;
  align-items: center;
  transition: all 300ms ease-in-out;
}
.jet-form-builder__action-button.jet-form-builder__submit.button--primary::before {
  top: 0;
}

/* #region Contact Form */
.form--light .field-type-textarea-field textarea {
  height: 20rem;
}
.form--light .checkboxes-wrap .jet-form-builder__field-label.for-checkbox > span::before {
  border: 2px solid var(--primary-30);
}
.form--light .checkboxes-wrap .jet-form-builder__field-label.for-checkbox > span:hover::before {
  border-color: var(--primary-30);
}
.form--light .checkboxes-wrap .jet-form-builder__field-label.for-checkbox :checked + span::before {
  background-color: var(--primary);
  border-color: var(--primary-30);
}
.form--light .checkboxes-wrap .jet-form-builder__field-label.for-checkbox :not(:checked):hover + span::before {
  border-color: var(--primary-30) !important;
}
.form--light .checkboxes-wrap .jet-form-builder__field-label.for-checkbox :active + span::before {
  background-color: var(--primary-30) !important;
  border-color: var(--primary-30) !important;
}

/* #endregion Contact Form */
/* #region Range Slider */
.form--light input[type=range].jet-form-builder__field.range-field,
.form--light input[type=range].jet-form-builder__field.range-field:focus {
  background-color: var(--body-color);
  min-height: 2px;
  height: 2px;
  cursor: pointer;
}
.form--light input[type=range]::-moz-range-thumb,
.form--light input[type=range]::-webkit-range-thumb {
  background-color: var(--primary);
  border-color: var(--primary);
  border-radius: 50vw;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}

/* #endregion Range Slider */
/* #endregion JetForm Builder */
/* #region WooCommerce */
form.cart .button.add_to_cart_button, form.cart .button.single_add_to_cart_button {
  box-shadow: inset 0 0 0 2px var(--body-color);
  color: var(--body-color);
  background-color: transparent;
}
form.cart .button.add_to_cart_button::after, form.cart .button.single_add_to_cart_button::after {
  background-image: none;
  filter: invert(0);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shopping-bag'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shopping-bag'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  background-color: var(--body-color);
  height: 2.5rem;
  right: 1.6rem;
}
form.cart .button.add_to_cart_button::before, form.cart .button.single_add_to_cart_button::before {
  background-color: transparent;
}
form.cart .button.add_to_cart_button:hover::before, form.cart .button.single_add_to_cart_button:hover::before {
  background-color: var(--body-color);
}
form.cart .button.add_to_cart_button:hover::after, form.cart .button.single_add_to_cart_button:hover::after {
  filter: invert(1);
}

.button.product_type_variable.add_to_cart_button {
  box-shadow: inset 0 0 0 2px var(--body-color);
  color: var(--body-color);
  background-color: transparent;
}
.button.product_type_variable.add_to_cart_button::before {
  background-color: transparent;
}
.button.product_type_variable.add_to_cart_button::after {
  filter: invert(0);
}
.button.product_type_variable.add_to_cart_button:hover::before {
  background-color: var(--body-color);
}
.button.product_type_variable.add_to_cart_button:hover::after {
  filter: invert(1);
}

/* #endregion WooCommerce */
/*# sourceMappingURL=style.css.map */