/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root,
        .not-dark,
        .is-expanded-menu #header {
			--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
			--cnvs-primary-menu-submenu-hover-bg: rgba(255, 255, 255, .15);
			--cnvs-primary-menu-submenu-bg: rgba(228, 220, 220, 0.15);
			--cnvs-primary-menu-submenu-hover-color: var(--cnvs-contrast-900);
            --cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), .15);
            --cnvs-primary-menu-submenu-blur: 16px;
		}

		.is-expanded-menu .sub-menu-container,
		.is-expanded-menu .mega-menu-content {
			border-top: var(--cnvs-primary-menu-submenu-border);
			transition: margin 0.25s ease !important;
		}

		.is-expanded-menu .sub-menu-container .sub-menu-container,
		.is-expanded-menu .mega-menu-content .sub-menu-container {
			background-color: transparent;
            
		}

		.is-expanded-menu .sub-menu-container::before,
		.is-expanded-menu .mega-menu-content::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			-webkit-backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
			backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
            background: rgba(0, 0, 0, 0.4);
		}

        .is-expanded-menu .sub-menu-container .menu-item > .menu-link,
		.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link {
			font-weight: 400;
		}

		.is-expanded-menu .sub-menu-container .sub-menu-container,
		.is-expanded-menu .sub-menu-container .mega-menu-content {
			top: -1px !important;
		}

        #header-wrap {

            background: rgba(0, 0, 0, 0.6) !important;
                /* opacity: 0.7; */
                /* background: rgba(255, 255, 255, 0.7); */

            }

            /* Link koji sadrži <img> dobije klasu .img-link */
            .img-link img {
            display: block;                 /* uklanja razmake ispod slike */
            transition: filter 180ms ease;  /* glatka animacija */
            }

            /* Na hover/focus slika postaje mrvu bleđa */
            .img-link:hover img,
            .img-link:focus-visible img {
            filter: brightness(0.92);       /* 1 = normalno; 0.92 = ~8% tamnije/bleđe */
            }

            /* (opciono) vidljiv fokus za tastaturu */
            .img-link:focus-visible {
            outline: 2px solid #4c9ffe;
            outline-offset: 2px;
            }

        .entry-content p {
            text-align: justify;
        }

        @media (max-width: 768px) {
            #header-wrap {
                position: absolute !important;   /* ili fixed ako hoćeš da ostane pri skrolu */
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
                
                opacity: 0.7;
                /* background: rgba(255, 255, 255, 0.7); */

            }
        .entry .entry-content img, .entry .entry-contant p img {
                width: 100%;
                height: auto;
            }

        }


/* events card START */

        .upcoming-events {
               padding: 24px 0 36px;
          }

          .upcoming-events__inner {
               max-width: 1180px;
               margin: 0 auto;
          }

          .upcoming-events__title {
               margin: 0;
               text-align: center;
               font-size: clamp(2.1rem, 3vw, 3.2rem);
               line-height: 1.1;
               color: #221a15;
               font-family: "Cormorant Garamond", Georgia, serif;
               font-weight: 500;
          }

          .upcoming-events__divider {
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 14px;
               margin: 16px 0 32px;
               color: #c7963b;
          }

          .upcoming-events__divider::before,
          .upcoming-events__divider::after {
               content: "";
               width: 88px;
               max-width: 18vw;
               height: 2px;
               border-radius: 999px;
               background: linear-gradient(90deg, rgba(199, 150, 59, 0.25), #d9a94b, rgba(199, 150, 59, 0.25));
          }

          .upcoming-events__divider-mark {
               font-size: 2rem;
               line-height: 1;
          }

          .upcoming-events__list {
               display: grid;
               gap: 24px;
               width: 80%;
               margin: 0 auto;
          }

          .event-card {
               --accent: #c7963b;
               --accent-soft: #fbf3e3;
               --accent-shadow: rgba(199, 150, 59, 0.16);
               background: #fff;
               border: 1px solid rgba(188, 158, 120, 0.28);
               border-radius: 18px;
               box-shadow: 0 18px 45px rgba(65, 42, 22, 0.08);
               overflow: hidden;
               display: grid;
               grid-template-columns: 152px 210px minmax(0, 1fr);
               align-items: center;
          }

          .event-card--gold {
               --accent: #cf9839;
               --accent-soft: linear-gradient(180deg, #fbf3e6 0%, #f5ead6 100%);
               --accent-shadow: rgba(207, 152, 57, 0.22);
          }

          .event-card--rose {
               --accent: #b86185;
               --accent-soft: linear-gradient(180deg, #f8eaf0 0%, #f4dce6 100%);
               --accent-shadow: rgba(184, 97, 133, 0.20);
          }

          .event-card--teal {
               --accent: #5f9f9e;
               --accent-soft: linear-gradient(180deg, #e5f2f0 0%, #d7eae8 100%);
               --accent-shadow: rgba(95, 159, 158, 0.20);
          }

          .event-card--copper {
               --accent: #d08236;
               --accent-soft: linear-gradient(180deg, #fbf1e4 0%, #f7e7d3 100%);
               --accent-shadow: rgba(208, 130, 54, 0.22);
          }

          .event-card__date {
               background: var(--accent-soft);
               color: #2f2620;
               min-height: 100%;
               padding: 26px 18px;
               text-align: center;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               border-right: 1px solid rgba(188, 158, 120, 0.18);
          }

          .event-card__day {
               display: block;
               color: var(--accent);
               font-family: var(--cnvs-secondary-font, "Playfair Display", serif);
               font-size: 3.85rem;
               line-height: 0.92;
               font-weight: 600;
               letter-spacing: -0.03em;
          }

          .event-card__month,
          .event-card__year {
               display: block;
               text-transform: uppercase;
               letter-spacing: 0.05em;
          }

          .event-card__month {
               margin-top: 10px;
               font-size: 1.15rem;
               color: var(--accent);
               font-weight: 600;
          }

          .event-card__year {
               margin-top: 2px;
               font-size: 1rem;
               color: #5c5148;
          }

          .event-card__weekday {
               margin-top: 14px;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               min-width: 56px;
               min-height: 30px;
               padding: 4px 12px;
               border-radius: 999px;
               background: var(--accent);
               color: #fff;
               font-size: 0.84rem;
               font-weight: 700;
               letter-spacing: 0.04em;
           }

          .event-card__visual {
               width: 190px;
               height: 190px;
               min-height: 190px;
               margin: 18px 8px 18px 18px;
               border-radius: 16px;
               position: relative;
               overflow: hidden;
               background-color: #d9d0cb;
               box-shadow: 0 14px 32px rgba(30, 18, 12, 0.18);
          }

          .event-card__visual img {
               display: block;
               width: 100%;
               height: 100%;
               object-fit: cover;
               position: relative;
               z-index: 1;
          }

          .event-card__visual::before,
          .event-card__visual::after {
               content: "";
               position: absolute;
               inset: 0;
          }

          .event-card__visual::after {
               background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(4, 7, 16, 0.28));
          }

          .event-card__visual--image::before {
               display: none;
          }

          .event-card__visual--cosmos {
               background:
                    radial-gradient(circle at 52% 50%, rgba(255, 246, 193, 0.95) 0, rgba(245, 171, 255, 0.82) 10%, rgba(123, 80, 220, 0.48) 18%, transparent 25%),
                    radial-gradient(circle at 44% 50%, rgba(255, 196, 136, 0.9) 0, rgba(250, 137, 156, 0.55) 9%, transparent 16%),
                    radial-gradient(circle at 50% 50%, rgba(255, 178, 134, 0.65) 0 17%, transparent 18%),
                    radial-gradient(circle at 18% 18%, rgba(175, 225, 255, 0.65) 0 2%, transparent 3%),
                    radial-gradient(circle at 80% 26%, rgba(175, 225, 255, 0.7) 0 1.6%, transparent 2.7%),
                    radial-gradient(circle at 72% 80%, rgba(255, 220, 232, 0.55) 0 1.5%, transparent 2.4%),
                    linear-gradient(135deg, #0d1636 0%, #24164e 38%, #1f214f 72%, #08111e 100%);
          }

          .event-card__visual--cosmos::before {
               background:
                    radial-gradient(ellipse at center, transparent 0 28%, rgba(255, 193, 137, 0.88) 30% 33%, rgba(255, 144, 196, 0.55) 34% 36%, rgba(123, 83, 220, 0.45) 37% 39%, transparent 40%),
                    radial-gradient(ellipse at center, transparent 0 40%, rgba(255, 198, 147, 0.45) 42% 43.5%, transparent 45%);
               transform: rotate(-18deg) scale(1.15);
          }

          .event-card__visual--yoga {
               background:
                    radial-gradient(circle at 48% 75%, rgba(41, 36, 37, 0.95) 0 13%, transparent 14%),
                    linear-gradient(180deg, rgba(255, 210, 178, 0.92) 0%, rgba(246, 220, 197, 0.72) 34%, rgba(164, 126, 116, 0.38) 56%, rgba(71, 78, 104, 0.48) 70%, rgba(38, 44, 67, 0.88) 100%);
          }

          .event-card__visual--yoga::before {
               background:
                    radial-gradient(circle at 50% 26%, rgba(255, 239, 204, 0.88) 0 12%, transparent 13%),
                    linear-gradient(90deg, transparent 44%, rgba(53, 38, 34, 0.96) 44% 56%, transparent 56%),
                    linear-gradient(160deg, transparent 45%, rgba(53, 38, 34, 0.96) 45% 52%, transparent 52%),
                    linear-gradient(20deg, transparent 45%, rgba(53, 38, 34, 0.96) 45% 52%, transparent 52%);
               clip-path: polygon(35% 10%, 65% 10%, 78% 36%, 72% 52%, 62% 55%, 58% 86%, 42% 86%, 38% 55%, 28% 52%, 22% 36%);
               opacity: 0.95;
          }

          .event-card__visual--moon {
               background:
                    radial-gradient(circle at 50% 42%, rgba(247, 246, 236, 0.98) 0 16%, rgba(188, 201, 215, 0.92) 17% 20%, transparent 21%),
                    radial-gradient(circle at 50% 78%, rgba(255, 255, 255, 0.22) 0 18%, transparent 19%),
                    linear-gradient(180deg, #071525 0%, #153552 56%, #0d2338 76%, #08131f 100%);
          }

          .event-card__visual--moon::before {
               background:
                    radial-gradient(circle at 38% 38%, rgba(190, 200, 208, 0.8) 0 4%, transparent 5%),
                    radial-gradient(circle at 56% 30%, rgba(204, 213, 219, 0.75) 0 3%, transparent 4%),
                    radial-gradient(circle at 58% 58%, rgba(182, 193, 201, 0.78) 0 4%, transparent 5%),
                    linear-gradient(180deg, transparent 58%, rgba(205, 226, 245, 0.4) 64%, transparent 67%);
               opacity: 0.95;
          }

          .event-card__visual--workshop {
               background:
                    radial-gradient(circle at 54% 40%, rgba(162, 210, 165, 0.88) 0 12%, rgba(115, 154, 104, 0.84) 13% 17%, transparent 18%),
                    radial-gradient(circle at 34% 48%, rgba(199, 186, 123, 0.86) 0 10%, transparent 11%),
                    radial-gradient(circle at 72% 52%, rgba(194, 167, 125, 0.76) 0 11%, transparent 12%),
                    linear-gradient(135deg, #ceb299 0%, #e8d6bf 34%, #a86e43 100%);
          }

          .event-card__visual--workshop::before {
               background:
                    radial-gradient(circle at 50% 50%, rgba(248, 242, 229, 0.92) 0 26%, transparent 27%),
                    linear-gradient(35deg, transparent 0 32%, rgba(155, 96, 49, 0.72) 33% 36%, transparent 37%),
                    linear-gradient(150deg, transparent 0 30%, rgba(120, 84, 45, 0.5) 31% 34%, transparent 35%);
               filter: blur(1px);
          }

          .event-card__content {
               padding: 28px 28px 26px 10px;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 14px;
          }

          .event-card__title {
               margin: 0;
               color: #201914;
               font-size: clamp(1.5rem, 1.6vw, 1.875rem);
               line-height: 1.2;
               font-family: var(--cnvs-primary-font, "Inter", sans-serif);
               font-weight: 600;
          }

          .event-card__description {
               margin: 0;
               max-width: 560px;
               color: #2f2a28;
               font-size: 1.05rem;
               line-height: 1.7;
          }

          .event-card__footer {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 18px;
               flex-wrap: wrap;
               margin-top: 6px;
          }

          .event-card__meta {
               display: flex;
               align-items: center;
               gap: 24px;
               flex-wrap: wrap;
               color: #54473e;
               font-size: 0.95rem;
               font-weight: 600;
          }

          .event-card__meta-item {
               display: inline-flex;
               align-items: center;
               gap: 8px;
          }

          .event-card__icon {
               width: 17px;
               height: 17px;
               color: var(--accent);
               flex: 0 0 auto;
          }

          .event-card__link,
          .upcoming-events__button {
               display: inline-flex;
               align-items: center;
               justify-content: center;
               border: 1px solid var(--accent);
               color: var(--accent);
               background: #fff;
               border-radius: 10px;
               text-transform: uppercase;
               letter-spacing: 0.03em;
               font-weight: 700;
               transition: all 0.25s ease;
          }

          .event-card__link {
               min-width: 148px;
               min-height: 48px;
               padding: 12px 18px;
               font-size: 0.88rem;
          }

          .upcoming-events__button {
               --accent: #d29d45;
               min-width: 260px;
               min-height: 58px;
               padding: 14px 26px;
               margin: 30px auto 0;
               font-size: 1rem;
               box-shadow: 0 14px 38px rgba(210, 157, 69, 0.16);
          }

          .event-card__link:hover,
          .upcoming-events__button:hover {
               background: var(--accent);
               color: #fff;
          }

          .event-modal {
               width: min(960px, calc(100vw - 32px));
               margin: 0 auto;
          }

          .event-modal .modal-dialog {
               max-width: none;
               margin: 0;
          }

          .event-modal .modal-content {
               border: 0;
               border-radius: 26px;
               overflow: hidden;
               box-shadow: 0 30px 90px rgba(28, 18, 12, 0.28);
               background: #fffdf9;
          }

          .event-modal__layout {
               display: grid;
               grid-template-columns: 260px minmax(0, 1fr);
          }

          .event-modal__side {
               color: #fff;
               padding: 34px 26px 28px;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               gap: 22px;
               position: relative;
               overflow: hidden;
          }

          .event-modal__side::before,
          .event-modal__side::after {
               content: "";
               position: absolute;
               border-radius: 50%;
               pointer-events: none;
          }

          .event-modal__side::before {
               width: 180px;
               height: 180px;
               top: -60px;
               right: -55px;
               background: rgba(255, 255, 255, 0.12);
          }

          .event-modal__side::after {
               width: 130px;
               height: 130px;
               bottom: -42px;
               left: -38px;
               background: rgba(255, 255, 255, 0.08);
          }

          .event-modal__side--gold {
               background: linear-gradient(160deg, #c78f36 0%, #915d20 100%);
          }

          .event-modal__side--rose {
               background: linear-gradient(160deg, #bc688b 0%, #83445d 100%);
          }

          .event-modal__side--teal {
               background: linear-gradient(160deg, #5c9f9d 0%, #2f6262 100%);
          }

          .event-modal__side--copper {
               background: linear-gradient(160deg, #cd7f38 0%, #95521d 100%);
          }

          .event-modal__date,
          .event-modal__meta {
               position: relative;
               z-index: 1;
          }

          .event-modal__date {
               display: flex;
               flex-direction: column;
               gap: 6px;
          }

          .event-modal__day {
               font-size: 4.3rem;
               line-height: 0.9;
               font-family: var(--cnvs-secondary-font, "Playfair Display", serif);
               font-weight: 600;
          }

          .event-modal__month,
          .event-modal__year,
          .event-modal__weekday {
               display: block;
               text-transform: uppercase;
               letter-spacing: 0.08em;
          }

          .event-modal__month {
               font-size: 1.2rem;
               font-weight: 700;
          }

          .event-modal__year,
          .event-modal__weekday {
               color: rgba(255, 255, 255, 0.8);
               font-size: 0.92rem;
               font-weight: 600;
          }

          .event-modal__meta {
               margin-top: 26px;
               padding-top: 18px;
               border-top: 1px solid rgba(255, 255, 255, 0.18);
          }

          .event-modal__meta-item small {
               display: block;
               margin-bottom: 4px;
               color: rgba(255, 244, 233, 0.72);
               font-size: 0.75rem;
               font-weight: 700;
               letter-spacing: 0.08em;
               text-transform: uppercase;
          }

          .event-modal__meta-item span {
               display: block;
               font-size: 1rem;
               line-height: 1.55;
          }

          .event-modal__body {
               padding: 34px 38px;
               position: relative;
           }

          .event-modal__close {
               position: absolute;
               top: 18px;
               right: 18px;
               width: 42px;
               height: 42px;
               border-radius: 50%;
               border: 0;
               background: #f7efe3;
               color: #6e5139;
               font-size: 1.4rem;
               line-height: 1;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               cursor: pointer;
           }

          .event-modal__title {
               margin: 0 0 10px;
               color: #221a15;
               font-size: clamp(2rem, 3vw, 2.8rem);
               line-height: 1.08;
          }

          .event-modal__lead {
               margin: 0 0 22px;
               color: #534339;
               font-size: 1.05rem;
               line-height: 1.85;
          }

          .event-modal__content {
               display: grid;
               gap: 16px;
           }

          .event-modal__content p {
               margin: 0;
               color: #4b3c33;
               line-height: 1.85;
          }

          .event-modal__image {
               margin-top: 24px;
          }

          .event-modal__image img {
               display: block;
               width: 100%;
               height: auto;
               border-radius: 18px;
          }

          @media (max-width: 991.98px) {
               .upcoming-events__list {
                    width: 88%;
               }

               .event-card {
                    grid-template-columns: 136px 182px minmax(0, 1fr);
               }

               .event-card__content {
                    padding-right: 22px;
               }

               .event-card__visual {
                    width: 166px;
                    height: 166px;
                    min-height: 166px;
               }

               .event-modal__layout {
                    grid-template-columns: 1fr;
               }

               .event-modal__side,
               .event-modal__body {
                    padding: 28px 24px;
               }
          }

          @media (max-width: 767.98px) {
               .upcoming-events {
                    padding: 18px 0 28px;
               }

               .upcoming-events__divider {
                    margin-bottom: 24px;
               }

               .upcoming-events__list {
                    width: 100%;
               }

               .event-card {
                    grid-template-columns: 1fr;
               }

               .event-card__date {
                    border-right: 0;
                    border-bottom: 1px solid rgba(188, 158, 120, 0.18);
                    padding: 22px 18px;
               }

               .event-card__visual {
                    width: min(240px, calc(100% - 36px));
                    height: min(240px, calc(100vw - 72px));
                    min-height: 0;
                    margin: 18px auto 0;
               }

               .event-card__content {
                    padding: 24px 18px 22px;
               }

               .event-card__title {
                    font-size: 1.6rem;
               }

               .event-card__description {
                    font-size: 1rem;
               }

               .event-card__footer,
               .event-card__meta {
                    gap: 14px;
               }

               .event-card__link,
               .upcoming-events__button {
                    width: 100%;
               }

               .event-modal {
                    width: calc(100vw - 20px);
               }

               .event-modal__body,
               .event-modal__side {
                    padding: 24px 18px;
               }
          }

/* events cards END */