/*
Theme Name: The Pageking Framework
Theme URI: https://www.pageking.nl
Version: 2.0
Description: Framework of the kings
Author: Pageking - Full swing digital agency
Author URI: https://www.pageking.nl
template: bb-theme
*/

:root{
  --white: #FFFFFF;
  --ivory: #F5F0EB;
  --sandstone: #E7DDD2;
  --chili: #F13030;
  --mahogany: #3C1518;

  --mahogany-very-translucent: hsla(355, 48%, 16%, 0.15);
  --mahogany-translucent: hsla(355, 48%, 16%, 0.5);

  --body-large: 1.25rem;
  --body-regular: 1.125rem;
  --body-small: 1rem;
  --body-xtra-small: 0.75rem;

  --heading-xl: max(46px, 5.08vw);
  --heading-1: max(42px, 3.67vw);
  --heading-2: max(30px, 2.68vw);
  --heading-3: max(24px, 2.26vw);
  --heading-4: max(22px, 1.98vw);
  --heading-5: max(20px, 1.55vw);

  --body-semibold: 600;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html body:not(.wp-admin) :where(h1, h2, h3, h4, h5, h6){
  color: var(--mahogany);
  font-weight: var(--body-semibold);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

html body:not(.wp-admin) h2{
  font-size: var(--heading-2);
}

html body:not(.wp-admin) h3{
  font-size: var(--heading-3);
}

html body:not(.wp-admin) h4{
  font-size: var(--heading-4);
}


.section_heading{
  border-top: 1px solid var(--mahogany-translucent);
  grid-column: 1 / -1;
  padding-block: 2rem;
}

.section_heading > *{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: var(--body-regular) !important;
  font-weight: var(--body-semibold) !important;
}

.section_heading > *::before{
  content: '';
  width: .75rem; aspect-ratio: 1;
  border-radius: 50%;
  background-color: currentColor;
}

a.pk_button.primary-dark{
  --text-color: var(--white);
  --background: var(--mahogany);
  --border: var(--mahogany);
  --arrow-bg: var(--chili);
  --arrow-color: var(--white);
  --arrow-border: var(--chili);
}
a.pk_button.primary-light{
  --text-color: var(--mahogany);
  --background: var(--ivory);
  --border: var(--ivory);
  --arrow-bg: var(--chili);
  --arrow-color: var(--white);
  --arrow-border: var(--chili);
}
a.pk_button.secondary-dark{
  --text-color: var(--mahogany);
  --background: transparent;
  --border: var(--mahogany);
  --arrow-bg: transparent;
  --arrow-color: var(--mahogany);
  --arrow-border: var(--mahogany);
}
a.pk_button.secondary-light{
  --text-color: var(--white);
  --background: transparent;
  --border: var(--white);
  --arrow-bg: transparent;
  --arrow-color: var(--white);
  --arrow-border: var(--white);
}

.flex_layout ul{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.flex_layout ul li{
  display: flex;
  gap: .75rem;
  align-items: center;
}

.flex_layout ul li::before{
  content: '';
  width: 1em; height: 1em;
  background-color: currentColor;
  flex-shrink: 0;
  mask: url(/wp-content/uploads/2025/09/check.svg) no-repeat center / contain;
  -webkit-mask: url(/wp-content/uploads/2025/09/check.svg) no-repeat center / contain;
}

a.pk_button{
  display: grid;
  grid-template-areas: "text icon";
  grid-template-columns: auto min-content;
  width: fit-content;
  font-weight: var(--body-semibold);
  color: var(--text-color);
}

a.pk_button:is(:hover,:active,:focus){
  color: var(--text-color);
}

a.pk_button::before{
  grid-area: icon;
  content: '';
  z-index: 2;
  width: 20px; height: 20px;
  place-self: center;
  background-color: var(--arrow-color);
  mask: url(/wp-content/uploads/2025/08/arrow.svg) no-repeat center / contain;
  -webkit-mask: url(/wp-content/uploads/2025/08/arrow.svg) no-repeat center / contain;

  transition: transform 300ms ease-in-out;
}

a.pk_button:is(:hover,:active,:focus)::before{
  transform: rotate(45deg);
}

a.pk_button::after{
  grid-area: icon;
  display: -webkit-inline-box;
  position: relative;
  content: '';
  z-index: 1;
  background-color: var(--arrow-bg);
  border: 1px solid var(--arrow-border);
  border-radius: 50%;
  align-self: stretch;
  /* width: auto;
  height: auto;
  aspect-ratio: 1; */
  width: 51px;
  height: 51px;
}

a.pk_button:is(:hover,:active,:focus){
  text-decoration: none;
}

a.pk_button .button_text{
  color: inherit;
  padding: .75rem 1.5rem;
  border-radius: 3rem;
  background-color: var(--background);
  border: 1px solid var(--border);
}

a.pk_button:is(:hover,:active,:focus) .button_text{
  color: inherit;
  text-decoration: none;
}

a.archive_button{
  font-size: var(--body-small);
  font-weight: 600;
  display: grid;
  grid-template-areas: "text icon";
  grid-template-columns: auto min-content;
  align-items: center;
  gap: .5rem;
  width: fit-content;
}

a.archive_button,
a.archive_button:is(:active, :hover, :focus){
  text-decoration: none;
  color: var(--mahogany);
}

a.archive_button::before,
a.archive_button::after{
  content: '';
  grid-area: icon;
  place-self: center;
}

a.archive_button::before{
  background-color: var(--chili);
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
}

a.archive_button::after{
  background-color: var(--white);
  width: .75rem; height: .75rem;
  mask: url(/wp-content/uploads/2025/08/arrow.svg) no-repeat center / contain;
  -webkit-mask: url(/wp-content/uploads/2025/08/arrow.svg) no-repeat center / contain;

  transition: transform 300ms ease-in-out;
}

a.archive_button:is(:active, :hover, :focus)::after{
  transform: rotate(45deg);
}


a.avatar_button{
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: .5rem;
  color: var(--mahogany);
}

a.avatar_button,
a.avatar_button:is(:hover,:active,:focus){
  text-decoration: none;
}

a.avatar_button .avatars{
  border-radius: 5rem;
  padding: .25rem;
  background-color: var(--white);
}

a.avatar_button .avatars img{
  max-height: 3rem; width: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

a.avatar_button .avatars img:not(:first-child){
  margin-left: -1.5rem;
}

a.avatar_button .title{
  font-weight: var(--body-semibold);
  display: flex;
  gap: .5rem;
  align-items: center;
}

a.avatar_button .title::after{
  content: '';
  width: 1em; height: 1em;
  background-color: currentColor;
  mask: url(/wp-content/uploads/2025/08/arrow_right.svg) no-repeat center / contain;
  -webkit-mask: url(/wp-content/uploads/2025/08/arrow_right.svg) no-repeat center / contain;
}

.glass{
  position: relative;
  isolation: isolate;
  padding: .5rem 1rem;
  line-height: 1;
  color: white;
  font-weight: 600;
  display: block;
  width: fit-content;
  background-color: rgba(255,255,255, 0.01);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
}

.glass::before{
	content: '';
	position: absolute;
	z-index: -2;
	inset: -1px;
	padding: 1px;
	background-image: linear-gradient(-15deg, transparent 60%, currentColor),
		                linear-gradient(150deg, transparent 50%, currentColor);
	border-radius: 2rem;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glass::after{
	content: '';
	inset: 0;
	background-image: linear-gradient(135deg, transparent 60%, rgba(255,255,255, 0.1));
	position: absolute;
	border-radius: 2rem;
	z-index: -2;
}

.mouse_follower{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  position: fixed;
  z-index: 10;
  top: 0; left: 0;
  pointer-events: none;
  background-color: var(--chili);
  font-weight: var(--body-semibold);
  color: var(--white);
  border-radius: .5rem;
  padding: .75rem 1rem;

  opacity: 0;

  transition: opacity 300ms ease-in-out;
}

[data-follower]{
  position: relative !important;
}

[data-follower]:hover .mouse_follower{
  opacity: 1;
}



#cartpops-drawer .cpops-drawer-footer .cpops-cart-total a.checkout-button{
  border-radius: 0.5rem;
}

.cpops-cart-item__actions--pricing .cpops-price{
  display: none !important; 
}

.shop_table .product-price,
.shop_table .product-subtotal,
.shop_table tfoot tr td .amount { display: none !important; }
.woocommerce-mini-cart__total .woocommerce-Price-amount { display: none !important; }


.cpops-cart-item__product--data{
  border-top: 2px solid var(--chili) !important;
}


.button_wrapper{
  margin-top: 2rem;
}


.socials_container{
  display: flex;
  flex-direction: row;
  gap: .5rem;
  flex-wrap: wrap;
}

.socials_container a{
  display: flex !important;
  align-items: center; justify-content: center;
  background-color: var(--chili);
  width: 2rem; aspect-ratio: 1;
  border-radius: 50%;
  color: white !important;
}

.socials_container a span{
  color: inherit;
  display: block;
  width: 1rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: var(--mask-url) no-repeat center / contain;
  -webkit-mask: var(--mask-url) no-repeat center / contain;
}

#pk_flex_content .custom_form form input,
#pk_flex_content .custom_form form textarea,
#pk_flex_content .custom_form form select{
  border: 1px solid var(--mahogany);
  border-radius: .25rem;
  padding-inline: 1rem;
  background-color: var(--white);
  outline: 1px solid transparent;

  transition: outline 180ms ease-in-out
}

#pk_flex_content .custom_form form select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L6 5.5L11 0.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: .75rem .5rem;
  background-position: 98% 55%;
}

#pk_flex_content .custom_form form .gfield{
  position: relative;
}

/* #pk_flex_content .custom_form form .gfield label{ */
#pk_flex_content .custom_form form .gfield label:not(:has(+ .ginput_container_select)){
  font-weight: 400;
  background-color: var(--white);
  line-height: 1;
  position: absolute;
  top: 50%; left: .75rem;
  padding-inline: .25rem;
  transform: translateY(-50%);
  transform-origin: bottom left;

  transition: top 180ms ease-in-out, scale 180ms ease-in-out;
}

#pk_flex_content .custom_form form label:has( + .ginput_container_textarea){
  top: 1.2rem !important;
}

#pk_flex_content .custom_form form :is(input, textarea, select)::placeholder{
  color: var(--mahogany);
}

#pk_flex_content .custom_form form :is(input, textarea, select):focus{
  outline: 1px solid var(--mahogany);
}

#pk_flex_content .custom_form form .gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) label{
  top: 0 !important;
  scale: .9;
}

@media only screen and (max-width: 767px){
  .section_heading{
    padding-block: 1.5rem;
  }

  .section_heading > *{
    margin-bottom: 0 !important;
  }
}