/*
/*
Theme Name: lieblings
 Description: Custom Theme for greenseed
 Author: Ruveyda
 Template: greenseed
 Version: 1.0
Description: Greenseed is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenseed
Tags: one-column, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks
*/
@import url(../greenseed/style.css);
/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
 
 
 .header-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #fff; /* Or another background */
}
body {
  padding-top: 0px; /* match header height */
}

 
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 0.9px !important;
	text-underline-offset: .1em;
}





/* Container for custom buttons */
.custom-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* align left */
  gap: 45px; /* desktop gap between buttons */
  margin: 30px 5rem; /* 3rem margin left & right */
}

/* Individual button wrapper */
.custom-button {
  text-align: center;
}

/* Button link styling */
.custom-button a {
  text-decoration: none;
  color: #333;
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: 18px;
  display: block;
  transition: transform 0.15s ease, filter 0.15s ease; /* hover transition */
}

/* Button image */
.custom-button img {
  height: 85px; /* desktop height */
  width: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.15s ease, filter 0.15s ease; /* hover effect */
}

/* Hover effects */
.custom-button:hover img {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.10);
}

/* Text underneath button (hidden by default on desktop) */
.custom-button a span {
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-top: 8px;
}

/* Show text on hover (desktop) */
.custom-button:hover a span {
  opacity: 1;
}

/* Mobile: text always visible */
@media (max-width: 600px) {
  .custom-button a span {
    opacity: 1;
  }
}

/* 📱 Mobile optimization */
@media (max-width: 600px) {
  .custom-buttons {
    justify-content: space-between;
    gap: 15px; /* smaller gap on mobile */
    margin: 2rem;
  }

  .custom-button img {
    height: 60px; /* smaller buttons on mobile */
  }

  .custom-button a {
    font-size: 16px; /* slightly smaller text */
  }
}




/* ---------- Desktop view (>= 601px) ---------- */
@media (min-width: 601px) {
  .responsive-picture-wrapper {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }

  /* Special case: narrow version */
  .responsive-picture-wrapper.narrow {
    width: 33%;
    margin-left: auto;
    margin-right: auto; /* centers it */
  }

  /* Full bleed on desktop */
    .responsive-picture-wrapper.full-bleed {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
  }
}

/* ---------- Mobile view (<= 600px) ---------- */
@media (max-width: 600px) {
  .responsive-picture-wrapper {
    margin-left: .5rem;
    margin-right: .5rem;
    width: auto;
  }

  /* Narrow behaves like default on mobile */
  .responsive-picture-wrapper.narrow {
    width: auto;
    margin-left: .5rem;
    margin-right: .5rem;
  }

  /* Full bleed on mobile */
  .responsive-picture-wrapper.full-bleed {
    width: auto;
   margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- Shared styles for all views ---------- */
.responsive-picture-wrapper picture,
.responsive-picture-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}








/* ---------- CATERING FORM (Contact Form 7) ---------- */
#wpcf7-f82-o1 {
  border: 1px solid #111011; /* thin black border */

  --yellow: #ffffcc;
  --green: #ccff99;
  --black: #111011;

  /* framed area */
  background: var(--yellow);
  border-radius: 32px;
  padding: clamp(24px, 4vw, 48px);
  margin: clamp(16px, 4vw, 40px) auto;
  max-width: 1040px;

  color: var(--black);
  font-family: "Jost", sans-serif;
}


/* grid layout */
#wpcf7-f82-o1 .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 28px) clamp(24px, 4vw, 48px);
}

/* make common children act as grid items */
#wpcf7-f82-o1 .wpcf7-form > label,
#wpcf7-f82-o1 .wpcf7-form > p,
#wpcf7-f82-o1 .wpcf7-form > div {
  display: block;
}

/* --- Symmetrical form container --- */
#wpcf7-f82-o1 .wpcf7-form {
  padding: 20px;               /* equal all sides */
  margin: 0 auto;              /* center within wrapper */
  box-sizing: border-box; 
}

/* --- Ensure labels + inputs stretch equally --- */
#wpcf7-f82-o1 label,
#wpcf7-f82-o1 input,
#wpcf7-f82-o1 textarea,
#wpcf7-f82-o1 select {
  display: block;
  width: 100%;                 /* take full width of container */
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box; 
}

/* labels */
#wpcf7-f82-o1 label {
  font-weight: 700; /* Jost Bold */
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--black);
}

/* inputs */
#wpcf7-f82-o1 input[type="text"],
#wpcf7-f82-o1 input[type="email"],
#wpcf7-f82-o1 input[type="tel"],
#wpcf7-f82-o1 input[type="date"],
#wpcf7-f82-o1 textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--black);
  background: transparent;
  padding: 10px 4px 12px;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--black);
  outline: none;
}

/* big fields span full width */
#wpcf7-f82-o1 .wpcf7-form > label:has(textarea),
#wpcf7-f82-o1 .wpcf7-form .wpcf7-form-control-wrap.checkbox-leistungsumfang,
#wpcf7-f82-o1 .formbutton {
  grid-column: 1 / -1;
}

#wpcf7-f82-o1 textarea {
  min-height: clamp(160px, 24vh, 260px);
  resize: vertical;
}

/* optional small italic note */
#wpcf7-f82-o1 .note {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--black);
}

/* ---------- CHECKBOXES: stacked vertical ---------- */
#wpcf7-f82-o1 .wpcf7-form-control-wrap.checkbox-leistungsumfang {
  margin-top: 10px;
}
#wpcf7-f82-o1 .wpcf7-checkbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
#wpcf7-f82-o1 .wpcf7-list-item {
  display: block;
  margin: 0;
}
#wpcf7-f82-o1 .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
#wpcf7-f82-o1 .wpcf7-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  border-radius: 4px;
}

/* Make the checkbox wrapper a block so margin works */
#wpcf7-f82-o1 .wpcf7-form-control-wrap.checkbox-leistungsumfang{
  display:block;
  margin-top:10px; /* 10px gap below the label */
}

/* Safety net in case your theme changes the structure */
#wpcf7-f82-o1 .wpcf7-checkbox{
  margin-top:10px;
}

/* ---------- Submit button (bottom-right on desktop) ---------- */
#wpcf7-f82-o1 .formbutton {
  justify-self: end;
  background: var(--black);
  color: var(--green);
  font-weight: 700;
  font-family: "Jost", sans-serif;
  padding: 14px 34px;
  border: 0;
  border-radius: 0px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#wpcf7-f82-o1 .formbutton:hover {
  transform: translateY(-1px);
  filter: brightness(0.95);
}

/* Make the form container a flexbox to push the button down */
#wpcf7-f82-o1 .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 28px) clamp(24px, 4vw, 48px);
  position: relative;
  padding-bottom: 80px; /* space for button */
}
#wpcf7-f82-o1 textarea {
  border: 1px solid #111011; /* full thin black border */
  margin-top: 8px;
  border-radius: 6px;
  padding: 10px;
  min-height: 160px;
  resize: vertical;
}

/* Submit button fixed bottom-right */
#wpcf7-f82-o1 .formbutton {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: auto !important;         /* shrink to fit text */
  display: inline-block !important;
  background: #ffffcc;
  color: var(--black);
  font-weight: 700;
  font-family: "Jost", sans-serif;
  padding: 14px 40px;
  border: 3px solid var(--black);
  border-radius: 0px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#wpcf7-f82-o1 .formbutton:hover {
  transform: translateY(-2px);
  filter: brightness(1.10);
}

/* --- CF7 Response Message (success/error notices) --- */
#wpcf7-f82-o1 .wpcf7-response-output {
  margin: 0px 0 15px 0;
  padding: 0;                /* remove framing */
  border: none !important;   /* no border */
  background: transparent;   /* no background */
  color: #c0bdff;            /* your purple */
  font-weight: 700;          /* bold */
  font-size: 15px;
}

/* --- Submit button --- */
#wpcf7-f82-o1 input[type="submit"] {
  font-size: 18px;
  font-weight: 700;
  font-style: normal;  /* ensure button text is not italic */ }

/* On mobile: make it full-width at bottom */
@media (max-width: 768px) {
  #wpcf7-f82-o1 .formbutton {
    position: static;
    width: 100%;
    margin-top: 20px;
    justify-self: stretch;
    text-align: center;
  }
}

/* ---------- Responsive: 1 column on mobile ---------- */
@media (max-width: 768px) {
  #wpcf7-f82-o1 .wpcf7-form {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #wpcf7-f82-o1 .formbutton {
    justify-self: stretch;
    text-align: center;
  }
}

/* ---------- Front Page stacking ---------- */
@media (max-width: 600px) {
  /* Make the columns stack vertically on mobile */
  .wp-block-columns.is-not-stacked-on-mobile {
    flex-direction: column !important;
  }

  /* Text column (now top) */
  .wp-block-columns .wp-block-column:first-child pre {
    margin-right: 1rem !important;
  }
}


.desktop-only {
 position: relative;   /* allows shifting without breaking flow */
    top: -0rem;           /* move upward */
    left: -5rem;          /* move leftward */
}


/* Container for images */
.schoen {
  display: flex;
  flex-wrap: wrap;       /* allow images to wrap to new lines */
  gap: 2rem;             /* horizontal spacing between images */
  padding-left: 9rem;
  padding-right: 8rem; 
}




/* Make sure the background behind exists */
.desktop-only img {
  position: relative;
  z-index: 1;
}

/* Put .schoen above */
.schoen {
  position: relative;
  z-index: 2;
}




@media (min-width: 801px) {
  .schoen img {
    margin-top: -2.5rem;    /* vertical overlap */
    height: 150px !important;
    width: auto;
    flex-wrap: wrap;
  }
}

@media (max-width: 800px) {
  .schoen {
    padding-left: 3.5rem;   
    padding-right: 1rem;   
    gap: 1rem;
  }

  .schoen img {
    margin-top: -2.5rem;    /* maintain vertical overlap */
  }
}



/* Container for images */
.natur {
  display: flex;
  flex-wrap: wrap;       /* allow images to wrap to new lines */
  gap: 2rem;             /* horizontal spacing between images */
  padding-left: 9rem;
  padding-right: 8rem;   
}

@media (min-width: 801px) {
  .natur img {
    margin-top: -2.5rem;    /* vertical overlap */
        height: 150px !important;
        width: auto;
            flex-wrap: wrap;

  }
}

@media (max-width: 800px) {
  .natur {
    padding-left: 3.5rem;   
    padding-right: 1rem;   
    gap: 1rem;     
  }

  .natur img {
    margin-top: -2.5rem;    /* maintain vertical overlap */
  }
}



@media (max-width: 800px) {
  .desktop-only {
    display: none !important;
  }
}



@media (max-width: 800px) {
  /* Target both the figure wrapper and the img inside */
  .desktop-only-mangold,
  .desktop-only-mangold img,
  figure.desktop-only-mangold {
    display: none !important;
    visibility: hidden !important; /* extra safety */
    height: 0 !important;          /* prevent residual space */
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}



 @media (max-width: 800px) {
  .t1 {
    margin-left: 3.5rem !important;
    margin-right: 1rem !important;
  }
}
@media (min-width: 801px) {
  .t1 {
      margin-left: 27rem !important;
  }
}


 @media (max-width: 800px) {
  .t2 {
    margin-left: 3.5rem !important;
    margin-right: 1rem !important;
    padding-right: 1rem !important;
  }
}
@media (min-width: 801px) {
  .t2 {
      margin-left: 27rem !important;
      margin-right: 8rem !important;
      max-width: 500px;
  }
}


 @media (max-width: 800px) {
  .t3 {
    margin-left: 3.5rem !important;
    margin-right: 1rem !important;
    padding-right: 1rem !important;
        position: relative;
    top: -4rem !important;
  }
}
@media (min-width: 801px) {
  .t3 {
    margin-left: 0rem !important;
    margin-right: 8rem !important;
    padding-right: 8rem !important;
  }
}

/* Small image styling */
.smallimg {
    width: auto;          /* natural width on desktop */
    max-width: 5000px;     /* adjust desktop max size */
    height: auto;
    display: inline-block;
}

/* Keep it small on mobile without shrinking too much */
@media (max-width: 768px) {
    .smallimg {
        max-width: 250px;   /* smaller for mobile */
        width: auto;
        height: auto;
    }
}

/* Desktop view: move .smallimg up and left */
@media (min-width: 801px) {
  .smallimg {
    position: relative;   /* allows shifting without breaking flow */
    top: -2rem;           /* move upward */
    left: -3rem;          /* move leftward */
  }
}



/* Small image styling */
.gruenekiste {
    width: auto;          /* natural width on desktop */
    max-width: 5000px;     /* adjust desktop max size */
    height: auto;
    display: inline-block;
}
  .gruenekiste {
    position: relative;   /* allows shifting without breaking flow */
    top: 5rem;           /* move upward */
    left: -3rem;          /* move leftward */
}

/* Keep it small on mobile without shrinking too much */
@media (max-width: 800px) {
    .gruenekiste {
        max-width: 325px;   /* smaller for mobile */
        width: auto;
        height: auto;
        position: relative;   /* allows shifting without breaking flow */
    top: -1rem !important; 
    }
}

@media (max-width: 800px) {
    .natur {
        margin-left: 0rem !important;
 }
}


@media (max-width: 800px) {
  .daslieblings {
    padding-left: 3.5rem;   
    padding-right: 1rem;   
    position: relative;
    top: -4rem !important;
  }

  .daslieblings img {
    width: auto !important;   /* don’t stretch horizontally */
    height: auto !important;  /* don’t stretch vertically */
    max-width: 100% !important; /* shrink if it overflows container */
    object-fit: contain;      /* ensures it never distorts */
  }
}
 
@media (max-width: 800px) {
  .natur figure img,
  .schoen figure img {
    height: 70px !important;
    width: auto !important;
    max-height: 100px !important;
    object-fit: contain !important; /* ensures it scales, not crops */
    flex-shrink: 1 !important;      /* prevents flexbox from forcing overflow */
  }
}

@media (min-width: 801px) {
  .daslieblings figure img {
    height: 150px !important;  /* fixed height */
    width: auto !important;    /* keep natural proportions */
    object-fit: contain !important; /* prevent cropping */
  }
}

@media (max-width: 800px) {
    .section2 {
        position: relative;
        top: 5rem;
    }
}


/* Mobile stacking for .veggiebox */
@media (max-width: 800px) {
  .veggiebox {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* optional, aligns items to the left */
  }
}
  /* Ensure .grünekiste comes first, .natur second */
  .veggiebox .gruenekiste {
    order: 1;
    margin-bottom: 1rem; /* space below it */
  }

  .veggiebox .natur {
    order: 2;
  }
  
  
  @media (min-width: 801px) {
  .insta {
  margin-left: 10rem !important;   /* centers it */
  }
}
@media (max-width: 800px) {
  .insta {
    margin-left: 3.5rem !important;
    margin-right: 1rem !important;
        position: relative;
    top: -2rem !important;
  }
  }
@media (max-width: 800px) {
  .section3 {
    display: flex;
    flex-direction: column; /* stack children vertically */
  }

  .insta {
    order: 1;  /* always on top */
    margin-bottom: 2rem; /* add spacing below if needed */
  }

  .daslieblings {
    order: 2; /* comes under insta */
  }

  .t3 {
    order: 3; /* comes after daslieblings */
  }
}

@media (max-width: 600px) {
  .section3 {
    padding-bottom: 6rem; /* pushes footer down */
  }
}

.static {
mix-blend-mode: difference
 !important; 
}