/*
Theme Name: EORA 4
Theme URI: https://woomera.de/eora4
Author: WOOMERA - Jacob & Vierheller GbR
Author URI: https://woomera.de
Description: EORA 4 emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eora4
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
:root{
    @media (prefers-reduced-motion: no-preference) {
        interpolate-size: allow-keywords;
      }
}

html{
	hyphens: auto;
    text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.wp-block-column {
  box-sizing: border-box;
}

/* Focus styles */
:where(.wp-site-blocks *:focus-visible) {
	outline-width: 2px;
	outline-style: dashed;
    outline-color: currentcolor;
    outline-offset: 4px;
}

:where(.wp-site-blocks *:focus-visible:not(:has(.has-border-color))) {
	outline-width: 2px;
	outline-style: dashed;
    border-radius: 40px;
}

:root :where(.wp-element-button.has-custom-accent-1-light-background-color:focus-visible, .wp-block-button__link.has-custom-accent-1-light-background-color:focus-visible) {
    outline-color: var(--wp--preset--color--custom-accent-1-light) !important;
}

:root :where(.wp-element-button.has-custom-accent-2-dark-color:focus-visible, .wp-block-button__link.has-custom-accent-2-dark-color:focus-visible) {
    outline-color: var(--wp--preset--color--custom-accent-2-light) !important;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}


/*
 * Button hover Styles
 *
*/

a.wp-block-button__link{
	transition: all .1s ease-in-out;
}

/*
a.wp-block-button__link:hover{
	transform: scale(1.05)
}
*/

a.has-accent-1-color:hover,
a.has-custom-accent-1-light-background-color:hover {
    background-color: var(--wp--preset--color--accent-3) !important;
    color: white !important;
    border-color: var(--wp--preset--color--accent-3) !important;
}

a.has-custom-accent-2-light-background-color:hover,
a.has-custom-accent-2-dark-color:hover {
    background-color: var(--wp--preset--color--accent-2) !important;
	color: white!important;
    border-color: var(--wp--preset--color--accent-2) !important;
}

a.has-custom-accent-2-very-dark-color.has-base-background-color.has-text-color:hover {
    background-color: var(--wp--preset--color--custom-accent-2-dark) !important;
    color: white !important;
    border-color: var(--wp--preset--color--custom-accent-2-dark) !important;
}
a.has-accent-5-color:hover {
    background-color:white !important;
    color: var(--wp--preset--color--accent-1) !important;
    border-color: white !important;
}

/* View transitions */

/* 1. Opt-in to view transitions */

@view-transition {
	navigation: auto;
}

/* 2. Animate logo */

#logo {
	view-transition-name: title;
}

/* 3. Animation timing */

::view-transition-group(*) {
	animation-duration: 0.5s;
}

/* Create a custom animation */
@keyframes move-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes move-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
	animation: 0.74s ease-in both move-out;
}

::view-transition-new(root) {
	animation: 0.74s ease-in both move-in;
}

/* Responsive Border Radius für Gutenberg Elemente */

/* 
  Diese Klasse macht Border Radius Werte responsiv.
  Der in Gutenberg gesetzte Wert wird als Maximum genommen
  und skaliert flüssig bis zu einem Minimum herunter.
  
  WICHTIG: Das JavaScript setzt --original-radius automatisch!
*/

.responsive-border-radius {
  /* Warte bis JavaScript die Variable gesetzt hat */
  /* Kein !important mehr, damit inline-style initial sichtbar bleibt */
}

/* Nur anwenden wenn --original-radius gesetzt ist */
.responsive-border-radius[style*="--original-radius"] {
  border-radius: clamp(
    calc(var(--original-radius) * 0.4),  /* Minimum: 40% */
    calc(var(--original-radius) * 0.5 + 2vw),  /* Fluid Teil */
    var(--original-radius)  /* Maximum: Original-Wert */
  ) !important;
}

/* Alternative: Feste Breakpoint-basierte Skalierung */
.responsive-border-radius-breakpoints {
  /* --original-radius wird vom JavaScript gesetzt */
}

/* Desktop: Original-Wert (wird aus Gutenberg inline-style übernommen) */
@media (min-width: 1200px) {
  .responsive-border-radius-breakpoints {
    /* border-radius bleibt wie in Gutenberg gesetzt */
  }
}

/* Tablet: 70% des Original-Wertes */
@media (max-width: 1199px) and (min-width: 768px) {
  .responsive-border-radius-breakpoints {
    border-radius: calc(var(--original-radius) * 0.7) !important;
  }
}

/* Mobile: 50% des Original-Wertes */
@media (max-width: 767px) {
  .responsive-border-radius-breakpoints {
    border-radius: calc(var(--original-radius) * 0.5) !important;
  }
}

/* Spezielle Varianten für unterschiedliche Skalierungsfaktoren */

/* Sanfte Skalierung: 60-100% */
.responsive-border-radius-soft[style*="--original-radius"] {
  border-radius: clamp(
    calc(var(--original-radius) * 0.6),
    calc(var(--original-radius) * 0.7 + 1.5vw),
    var(--original-radius)
  ) !important;
}

/* Starke Skalierung: 25-100% */
.responsive-border-radius-strong[style*="--original-radius"] {
  border-radius: clamp(
    calc(var(--original-radius) * 0.25),
    calc(var(--original-radius) * 0.3 + 3vw),
    var(--original-radius)
  ) !important;
}

@media screen and (max-width: 781px) {
  .has-global-padding:not('.review-slide') {
    padding-right: 10px!important;
    padding-left: 10px!important;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .rounded-full{
    border-radius: 30px!important;
  }

    .single-tarif .tarif-box {
      min-height: 200px !important;
    }
}

/* Für Elemente mit individuellen Ecken-Radien */
.responsive-border-radius-individual[style*="--radius-tl"] {
  border-top-left-radius: clamp(
    calc(var(--radius-tl) * 0.4),
    calc(var(--radius-tl) * 0.5 + 2vw),
    var(--radius-tl)
  ) !important;
  
  border-top-right-radius: clamp(
    calc(var(--radius-tr) * 0.4),
    calc(var(--radius-tr) * 0.5 + 2vw),
    var(--radius-tr)
  ) !important;
  
  border-bottom-right-radius: clamp(
    calc(var(--radius-br) * 0.4),
    calc(var(--radius-br) * 0.5 + 2vw),
    var(--radius-br)
  ) !important;
  
  border-bottom-left-radius: clamp(
    calc(var(--radius-bl) * 0.4),
    calc(var(--radius-bl) * 0.5 + 2vw),
    var(--radius-bl)
  ) !important;
}


details {
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility .5s allow-discrete, opacity .5s ease-in-out, block-size .5s ease-in-out;
  }

  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

/* ============================================
   Tarif Onbpardinf Form Styles
   ============================================ */
.addon-item.rounded-full,
.top-group-btn.rounded-full {
    border-radius: 30px;
}

/* ============================================
   Tarif Modul Styles
   ============================================ */

   :root{
    --pos-light-color: var(--wp--preset--color--custom-accent-1-light) !important;
    --pos-dark-color: var(--wp--preset--color--accent-1)!important;
    --pos-label-color: var(--wp--preset--color--accent-2)!important;
  }

  #pos-form.has-custom-accent-2-dark-color {
        --pos-light-color: var(--wp--preset--color--custom-accent-2-light) !important;
        --pos-dark-color: var(--wp--preset--color--custom-accent-2-dark) !important;

   }

   label.text-gray-700 {
    color: var(--pos-label-color) !important;
   }

   button.border-blue-500 {
    border-color: var(--pos-light-color) !important;
   }

   .terminal-art-option:hover p,
   .terminal-art-option:hover span,
   button.text-blue-700 {
    color: var(--pos-dark-color) !important;
   }
   
   button.bg-blue-50 {
     background-color: var(--pos-light-color) !important;
    }
    
    .addon-item:hover,
    .company-type-option:hover,
    .terminal-art-option:hover,
    button.text-gray-700:hover,
    .top-group-btn:hover p {
     color: var(--pos-dark-color) !important;
     border-color: var(--pos-dark-color) !important;
    }

    .company-type-option,
    .terminal-art-option{
      margin: 0!important;
    }


    .company-type-option input[type="radio"],
    .terminal-art-option input[type="radio"] {
          transform: scale(2);
          outline: none;
      }
    .addon-item input[type="checkbox"] {
          transform: scale(1.25);
          outline: none;
      }
    .addon-item input[type="checkbox"]:checked ,
    .company-type-option input[type="radio"]:checked,
    .terminal-art-option input[type="radio"]:checked {
          color: var(--pos-dark-color)!important;
        }

    label.addon-item:has(input[type="checkbox"]:checked),
    label.company-type-option:has(input[type="radio"]:checked),
    label.terminal-art-option:has(input[type="radio"]:checked){
      background-color: var(--pos-light-color) !important;
      border-color: var(--pos-light-color) !important;
      color: var(--pos-dark-color) !important;
    }
    label.addon-item:has(input[type="checkbox"]:checked) span,
    label.addon-item:has(input[type="checkbox"]:checked) p,
    label.company-type-option:has(input[type="radio"]:checked) span,
    label.terminal-art-option:has(input[type="radio"]:checked) span,
    label.terminal-art-option:has(input[type="radio"]:checked) p{
      color: var(--pos-dark-color) !important;
    }

    #mcc-selection-display{
      color: var(--pos-dark-color) !important;
      background-color: var(--pos-light-color) !important;
    }
    #selected-mcc-name{
      color: var(--pos-dark-color)!important;
    }
    
    #change-mcc{
      border-color: var(--pos-dark-color) !important;
    }
    
    .top-group-btn:hover{
      border-color: var(--pos-dark-color) !important;
    }

    #manual-entry-form label{
      margin: 0!important;
    }
  
    /* ============================================
   Step Manager Styles
   ============================================ */
.pos-confirm-step{
    background-color: var(--pos-dark-color) !important;
    border-color: var(--pos-dark-color) !important;
}
/* Locked .pos-form-wrapper details Block */
.pos-form-wrapper details.step-locked {
    pointer-events: none;
    opacity: 0.5;
    position: relative;
}

.pos-form-wrapper details.step-locked summary {
    cursor: not-allowed !important;
    color: #9CA3AF !important;
}

.pos-form-wrapper details.step-locked summary::before {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    background-image: url('assets/images/icons/step-locked-v3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.pos-form-wrapper.has-custom-accent-2-dark-color details.step-locked summary::before {
  background-image: url('assets/images/icons/step-locked-v3-accent-2.svg');
}

/* Allow clicking summary to show message */
.pos-form-wrapper details.step-locked summary {
    pointer-events: auto;
}

/* Complete .pos-form-wrapper details Block */
.pos-form-wrapper details.step-complete:not(:has(button:disabled)) summary::before {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    background-image: url('assets/images/icons/step-completed.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.pos-form-wrapper details.step-complete {
    border-color: #10B981 !important;
}

/* Active/Current Step (Unlocked) */
.pos-form-wrapper details:not(.step-complete):not(.step-locked) {
    border-color: #3B82F6 !important;
}

.pos-form-wrapper details.step-complete:has(button:disabled) summary::before,
.pos-form-wrapper:has(button:disabled) details:not(.step-complete):not(.step-locked) summary::before {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    background-image: url('assets/images/icons/step-unlocked-v2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.pos-form-wrapper.has-custom-accent-2-dark-color details:not(.step-complete):not(.step-locked) summary::before {
  background-image: url('assets/images/icons/step-unlocked-v2-accent-2.svg');
}

.pos-form-wrapper details:not(.step-complete):not(.step-locked) summary {
    font-weight: 600;
}

/* Smooth transitions */
.pos-form-wrapper details {
    transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.pos-form-wrapper details summary {
    transition: color 0.3s ease;
}

/* ============================================
   Default Form Input Styles (Tailwind-like)
   ============================================ */

/* Text inputs, email, password, number, tel, url, search */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
   box-sizing: border-box;
    width: 100%;
    padding: 0.75rem; /* 12px - equivalent to p-3 */
    border: 1px solid rgb(209 213 219 / var(--tw-border-opacity, 1)); /* border-gray-300 */
    border-radius: 0.5rem; /* 8px - rounded-lg */
	font-family: sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--wp--preset--color--accent-1); /* text-gray-800 */
    background-color: #ffffff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Submit button */
input[type=submit]{
  border-width: 2px;
    padding-top: var(--wp--preset--spacing--20);
    padding-right: 76px;
    padding-bottom: var(--wp--preset--spacing--20);
    padding-left: 28px;
    font-size: clamp(16.293px, 1.018rem + ((1vw - 3.2px) * 0.777), 25px);
    font-style: normal;
    font-weight: 600;
    color: white;
    border:0;
    border-radius: 50px;
    cursor: pointer;
    height: 72px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
    background-size: 48px;
    background-position: right 10px center;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  input.wpcf7-not-valid{
    border-color: var(--wp--preset--color--custom-accent-2-dark)!important;
  }

  .wpcf7-not-valid-tip{
    display: none ;
  }

.wpcf7 form .wpcf7-response-output {
  margin: 1em 0 0;
  padding: 0.75em 1em;
  border: 2px solid #00a0d2;
  border-radius: 50px;
  font-weight: 300;
}

.submit-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-block-start: 30px;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
    color: #9ca3af; /* text-gray-400 */
    opacity: 1;
    font-size: 1rem;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgb(169, 222, 174);
  background-color: rgb(169, 222, 174);
  color: rgb(22, 101, 52);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--wp--preset--color--custom-accent-2-light);
  background-color: var(--wp--preset--color--custom-accent-2-light);
  color: var(--wp--preset--color--custom-accent-2-dark);
}

.wpcf7 .cols-2 {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #9ca3af; /* text-gray-400 */
    cursor: not-allowed;
    opacity: 0.6;
}

/* Invalid/Error state */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: var(--wp--preset--color--custom-accent-2-dark); /* border-red-500 */
}

input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
    border-color: var(--wp--preset--color--custom-accent-2-dark);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Textarea specific */
textarea {
   height: 160px;
    min-height: 100px;
    resize: vertical;
}

/* Select specific */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Label styling */
label {
    display: block;
    font-size: 1.125rem; /* text-sm */
    font-weight: 600; /* font-medium */
    color: var(--wp--preset--color--accent-2); /* text-gray-700 */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    position: relative;
    margin-top: 7px;
}

/* Helper text / description */
.form-helper-text,
.form-description {
    font-size: 0.875rem;
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.25rem;
}

/* Error message */
.form-error,
.error-message {
    font-size: 0.875rem;
    color: #ef4444; /* text-red-500 */
    margin-top: 0.25rem;
}

/* Success message */
.form-success,
.success-message {
    font-size: 0.875rem;
    color: #10b981; /* text-green-500 */
    margin-top: 0.25rem;
}

/* Checkbox and Radio buttons */
input[type="checkbox"],
input[type="radio"] {

}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
}

/* File input */
input[type="file"] {
    width: auto;
    padding: 0.5rem;
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
}

input[type="file"]:hover {
    border-color: #9ca3af;
}

/* Required field indicator */
.required::after,
label.required::after {
    content: " *";
    color: #ef4444; /* text-red-500 */
}

/* Form group spacing */
.form-group,
.field-group {
    margin-bottom: 1rem;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: white;
  /* Not removed via appearance */
  margin: 0 0 0 2px;

  font: inherit;
  color: currentColor;
  width: 1.1875rem;
  height: 1.1875rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: var(--icon-color);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 781px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

.addon-item span {
    text-align: right;
    max-width: 70px;
}
}