/*
Theme Name: MTTM
Author: Bananaconda.eu
Author URI: 
Theme URI: 
Tags: full-site-editing
Text Domain: mttm
Requires at least: 6.1
Requires PHP: 7.4
Tested up to: 6.4
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Generated on fullsiteediting.com. No code version.
*/

body {
  padding-top: var(--site-header-height);
}

@media (max-width: 780px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 781px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* Typography weights: headings and buttons should use 600 weight */
h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
}

.wp-block-button__link,
.wp-block-button a,
button,
.button {
  font-weight: 600;
}

.wp-block-button__link,
.wp-block-button a {
  --wp--custom--button-grow: 5px;
  --wp--custom--button-grow-color: var(--wp--preset--color--primary);
  transition: box-shadow 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  --wp--custom--button-grow-color: #98582a33;
}

.wp-block-button__link:hover,
.wp-block-button a:hover,
.wp-block-button__link:focus-visible,
.wp-block-button a:focus-visible {
  box-shadow: 0 calc(-1 * var(--wp--custom--button-grow)) 0 0 var(--wp--custom--button-grow-color),
    0 var(--wp--custom--button-grow) 0 0 var(--wp--custom--button-grow-color);
}


@media (max-width: 780px) {

    footer > div > div {
        flex-direction: column;
        align-items: center;
    }

    footer > div > div > .wp-block-group {
        flex-basis: auto;
        align-items: center;
    text-align: center;
    }

    footer > div > div > .wp-block-columns {
        flex-direction: column;
        text-align: center;
    }
}




@media (max-width: 780px) {

    .is-style-reverse-columns-on-mobile {
        flex-direction: column-reverse !important;
    }

    .is-style-row-on-mobile > .wp-block-column {
        flex-direction: row !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        width: auto !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: auto !important;
    }

    .is-style-columns-on-mobile {
        flex-direction: column !important;
    }

    .wp-block-button {
        width: 100% !important;
        box-sizing: border-box;
    }

    .is-style-text-align-left-mobile {
        text-align: left !important;
    }

    .is-style-text-align-center-mobile {
        text-align: center !important;
    }
}

/* List icon styles for core/list .is-style-square */
.wp-block-list.is-style-square {
  list-style: none;
  padding-left: 0;
  
}

.wp-block-list.is-style-square li {
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 1.5em;
}

.wp-block-list.is-style-square li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('assets/icons/list-2.svg');
}

.min-height-stretch {
  min-height: stretch !important;
}


@media (max-width: 780px) {

  .columns-custom-1, .columns-custom-2, .columns-custom-3 {
    margin-top: 16px;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 16px !important;
  }

  .blok-5-w-1 {
    background-size: contain !important;
    background-position: 50% 23% !important;
  }

  .blok-5-w-1-grupa {
    margin-top: 256px;
  }

  .columns-border-right .wp-block-column {
    padding-right: 0 !important;
    border-right: none !important;
    padding-left: 0 !important;
  }

  .mini-cta {
    padding: 24px 16px !important;
  }

  .mini-cta .wp-block-group {
    padding: 0 !important;
  }

  .custom-image-2 img{
    aspect-ratio: 3/2 !important;
    height: auto !important;
  }

  .custom-image-1 img {
    aspect-ratio: 4/3 !important;
    height: auto !important;
  }
}

.custom-form-wrapper {
  background-color: white;
  padding: 32px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.custom-form-wrapper label{
  font-weight: 500;
}

.custom-form-wrapper input[type="text"], .custom-form-wrapper input[type="date"], .custom-form-wrapper input[type="email"], .custom-form-wrapper textarea {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--wp--preset--font-size--text-m);
  font-family: var(--wp--preset--font-family--poppins);
  border: 1px solid var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--text-body);
  width: 100%;
  box-sizing: border-box;
}

.custom-form-wrapper input:focus, .custom-form-wrapper input:focus-visible,
.custom-form-wrapper textarea:focus, .custom-form-wrapper textarea:focus-visible {
  border-color: var(--wp--preset--color--primary);
  outline: none;
}

/* Wymuszenie ułożenia w rzędzie dla elementów radio */
.radio-row .wpcf7-radio {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.radio-row .wpcf7-list-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

/* 2. Ukrycie domyślnego systemowego przycisku radio - NAPRAWIONE */
.radio-row input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    z-index: -1 !important; /* Przenosi niewidzialny input pod spód */
    /* USUNIĘTO: pointer-events: none; - to ono blokowało kliknięcia! */
}

/* Dodatkowe zabezpieczenie: upewniamy się, że cały obszar opcji jest klikalny */
.radio-row .wpcf7-list-item label {
    cursor: pointer !important;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* 3. Ustawienie układu etykiety z miejscem na nowe kółko */
.radio-row .wpcf7-list-item-label {
    position: relative;
    padding-left: 30px; /* Robi miejsce na customowe kółko z lewej strony */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #333;
    min-height: 24px;
}

/* 4. Wygląd pustego, niezaznaczonego kółka */
.radio-row .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 1px solid #777; /* Cienka, szara ramka niezaznaczonego pola */
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 5. Wygląd kółka po zaznaczeniu (Brązowy styl z projektu) */
.radio-row input[type="radio"]:checked + .wpcf7-list-item-label::before {
    border: 6px solid #8E5331; /* Gruba brązowa ramka tworząca efekt wypełnienia */
    background-color: #fff; /* Biały środek */
}

/* (Opcjonalnie) Efekt najechania myszką (hover) na niezaznaczone kółko */
.radio-row .wpcf7-list-item-label:hover::before {
    border-color: #8E5331;
}

.form-row.radio-row span > span.first {
  margin-left: 0;
}

.custom-form-wrapper h4{
  margin: 8px 0;
}

.custom-form-wrapper > p {
  margin: 8px 0;
}

/* Główne style przycisku */
.custom-submit-btn {
    display: flex;
    align-items: center;      /* Środkuje elementy wertykalnie (góra-dół) */
    justify-content: center;  /* Środkuje elementy horyzontalnie (lewo-prawo) */
    gap: 10px;                /* Tworzy równy odstęp między ikonką a tekstem */
    box-sizing: border-box;
    background-color: #8E5331; /* Brązowy z projektu */
    color: #fff;
    padding: 15px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Wymuszenie czystego układu dla samej ikony SVG */
.custom-submit-btn svg {
    margin: 0 !important;
    padding: 0 !important;
    display: block; /* Zapobiega dodawaniu przez przeglądarkę pustej przestrzeni pod ikoną */
    flex-shrink: 0; /* Zapobiega zniekształceniu ikony, jeśli tekst byłby za długi */
    line-height: 1 !important;
}

.custom-form-wrapper div p {
  margin: 0;
}

.acceptance-row .wpcf7-list-item {
    margin: 0;
    display: block;
}

.acceptance-row .wpcf7-list-item label {
    display: flex;
    align-items: flex-start; /* Równa checkbox z pierwszą linijką tekstu */
    gap: 12px; /* Odstęp między kwadracikiem a tekstem */
    font-weight: 400; /* Zdejmujemy pogrubienie, żeby tekst był lżejszy */
    color: #6a6a6a; /* Szary kolor z Twojego screena */
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

/* Resetujemy globalne style inputów specjalnie dla tego checkboxa */
.acceptance-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0; /* Gwarantuje, że checkbox nie zostanie zgnieciony przez długi tekst */
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 2px !important; /* Drobna korekta, żeby kwadracik był idealnie na środku pierwszej linii */
    cursor: pointer;
}


.file-label-title {
    display: block;
    font-weight: 500;
    color: #333;
}

/* Główne pole pliku - określa wygląd tekstu z nazwą wybranego zdjęcia */
.custom-file-input {
    width: 100%;
    cursor: pointer;
    color: #6a6a6a; /* Kolor tekstu z nazwą pliku */
    font-size: 14px;
    margin-top: 5px;
}

/* Stylowanie natywnego przycisku "Wybierz plik" */
.custom-file-input::file-selector-button {
    background-color: #E2E2E2; /* Szary z projektu */
    color: #4A4A4A;
    padding: 12px 20px 12px 40px; /* Większy padding z lewej robi miejsce na ikonę */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    margin-right: 15px; /* Odstęp między przyciskiem a tekstem nazwy pliku */
    transition: background-color 0.2s ease;
    
    /* Dodanie ikony Plusa w kodzie Base64 (jako tło) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center; /* Pozycja ikony */
}

/* Efekt najechania myszką */
.custom-file-input::file-selector-button:hover {
    background-color: #D1D1D1;
}

/* Ukrycie standardowych obramowań przeglądarki na focusie */
.custom-file-input:focus {
    outline: none;
}