/* ========================================================================
   IFN.sk — Chovateľský portál
   Theme: Forest & Terracotta (zemské tóny pre chovateľov)
   Loaded after elengine base styles ako override.
   ======================================================================== */

/* === 1. Brand palette ===
   Primary: lesná zelená #3d6b35
   Accent:  terakota     #c47b5a
   Muted:   svetlohnedá  #8a7d65
   Bg:      krémová      #f5f1e8
   Night link: svetlá šalvia #9bbf8a */
:root {
    --main-link: #3d6b35;
    --main-btn: #3d6b35;
    --plyr-color-main: #3d6b35;
}

/* === 2. Pozadie tela ===
   POZN: pôvodne som dal krémovú #f5f1e8 — výsledok bol že hero
   na .page-header (overlay --main-btn 10%) sa zmiešal s krémovou
   na blato (zelená × krém = špinavé). Default biele je čistejšie,
   brand sa lepšie prejaví len v akcentoch (linky, tlačidlá, hero overlay). */
/* body:not(.night-mode) { background-color: #f5f1e8; }  -- DISABLED */

/* === 3. Linky === */
a { color: var(--main-link); }
a:hover { color: #c47b5a; text-decoration: underline; }
body.night-mode a { color: #9bbf8a; }
body.night-mode a:hover { color: #d49a7a; }

/* === 4. Tlačidlá v brand farbe ===
   .btn-primary, .btn-main, .ele_btn_main — sngine používa rôzne triedy,
   override hlavného tlačidla cez --main-btn v :root pokryje väčšinu. */
.btn-primary,
.btn-main {
    background-color: var(--main-btn);
    border-color: var(--main-btn);
    color: #fff;
}
.btn-primary:hover,
.btn-main:hover {
    background-color: #2e5226;       /* tmavšia zelená pri hover */
    border-color: #2e5226;
}

/* === 5. Sekundárne CTA — terakota === */
.btn-accent,
.btn-secondary-accent {
    background-color: #c47b5a;
    border-color: #c47b5a;
    color: #fff;
}
.btn-accent:hover {
    background-color: #a8634a;
    border-color: #a8634a;
}

/* === 6. Daytime greeting — sezónne tóny v zemských farbách === */
.daytime_message.morning h3 { color: #6b8e58; }   /* ráno: jasná šalvia */
.daytime_message.noon h3    { color: #c47b5a; }   /* poludnie: terakota */
.daytime_message.evening h3 { color: #5d4a35; }   /* večer: tmavšia hneda */

/* === 7. Karty a panely ===
   POZN: pôvodne som dával jemne krémové #fffaf2 — keďže body je teraz
   biele default, karty necháme tiež biele (ako zoja). Night mode default
   ostáva. */
/* .ele_content { background-color: #fffaf2; }  -- DISABLED */

/* === 8. Aktívne stavy v sidebari — tlmená sivá pilulka, nie brand „kríková" ===
   Default by dal vyplnenú zelenú pilulku v 20% opacity — pôsobí príliš
   silno pri viacerých sidebar položkách. Použijeme body-color (sivá/čierna). */
.ele_sidebar_left .sidebar_innr > .btn.active { color: var(--body-color); }
body.night-mode .ele_sidebar_left .sidebar_innr > .btn.active { color: var(--body-color-dark); }
.side-nav > li.active > a { color: var(--body-color); }
body.night-mode .side-nav > li.active > a { color: var(--body-color-dark); }

/* === 9. Tagy / badge pre kategórie ===
   Ak sa používajú .tag-pill alebo podobné, dáme im teplý zemitý odtieň */
.tag-pill,
.tag_page_rate {
    background-color: rgba(61, 107, 53, 0.08);   /* zelená 8% */
    color: var(--main-link);
}

/* === 10. Premium / featured highlight v terakote === */
.ele_paid_post:before {
    background: #c47b5a;
    opacity: 0.07;
}

/* === 11. Skryté Pro/Premium upsell prvky ===
   Filozofia: nechať používateľov používať zadarmo, Pro až keď
   aktívne chcú reklamu/viac prezentácie. Žiadny pasívny push. */
.ele_prem { display: none; }
.pro-badge { display: none; }

/* === 12. Širší stredný stĺpec na QHD/4K monitoroch ===
   Default 1050px je veľmi úzke na QHD (využije len 41%) a 4K (27%).
   Profile widget (.ele_prof_cont_wide = 1326px) ostáva nedotknutý. */
@media (min-width: 1200px) {
    body .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    body .container { max-width: 1240px; }
}
@media (min-width: 1600px) {
    body .container { max-width: 1300px; }
}
@media (min-width: 1800px) {
    body .container { max-width: 1360px; }
}

/* === 13. SVG logo dimensions + rounded corners ===
   SVG logá v sngine 4.3 nemajú intrinsic veľkosť, bez explicit CSS sa
   renderujú s 0×0. Detailný popis v zoja.css sekcii 18. */
.logo-wrapper img.logo-light,
.logo-wrapper img.logo-dark {
    width: 150px !important;
    height: 40px !important;
}
.main-header .logo-wrapper,
.ele_welcome_top .logo-wrapper {
    border-radius: 20px !important;
}
.main-header .logo-wrapper img, .ele_welcome_top .logo-wrapper img {
    height: 40px;
    border-radius: 20px;
}