/*
 * Theme Name: JuKomm Diakonie Württemberg
 * Description: JuKomm Wordpress Theme
 * Author: BOLD & EPIC CODE GMBH
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Arial Black";
    src: url("/wp-content/themes/diak/assets/fonts/Arial Black/arial_black.ttf")
      format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: TransformaSans;
    src: url("/wp-content/themes/diak/assets/fonts/font.woff") format("woff2"),
      url("/wp-content/themes/diak/assets/fonts/font.woff2") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  body {
    @apply font-sans overflow-x-hidden;
  }
}

@layer components {
  .small_ux_text {
    @apply text-xs;
  }

  .text-body {
    @apply text-lg leading-[1.4] text-dkDark;
  }

  .decorative-rules-quotes {
    @apply text-dkPurple font-transforma font-extrabold text-[1.625rem] sm:text-3xl md:text-4xl lg:text-6xl !leading-[1.2] text-center;
  }
  .dk-decorative-h1 {
    @apply text-[3.125rem] font-transforma font-extrabold md:text-6xl lg:text-[5.625rem] !leading-[1] text-dkPurple hyphens-auto;
  }

  .dk-text-green {
    @apply text-dkGreen;
  }

  .dk-text-white {
    @apply text-dkWhite;
  }

  .dk-text-purple {
    @apply text-dkPurple;
  }

  .h1,
  .h2 {
    @apply text-[1.625rem] md:text-3xl lg:text-4xl font-bold !leading-[1.2] text-dkPurple;
  }
  .h3 {
    @apply text-lg leading-[1.4] font-bold text-dkPurple;
  }

  .dk-container {
    @apply w-[92%] max-w-[1352px] mx-auto;
  }

  .bar {
    @apply absolute top-1/2 left-0 w-full h-[3px] bg-dkPurple rounded-[2px] transform transition-all duration-[0.4s];
  }
  .bar-horizontal {
    @apply transform -translate-y-1/2;
  }
  .bar-vertical {
    @apply transform -translate-y-1/2 -rotate-90;
  }
  .open-main-submenu.open .bar-horizontal,
  .open-main-faq.open .bar-horizontal {
    @apply transform -translate-y-1/2 scale-x-0;
  }
  .open-main-submenu.open .bar-vertical,
  .open-main-faq.open .bar-vertical {
    @apply transform -translate-y-1/2 -rotate-180;
  }

  /* Header slide-down animation */
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .slide-down {
    position: sticky;
    z-index: 50;
    top: 0;
    left: 0;
    animation: slideDown 0.3s forwards;
  }
  .dk-user-logged-in.slide-down {
    top: 32px;
  }

  /* Header slide-up animation */
  @keyframes slideUp {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
  .slide-up {
    animation: slideUp 0.3s forwards;
  }

  /* UX/UI Elements */
  .cta-main {
    @apply text-dkPurple font-bold text-base leading-4;
  }

  .cta-secondary {
    @apply text-dkPurple font-bold text-sm leading-none;
  }

  .translate-3d {
    transform: translate3d(0, 0, 0);
  }

  .dk-optional-button {
    @apply flex justify-center items-center px-[45px] py-[22px] bg-dkGreen rounded-[30px] transform transition-all duration-300 hover:scale-110 [&.disabled]:bg-[#EDEDED] [&.disabled]:pointer-events-none [&.disabled]:text-[#838383];
  }

  .dk-overlay-gradient {
    @apply bg-gradient-to-b from-[#00000000] to-[#00000080] opacity-100;
  }

  .button-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Contact form styles */
  .dk-contact-form .contact-form-elements {
    @apply flex flex-col gap-[25px];
  }
  .dk-contact-form .form-element-wrapper label,
  .dk-contact-form .form-element-wrapper span {
    @apply text-[0.75rem] leading-4 text-dkDark;
  }

  .dk-contact-form
    .form-element-wrapper
    .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip)
    input,
  .dk-contact-form
    .form-element-wrapper
    .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip)
    select,
  .dk-contact-form
    .form-element-wrapper
    .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip)
    textarea {
    @apply border border-dkRed;
  }
  .dk-contact-form span.wpcf7-not-valid-tip {
    @apply text-dkRed;
  }

  .dk-contact-form .form-element-wrapper .wpcf7-form-control-wrap {
    @apply block w-full;
  }
  .dk-contact-form .form-element-wrapper input:not([type="file"]),
  .dk-contact-form .form-element-wrapper select,
  .dk-contact-form .form-element-wrapper textarea {
    @apply w-full bg-dkPurpleLight rounded-[23px] px-5 py-[14px] focus:outline-none text-lg leading-none text-dkDark placeholder:text-dkGrey placeholder:font-light;
  }
  .dk-contact-form .form-element-wrapper select {
    @apply appearance-none bg-[url('../../assets/ui_elements/arrow-dropdown-form-icon.svg')] bg-no-repeat pr-5 bg-[length:14px_14px];
    background-position: right 20px center;
  }

  .dk-contact-form .form-element-wrapper #dk-contact-form-area.placeholder {
    @apply text-dkGrey;
  }

  .dk-contact-form
    .form-element-wrapper
    #dk-contact-form-area:not(.placeholder) {
    @apply text-dkDark;
  }
  .dk-contact-form .form-element-wrapper textarea {
    @apply min-h-[323px];
  }

  .dk-contact-form .form-element-wrapper .wpcf7-radio,
  .dk-contact-form .form-element-wrapper .wpcf7-checkbox {
    @apply flex flex-col gap-[10px];
  }

  .dk-contact-form .form-element-wrapper .wpcf7-radio .wpcf7-list-item,
  .dk-contact-form .form-element-wrapper .wpcf7-checkbox .wpcf7-list-item {
    @apply m-0 w-fit;
  }

  .dk-contact-form .form-element-wrapper .wpcf7-radio .wpcf7-list-item label,
  .dk-contact-form
    .form-element-wrapper
    .wpcf7-checkbox
    .wpcf7-list-item
    label {
    @apply flex items-center gap-[15px];
  }

  .dk-contact-form .form-element-wrapper .wpcf7-radio .wpcf7-list-item-label,
  .dk-contact-form
    .form-element-wrapper
    .wpcf7-checkbox
    .wpcf7-list-item-label {
    @apply lg:text-nowrap;
  }

  .dk-contact-form .form-element-wrapper input[type="radio"],
  .dk-contact-form .form-element-wrapper input[type="checkbox"] {
    @apply appearance-none w-[45px] h-[45px] rounded-full bg-dkPurpleLight border-0 cursor-pointer transition-colors duration-200 relative;
  }

  .dk-contact-form .form-element-wrapper input[type="radio"]:checked,
  .dk-contact-form .form-element-wrapper input[type="checkbox"]:checked {
    @apply bg-dkPurpleLight;
  }

  .dk-contact-form .form-element-wrapper input[type="radio"]:checked::after,
  .dk-contact-form .form-element-wrapper input[type="checkbox"]:checked::after {
    @apply absolute block left-1/2 top-1/2 w-[14px] h-[14px] bg-dkPurple rounded-full transform -translate-x-1/2 -translate-y-1/2;
    content: "";
  }

  .dk-contact-form .form-element-wrapper .dk-multy-upload-file {
    @apply flex flex-col-reverse gap-[10px];
  }
  .dk-contact-form .form-element-wrapper .dk-multy-upload-file p:empty {
    @apply hidden;
  }

  .dk-contact-form .dk-multy-upload-file #mfcf7_zl_multifilecontainer,
  .dk-contact-form
    .dk-multy-upload-file
    .contact-form-files-upload:has(> .mfcf7-zl-multifile-name:empty) {
    @apply hidden;
  }
  .dk-contact-form
    .dk-multy-upload-file
    #mfcf7_zl_multifilecontainer:has(> .contact-form-files-upload) {
    @apply m-0 flex flex-col gap-[10px];
  }

  .dk-contact-form .dk-multy-upload-file p:has(> label) label {
    @apply flex items-center gap-[30px] w-fit;
  }
  .dk-contact-form
    .dk-multy-upload-file
    p:has(> label)
    label
    > span.wpcf7-form-control-wrap {
    @apply w-fit;
  }
  .dk-contact-form
    .dk-multy-upload-file
    p:has(> label)
    label
    > span.wpcf7-form-control-wrap
    input {
    @apply bg-dkPurple text-dkWhite transform transition-all duration-300 hover:scale-110 cursor-pointer;
  }
  .dk-contact-form .form-element-wrapper .dk-multy-upload-file label::after {
    content: "Keine ausgewählt";
    @apply text-lg leading-[1.4] font-light text-dkDark lg:text-nowrap;
  }
  .dk-contact-form
    .dk-multy-upload-file:has(div > p.contact-form-files-upload)
    label::after {
    @apply hidden;
  }
  .dk-contact-form .dk-multy-upload-file .contact-form-files-upload {
    @apply flex gap-[10px] justify-between items-center !m-0;
  }
  .dk-contact-form
    .dk-multy-upload-file
    .contact-form-files-upload
    .delete-file {
    @apply inline-block w-[45px] h-[45px] rounded-full bg-dkPurpleLight text-transparent align-middle cursor-pointer bg-[url('../../assets/ui_elements/x-purple-icon.svg')] bg-no-repeat bg-[length:16px_16px] bg-center transform transition-all duration-300 hover:scale-110;
  }

  .dk-contact-form .form-element-accept-checkbox span {
    @apply m-0;
  }

  /* Make wrapper flex and clickable */
  .dk-contact-form .form-element-accept-checkbox .wpcf7-list-item {
    @apply flex items-center space-x-2 cursor-pointer;
  }

  /* Hide the real checkbox visually but keep it accessible */
  .dk-contact-form
    .form-element-accept-checkbox
    .wpcf7-list-item
    input.acceptance {
    @apply sr-only;
  }

  /* Style the label text and reserve space for box */
  .dk-contact-form .form-element-accept-checkbox .wpcf7-list-item-label {
    @apply relative text-dkDark pl-10 text-[0.75rem] leading-4 block;
  }

  /* Draw the empty circle via ::before */
  .dk-contact-form
    .form-element-accept-checkbox
    .wpcf7-list-item-label::before {
    @apply absolute left-0 top-1/2 transform -translate-y-1/2 h-5 w-5 rounded-full bg-dkGreen transition-all duration-150;
  }
  .dk-contact-form
    .form-element-accept-checkbox
    .wpcf7-list-item
    input.acceptance:checked
    + .wpcf7-list-item-label::before {
    @apply !bg-dkGreen;
  }

  /* Hide the SVG by default */
  .dk-contact-form .form-element-accept-checkbox .wpcf7-list-item-label::after {
    content: "";
    @apply absolute left-0 top-1/2 w-5 h-5 transform -translate-y-1/2 hidden bg-[length:13.2px_9.5px] bg-no-repeat bg-center bg-[url('../../assets/ui_elements/checkbox-icon.svg')];
  }

  /* When checked, show the SVG */
  .dk-contact-form
    .form-element-accept-checkbox
    .wpcf7-list-item
    input.acceptance:checked
    + .wpcf7-list-item-label::after {
    @apply block;
  }

  .dk-contact-form .form-element-submit {
    @apply flex justify-center items-center;
  }
  .thementage-registration-form-wrapper form {
    @apply !gap-0;
  }
  .thementage-registration-form-wrapper .contact-form-headline-wrapper {
    @apply !block text-[#393939] mb-[30px] lg:mb-[50px];
  }
  .thementage-registration-form-wrapper .contact-form-elements {
    @apply [&_br]:hidden !gap-0 [&_.form-element-wrapper_label]:mb-[10px] [&_.form-element-wrapper]:mb-[35px] [&_.form-element-accept-checkbox]:lg:mb-[25px] [&_.form-element-accept-checkbox]:mb-[20px];
  }
  .hide-submit-btn input[type="submit"] {
    @apply hidden;
  }

  .gray-select-elements {
    @apply [&_.form-element-accept-checkbox_label>span::after]:!left-[2px] [&_.form-element-accept-checkbox_label>span::after]:!-translate-y-[calc(50%+5px)] [&_.form-element-accept-checkbox_label>span::before]:!w-[25px] [&_.form-element-accept-checkbox_label>span::before]:!h-[25px] [&_.form-element-accept-checkbox_label>span::before]:!bg-[#F0F0FF] [&_.form-element-accept-checkbox_label>span::before]:!-translate-y-[calc(50%+5px)];
  }
  /* End of Contact form styles */
}

.job-filter input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.job-filter input[type="range"] {
  height: 5px;
}

.job-filter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 9999px;
  background-color: #541a76;
  cursor: pointer;
  margin-top: -5px;
}
.job-filter input[type="range"]::-moz-range-thumb {
  height: 30px;
  width: 30px;
  border-radius: 9999px;
  background-color: #541a76;
  cursor: pointer;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fade-in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

p {
  font-size: 18px;
}

h1,
h2 {
  font-family: "Arial Black" !important;
}

.exclamation-icon,
.questionmark-icon {
  width: 51px;
  height: 51px;
}

.faq-answer ul {
	list-style-type: disc;
	padding-left: 20px;
}