/*
 Theme Name:   stiftungmac2025
 Theme URI:    https://www.picture-planet.ch/pig-prect
 Author:       Picture-Planet GmbH
 Author URI:   https://www.picture-planet.ch/
 Description:  Child theme of GeneratePress
 Template:     generatepress
 Version:      3.0.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  stiftungmac
 
*/


/* --------------------------------------------------------
  Fonts
-------------------------------------------------------- */
@import url('/wp-content/themes/stiftungmac2025/fonts/general-sans.css');

@font-face {
  font-family: 'Sofia Sans';
  src: url('/wp-content/themes/stiftungmac2025/fonts/SofiaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------
  Variables
-------------------------------------------------------- */
:root {
  /* Accents with opacity */
  --color-accent: #91b468;
  --color-title: #de4969;

  /* Buttons / Links */
  --color-btn-primary: #fff8e4;

  /* Space / Margins / Paddings */
  --space-big: 2em;
  --space-normal: 1em;
  --space-small: 0.5em;
  --space-mini: 0.25em;

  /* Fonts */
  --font-title: 'Sofia Sans';
  --font-body: 'General Sans Variable', sans-serif;
  --font-highlight: 'Sofia Sans', sans-serif;

  /* Border Radius */
  --radius-big: 24px;
  --radius-normal: 12px;
  --radius-small: 6px;
}

/* --------------------------------------------------------
  General
-------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;
}

b,
strong{
  font-weight: 600;
}

p{
  margin-bottom: var(--space-normal);
} 

.site-footer p{
  margin-bottom: 0;
}

/* Buttons */
.kb-button,
.btn,
.button,
.back-link.button {
  transition: all 0.1s ease-in-out;
  padding-top: 0.55em !important;
  padding-bottom: 0.4em !important;
}



/* Basic anchor links */
a {
  cursor: pointer;
  text-decoration: none;
}

/* Links */
p a {
  /* color: var(--color-btn-primary) !important; */
  text-decoration: underline !important;
  transition: color 0.1s ease-in-out;
  text-decoration: underline !important;
}

p a:hover {
  /* color: var(--color-accent) !important; */
}

.links,
.links-icon-left {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-btn-primary);
  margin: var(--space-normal) 0;
  text-decoration: none;
  display: flex;
  padding: var(--space-mini) 0;
  align-items: baseline;
}

.links:hover,
.links-icon-left:hover {
  color: var(--color-accent);
}

.links svg {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
  opacity 150ms linear;
}

.links:hover svg {
  transform: translate3d(5px, 0, 0);
}

.links-icon-left svg {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
  opacity 150ms linear;
}

.links-icon-left:hover svg {
  transform: translate3d(-5px, 0, 0);
}

/* Links with PDF*/
a[href$=".pdf"]::before {
  content: "\f1c1";
  display: inline-block;
  font-family: "FontAwesome6";
  font-weight: 300;
  font-size: 0.9em;
  margin: 0 var(--space-mini);
}

a:hover[target="_blank"]:not([href$=".pdf"])::after {
  transform: translate3d(5px, 0, 0);
}

/* ----------- Font-Awesome-6-Pro ------------------ */

/* Font-Awesome-6-Pro & Icons */

/*!
  * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
  * Copyright 2024 Fonticons, Inc.
  */

:root,
:host {
  --fa-style-family-classic: "FontAwesome6";
  --fa-font-light: light 300 1em/1 "FontAwesome6";
}

@font-face {
  font-family: "FontAwesome6";
  font-style: light;
  font-weight: 300;
  font-display: block;
  src: url("/wp-content/themes/stiftungmac2025/fonts/fa-light-300.woff2") format("woff2"),
    url("/wp-content/themes/stiftungmac2025/fonts/fa-light-300.ttf") format("truetype");
}

.fa,
.far,
.fas {
  font-family: "FontAwesome6" !important;
}

.fal,
.fa-light {
  font-weight: 300;
}

.icon::before,
.icon::after {
  /* Set the font for this icon style */
  font-family: "FontAwesome6";
  /* Set the weight for this icon style */
  font-weight: 300;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
}


/* Icons */

.person_meta .email::before,
.person_meta .address::before,
.person_meta .phone_business::before,
.person_meta .phone_private::before,
.person_meta .phone::before,
.person_meta .phone_mobile::before,
.person_meta .web::before,
.back-link.button::before,
a.download-link::before,
.verowa-subscription-form a h2::before,
.verowa_connect_error_box ul li::before,
a[target="_blank"]:not([href$=".pdf"])::after,
input#verowa_subs_form_submit::after,
.personen-phone,
.personen-mail {
  display: inline-block;
  font-family: "FontAwesome6";
  font-weight: 300;
  font-size: 1.2em;
  text-align: center;
  margin-right: 0;
  min-width: 32px;
  text-align: center;
}

a[href$=".pdf"]::before {
  content: "\f1c1";
  display: inline-block;
  font-family: "FontAwesome6";
  font-weight: 300;
  font-size: 1.2em;
  margin-right: 0.25em;
}

a[target="_blank"]:not([href$=".pdf"])::after {
  /* content: "\f08e"; */
  content: "";
  font-size: 0.9em;
  min-width: 0;
}

figure a[target="_blank"]:not([href$=".pdf"])::after,
.kt-svg-icon-list-text a[target="_blank"]:not([href$=".pdf"])::after {
  content: "";
  margin: 0;
  display: none;
}

.site-footer a[target="_blank"]:not([href$=".pdf"])::after {
  content: none !important;
}


a.download-link::before {
  content: "\f019";
}


/* --------------------------------------------------------
  Texts Body & Headings
-------------------------------------------------------- */
/* Body */
body {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3em;
}

p {
  line-height: 1.5;
}

/* Headings */
h1,
h2,
h3,
h4 {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  color: var(--color-title);
  font-family: var(--font-title);
  /* font-size: clamp(2.4rem, 2.6vw, 4.8rem); */
  font-weight: 600;
  font-style: normal;
  line-height: 1em;
  margin-bottom: 0.35em !important;
}

h2 {
  font-family: var(--font-title) !important;
  /* font-size: clamp(2rem, 2.8vw, 3em); */
  font-weight: 600;
  line-height: 1em;
  margin-bottom: 0.35em;
}

h3 {
  font-family: var(--font-title);
  /* font-size: clamp(1.3em, 1.8vw, 1.6em); */
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: 0.35em;
}

h4 {
  font-family: var(--font-title);
  /* font-size: clamp(1.3em, 1.8vw, 1.6em); */
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: 0.15em;
}


/* Breadcrumb */
.fbc-page .fbc-wrap .fbc-items {
  font-family: var(--font-highlight);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.6em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: var(--space-normal);
  margin-bottom: var(--space-normal);
}

.fbc-page .fbc-wrap .fbc-items li {
  padding-top: 0;
  padding-bottom: 0;
}

.fbc-page .fbc-wrap .fbc-items li:first-child {
  padding-top: var(--space-small);
  margin-left: 0;
  padding-left: 0;
}

.fbc-page .fbc-wrap .fbc-items span.fbc-separator::after {
  content: "\f324";
  font-family: "FontAwesome6";
  font-weight: 300;
  font-size: 1em;
  color: var(--base-3);
  display: inline-block;
}

.fbc-page .fbc-wrap .fbc-items li a {
  text-decoration: none;
}

.fbc-page .fbc-wrap .fbc-items li a:hover {
  color: var(--color-btn-primary);
}

/* Layout */
.separate-containers .featured-image {
  /* margin-top: 0; */
}

.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
  margin-top: 0;
}

.separate-containers .inside-article {
  margin-bottom: 0;
  padding-bottom: 0;
}

.separate-containers .site-main {
  margin-bottom: 0;
}

/* --------------------------------------------------------
  Menu
-------------------------------------------------------- */
/* Logo */
.site-header {
  position: relative;
}

.site-header .site-logo {
  position: absolute;
  top: -21px;
  z-index: 100;
}

.site-header .header-image img {
  /* width: clamp(140px, 20vw, 220px) !important; */
  height: auto;
}

/* Make logo bigger on small screens */
@media (max-width: 768px) {
  .site-header .header-image img {
  width: 30vw;
  max-width: 160px;
  min-width: 80px;
  }
}

/* Layout Menu */
.main-navigation .inside-navigation {
  display: inline-flex;
  justify-content: flex-end;
  flex-wrap: inherit;
}

.inside-header {
  /* padding: var(--space-normal) 3em; */
  /* background: var(--color-accent); */
  /* margin-top: var(--space-big); */
  /* gap: var(--space-big); */
}

@media (max-width: 768px) {
  .inside-header {
  /* padding: var(--space-normal) 2em !important; */
  }
}

.main-navigation a {
  font-size: 1.2em;
}

/* .has-inline-mobile-toggle #site-navigation,
.main-navigation ul,
.gen-sidebar-nav,
.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav>ul,
.has-inline-mobile-toggle #site-navigation .inside-navigation> :not(.navigation-search):not(.main-nav) {
  display: flex;
  flex-basis: auto;
}

.main-navigation .menu-bar-items {
  display: none;
} */

/* Text Menu */
/* #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
  font-size: clamp(1.1rem, 1vw + 0.5rem, 1.4rem);
  letter-spacing: 0.05em;
  font-weight: 600 !important;
  line-height: 1.5;
  height: fit-content;
} */


/* Font Awesome Icon inside the button */
/* #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-146>ul.mega-sub-menu .close-fullscreen-menu i {
  font-family: "FontAwesome";
  font-weight: 300;
  pointer-events: none;
  color: white;
} */

/* Search icon */
.menu-bar-item a[aria-controls="gp-search"] .gp-icon.icon-search::after,
input[type=submit]::after,
input.search-submit{
  content: "\f002" !important;
  font-family: "FontAwesome" !important;
  font-weight: 400;
  font-size: 1.8em;
  color: white;
  display: inline-block;
  transition: color .1s ease-in-out, background-color .1s ease-in-out
}

.menu-bar-item a[aria-controls="gp-search"]:hover .gp-icon.icon-search::after {
  color: var(--color-accent-5);
}

/* Search Modal */
.gp-search-modal .gp-modal__overlay {
  align-items: flex-start;
  padding-top: 25vh;
  background: rgba(0, 121, 188, 0.95);
}

.search-modal-form .search-field{
  color: white !important;
  font-family: var(--font-body);
  font-size: clamp(1.5em, 2vw, 2em);
  font-weight: 400;
  border: solid 1px white !important;
}

.search-modal-fields button {
background-color: var(--color-btn-primary);
color: white;
border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
}

.search-modal-fields button:hover,
.search-modal-fields button:active {
background-color: var(--color-accent-15);
}

/* --------------------------------------------------------
  Meta Navigation
-------------------------------------------------------- */
.secondary-navigation .main-nav ul li a {
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  font-size: 15px !important;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
}

/* --------------------------------------------------------
  Home News Aktuelles
-------------------------------------------------------- */

/* Links Read More / Mehr */
/* .kt-blocks-post-readmore-wrap {
  margin: 0;
  padding: 0;
} */

.kt-blocks-post-readmore {
  /* font-size: 1.2em;
  font-weight: 600;
  color: var(--color-btn-primary);
  margin: var(--space-normal) 0; */
  /* float: right; */
}

.kt-blocks-post-readmore:hover {
  /* color: var(--color-accent); */
}

/* a.kt-blocks-post-readmore::after {
  font-family: "FontAwesome";
  font-weight: 300;
  content: "\f061";
  margin-left: var(--space-small);
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
  opacity 150ms linear;
}

a.kt-blocks-post-readmore:hover::after {
  transform: translate3d(5px, 0, 0);
} */

/* Just one column on Tablet and mobile */
/* Tablet (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .kt-post-grid-wrap[data-columns-sm="2"] {
  grid-template-columns: 1fr !important;

  }

  .kt-post-grid-wrap {
  gap: var(--space-big) !important;
  }

  .kt-post-grid-wrap article {
  padding-left: var(--space-big);
  padding-right: var(--space-big);
  }

  .wp-block-kadence-postgrid article:nth-child(3n+2) {
  border: none;
  }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {

  .kt-post-grid-wrap[data-columns-xs="1"],
  .kt-post-grid-wrap[data-columns-ss="1"] {
  grid-template-columns: 1fr !important;
  gap: var(--space-big) !important;
  }

  .kt-post-grid-wrap {
  gap: var(--space-big) !important;
  }

  .wp-block-kadence-postgrid article:nth-child(3n+2) {
  border: none;
  }
}

/* --------------------------------------------------------
  Search
-------------------------------------------------------- */
.search-field,
input.search-field {
  flex-grow: 1;
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  border: 1px solid;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

.search-submit,
input.search-submit{
  height: 40px;
  width: 40px;
  font-family: FontAwesome;
  font-size: 20px;
  padding: 0;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: #eee;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  color: #333;
}

button.is-search-submit span.verowa-is-search-input.is-search-icon {
  padding: var(--space-small) var(--space-small);
  min-height: 42px;
  background: var(--color-btn-primary) !important;
  border: none !important;
  line-height: 1.5;
  color: white;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1em !important;
  letter-spacing: 0.02;
  border-radius: var(--radius-small) !important;
  transition: background-color 0.1s ease-in-out;
}

button.is-search-submit span.verowa-is-search-input.is-search-icon:hover {
  background: var(--color-accent) !important;
  border: none !important;
}

#vc-agenda-search-wrapper {
  display: flex;
  flex-direction: row;
  max-width: 70vw;
}

#vc-agenda-search-wrapper .is-search-icon svg {
  margin-top: var(--space-small);
  fill: white;
}

#vc-agenda-search-wrapper input[type="search"],
input[type="search"] {
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

/* --------------------------------------------------------
  Forms Contact Form 7
-------------------------------------------------------- */
.contactform-flyer {
  background: white;
  border-radius: var(--radius-normal);
  padding: var(--space-big);
  font-family: var(--font-body);
  font-size: 1em;
  letter-spacing: 3%;
}

.contactform-flyer h3 {
  font-size: 1.1em;
  margin-bottom: var(--space-mini);
}

.contactform-flyer .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-big);
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

.contactform-flyer .form-row p {
  flex: 1 1 calc(50% - 1em);
  box-sizing: border-box;
  margin: 0;
  line-height: 1.2em;
  margin-bottom: var(--space-small);
}

.contactform-flyer .form-row p label {
  width: auto;
  font-family: var(--font-body);
  letter-spacing: 3%;
}

.contactform-flyer .text-fields label {
  font-size: 0.9em !important;
}

.contactform-flyer .form-row label:last-child {
  flex-basis: 100%;
  font-size: var(--space-normal);
  margin-top: -10px;
  font-size: 0.9em !important;
}

.contactform-flyer .form-row input,
.contactform-flyer .form-row select,
.contactform-flyer .form-row textarea,
.contactform-flyer .wpcf7-textarea {
  background-color: #F8F8F8;
  border: solid 1px #e4e4e7;
  border-radius: var(--radius-normal);
  box-sizing: border-box;
  outline: none;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.contactform-flyer .form-row input:focus,
.contactform-flyer .form-row select:focus,
.contactform-flyer .form-row textarea:focus {
  background: white;
  border: solid 1px var(--color-accent);
}

.contactform-flyer .form-row input[type="text"],
.contactform-flyer .form-row span[data-name="geburt"] input[type="date"],
.contactform-flyer .form-row select {
  min-height: 2.8em;
}

.contactform-flyer .form-row span[data-name="geburt"] input[type="date"] {
  padding: 0 var(--space-small);
  width: max-content;
}

.contactform-flyer .form-row input[type="email"]{
  width: max-content;
}

.contactform-flyer .width-50{
  width: 48% !important;
}

.contactform-flyer .form-col {
  max-width: 100%;
  width: 45%;
}

@media (max-width: 768px) {
  .contactform-flyer .form-col {
  width: 100%;
  }
}

/* Text fields */
.contactform-flyer .text-fields .form-row input,
.contactform-flyer .text-fields .form-row select {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .contactform-flyer .form-row {
  flex-direction: column;
  }
}

/* Checkboxes */
.contactform-flyer .form-row .checkboxes {
  width: 100%
}

.checkboxes .form-row label:last-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-small);
  line-height: 1.2em;
  padding: var(--space-small) 0;
}

/* Checkbox as Radiobutton */
.contactform-flyer .radio-buttons .form-col {
  width: 100%;
}

.contactform-flyer .radio-buttons input[type="checkbox"] {
  background-color: white;
  border: solid 1px #e4e4e7;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
  box-sizing: border-box;
  outline: none;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.contactform-flyer .radio-buttons input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--color-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.contactform-flyer .radio-buttons input[type="checkbox"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.contactform-flyer .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
  display: block;
}

/* textarea */
.contactform-flyer .wpcf7-textarea {
  margin-top: var(--space-normal);
  height: 9em;
}

/* button */
.wpcf7-submit.has-spinner.button {
  border: none;
  padding: var(--space-mini) var(--space-normal);
}

/* error */
.wpcf7-not-valid-tip {
  color: red;
  font-size: 0.9em;
  font-weight: normal;
  display: block;
  letter-spacing: 3%;
}

.wpcf7 form.invalid .wpcf7-response-output {
  background: #ffb900;
  font-weight: 500;
  font-size: 1.3;
  letter-spacing: 3%;
}

/* --------------------------------------------------------
 404 Page & no results search page
-------------------------------------------------------- */
body.error404 #page.site.grid-container.container.hfeed,
body.search.search-no-results .inside-article {
  display: flex;
  flex-direction: column;
  height: auto;
  /* Adjust the height based on content */
  min-height: 50vh;
  /* Ensure it takes at least the full viewport height */
  justify-content: center;
  width: 100%;
}

body.error404 p.links-icon-left a{
  text-decoration: none !important;
}

body.error404 p.links-icon-left a::before{
  font-family: "FontAwesome";
  content: "\f060"; 
  font-weight: 300; 
  display: inline-block;
  margin-right: 0.3em;
  vertical-align: middle;
}

body.error404 p.links-icon-left a:hover::before {
  transform: translate3d(-5px, 0, 0);
}

/* --------------------------------------------------------
  Footer
-------------------------------------------------------- */
.site-footer .footer-info .kt-row-column-wrap,
.site-footer .footer-bottom .kt-row-column-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  word-wrap: normal;
  flex-wrap: wrap;
  gap: var(--space-small);
}

.site-footer .footer-bottom .kt-row-column-wrap {
  flex-wrap: no-wrap;
}

.footer-info h2 {
  font-size: 2.8em;
}

.footer-info a {
  display: flex;
  flex-direction: row;
  gap: var(--space-mini);
}

.footer-info a span {
  text-decoration: underline;
}

/* Links with external link icon*/
.footer-info a[target="_blank"]:not([href$=".pdf"])::before{
  font-family: "FontAwesome";
  content: "\e09f"; 
  font-weight: 400; 
  display: inline-block;
  margin-right: 0.3em;
  margin-left: 0.2em;
  font-size: 1em;
  vertical-align: middle;
  color: white;
}

.footer-info a[target="_blank"]:not([href$=".pdf"])::after {
  content: none; 
}

:root { --circle-color: #eef0f2; }

.bg-circle-left {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 60px;
  display: flex;
  flex-direction: row !important;
  align-items: center;
}

.bg-circle-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translate(-50%, -50%); /* genau halb links rausschieben */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #eef0f2; /* hellgrau */
  z-index: -1;
  pointer-events: none;
}