/* --- ОСНОВНИ И ПОМОШНИ КЛАСИ --- */
.sidebar-hidden, 
.hextra-toc.toc-hidden {
    display: none !important;
}

.big-icon {
    font-size: 26px;
    line-height: 2;
    padding: 5px;
}

.hover-main-icon:hover {
    color: #007bff; /* Стандардна сина */
}

.filetree {
    font-size: 1.05rem;
}
.filetree * {
    font-size: inherit !important;
}

/* --- ПОЗАДИНА НА ПОЧЕТНА (Light & Dark) --- */
#homepage-header {
    background-image: url(/images/blocks.svg);
    background-size: 920px 360px;
    background-repeat: no-repeat;
    background-position: 400px -114px;
}

/* Dark mode инверзија на бои за позадината ако е потребно */
.dark #homepage-header {
    filter: invert(0.1) brightness(0.8);
}

/* --- МИНИ КАЛКУЛАТОР --- */
.miniCalc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
}

#calcInput {
    width: 300px;
    margin-top: 30px;
    border: solid #888 2px;
    background-color: #fff;
    color: #000;
    border-radius: 6px;
    padding: 5px;
}

.dark #calcInput {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #555;
}

.miniCalc button {
    border: solid #888 2px;
    border-radius: 20px; 
    padding: 12px 12px;
    cursor: pointer;
    background: #f3f3f3;
    color: #333;
    transition: all 0.2s;
}

.dark .miniCalc button {
    background: #2d2d2d;
    color: #eee;
    border-color: #555;
}

.miniCalc button:hover {
    background: #007bff;
    color: white !important;
    border-color: #0056b3;
}

#result {
    color: #ff4d4d; /* Малку посветла црвена за подобра видливост */
    font-weight: bold;
    margin-left: 10px;
}

/* --- ФИЛТРИ И КОНТРОЛИ --- */
#controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

#year-filter select, #milestone-btn {
    height: 38px;
    padding: 0 0.75rem;
    border-radius: 6px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark #year-filter select, .dark #milestone-btn {
    background-color: #262626;
    border-color: #444;
    color: #fff;
}

#year-filter select:hover, #milestone-btn:hover {
    border-color: #007bff;
}

#milestone-btn.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

/* --- MILESTONE CHART --- */
#milestone-chart {
    display: none;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: 2rem;
    overflow-x: auto;
    padding: 1rem;
    border-bottom: 2px solid #ccc;
}

.dark #milestone-chart {
    border-color: #444;
}

.bar {
    width: 40px;
    background-color: #007bff; /* Боја на барот */
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 12px;
    font-weight: bold;
    color: white;
    min-height: 20px;
}

/* --- СОЦИЈАЛНИ ИКОНИ --- */
.social-icon {
    transition: transform 0.2s ease, color 0.3s ease;
}
.social-icon:hover {
    transform: translateY(-2px);
}
.social-icon.facebook:hover  { color: #1877F2 !important; }
.social-icon.instagram:hover { color: #C13584 !important; }
.social-icon.signal:hover    { color: #0088CC !important; }

/* --- КАРТИЧКИ ЗА КУРСЕВИ --- */
.курс .hextra-card-image {
    height: 200px !important;
    object-fit: cover;
}

/* --- CUSTOM THEME COLORS --- */
body {
    background-color: #fafafa;

}

.dark body {
    color: #fafafa !important;
    background-color: #0e1112;
		
}

.dark footer {
    color: #e6e6e6;
    background-color: #0f1212;
		
}

aside div.hx\:border-t {
    background-color: #fafafa !important;
}

.dark aside div.hx\:border-t {
    background-color: #0e1112 !important;
}

path {

}

body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > nav > div > div {
    background-color: #fafafa !important;
}
.dark body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > nav > div > div {
    background-color: #0e1112 !important;
}


body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul.hx\:flex.hx\:flex-col.hx\:gap-1.hx\:md\:hidden > li:nth-child(9) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul.hx\:flex.hx\:flex-col.hx\:gap-1.hx\:md\:hidden > li:nth-child(7) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul.hx\:flex.hx\:flex-col.hx\:gap-1.hx\:md\:hidden > li:nth-child(8) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul.hx\:flex.hx\:flex-col.hx\:gap-1.hx\:md\:hidden > li:nth-child(10) > a {
    display: none !important;    
}
body > div.hx\:mx-auto.hx\:flex.hextra-max-page-width > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul.hx\:flex.hx\:flex-col.hx\:gap-1.hx\:md\:hidden > li:nth-child(5) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hx\:max-w-\[90rem\] > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul > li:nth-child(7) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hx\:max-w-\[90rem\] > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul > li:nth-child(5) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hx\:max-w-\[90rem\] > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul > li:nth-child(8) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hx\:max-w-\[90rem\] > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul > li:nth-child(9) > a {
    display: none !important;
}
body > div.hx\:mx-auto.hx\:flex.hx\:max-w-\[90rem\] > aside > div.hextra-scrollbar.hx\:overflow-y-auto.hx\:overflow-x-hidden.hx\:p-4.hx\:grow.hx\:md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] > ul > li:nth-child(10) > a {
    display: none !important;
}

html, body {
        font-size: 18px; /* Малку поголем од стандардниот за подобра читливост */
    }


/* --- МОБИЛНА ОПТИМИЗАЦИЈА НА ФОНТ --- */
@media (max-width: 768px) {
    /* Зголемување на основниот текст на целата страница */
    html, body {
        font-size: 20px !important; /* Малку поголем од стандардниот за подобра читливост */
        line-height: 1.6; /* Поголем простор меѓу редовите за да не се замараат очите */
    }

    /* Зголемување на текстот во параграфите */
    p, li {
        font-size: 1.0rem !important;
    }
    .feature-card {
	font-size: 1.02rem !important;
    }
    /* Зголемување на насловите за да останат во сооднос */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }

    h1, h2, h3, h4 {
	text-align: left !important;
    }

    /* Оптимизација на полињата во формуларите (да бидат полесни за кликање) */
    input, select, textarea, button {
        font-size: 18px !important; /* Спречува автоматско зумирање кај iPhone при клик на поле */
    }
    
    /* Зголемување на текстот во Callout блоковите */
    .hextra-callout {
        font-size: 0.95rem;
    }

    footer *{
	font-size: 0.74rem;
    }
    footer span {
	font-size: 0.90rem;
    }
    body > footer > div.hextra-max-footer-width.hx\:mx-auto.hx\:flex.hx\:justify-center.hx\:py-12.hx\:pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\].hx\:pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\].hx\:text-gray-600.hx\:dark\:text-gray-400.hx\:md\:justify-start > div > div.hx\:font-semibold > a:nth-child(4) > span {
	font-size: 1.1rem;
    }
    body > footer > div.hextra-max-footer-width.hx\:mx-auto.hx\:flex.hx\:justify-center.hx\:py-12.hx\:pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\].hx\:pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\].hx\:text-gray-600.hx\:dark\:text-gray-400.hx\:md\:justify-start > div > div.hx\:mt-6.hx\:text-xs > p {
	font-size: 0.90rem !important;
	text-align: center !important;
	margin-top: 8px;
    }
    body > footer > div.hextra-max-footer-width.hx\:mx-auto.hx\:flex.hx\:justify-center.hx\:py-12.hx\:pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\].hx\:pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\].hx\:text-gray-600.hx\:dark\:text-gray-400.hx\:md\:justify-start > div > div.hx\:font-semibold > div img {
	width: 100% !important;
	margin-left: 0.95rem !important;
    }

    #homepage-header p {
	font-size: 18px !important;
	text-align: left;
    }

}


/* 2. Цели директно на сликата според твојот селектор */
.hextra-cards a.hextra-card > img {
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    transition: transform .3s ease-in-out !important;
}

/* 3. Зум ефект при hover */
.hextra-cards a.hextra-card:hover > img {
    transform: scale(1.05);
}








/* Контејнерот за Рубрики */
.rubriki-wrapper .masonry-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Присилува се во еден ред */
    gap: 20px !important;
    column-count: auto !important; /* Го исклучуваме претходниот систем */
}

/* Секоја поединечна слика/рубрика */
.rubriki-wrapper .masonry-item {
    flex: 1 !important; /* Ги прави сите три еднакво широки */
    margin-bottom: 0 !important;
}

/* Изедначување на сликите */
.rubriki-wrapper .masonry-item img {
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Мобилна верзија - да се редат една под друга за да бидат читливи */
@media (max-width: 768px) {
    .rubriki-wrapper .masonry-gallery {
        flex-direction: column !important;
    }
}




























/* Ефект на лебдење над малата слика */
.image-font {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: zoom-in;
    border-radius: 8px;
}

.image-font:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Lightbox стил - Сликата кога е зголемена */
.enigma-lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.enigma-lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    border-radius: 4px;
}

.enigma-lightbox.active {
    opacity: 1;
}


.member-card {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

/* Сликата станува лупа */
.image-zoom-link {
    cursor: zoom-in;
    display: block;
}

/* Лентата станува pointer (рака) за копирање */
.member-email-bar {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 13px;
    padding: 6px 2px;
    text-align: center;
    transform: translateY(100%);
    transition: all 0.3s ease;
    cursor: copy; /* Симбол за копирање */
    z-index: 10;
}

.member-card:hover .member-email-bar {
    transform: translateY(0);
}

/* Стил кога е копирано */
.member-email-bar.copied {
    background: #28a745; /* Зелена боја за потврда */
}


.social-container {
    display: flex;
    justify-content: center;
    font-size: 30px;
}


@media(max-width:768px){
    .social-container {
	font-size: 30px !important;
	gap: 6px;
    }
}


/* CRYPTO ICONS */
.crypto-icons {
    font-size: 28px;
}