/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    /* Typografie */
    --ef-font-sans: 'Trebuchet MS', sans-serif; /*Roboto, Helvetica, Arial, sans-serif;*/
    --ef-text: #152238;
    --ef-text-muted: #4f5968;
    --ef-text-subtle: #596575;
    --ef-white: #ffffff;
    --ef-surface: #ffffff;
    --ef-surface-alt: #f5f8fc;
    --ef-border: #d8e0e8;
    --ef-border-strong: #aab6c3;

    /* Pracoviště – základ / hover / aktivní */
    --ef-neutral: #344256;
    --ef-neutral-hover: #263345;
    --ef-neutral-active: #192433;
    --ef-neutral-alt: #f7f7f8;

    --ef-blue: #075eae;
    --ef-blue-hover: #064d8e;
    --ef-blue-active: #043b6d;
    --ef-blue-alt: #f5f8fc;

    --ef-red: #b91c1c;
    --ef-red-hover: #991b1b;
    --ef-red-active: #7f1d1d;
    --ef-red-alt: #fcf6f6;

    --ef-green: #147a39;
    --ef-green-hover: #10632f;
    --ef-green-active: #0c4d25;
    --ef-green-alt: #f6faf7;

    --ef-yellow: #f6b900;
    --ef-yellow-hover: #dda600;
    --ef-yellow-active: #c28f00;
    --ef-yellow-text: #1b2433;
    --ef-yellow-heading: #755000;
    --ef-yellow-alt: #fffcf5;

    --ef-sky: #087ba8;
    --ef-sky-hover: #066486;
    --ef-sky-active: #054e69;
    --ef-sky-text: #ffffff;
    --ef-sky-alt: #f5fafc;

    /* Stavové barvy */
    --ef-info: #075eae;
    --ef-success: #147a39;
    --ef-warning-bg: #fff4cc;
    --ef-warning-text: #624600;
    --ef-danger: #b91c1c;

    /* Fokus */
    --ef-focus: #111827;
    --ef-focus-halo: #ffffff;

    /* Geometrie */
    --ef-radius-sm: 8px;
    --ef-radius-md: 10px;
    --ef-radius-lg: 18px;
    --ef-radius-pill: 999px;

    /* Stíny */
    --ef-shadow-sm: 0 3px 10px rgba(21, 34, 56, 0.10);
    --ef-shadow-md: 0 10px 28px rgba(21, 34, 56, 0.14);
    --ef-shadow-lg: 0 18px 42px rgba(21, 34, 56, 0.20);

    /* Rozestupy */
    --ef-space-1: 4px;
    --ef-space-2: 8px;
    --ef-space-3: 12px;
    --ef-space-4: 16px;
    --ef-space-5: 20px;
    --ef-space-6: 24px;
    --ef-space-8: 32px;
    --ef-space-10: 40px;
    --ef-space-12: 48px;
    --ef-space-16: 64px;

    --ef-transition: 180ms ease;
}


body.site {
  background-image: url(/zsr/zs/images/webmaster/bg_zsr_web.png);
  background-repeat: repeat;
  background-size: inherit;
  background-attachment: fixed;
  background-position: 50% 0;
}
.layout-boxed .body-innerwrapper {max-width: 1240px; margin: 100px auto;}

#sp-top-bar {background: #fff; color: var(--barva-prim); height: 50px; padding: 15px 0;}
#sp-top-bar a {color: var(--barva-prim);}
#sp-footer, #sp-bottom {background-color: var(--ef-neutral); color: var(--text-prim);}
#sp-footer a, #sp-bottom a {color: var(--text-prim);}

#sp-top-bar a:nth-of-type(1) {color: var(--ef-blue) !important;}
#sp-top-bar a:nth-of-type(2) {color: var(--ef-red) !important;}
#sp-top-bar a:nth-of-type(3) {color: var(--ef-yellow) !important;}
#sp-top-bar a:nth-of-type(4) {color: var(--ef-sky) !important;}
#sp-top-bar a:nth-of-type(5) {color: var(--ef-green) !important;}

.mod-ikony img {
  display: inline-flex;
  margin: 0 2.5px;
  height: 21px;
  width: auto;
}
.str-home #sp-main-body {padding: 30px 0;}
#sp-main-body {padding: 60px 0 30px 0;}
img.wf_file_icon {display: unset;}

/* Featured - home */
.article-list .article .featured-article-badge, .article-details .featured-article-badge { display: none; visibility: hidden;}

.mod-uvod-aktuality h3 {font-weight: 600; text-align: center; border-bottom: 2px solid #fff; padding-bottom: 8px;}
.mod-uvod-aktuality h4.mod-articles-seznamclanku-title {font-size: 1rem;}
.mod-uvod-aktuality dl.mod-articles-seznamclanku-info.list-unstyled {display: flex; flex-direction: row; font-size: 80%; margin-bottom: 0;}
.mod-uvod-aktuality dd.mod-articles-seznamclanku-category {margin-right: 16px;}
.mod-uvod-aktuality .mod-articles-seznamclanku-item.mod-articles-seznamclanku-article {border-bottom: 1px solid #fff; margin-bottom: 5px;}
.mod-uvod-aktuality .mod-articles-seznamclanku-item.mod-articles-seznamclanku-article:last-child {border-bottom: unset; margin-bottom: 0px;}
.mod-uvod-aktuality a {color: #ffffff;}
.item-aktuality-msr .mod-uvod-aktuality h3 {font-weight: 600; text-align: center; border-bottom: 2px solid var(--ef-yellow-text); padding-bottom: 8px;}
.item-aktuality-msr .mod-uvod-aktuality a {color: var(--ef-yellow-text);}

.item-aktuality-fzs {background: var(--bg-prechod-modra); color: #ffffff;}
.item-aktuality-msh {background: var(--bg-prechod-cervena); color: #ffffff;}
.item-aktuality-msr {background: var(--bg-prechod-zluta); color: var(--ef-yellow-text);}
.item-aktuality-msp {background: var(--bg-prechod-sky); color: var(--ef-sky-text);}
.item-aktuality-mst {background: var(--bg-prechod-zelena); color: #ffffff;}


#sp-component p, #sp-component li, .article-details div {text-align: justify;}

#contactList.table > thead {vertical-align: middle; text-align: center;}
#contactList.table > tbody {vertical-align: middle;}
table.category thead > tr th, table.category thead > tr td, table.category tbody > tr th, table.category tbody > tr td {padding: 5px;}
#contactList.table > thead td#categorylist_header_title {min-width: 230px;}
.str-kontakty-jidelna #contactList.table > thead td#categorylist_header_title {min-width: 250px;}


/************************* Proměnné *************************/
:root {
--bg-prechod-prim: var(--bg-prechod-cervena);
--barva-prim: var(--barva-cervena1);
--barva-sec: var(--barva-cervena2);
--text-prim: var(--text-bily);
--text-sec: var(--text-cerna);
/************************************************************/
--bg-prechod-modra: linear-gradient(180deg, rgba(0, 25, 49,1) 0%, rgba(0, 85, 170,1) 100%);
--bg-prechod-cervena: linear-gradient(180deg, rgba(130,0,0,1) 0%, rgba(204, 0, 1,1) 100%);
--bg-prechod-zelena: linear-gradient(180deg, rgba(19, 77, 19,1) 0%, rgba(6, 132, 6,1) 100%);
--bg-prechod-zluta: linear-gradient(180deg, rgba(255, 204, 1,1) 0%, rgba(242, 234, 97,1) 100%);
--bg-prechod-sky: linear-gradient(180deg, rgba(5, 78, 105,1) 0%, rgba(8, 123, 168,1) 100%);
--bg-prechod-seda: linear-gradient(180deg, rgba(220,220,220,1) 0%, rgba(255,255,255,1) 100%);
--barva-modra1: #0066CB;
--barva-modra2: #001B33;
--barva-cervena1: #CC0000;
--barva-cervena2: #830000;
--barva-zelena1: #07820A;
--barva-zelena2: #134E13;
--barva-zluta1: #FFCC01;
--barva-zluta2: #FF8F00;
--barva-sky1: #087ba8;
--barva-sky2: #054e69;
--text-cerny: #000;
--text-bily: #fff;
}
/******************** Proměnné - konec ********************/

.h1, h1 {text-align: center; font-weight: 600;}

/* Moduly */
#sp-left .sp-module, #sp-right .sp-module {
  margin-top: 30px;
  border: 1px solid var(--ef-neutral);
  padding: 20px;
  border-radius: 10px;
}
#sp-left .sp-module, #sp-right .sp-module img, .contact img {display: unset;}
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
  border-bottom: unset;
  background: var(--ef-neutral);
  color: var(--text-prim);
  margin: -20px -20px 20px -20px;
  padding: 15px 20px;
  font-size: 20px;
  border-radius: 9px 9px 0 0;
}

.sp-module.mod-modry .sp-module-title {background: var(--bg-prechod-modra) !important; color: var(--text-bily) !important;}
.sp-module.mod-cerveny .sp-module-title {background: var(--bg-prechod-cervena) !important; color: var(--text-bily) !important;}
.sp-module.mod-zeleny .sp-module-title {background: var(--bg-prechod-zelena) !important; color: var(--text-bily) !important;}
.sp-module.mod-zluty .sp-module-title {background: var(--bg-prechod-zluta) !important; color: var(--text-cerny) !important;}
.sp-module.mod-sky .sp-module-title {background: var(--bg-prechod-sky) !important; color: var(--text-bily) !important;}

.sp-module.mod-modry {border-color: var(--barva-modra2) !important;}
.sp-module.mod-cerveny {border-color: var(--barva-cervena2) !important;}
.sp-module.mod-zeleny {border-color: var(--barva-zelena2) !important;}
.sp-module.mod-zluty {border-color: var(--barva-zluta1) !important;}
.sp-module.mod-sky {border-color: var(--barva-sky2) !important;}

#sp-left .sp-module .sp-module-title::before, #sp-right .sp-module .sp-module-title::before {content: "\f1b3"; font-family: "Font Awesome 6 Free"; margin-right: 10px;}

.mod-pracoviste {margin-left: 150px !important;}
.mod-ikony img {display: inline-flex; margin: 0 2.5px; height: 21px; width: auto;}
.zvoneni .sp-module-title::before {content: "\f0f3" !important;}
.jidelnicek .sp-module-title::before {content: "\f2e7" !important;}
.kontakty .sp-module-title::before {content: "\f2bb" !important;}
.napsali .sp-module-title::before {content: "\f1ea" !important;}
.bakalari .sp-module-title::before {content: "\f00b" !important;}

.flex-uvod-aktuality {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  row-gap: 16px;
  column-gap: 16px;
}
.item-aktuality-fzs, .item-aktuality-msh, .item-aktuality-msr, .item-aktuality-msp, .item-aktuality-mst { order: 0; flex: 0 1 calc(33% - 16px); align-self: auto; padding: 16px; border-radius: 10px;}

#sp-footer .container-inner {padding: 16px 0; border-top: unset;}
#sp-footer .container-inner p {margin-bottom: unset;}


/* =========================================================
   2. ZÁKLAD A TYPOGRAFIE
   Třídu eduframe přidejte na body v nastavení šablony.
   ========================================================= */

.eduframe {
    color: var(--ef-text);
    background-color: var(--ef-surface);
    font-family: var(--ef-font-sans);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.eduframe *,
.eduframe *::before,
.eduframe *::after {
    box-sizing: border-box;
}

/*.eduframe a {
    color: var(--ef-blue);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}

.eduframe a:hover {
    color: var(--ef-blue-hover);
}*/

/* =========================================================
   3. PŘESKOČENÍ NA OBSAH A FOKUS
   ========================================================= */

.eduframe .skip-link {
    position: fixed;
    z-index: 99999;
    top: var(--ef-space-3);
    left: var(--ef-space-3);
    padding: 12px 18px;
    color: #ffffff;
    background-color: var(--ef-focus);
    border: 3px solid #ffffff;
    border-radius: var(--ef-radius-sm);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 0 0 3px var(--ef-focus);
    transform: translateY(-180%);
    transition: transform var(--ef-transition);
}

.eduframe .skip-link:focus {
    transform: translateY(0);
}

.eduframe :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: none;
}

.eduframe :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 4px solid var(--ef-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px var(--ef-focus-halo);
}

/* =========================================================
   4. ROZDĚLOVNÍK PRACOVIŠŤ – ALTERNATIVNÍ LAYOUT MOD_MENU
   Layout: /html/mod_menu/eduframe.php
   ========================================================= */

.eduframe-portal-nav {
    width: 100%;
}

.eduframe-portal-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.eduframe-portal-item {
    /*flex: 0 1 calc((100% - 72px) / 5);*/
    min-width: 210px;
    max-width: 280px;
    margin: 0;
    padding: 0;
}

.eduframe-portal-item--home {
    --card-color: var(--ef-neutral);
    --card-hover: var(--ef-neutral-hover);
    --card-on-color: #fff;
}

.eduframe-portal-item--blue {
    --card-color: var(--ef-blue);
    --card-hover: var(--ef-blue-hover);
    --card-on-color: #fff;
}

.eduframe-portal-item--red {
    --card-color: var(--ef-red);
    --card-hover: var(--ef-red-hover);
    --card-on-color: #fff;
}

.eduframe-portal-item--green {
    --card-color: var(--ef-green);
    --card-hover: var(--ef-green-hover);
    --card-on-color: #fff;
}

.eduframe-portal-item--yellow {
    --card-color: var(--ef-yellow);
    --card-hover: var(--ef-yellow-hover);
    --card-on-color: var(--ef-yellow-text);
}

.eduframe-portal-item--sky {
    --card-color: var(--ef-sky);
    --card-hover: var(--ef-sky-hover);
    --card-on-color: #fff;
}

.eduframe-portal-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(54px, auto) 1fr auto;
    justify-items: center;
    min-height: 430px;
    height: 100%;
    padding: 26px 14px 0;
    overflow: hidden;
    background-color: var(--ef-surface);
    color: var(--ef-text);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow-md);
    text-align: center;
    text-decoration: none !important;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.eduframe-portal-card:hover {
    color: var(--ef-text);
    border-color: var(--card-color);
    box-shadow: var(--ef-shadow-lg);
    transform: translateY(-6px);
}

.eduframe-portal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    background-color: var(--card-color);
    color: var(--card-on-color);
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 5px 14px rgba(21, 43, 74, .19),
        0 0 0 1px rgba(21, 43, 74, .05);
    font-size: 34px;
    line-height: 1;
    transition: background-color .22s ease, transform .22s ease;
}

.eduframe-portal-card:hover .eduframe-portal-icon {
    background-color: var(--card-hover);
    transform: scale(1.04);
}

.eduframe-portal-title {
    display: block;
    max-width: 100%;
    margin-bottom: 8px;
    color: var(--card-color);
    font-size: clamp(1.4rem, 1.3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

.eduframe-portal-subtitle {
    display: block;
    max-width: 190px;
    min-height: 50px;
    margin-bottom: 10px;
    color: var(--ef-text-muted);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

.eduframe-portal-illustration {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    min-height: 125px;
    margin-top: auto;
    padding: 4px 4px 12px;
}

.eduframe-portal-illustration img {
    display: block;
    width: 100%;
    max-width: 245px;
    height: 125px;
    object-fit: contain;
    object-position: center bottom;
}

.eduframe-portal-enter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: calc(100% + 28px);
    min-height: 58px;
    margin: 0 -14px;
    background-color: var(--card-color);
    color: var(--card-on-color);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .22s ease;
}

.eduframe-portal-card:hover .eduframe-portal-enter {
    background-color: var(--card-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.eduframe-portal-enter i {
    transition: transform .22s ease;
}

.eduframe-portal-card:hover .eduframe-portal-enter i {
    transform: translateX(4px);
}

.eduframe-portal-item.is-active .eduframe-portal-card {
    border: 3px solid var(--card-color);
    box-shadow:
        var(--ef-shadow-md),
        inset 0 0 0 2px #fff;
}

.eduframe-portal-item.is-active .eduframe-portal-enter {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.eduframe-portal-card:focus {
    outline: none;
}

.eduframe-portal-card:focus-visible {
    outline: 4px solid var(--ef-focus);
    outline-offset: 5px;
    box-shadow:
        0 0 0 4px #fff,
        var(--ef-shadow-lg);
}

@media (max-width: 1399.98px) {
    .eduframe-portal-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .eduframe-portal-card {
        min-height: 410px;
    }
}

@media (max-width: 1199.98px) {
    .eduframe-portal-item {
        flex-basis: calc((100% - 36px) / 3);
        max-width: 300px;
    }
}

@media (max-width: 767.98px) {
    .eduframe-portal-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    
    .eduframe-portal-item {
        flex-basis: calc((100% - 14px) / 2);
        max-width: 340px;
    }

    .eduframe-portal-card {
        min-height: 390px;
        padding-top: 22px;
    }

    .eduframe-portal-icon {
        width: 72px;
        height: 72px;
        font-size: 29px;
    }
}

@media (max-width: 479.98px) {
    .eduframe-portal-menu {
        grid-template-columns: 1fr;
    }
    
    .eduframe-portal-item {
        flex-basis: 100%;
        width: 100%;
        max-width: 360px;
    }
    
    .eduframe-portal-card {
        min-height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eduframe-portal-card,
    .eduframe-portal-icon,
    .eduframe-portal-enter,
    .eduframe-portal-enter i {
        transition: none !important;
    }

    .eduframe-portal-card:hover,
    .eduframe-portal-card:hover .eduframe-portal-icon,
    .eduframe-portal-card:hover .eduframe-portal-enter i {
        transform: none;
    }
}

@media (forced-colors: active) {
    .eduframe-portal-card {
        border: 2px solid ButtonText;
    }

    .eduframe-portal-icon,
    .eduframe-portal-enter {
        border: 2px solid ButtonText;
    }

    .eduframe-portal-card:focus-visible {
        outline: 4px solid Highlight;
    }
}

/* =========================================================
   5. HLAVNÍ MENU – BAREVNÉ VARIANTY PRO HELIX ULTIMATE
   Třídu přidejte na stejný element jako .eduframe:
   theme-neutral / theme-blue / theme-red /
   theme-green / theme-yellow / theme-sky
   ========================================================= */

.eduframe.theme-neutral {
    --ef-site: var(--ef-neutral);
    --ef-site-hover: var(--ef-neutral-hover);
    --ef-site-active: var(--ef-neutral-active);
    --ef-site-on: #ffffff;
}

.eduframe.theme-blue {
    --ef-site: var(--ef-blue);
    --ef-site-hover: var(--ef-blue-hover);
    --ef-site-active: var(--ef-blue-active);
    --ef-site-on: #ffffff;
}

.eduframe.theme-red {
    --ef-site: var(--ef-red);
    --ef-site-hover: var(--ef-red-hover);
    --ef-site-active: var(--ef-red-active);
    --ef-site-on: #ffffff;
}

.eduframe.theme-green {
    --ef-site: var(--ef-green);
    --ef-site-hover: var(--ef-green-hover);
    --ef-site-active: var(--ef-green-active);
    --ef-site-on: #ffffff;
}

.eduframe.theme-yellow {
    --ef-site: var(--ef-yellow);
    --ef-site-hover: var(--ef-yellow-hover);
    --ef-site-active: var(--ef-yellow-active);
    --ef-site-on: var(--ef-yellow-text);
}

.eduframe.theme-sky {
    --ef-site: var(--ef-sky);
    --ef-site-hover: var(--ef-sky-hover);
    --ef-site-active: var(--ef-sky-active);
    --ef-site-on: #ffffff;
}

.eduframe.theme-neutral #sp-header,
.eduframe.theme-neutral #sp-header.header-sticky {
    background-color: var(--ef-neutral-alt);
}

.eduframe.theme-blue #sp-header,
.eduframe.theme-blue #sp-header.header-sticky {
    background-color: var(--ef-blue-alt);
}

.eduframe.theme-red #sp-header,
.eduframe.theme-red #sp-header.header-sticky {
    background-color: var(--ef-red-alt);
}

.eduframe.theme-green #sp-header,
.eduframe.theme-green #sp-header.header-sticky {
    background-color: var(--ef-green-alt);
}

.eduframe.theme-yellow #sp-header,
.eduframe.theme-yellow #sp-header.header-sticky {
    background-color: var(--ef-yellow-alt);
}

.eduframe.theme-sky #sp-header,
.eduframe.theme-sky #sp-header.header-sticky {
    background-color: var(--ef-sky-alt);
}

img.logo-image {
    display: unset;
    border-radius: 154px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #797979;
    padding: 2px;
}

.header-sticky .logo-image {
  height: 60px;
  transition: all .5s linear;
  position: relative;
}

.eduframe #sp-menu .sp-megamenu-parent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
}

.eduframe #sp-menu .sp-megamenu-parent > li {
    margin: 0;
    padding: 0;
}

/* Skutečná mezera mezi jednotlivými tlačítky hlavního menu. */
.eduframe #sp-menu .sp-megamenu-parent > li + li {
    margin-left: 18px !important;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a,
.eduframe #sp-menu .sp-megamenu-parent > li > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 48px;
    padding: 11px 17px;
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site, var(--ef-blue));
    border: 2px solid var(--ef-site, var(--ef-blue));
    border-radius: var(--ef-radius-md);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--ef-shadow-sm);

    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: center calc(100% - 7px);
    background-size: 0 2px;

    transition:
        background-color var(--ef-transition),
        border-color var(--ef-transition),
        background-size var(--ef-transition),
        box-shadow var(--ef-transition),
        transform var(--ef-transition);
}

.eduframe #sp-menu .sp-megamenu-parent > li > a::before {
    display: none !important;
}

/* Font Awesome ikony z Helix Menu Builderu. */
.eduframe #sp-menu .sp-megamenu-parent :is(a, span) > :is(
    i,
    .menu-icon,
    .fa,
    .fas,
    .far,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-brands
),
.eduframe .offcanvas-menu :is(a, span) > :is(
    i,
    .menu-icon,
    .fa,
    .fas,
    .far,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-brands
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    min-width: 1.35em;
    margin: 0;
    color: currentColor;
    font-size: 1.05em;
    line-height: 1;
}

/* Pokud .menu-icon obsahuje vlastní <i>, wrapper nepřebarvuje strukturu. */
.eduframe :is(#sp-menu, .offcanvas-menu) .menu-icon > i {
    color: currentColor;
    font-size: inherit;
    line-height: 1;
}

.eduframe #sp-menu .sp-megamenu-parent > li:hover > a,
.eduframe #sp-menu .sp-megamenu-parent > li:hover > span {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site-hover, var(--ef-blue-hover));
    border-color: var(--ef-site-hover, var(--ef-blue-hover));
    background-size: calc(100% - 34px) 2px;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: var(--ef-shadow-md);
}

.eduframe #sp-menu .sp-megamenu-parent > li:is(.active, .current, .current-item) > a,
.eduframe #sp-menu .sp-megamenu-parent > li:is(.active, .current, .current-item) > span {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site-active, var(--ef-blue-active));
    border-color: var(--ef-site-active, var(--ef-blue-active));
    box-shadow: var(--ef-shadow-sm), inset 0 -4px 0 currentColor;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a:focus-visible {
    outline: 4px solid var(--ef-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px #ffffff, var(--ef-shadow-md);
    transform: translateY(-2px);
}

.eduframe #sp-menu .sp-megamenu-parent > li:is(
    .active,
    .current,
    .current-item
) > a,
.eduframe #sp-menu .sp-megamenu-parent > li:is(
    .active,
    .current,
    .current-item
) > span {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site-active, var(--ef-blue-active));
    border-color: var(--ef-site-active, var(--ef-blue-active));
    background-size: calc(100% - 34px) 2px;
    text-decoration: none !important;
    box-shadow: var(--ef-shadow-sm);
}

/* Neutrální odkazy, například Úvod a Kontakty */
.eduframe #sp-menu .sp-megamenu-parent > li.menu-neutral > a,
.eduframe #sp-menu .sp-megamenu-parent > li.menu-contact > a {
    color: var(--ef-text) !important;
    background-color: #ffffff;
    border-color: var(--ef-border-strong);
}

.eduframe #sp-menu .sp-megamenu-parent > li.menu-neutral:hover > a,
.eduframe #sp-menu .sp-megamenu-parent > li.menu-contact:hover > a {
    color: var(--ef-site-active, var(--ef-blue-active)) !important;
    background-color: var(--ef-surface-alt);
    border-color: var(--ef-site, var(--ef-blue));
}

.eduframe #sp-menu .sp-megamenu-parent > li.menu-switcher > a {
    color: var(--ef-site-active, var(--ef-blue-active)) !important;
    background-color: #ffffff;
    border: 2px solid var(--ef-site, var(--ef-blue));
}

.eduframe #sp-menu .sp-megamenu-parent > li.menu-switcher:hover > a {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site, var(--ef-blue));
}

/* Dropdown */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown {
    padding-top: 12px;
}

.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    min-width: 260px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-md);
    box-shadow: var(--ef-shadow-lg);
}

.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li > a,
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li > span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--ef-text) !important;
    background-color: transparent;
    border-radius: var(--ef-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li:hover > a,
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li:hover > span {
    color: var(--ef-site-active, var(--ef-blue-active)) !important;
    background-color: var(--ef-surface-alt);
    text-decoration: underline;
}

.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li:is(.active, .current, .current-item) > a {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site-active, var(--ef-blue-active));
}

/* =========================================================
   6. OFFCANVAS / MOBILNÍ MENU
   ========================================================= */

.eduframe .offcanvas-menu .offcanvas-inner {
    padding: 24px 20px;
}

.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) > li > a,
.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) > li > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--ef-text) !important;
    background-color: #ffffff;
    border: 2px solid var(--ef-border);
    border-radius: var(--ef-radius-md);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) > li:hover > a,
.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) > li:hover > span {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site, var(--ef-blue));
    border-color: var(--ef-site, var(--ef-blue));
    text-decoration: underline;
}

/*.eduframe .offcanvas-menu :where(ul.menu, ul.mod-menu) > li:is(.active, .current, .current-item) > a {
    color: var(--ef-site-on, #ffffff) !important;
    background-color: var(--ef-site-active, var(--ef-blue-active));
    border-color: var(--ef-site-active, var(--ef-blue-active));
    box-shadow: inset 5px 0 0 currentColor;
}*/

.offcanvas-menu ul.menu > li.menu-parent > .nav-header > .menu-toggler {right: 10px !important;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler,
.offcanvas-menu ul.menu > li.menu-parent > .nav-header > .menu-toggler {
  width: 100% !important;
  text-align: right !important;
}

/* =========================================================
   6A. IKONY A IKONOVÁ TLAČÍTKA
   ========================================================= */

.eduframe .ef-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    min-width: 1.25em;
    color: currentColor;
    line-height: 1;
}

/* Ikonové tlačítko musí mít přístupný název přes aria-label. */
.eduframe .ef-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--ef-text);
    background-color: #ffffff;
    border: 2px solid var(--ef-border-strong);
    border-radius: var(--ef-radius-md);
    box-shadow: var(--ef-shadow-sm);
}

.eduframe .ef-icon-button:hover {
    color: var(--ef-site-active, var(--ef-blue-active));
    background-color: var(--ef-surface-alt);
    border-color: var(--ef-site, var(--ef-blue));
}

/* =========================================================
   7. TLAČÍTKA
   ========================================================= */

.eduframe .btn,
.eduframe button,
.eduframe input[type="submit"],
.eduframe input[type="button"] {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: var(--ef-radius-md);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--ef-transition),
        border-color var(--ef-transition),
        box-shadow var(--ef-transition),
        transform var(--ef-transition);
}

.eduframe .btn-primary {
    color: #ffffff;
    background-color: var(--ef-blue);
    border-color: var(--ef-blue);
}

.eduframe .btn-primary:hover {
    color: #ffffff;
    background-color: var(--ef-blue-hover);
    border-color: var(--ef-blue-hover);
    text-decoration: underline;
    transform: translateY(-1px);
}

.eduframe .btn-secondary {
    color: var(--ef-text);
    background-color: #ffffff;
    border-color: var(--ef-border-strong);
}

.eduframe .btn-secondary:hover {
    color: var(--ef-blue-active);
    background-color: var(--ef-surface-alt);
    border-color: var(--ef-blue);
    text-decoration: underline;
}

.eduframe .btn-warning {
    color: var(--ef-yellow-text);
    background-color: var(--ef-yellow);
    border-color: var(--ef-yellow);
}

.eduframe .btn-warning:hover {
    color: var(--ef-yellow-text);
    background-color: var(--ef-yellow-hover);
    border-color: var(--ef-yellow-hover);
    text-decoration: underline;
}

.eduframe :where(.btn, button, input[type="submit"], input[type="button"]):disabled,
.eduframe :where(.btn, button)[aria-disabled="true"] {
    color: #4b5563;
    background-color: #e5e7eb;
    border-color: #c7cdd4;
    cursor: not-allowed;
    opacity: 1;
}

/* =========================================================
   8. FORMULÁŘE
   ========================================================= */

.eduframe label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--ef-text);
    font-weight: 700;
}

.eduframe :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ef-text);
    background-color: #ffffff;
    border: 2px solid var(--ef-border-strong);
    border-radius: var(--ef-radius-sm);
    line-height: 1.4;
}

.eduframe textarea {
    min-height: 140px;
    resize: vertical;
}

.eduframe :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--ef-danger);
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}

.eduframe .form-error,
.eduframe .invalid-feedback {
    margin-top: 5px;
    color: #991b1b;
    font-weight: 700;
}

.eduframe input[type="checkbox"],
.eduframe input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--ef-blue);
}

/* =========================================================
   9. KARTY, OZNÁMENÍ A TABULKY
   ========================================================= */

.eduframe .ef-card {
    padding: clamp(20px, 3vw, 32px);
    background-color: #ffffff;
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow-sm);
}

.eduframe .ef-alert {
    padding: 16px 18px;
    border: 2px solid currentColor;
    border-left-width: 6px;
    border-radius: var(--ef-radius-md);
}

.eduframe .ef-alert-info {
    color: #064d8e;
    background-color: #eaf4ff;
}

.eduframe .ef-alert-success {
    color: #0c5a2b;
    background-color: #eaf8ef;
}

.eduframe .ef-alert-warning {
    color: var(--ef-warning-text);
    background-color: var(--ef-warning-bg);
}

.eduframe .ef-alert-danger {
    color: #8a1717;
    background-color: #fff0f0;
}

.eduframe .table-responsive {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.eduframe table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ef-text);
}

.eduframe th,
.eduframe td {
    padding: 12px 14px;
    border: 1px solid var(--ef-border-strong);
}

.eduframe th {
    color: #ffffff;
    background-color: var(--ef-neutral);
    font-weight: 800;
}

.eduframe tbody tr:nth-child(even) {
    background-color: var(--ef-surface-alt);
}


/* =========================================================
   10. RESPONZIVITA HLAVNÍHO MENU
   ========================================================= */

@media (max-width: 1399.98px) {
    .eduframe #sp-menu .sp-megamenu-parent > li + li {
        margin-left: 12px !important;
    }

    .eduframe #sp-menu .sp-megamenu-parent > li > a,
    .eduframe #sp-menu .sp-megamenu-parent > li > span {
        padding-inline: 13px;
        font-size: 0.9rem;
    }
}



/* =========================================================
   11. OMEZENÍ POHYBU A VYSOKÝ KONTRAST
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .eduframe *,
    .eduframe *::before,
    .eduframe *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .eduframe #sp-menu .sp-megamenu-parent > li:hover > a {
        transform: none;
    }
}

@media (forced-colors: active) {
    .eduframe :where(a, button, input, select, textarea, summary) {
        forced-color-adjust: auto;
    }

    .eduframe #sp-menu .sp-megamenu-parent > li > a,
    .eduframe .btn {
        border: 2px solid ButtonText;
    }

    .eduframe :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 4px solid Highlight;
    }
}

/* =========================================================
   12. TISK
   ========================================================= */

@media print {
    .eduframe .skip-link,
    .eduframe #sp-menu,
    .eduframe .offcanvas-menu,
    .eduframe-portal-nav,
    .eduframe .btn,
    .eduframe button {
        display: none !important;
    }

    .eduframe {
        color: #000000;
        background-color: #ffffff;
        font-size: 11pt;
    }

    .eduframe a {
        color: #000000;
        text-decoration: underline;
    }

    .eduframe a[href^="http"]::after {
        content: " (" attr(href) ")";
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   13. HLAVNÍ MENU – BARVY PODLE CSS TŘÍDY ODKAZU
   Joomla: položka menu → Typ odkazu → CSS styl odkazu

   Úvod               = menu-home
   FZŠ Řezníčkova     = menu-blue
   MŠ Hodolanská      = menu-red
   MŠ Řezníčkova      = menu-green
   MŠ Purkyňova       = menu-yellow
   MŠ Táboritů        = menu-sky

   Na menu jednotlivých škol se tyto třídy nepřidávají.
   Jejich jednotnou barvu určuje třída stránky theme-*.
   ========================================================= */

.offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span {
  display: block;
  font-size: unset;
  line-height: unset;
  opacity: unset;
  text-align: center;
}

/* Barvy jednotlivých odkazů společného hlavního menu. */
.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-home,
.eduframe .offcanvas-menu a.menu-home {
    --menu-item-color: var(--ef-neutral);
    --menu-item-hover: var(--ef-neutral-hover);
    --menu-item-active: var(--ef-neutral-active);
    --menu-item-text: #ffffff;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-blue,
.eduframe .offcanvas-menu a.menu-blue {
    --menu-item-color: var(--ef-blue);
    --menu-item-hover: var(--ef-blue-hover);
    --menu-item-active: var(--ef-blue-active);
    --menu-item-text: #ffffff;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-red,
.eduframe .offcanvas-menu a.menu-red {
    --menu-item-color: var(--ef-red);
    --menu-item-hover: var(--ef-red-hover);
    --menu-item-active: var(--ef-red-active);
    --menu-item-text: #ffffff;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-green,
.eduframe .offcanvas-menu a.menu-green {
    --menu-item-color: var(--ef-green);
    --menu-item-hover: var(--ef-green-hover);
    --menu-item-active: var(--ef-green-active);
    --menu-item-text: #ffffff;
}

.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-yellow,
.eduframe .offcanvas-menu a.menu-yellow {
    --menu-item-color: var(--ef-yellow);
    --menu-item-hover: var(--ef-yellow-hover);
    --menu-item-active: var(--ef-yellow-active);
    --menu-item-text: var(--ef-yellow-text);
}

.eduframe #sp-menu .sp-megamenu-parent > li > a.menu-sky,
.eduframe .offcanvas-menu a.menu-sky {
    --menu-item-color: var(--ef-sky);
    --menu-item-hover: var(--ef-sky-hover);
    --menu-item-active: var(--ef-sky-active);
    --menu-item-text: #ffffff;
}

/* Výchozí vzhled barevné položky společného hlavního menu. */
.eduframe #sp-menu .sp-megamenu-parent > li > a:is(
    .menu-home,
    .menu-blue,
    .menu-red,
    .menu-green,
    .menu-yellow,
    .menu-sky
),
.eduframe .offcanvas-menu a:is(
    .menu-home,
    .menu-blue,
    .menu-red,
    .menu-green,
    .menu-yellow,
    .menu-sky
) {
    color: var(--menu-item-text) !important;
    background-color: var(--menu-item-color);
    border-color: var(--menu-item-color);
}

/* Hover. */
.eduframe #sp-menu .sp-megamenu-parent > li:hover > a:is(
    .menu-home,
    .menu-blue,
    .menu-red,
    .menu-green,
    .menu-yellow,
    .menu-sky
),
.eduframe .offcanvas-menu a:is(
    .menu-home,
    .menu-blue,
    .menu-red,
    .menu-green,
    .menu-yellow,
    .menu-sky
):hover {
    color: var(--menu-item-text) !important;
    background-color: var(--menu-item-hover);
    border-color: var(--menu-item-hover);
    background-size: calc(100% - 34px) 2px;
    box-shadow: var(--ef-shadow-sm);
}

/* Jednotná barva menu konkrétní školy zůstává řízena třídou stránky:
   eduframe theme-blue / theme-red / theme-green / theme-yellow / theme-sky.
   Položky těchto školních menu nepotřebují žádnou menu-* třídu. */
   
/* =========================================================
   VÍCESLOUPCOVÉ DROPDOWN MENU – SVISLÉ ŘAZENÍ PO SLOUPCÍCH

   CSS třídy rodičovské položky:
   cc-2sl = dva sloupce
   cc-3sl = tři sloupce

   Zarovnání dropdownu:
   cc-left
   cc-center
   cc-right
   ========================================================= */

.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl) {
    position: relative;
}

/* Základní nastavení dropdownu. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl)
> .sp-dropdown {
    max-width: calc(100vw - 24px);
    max-height: none;
    overflow: visible !important;
    overscroll-behavior: contain;
    z-index: 1000;
}

/* Pevnější šířka pro dva sloupce. */
.eduframe #sp-menu .sp-megamenu-parent > li.cc-2sl
> .sp-dropdown {
    width: 520px !important;
}

/* Pevnější šířka pro tři sloupce. */
.eduframe #sp-menu .sp-megamenu-parent > li.cc-3sl
> .sp-dropdown {
    width: 820px !important;
}

/* Levé zarovnání. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl).cc-left
> .sp-dropdown {
    left: 0 !important;
    right: auto !important;
    transform: none;
}

/* Pravé zarovnání. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl).cc-right
> .sp-dropdown {
    left: auto !important;
    right: 0 !important;
    transform: none;
}

/* Centrované zarovnání. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl).cc-center
> .sp-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

/* Vnitřní obal musí umožnit zobrazení submenu dalších úrovní. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl)
> .sp-dropdown > .sp-dropdown-inner {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

/* Dva sloupce – položky se řadí shora dolů. */
.eduframe #sp-menu .sp-megamenu-parent > li.cc-2sl
> .sp-dropdown > .sp-dropdown-inner > ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;

    column-count: 2;
    column-width: 235px;
    column-gap: 18px;
}

/* Tři sloupce – položky se řadí shora dolů. */
.eduframe #sp-menu .sp-megamenu-parent > li.cc-3sl
> .sp-dropdown > .sp-dropdown-inner > ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;

    column-count: 3;
    column-width: 245px;
    column-gap: 18px;
}

/* Každá položka zůstane celá v jednom sloupci. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl)
> .sp-dropdown > .sp-dropdown-inner > ul > li {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0 0 6px;

    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Odkaz vyplní šířku svého sloupce. */
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl)
> .sp-dropdown > .sp-dropdown-inner > ul > li > a,
.eduframe #sp-menu .sp-megamenu-parent > li:is(.cc-2sl, .cc-3sl)
> .sp-dropdown > .sp-dropdown-inner > ul > li > span {
    display: flex;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Položka s dalším submenu je kotevním bodem. */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child {
    position: relative;
}

/* Třetí a další úroveň submenu se otevírá doprava. */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown
.sp-dropdown.sp-dropdown-sub {
    position: absolute;
    z-index: 1100;

    top: 0 !important;
    left: 100% !important;
    right: auto !important;

    width: max-content !important;
    min-width: 260px;
    max-width: 360px;

    padding-left: 8px;
    overflow: visible !important;
    transform: none !important;
}

/* Vnitřní box třetí a další úrovně. */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown
.sp-dropdown.sp-dropdown-sub > .sp-dropdown-inner {
    width: 100%;
    min-width: 260px;
    padding: 10px;

    background: #ffffff;
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-md);
    box-shadow: var(--ef-shadow-lg);

    overflow: visible !important;
}

/* Odkazy ve třetí a další úrovni. */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown
.sp-dropdown.sp-dropdown-sub li > a,
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown
.sp-dropdown.sp-dropdown-sub li > span {
    display: flex;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Volitelně lze konkrétní submenu otevřít doleva.
   Rodičovské podpoložce přidejte třídu submenu-left. */
.eduframe #sp-menu .sp-megamenu-parent .sp-dropdown
li.submenu-left > .sp-dropdown.sp-dropdown-sub {
    left: auto !important;
    right: 100% !important;

    padding-right: 8px;
    padding-left: 0;
}

/* Na užším desktopu se tři sloupce změní na dva. */
@media (max-width: 1199.98px) {
    .eduframe #sp-menu .sp-megamenu-parent > li.cc-3sl
    > .sp-dropdown {
        width: 520px !important;
    }

    .eduframe #sp-menu .sp-megamenu-parent > li.cc-3sl
    > .sp-dropdown > .sp-dropdown-inner > ul {
        column-count: 2;
        column-width: 235px;
    }
}


@media (max-width:575.98px) {
   #sp-header {height: 60px;}
   .header-sticky .logo-image {height: 36px;}
  .mod-pracoviste {margin-left: 0px !important;}
  .flex-uvod-aktuality {display: flex;flex-direction: column;}
}