@charset "UTF-8";
/*
Theme Name: YITH Wonder
Theme URI: https://wonder.yithemes.com/
Author: YITH
Author URI: https://yithemes.com/
Description: Wonder is the new block-based, multi-purpose, WordPress theme by YITH. Compose your pages to fit any design you like with the power of Full Site Editing (FSE) and the included wide range of Block Patterns. The pre-built pages will help you populate and transform your website into a wonderful website. Customize colors and font pairings to create your own unique look and feel. Check out the demo site at https://wonder.yithemes.com/
Tags: blog, e-commerce, portfolio, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, block-patterns, wide-blocks, full-site-editing, template-editing
Version: 2.1.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yith-wonder
This theme, like WordPress, is licensed under the GPL.
*/

/* Check other CSS files inside /assets/css/ folder */
html {
	scroll-behavior: smooth;
}

.nfd-wb-fade-in-top-short{
    transition: 0.25s !important;
}

.upcoming-events-wrapper,
.grouped-events,
.past-events-wrapper,
.wp-block-post-content {
  max-width: 100%; /* Full width on mobile */
  margin: 0 auto;  /* Center when width is limited */
  padding: 0 9px; /* Small padding for breathing room */
}

/* For tablets and desktops (screens wider than 600px) */
@media (min-width: 600px) {
  .upcoming-events-wrapper,
  .grouped-events,
  .past-events-wrapper,
  .wp-block-post-content {
    max-width: 1000px; /* Adjust width as you prefer */
  }
}


main > :not(.alignfull),
.sidebar > :not(.alignfull),
main > .wp-block-query > :not(.alignfull),
main .entry-content > :not(.alignfull),
main .entry-content .wp-block-columns.alignfull p,
.woocommerce :not(.related) > ul.products,
.sidebar .wp-block-query > :not(.alignfull),
.sidebar .entry-content > :not(.alignfull),
.sidebar .entry-content .wp-block-columns.alignfull p > .wp-block-group {
    padding-inline: 0 !important;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

/* Add horizontal padding to elements */
main > :not(.alignfull),
.sidebar > :not(.alignfull),
main > .wp-block-query > :not(.alignfull),
main .entry-content > :not(.alignfull),
main .entry-content .wp-block-columns.alignfull p,
.woocommerce :not(.related) > ul.products,
.sidebar .wp-block-query > :not(.alignfull),
.sidebar .entry-content > :not(.alignfull),
.sidebar .entry-content .wp-block-columns.alignfull p,
footer > .wp-block-group {
	padding-inline: var(--wp--preset--spacing--40);
}

header > .wp-block-group {
	padding-inline: 0;
}

.upcoming-events {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.past-events {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}


.event-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease;
}

.event-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-image {
  flex-shrink: 0;
  margin-right: 16px;
}

.event-image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.event-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin-right: 2px;
}

.event-date {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}

.event-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #222;
}

.event-excerpt {
  font-size: 15px;
  color: #444;
  margin-bottom: 10px;
}

.event-buttons {
  display: flex;
  gap: 10px;
}

@media (max-width: 420px) {
  .event-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-buttons {
    margin-top: 8px;
  }
}


.past-events-wrapper {
  margin-top: 30px;
}

.event-search-bar {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.3s ease;
}

.event-search-bar:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
}

.max-height-posts img {
    max-height: 300px;
}

.fluent-form-wrapper {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.custom-register-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0073e6;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-register-button:hover {
    background-color: #005bb5;
    transform: translateY(-2px);
}


.post-logo-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: space-between; /* pushes buttons to right */
}

.post-logo-title-wrapper .post-logo {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.post-heading {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    flex-grow: 1; /* take remaining space so buttons stick right */
}

.post-header-buttons {
    display: flex;
    gap: 10px;
}

.wp-block-button__link.wp-element-button {
    display: inline-block !important;
    padding: 6px 20px !important;                  /* horizontal padding for pill shape */
    border-radius: 9999px !important;              /* fully rounded pill */
    text-decoration: none !important;
    font-size: 14px !important;                    /* match other buttons */
    font-weight: 600 !important;
    background-color: #f3f4f6 !important;          /* light gray background */
    color: #111111 !important;                     /* dark text */
    border: 1px solid #d1d5db !important;         /* light gray border */
    transition: background-color 0.3s ease !important, color 0.3s ease !important, opacity 0.3s ease !important;
}

/* Hover effect */
.wp-block-button__link.wp-element-button:hover {
    background-color: #e5e7eb !important;          /* slightly darker gray on hover */
    color: #111111 !important;                     /* keep dark text */
}

.wp-block-navigation-item__content {
    transition: color 0.3s ease, transform 0.2s ease, text-shadow 0.3s ease !important;
    color: #111111 !important; /* default dark text */
}

.wp-block-navigation-item__content:hover {
    color: rgba(0, 0, 0, 0.7) !important;           /* accent color to match buttons */
    transform: scale(1.03) !important;   /* slight zoom effect */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* subtle pop */
}



.custom-btn {
    display: inline-block;
    padding: 6px 20px;                  /* pill horizontal padding */
    background-color: #ffb803;           /* white background */
    color: #294b67 !important;           /* dark text */
    font-weight: 800;
    font-size: 14px;                     /* match other buttons */
    border-radius: 9999px;               /* pill-shaped */
    text-decoration: none;
    border: 1px solid #d1d5db;          /* subtle border */
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    margin-left: 8px;
}

/* Hover for regular custom button */
.custom-btn:hover {
    background-color: #ffb803;           /* subtle gray hover */
    color: #294b67 !important;
}

/* Results variant button */
.custom-btn.rezultati-btn {
    padding: 6px 20px;                   /* pill shape */
    background-color: rgba(220, 53, 69, 0.95); /* translucent red */
    color: #fff !important;
    border-radius: 9999px;               /* pill-shaped */
    text-decoration: none;
    border: 1px solid rgba(220, 53, 69, 0.2); /* subtle border */
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* Hover for results variant */
.custom-btn.rezultati-btn:hover {
    background-color: red;               /* vibrant dark red */
}

.event-buttons a {
    text-align: center;
    padding: 10px 20px;
    background: #0073aa; /* your button color */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.entry-limit {
    align-items: center;
    text-align: center;
}

.user-svg {
      width: 25px;      /* change as needed */
      height: 25px;
      flex-shrink: 0;
      --icon-fill: #111; /* default color; override with CSS or inline style */
    }

.event-buttons {
    align-items: center;
}

/* Remove spacing between tabs */
.gutena-tabs-block>.gutena-tabs-tab {
    display: flex !important;       /* ensure flex layout */
    gap: 0 !important;              /* no space between tabs */
    justify-content: center !important; /* center horizontally */
    align-items: center !important; /* center vertically */
    width: 100%;                    /* make container full width */
}

.gutena-tabs-block {
    margin-top: 20px !important;
}

/* Remove theme border variables */
.gutena-tabs-block>.gutena-tabs-tab,
.gutena-tabs-block>.gutena-tabs-tab.tab-center {
    --gutena--tabs-tab-border-top: 0 !important;
    --gutena--tabs-tab-border-right: 0 !important;
    --gutena--tabs-tab-border-bottom: 0 !important;
    --gutena--tabs-tab-border-left: 0 !important;
}

.gutena-tabs-block>.gutena-tabs-tab {
    display: flex !important;
    border-radius: 0.75rem !important; /* complete pill shape */
    overflow: hidden !important;
    border: 1px solid #d1d5db !important; /* subtle outer border */
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important; /* no space between tabs */
}

/* Individual tabs inside the pill */
.gutena-tabs-tab .gutena-tab-title {
    flex: 1 !important;
    text-align: center !important;
    padding: 4px 16px !important; /* smaller, pill-friendly */
    margin: 0 !important;
    background-color: #ffffff !important; /* inactive background */
    color: #111111 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important; /* remove individual tab borders */
    border-radius: 0 !important; /* flush inside */
}

/* Active tab styling */
.gutena-tabs-tab .gutena-tab-title.active {
    background-color: #e5e7eb !important; /* gray for active */
    color: #111111 !important;
}

/* Hover effect for inactive tabs */
.gutena-tabs-tab .gutena-tab-title.inactive:hover {
    background-color: #f3f4f6 !important;
}




.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

@media (max-width: 600px) {
    .event-buttons {
        align-items: center;
        flex-direction: column;
    }

    .event-buttons a {
        width: 100%;
        max-width: 81.34; /* optional, so they don’t get too wide */
    }
}

.event-search-bar {
    width: 100%;                 /* full width or adjust as needed */
    padding: 8px 20px;           /* vertical and horizontal padding */
    border-radius: 9999px;       /* pill shape */
    border: 1px solid #d1d5db;  /* subtle border */
    font-size: 14px;             /* optional */
    outline: none;               /* removes default outline on focus */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: change border color on focus */
.event-search-bar:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.view-link {
    width: 100%;
}

.event-buttons .view-link {
  padding: 6px 20px; /* slightly more horizontal padding for pill shape */
  font-size: 14px;
  font-weight: 800;
  background-color: #ffb803;
  color: #294b67;
  border: 1px solid #d1d5db;
  text-decoration: none;
  border-radius: 9999px; /* pill-shaped */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.event-buttons .view-link:hover {
  background-color: #ffd766;
  color: #294b67;
}

/* Results button */
.event-buttons .view-link.results-link {
  padding: 6px 20px; /* more horizontal padding for pill shape */
  background-color: rgba(220, 53, 69, 0.95);
  color: #fff;
  border-radius: 9999px; /* pill-shaped */
  text-decoration: none;
  border: 1px solid rgba(220, 53, 69, 0.2);
  transition: background-color 0.3s ease;
}

.event-buttons .view-link.results-link:hover {
  background-color: red; /* vibrant dark red */
}


.event-buttons .register-btn {
  padding: 6px 12px;
  font-size: 14px;
  background-color: #0073aa;
  color: white;
  border: none;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.event-buttons .register-btn:hover {
  background-color: #005f8a;
}

.flatpickr-current-month .flatpickr-monthDropdown-months
{
    bottom: 10px;
}

.flatpickr-current-month .numInputWrapper{
    bottom: 10px;
}

.fluent-entries-table-wrapper {
    max-width: 100vw;
    width: 100%;
    overflow-x: auto;
}

.fluent-entries-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.fluent-entries-table thead {
  background-color: rgba(200, 200, 200, 0.26);
  color: black;
  border-top: 1px solid #ddd;
}

.fluent-entries-table th,
.fluent-entries-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}


.fluent-entries-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.fluent-entries-table tbody tr:hover {
  background-color: #f1f7ff;
}


.fluent-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  justify-content: center; /* center pagination */
}

.fluent-pagination .page-item {
    display: inline-block;
    padding: 8px 16px;
    background-color: white !important;
    color: black !important;
    border-radius: 9999px !important; /* pill shape */
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease;
    font-weight: 500;
    text-decoration: none;
}

.fluent-pagination .page-item:hover {
    background-color: rgba(0,0,0,0.08) !important;
    color: black !important;
}

.fluent-pagination .page-item.active {
    background-color: black !important;
    color: white !important;
    border-color: black !important;
}



.fa-up-right-from-square{
    margin-left: 4px;
}


.wp-block-button .wp-block-button__link {
  font-size: 15px;       /* smaller text */
  padding: 6px 12px;     /* reduce padding */
  line-height: 1.2;      /* tighter height */
  border-radius: 4px;    /* optional: smaller rounding */
  margin-left: 15px;
}


li {
    margin-left: 21px;
}

.custom-language-switcher {
    position: relative;
    display: inline-block;
}

.custom-language-switcher .lang-current {
    cursor: pointer;
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
}

.custom-language-switcher .lang-current:hover,
.custom-language-switcher .lang-current:focus {
    background-color: #f0f0f0;
    outline: none;
}

.custom-language-switcher .lang-flag {
    width: 24px;
    height: auto;
    display: block;
    border-radius: 2px;
}

.custom-language-switcher .lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    z-index: 1000;
    min-width: 150px;
}

.custom-language-switcher.align-right .lang-dropdown {
    right: unset !important;
    left: 0 !important;
}

.flatpickr-calendar {
    min-width: 350px;
}

.custom-language-switcher:hover .lang-dropdown,
.custom-language-switcher .lang-current:focus + .lang-dropdown,
.custom-language-switcher .lang-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-language-switcher .lang-dropdown .lang-item {
    display: flex;              /* keeps img and text inline */
    align-items: center;        /* vertically center img and text */
    gap: 8px;                   /* space between img and text */
    padding: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
    border-bottom: 1px solid #eee;
}

.custom-language-switcher .lang-dropdown .lang-item img {
    display: inline-block;      /* ensures image behaves inline */
    width: 20px;                /* adjust size as needed */
    height: auto;
}

.custom-language-switcher .lang-dropdown .lang-item:last-child {
    border-bottom: none;
}

.custom-language-switcher .lang-dropdown .lang-item:hover {
    background-color: #f8f9fa;
}

.post-logo-title-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap; /* allows wrapping */
}

.post-heading {
  margin: 0;
}

.post-header-buttons {
  display: flex;
  gap: 0.5rem;
}

/* When screen is below 600px: stack title and buttons */
@media (max-width: 600px) {
  .post-logo-title-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-header-buttons {
    margin-top: 0.5rem;
  }
}

.livestream-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #e53935;
    border-radius: 12px;
    vertical-align: middle;
    text-decoration: none;
    transition: background 0.3s;
    cursor: pointer;
}
.livestream-badge:hover {
    background: #c62828;
}

/* Container styles */
.wp-block-group.is-horizontal.is-nowrap.is-layout-flex {
    display: flex;
    flex-wrap: wrap; /* allow wrapping */
    justify-content: center; /* center logos */
    gap: 15px; /* spacing between logos */
}

/* Logo styles */
.wp-block-group.is-horizontal.is-nowrap.is-layout-flex figure.wp-block-image {
    flex: 0 0 auto; /* don’t stretch */
    width: auto; /* default width */
}

/* Images scale proportionally */
.wp-block-group.is-horizontal.is-nowrap.is-layout-flex figure.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile: 2 logos per row, smaller */
@media (max-width: 1900px) {
    .wp-block-group.is-horizontal.is-nowrap.is-layout-flex figure.wp-block-image {
        flex: 0 0 45%; /* 2 per row */
        max-width: 80px; /* shrink logos */
    }
}

#entries-search-form {
    margin-bottom: 20px;
}

#entries-search-form input#entries-search {
    width: 100%;
    max-width: 300px;
    padding: 10px 16px !important;
    border-radius: 9999px !important; /* pill shape */
    border: 1px solid #d1d5db !important; /* light gray border */
    background-color: white !important;
    color: black !important;
    font-size: 14px;
    transition: all 0.2s ease;
}

#entries-search-form input#entries-search::placeholder {
    color: #666 !important;
}

#entries-search-form input#entries-search:focus {
    outline: none !important;
    border-color: black !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
}