/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap');

/* General Styles */
body {
    font-family: 'Sora', sans-serif;
}

/* Harmonogram Layout */
.harmonogram-container {
    display: flex;
    justify-content: space-between;

    color: #fff; /* Text color */
    align-items: center;
}
.wp-list-table {
    border-collapse: collapse;
    font-size: 14px;
    color: #333;
}
.wp-list-table th {
    font-weight: 600;
}
.wp-list-table td {
    word-wrap: break-word;
}
.wrap h1 {
    font-size: 24px;
    font-weight: 700;
}
.hk-mass-entry, .hk-confession-entry, .hk-intention-entry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap !important;
}
.hours {
    color: #FFD790;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.title{
    color: var(--white, #FFFEFA);
    font-family: Sora;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0px !important;
}

.left-column-harmonogram {
    max-width: 450px; /* Ustaw ograniczoną szerokość lewej kolumny */
    word-wrap: break-word; /* Wymuszenie zawijania w kolumnie */
}
.harmonogram-section ul {
    list-style-type: none;
    padding-left: 0;
}

.harmonogram-section li {
    font-size: 1.1em;
    margin-bottom: 5px;
}
.date{
    color: var(--white, #FFFEFA);
    font-family: Sora;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 8px !important;
}
.sunday-date {
    color: red;
}
.patron{
    color: var(--white, #FFFEFA);
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 100%; /* Maksymalna szerokość w granicach kolumny */
    word-wrap: break-word; /* Zawijanie tekstu na słowach */
    overflow-wrap: break-word; /* Dodatkowe zawijanie */
    margin: 0; /* Usuń ewentualne marginesy */
}
.details-link {
    font-size: 0.9em;
    text-decoration: none !important; /* Usunięcie podkreślenia */
    color: inherit; /* Dziedziczenie koloru tekstu */
    position: relative; /* Kontekst dla pseudo-elementu */
    transition: color 0.3s ease; /* Płynne przejście koloru na hover */
    font-weight: bold;
}

.details-link::after {
    content: "→"; /* Dodanie strzałki */
    display: inline-block; /* Wyświetlenie strzałki jako elementu */
    margin-left: 5px; /* Odstęp między tekstem a strzałką */
    transition: transform 0.3s ease; /* Płynne przejście wydłużenia */
    transform: scaleX(1); /* Domyślny rozmiar strzałki */
    transform-origin: left; /* Punkt początkowy skalowania */
}

.details-link:hover {
    color: #EFD790; /* Zmiana koloru na hover */
    text-decoration: none; /* Upewnienie się, że brak podkreślenia */
}
.right-column-harmonogram {
    margin-left: auto; /* Ustaw automatyczny margines z lewej */
    margin-right: 10%; /* Przesuń prawą kolumnę bliżej środka */
}
.details-link:hover::after {
    transform: scaleX(1.5); /* Wydłużenie strzałki */
}
/* Responsiveness */
@media screen and (max-width: 768px) {
    .harmonogram-container {
        flex-direction: column;
        align-items: flex-start; /* Wyrównanie zawartości do lewej */
        justify-content: flex-start; /* Ustawienie zawartości od góry */
        text-align: left; /* Wyrównanie tekstu do lewej */
        gap: 20px; /* Odstępy między sekcjami */
    }

    .left-column-harmonogram, .right-column-harmonogram {
        width: 100%;
        margin-left: 0; /* Usuń margines z lewej */
        margin-right: 0; /* Usuń margines z prawej */
    }

    .hk-mass-entry, .hk-confession-entry, .hk-intention-entry {
        width: 100%; /* Rozciągnij na pełną szerokość */
        margin-bottom: 20px; /* Dodaj odstęp między sekcjami */
        text-align: left; /* Wyrównanie treści do lewej */
    }

    .hours, .title, .date, .patron, .details-link {
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .wp-list-table {
        width: 100%; /* Dopasuj tabelę do pełnej szerokości */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .harmonogram-section ul {
        padding-left: 20px; /* Dodaj wcięcie dla list */
    }

    .harmonogram-section li {
        text-align: left; /* Wyrównanie treści do lewej */
    }
}

/* Responsiveness for phones */
@media screen and (max-width: 480px) {
    .harmonogram-container {
        gap: 10px; /* Zmniejsz odstęp między elementami */
    }

    .title {
        font-size: 24px; /* Zmniejsz rozmiar tytułu */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .date {
        font-size: 32px; /* Zmniejsz rozmiar daty */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .patron {
        font-size: 14px; /* Zmniejsz rozmiar tekstu */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .hours {
        font-size: 14px; /* Zmniejsz rozmiar godzin */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }

    .details-link {
        font-size: 12px; /* Zmniejsz rozmiar linków */
        text-align: left; /* Wyrównanie tekstu do lewej */
        margin-left: 0; /* Usuń ewentualne marginesy */
    }
}