/* =======================================================
   FRONTEND CSS – ARCHITEKTURA
   Soubor: style.css – frontend layout
   Účel: Layout + menu + obsah (bez pevných hodnot vzhledu)
   Poznámka: Breakpointy v @media nelze řídit přes CSS proměnné
======================================================= */

/* =======================================================
   1) ZÁKLAD / RESET
======================================================= */
html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);

    /* POZADÍ OKNA (mimo plátno stránky) */
    background-color: var(--ui-bg-page);
    /* Pozn.: pokud je v configu definováno url, skládáme jako image */
    background: var(--ui-bg-page-url);
    background-repeat: repeat;

    color: var(--ui-text-main);

    /* Sticky footer layout */
    display: flex;
    flex-direction: column;
}

/* =======================================================
   2) HLAVNÍ KONTEJNER STRÁNKY / středový list
======================================================= */
.page-wrap {
    display: flex;
    flex: 1 0 auto;
    overflow: hidden;

    /* PLÁTNO STRÁNKY */
    background: var(--ui-bg-surface);

    /* OMEZENÍ ŠÍŘKY STRÁNKY */
    max-width: var(--layout-page-max-width);
    width: 100%;
    margin: 0 auto;

    /* VIZUÁLNÍ ODDĚLENÍ OD POZADÍ OKNA */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

/* =======================================================
   3) SIDEBAR (MENU KONTEJNER)
======================================================= */
#sidebar {
    width: var(--layout-sidebar-width);
    flex-shrink: 0;
    background: var(--ui-bg-surface);
    border-right: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    transition: transform var(--motion-normal);
    z-index: var(--sys-z-sidebar);
}

.sidebar-title {
    padding: var(--space-l);
    margin: 0;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-strong);
    background: var(--ui-bg-surface-alt);
    border-bottom: 1px solid var(--ui-border-strong);
}

/* Informační / doplňkový box */
#aside-info {
    margin-top: 0;
    padding: var(--space-s);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-bg-aux);
    min-height: var(--layout-aux-min-height);
    max-height: var(--layout-aux-max-height);
    overflow-y: auto;
}

/* =======================================================
   4) MENU (NAVIGACE)
======================================================= */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu > li {
    border-bottom: 1px solid var(--ui-border-light);
}

/* =======================================================
   4.1) POLOŽKY MENU – 3D ZÁKLAD
======================================================= */
.menu a,
.menu-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-s) var(--space-m);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;

    background: linear-gradient(
        to bottom,
        var(--menu-bg-top),
        var(--menu-bg-bottom)
    );

    border-top: 1px solid var(--menu-border-top);
    border-bottom: 1px solid var(--menu-border-bottom);

    color: var(--menu-text);
}

/* Hover */
.menu a:hover,
.menu-parent:hover {
    background: linear-gradient(
        to bottom,
        var(--menu-bg-top),
        var(--ui-bg-hover)
    );
}

/* Mobilní zavírací X (tlačítko) */
#menu-close {
    display: none;
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--ui-text-main);
    cursor: pointer;
    user-select: none;
    z-index: 1;
}

#menu-close:hover {
    opacity: 0.9;
}

/* Titulek rodiče */
.menu-title {
    flex: 1;
}

/* Šipka */
.toggle-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--menu-text);
    transition: transform var(--motion-fast);
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
}

.menu-parent.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Submenu */
.submenu {
    list-style: none;
    padding-left: var(--space-l);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--motion-fast);
}

.submenu.open {
    max-height: 500px;
}

.submenu li a {
    padding: var(--space-xs) var(--space-m);
    font-size: var(--font-size-secondary);
}

/* =======================================================
   4.6) AKTIVNÍ POLOŽKA – OBRÁCENÝ GRADIENT
======================================================= */
.menu a.active {
    background: linear-gradient(
        to bottom,
        var(--menu-active-bg-top),
        var(--menu-active-bg-bottom)
    );
    color: var(--menu-text-active);
    text-decoration: none;

    border-top: 1px solid var(--menu-border-bottom);
    border-bottom: 1px solid var(--menu-border-top);
}

.menu a.active:hover {
    background: linear-gradient(
        to bottom,
        var(--menu-active-bg-top),
        var(--menu-active-bg-bottom)
    );
    color: var(--menu-text-active);
}

/* =======================================================
   5) HLAVNÍ OBSAH
======================================================= */
#content {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden; /* důležité: ať overlay nepřidává vodorovný scroll */
}

.inner-content {
    max-width: var(--layout-content-max-width);
    margin: var(--content-header-h) auto 0;
    padding: var(--space-xl);
}

/* Pevná “hlavička obsahu” (overlay v content) */
.part-header {
    position: absolute;
    top: 0;
    right: 0;
    height: 98px;
    width: 100%;
    background: url('/uploads/others/other_20260206_173733_02ce047a.jpg') no-repeat;
    background-size: cover;
    background-position: right center;
}

.part-header img {
    position: absolute;
    right: 20px;
    top: 15px;
}

/* =======================================================
   6) KOMPONENTY
======================================================= */
#hamburger {
    display: none;
    font-size: var(--layout-control-size);
    padding: var(--space-xs) var(--space-s);
    position: fixed;
    top: var(--space-s);
    left: var(--space-s);
    z-index: var(--sys-z-controls);
    background: var(--ui-bg-overlay);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    cursor: pointer;
}

/* =======================================================
   7) RESPONSIVE CHOVÁNÍ
   POZOR: v @media nelze použít CSS proměnné → pevná hodnota
======================================================= */
@media (max-width: 900px) {
    .page-wrap {
        flex-direction: column;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: var(--sys-z-sidebar);
    }

    #sidebar.open {
        transform: translateX(0);
    }

    #hamburger {
        display: block;
    }

    /* KDYŽ JE MENU OTEVŘENÉ, HAMBURGER SE SCHOVÁ POD NĚJ */
    #sidebar.open ~ #content #hamburger {
        z-index: 0;
        pointer-events: none;
    }

    /* Mobilní X */
    #menu-close {
        display: block;
    }

    /* Mobilní padding obsahu (pokud chceš “na krev”, dej 0 – ale ať je to tady) */
    #content {
        padding: 0;
    }
}

/* =======================================================
   FOOTER (PATIČKA)
======================================================= */
#site-footer {
    flex-shrink: 0;                 /* drží footer dole */
    display: block !important;
    width: 100% !important;

    border-top: 1px solid var(--ui-border);
    background: var(--ui-bg-surface-alt);
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
}

.footer-inner {
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
    padding: var(--space-m) var(--space-l);
}

#site-footer p {
    text-align: center;
    margin: 0;
}

/*========================================================
// honeypoint  + kontaktní formulář
//========================================================  */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =======================================================
   KONTAKTNÍ FORMULÁŘ
======================================================= */
.contact-form {
    max-width: 720px;
    margin-top: var(--space-l, 24px);
}

/* Jednotlivé řádky formuláře */
.contact-form .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-m, 16px);
}

/* Popisky */
.contact-form label {
    margin-bottom: 4px;
    font-size: var(--font-size-secondary, 0.9rem);
    font-weight: 600;
    color: var(--ui-text-main, #333);
}

/* Textová pole, select, textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    font-family: inherit;
    font-size: var(--font-size-base, 1rem);
    padding: 8px 10px;
    border: 1px solid var(--ui-border, #ccc);
    border-radius: 4px;
    background: var(--ui-bg-surface, #fff);
    color: var(--ui-text-main, #333);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* Focus stav */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--ui-accent, #5a7bd8);
    box-shadow: 0 0 0 2px rgba(90, 123, 216, 0.15);
}

/* Textarea */
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Tlačítko */
.contact-form button[type="submit"] {
    align-self: flex-start;
    padding: 10px 20px;
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--ui-button-text, #fff);
    background: var(--ui-button-bg, #5a7bd8);
    border: 1px solid var(--ui-button-bg, #5a7bd8);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

/* Hover / active */
.contact-form button[type="submit"]:hover {
    background: var(--ui-button-bg-hover, #4a6bc0);
    border-color: var(--ui-button-bg-hover, #4a6bc0);
}

.contact-form button[type="submit"]:active {
    transform: translateY(1px);
}

/* =======================================================
   ZPRÁVY (SUCCESS / ERROR)
======================================================= */
.alert {
    padding: 12px 16px;
    margin-bottom: var(--space-m, 16px);
    border-radius: 4px;
    font-size: var(--font-size-base, 1rem);
}

.alert-success {
    background: #e7f6ec;
    border: 1px solid #9bd4ac;
    color: #245b35;
}

.alert-danger {
    background: #fdecea;
    border: 1px solid #f5b5ad;
    color: #8a1f11;
}

.alert-danger ul {
    margin: 0;
    padding-left: 18px;
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 600px) {
    .contact-form {
        max-width: 100%;
    }
}

/* =======================================================
   8) ARCHITEKTONICKÉ POZNÁMKY
----------------------------------------------------------
- 3D efekt menu je řízen výhradně proměnnými --menu-*
- Responzivita je technická vlastnost → breakpoint je pevný
======================================================= */

.system-alert-hint {
    min-height: 10px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    color: #8b0000;
    background: rgba(255, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}