/**
Theme Name: Studio Terra Child
Author: Studio Terra
Author URI: https://studioterra.nu
Description: A clean, characterful theme built for purpose-driven organizations. Designed to bring clarity, personality and professionalism to your online presence, with a focus on usability, storytelling and impact.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-terra-child
Template: astra
*/

@font-face {
  font-family: "Libre Baskerville";
  src: url("https://staging.gingeofficial.com/wp-content/uploads/2026/02/LibreBaskerville-Regular.woff2") format("woff2");
  font-weight: 400;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 6px 6px 0 #202020;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* UAGB grid cards – button-like hover */
.uagb-block-045605bc.is-grid .uagb-post__inner-wrap {
  box-shadow: 5px 5px 0 #202020;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.uagb-block-045605bc.is-grid .uagb-post__inner-wrap:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #202020;
}

.uagb-block-045605bc.is-grid .uagb-post__inner-wrap:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #202020;
}




/* afbeelding animaties */
.image-wiggle {
  display: inline-block;
}

.image-wiggle img {
  display: block;
  transition: transform 0.15s ease;
}

.image-wiggle:hover img {
  animation: wiggle 1.6s ease-in-out infinite;
}

@keyframes wiggle {
  0%   { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-4px) rotate(-1deg); }
  30%  { transform: translateX(4px) rotate(1deg); }
  45%  { transform: translateX(-3px) rotate(-0.8deg); }
  60%  { transform: translateX(3px) rotate(0.8deg); }
  75%  { transform: translateX(-2px) rotate(-0.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}



.slight-tilt {
  transform: rotate(-1.5deg);
  margin: -1em;
}


.yellowsublabel {
  display: inline-block;
  background-color: #69114D;
	color: #FFFDF9;
  font-family: "Libre Baskerville", serif;
  font-size: 18px;
  padding: 10px 15px;
  transform: rotate(-2deg);
  line-height: 1;
	margin-left: -16px;
}

.yellowsublabel2 {
  display: inline-block;
  background-color: #69114D;
	color: #FFFDF9;
  font-family: "Libre Baskerville", serif;
  font-size: 18px;
  padding: 10px 15px;
  transform: rotate(-2deg);
  line-height: 1;
	z-index: 20;
}

.labeltofront {
	z-index: 20;
}

/* banner */
.marquee-container {
  transform: rotate(-1.5deg);
  margin: -2em;
}

.marquee-skew {
  overflow: hidden;
  background: #fff;
  padding: 10px 0;
  transform: skewX(-12deg);
}

.marquee-outer {
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-track span {
  padding-right: 40px;
  font-size: 24px;
  color: #ff3b30;
  white-space: nowrap;
  transform: skewX(12deg); /* tekst recht */
	font-family: "Libre Baskerville", serif;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}





/*cursor*/
body {
  cursor: url("https://staging.gingeofficial.com/wp-content/uploads/2026/02/Cursor-1.svg") 0 0, auto;
}

.ast-button,
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.wp-block-button__link,
.wp-element-button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  cursor: url("https://staging.gingeofficial.com/wp-content/uploads/2026/02/Cursor-1.svg") 0 0, pointer;
}

a,
a:hover,
.ast-site-identity a,
.ast-header-menu a,
.ast-primary-header a,
.ast-nav-menu a {
  cursor: url("https://staging.gingeofficial.com/wp-content/uploads/2026/02/Cursor-1.svg") 0 0, pointer !important;
}

/*buttons*/

.ast-button,
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.wp-block-button__link,
.wp-element-button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  box-shadow: 5px 5px 0 #202020 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* hover = knop zakt in */
.ast-button:hover,
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-2 .ast-custom-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #202020 !important;
}

/* active = echt “klik”-moment */
.ast-button:active,
.ast-header-button-1 .ast-custom-button:active,
.ast-header-button-2 .ast-custom-button:active,
.wp-block-button__link:active,
.wp-element-button:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #202020 !important;
}





.main-header-bar {
	box-shadow: unset !important;
}


/*blog*/
.blog h2 {
  font-size: 45px;
	line-height: 1em;
}

@media (max-width: 768px) {
  .blog h2 {
    font-size: 30px;
    line-height: 1em;
    /* andere mobiele aanpassingen */
  }
}

/* =========================
   Gravity Forms – complete styling
   ========================= */

/* Verplicht-legend verbergen */
.gform_required_legend {
  display: none;
}

/* =========================
   Basis input styling
   ========================= */

/* Alle tekst-inputs, selects en textarea */
body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body .gform_wrapper select,
body .gform_wrapper textarea {
  background-color: #fffdf9;
  border: none;
  outline: none;
  color: #202020;

  padding: 12px 18px;
  border-radius: 999px;

  /* Standaard schaduw (zelfde als buttons) */
  box-shadow: 5px 5px 0 #202020;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Textarea aparte vorm */
body .gform_wrapper textarea {
  border-radius: 24px;
  padding: 14px 18px;
  min-height: 120px;
}

/* Specifieke textarea hoogte  */
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
  height: 80px;
}

/* =========================
   Hover = zakt iets in
   ========================= */

body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover,
body .gform_wrapper select:hover,
body .gform_wrapper textarea:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #202020;
}

/* =========================
   Focus / actief = volledig ingedrukt
   ========================= */

body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
body .gform_wrapper select:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):active,
body .gform_wrapper select:active,
body .gform_wrapper textarea:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #202020;
}

/* =========================
   Labels & tekst
   ========================= */

body .gform_wrapper .gfield_label,
body .gform_wrapper .gfield_description,
body .gform_wrapper legend {
  color: #202020;
}

body .gform_wrapper .gform-field-label,
body .gform_wrapper .gfield_consent_label {
  color: #202020;
  line-height: 1em !important;
}

.ginput_container_consent {
  line-height: 1 !important;
}

.gform_wrapper.gravity-theme fieldset {
	margin-top: 8px;
}

/* =========================
   Autofill fix (iOS / Chrome)
   ========================= */

body .gform_wrapper input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fffdf9 inset !important;
}