/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 02 2026 | 16:55:13 */
/* =====================================================================
   QuickSource — CSS výpisu pracovních pozic (it-projekty)
   ---------------------------------------------------------------------
   Vyextrahováno ze style.css pro přenos na jiný web (např. drill.cz).
   Pokrývá výpis na /projekty/ renderovaný shortcodem [it_projects]
   (functions.php → quicksource_shortcode).

   Závislosti, které je třeba zařídit i na cílovém webu:
   - Layout/šířku výpisu dává RODIČOVSKÝ sloupec (Gutenberg .wp-block-column),
     ne tyto třídy — proto tu nejsou žádná media-query pravidla. Karty
     pozic se skládají pod sebe, šířku přebírají od kontejneru.
   - Ikonky .qs-icon používají inline SVG sprite s odkazem na #qs-i-<name>
     (viz funkce qs_icon() v functions.php). Bez vloženého <symbol id="qs-i-…">
     se ikony nezobrazí.
   - Barvy jsou navázané na var(--themeht-primary-color) (#F80). Odvozené
     odstíny (tmavší hover, světlé podklady, poloprůhledné stíny/focus) jsou
     počítané přes color-mix(), takže pro přebarvení stačí změnit tu jednu
     proměnnou. Výjimka: šipka v <select> je inline SVG data-URI, kam CSS
     proměnná nejde — barva je tam napevno (%23F80).

   Markup výpisu (zjednodušeně):
     <a id="projects"></a>
     <div class="tags-menu tags-region"> … <label><select>… </div>   ← filtry Země/Region
     <div class="tags-menu"> <a><b>…</b><span class="dot-count">…</span></a> … </div>  ← kategorie
     <div class="tags-menu tags-submenu"> … </div>                    ← podfiltr technologií
     <div class="filter-active"><h2>…</h2><a class="filter-cancel">…</a></div>
     <a class="item-link"><div class="item">
        <h3>…</h3>
        <div class="tags"><span>…</span><span class="tag-keyword">…</span></div>
        <svg class="qs-icon">… <b>…</b> …
        <span class="item-detail">Detail →</span>
     </div></a>
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) Kontejner a karta pozice (.items / .item)
   POZN.: .item je sdílená třída (výpis, homepage widget, vyhledávání,
   specialisté). V kaskádě style.css se uplatní obě definice níže —
   ve výpisu vyhrává šířka calc(100% - 40px) z druhého bloku.
   --------------------------------------------------------------------- */
.items {
   display: block;
}
.item {
   width: 700px;            /* přepíše se níže na calc() v kontextu výpisu */
   text-align: left;
   position: relative;
   margin: 0 auto 25px auto;
}
.item {
   /* Lehce šedé pozadí karty — odliší pozici od bílého pozadí stránky */
   background: #fafbfc;
   border-radius: 10px;
   padding: 10px 20px 20px 20px;
   width: calc(100% - 40px);
}
.item h3 {
   font-weight: 700;
   margin: 8px 0;
   /* Explicitní velikost, ať nadpis nedědí obří h3 z tématu */
   font-size: 24px;
   line-height: 1.3;
}
.item h3 a {
   text-decoration: none;
}
.item h3 a:hover {
   text-decoration: underline;
}


/* ---------------------------------------------------------------------
   2) Štítky/tagy uvnitř karty (.tags)
   --------------------------------------------------------------------- */
.tags {
   /*padding-bottom: 13px;*/
}
.item .tags + p:last-child {
   margin-bottom: 0;
   margin-top: 8px;
}
.tags span {
   background: var(--themeht-primary-color);
   display: inline-block;
   border-radius: 5px;
   font-size: 11px;
   padding: 2px 7px;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 2px;
   cursor: default;
   letter-spacing: 1px;
   white-space: nowrap;
}
.tags span.tag-keyword {
   background: #666;
}
/* Klikací tagy (shortcode [it_projects_tags]) — související s výpisem */
a.tag-link {
   text-decoration: none;
}
a.tag-link span {
   cursor: pointer;
   transition: background 0.2s;
}
a.tag-link:hover span {
   background: color-mix(in srgb, var(--themeht-primary-color), black 22%);
}


/* ---------------------------------------------------------------------
   3) Filtr kategorií (.tags-menu) + počítadlo (.dot-count)
   --------------------------------------------------------------------- */
.tags-menu {
   display: flex;
   justify-content: flex-start;
   align-content: stretch;
   align-items: stretch;
   margin-bottom: 15px;
   flex-wrap: wrap;
   position: relative;
   z-index: 999;
   gap: 8px;
   margin-block-start: 0;
}
.tags-menu a {
   display: flex;
   flex: 1 1 auto;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   gap: 5px;
   background: #fff;
   color: var(--themeht-primary-color);
   border-radius: 5px;
   padding: 6px 8px;
   font-size: 13px;
   line-height: 1.35;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
   border: 1.5px solid transparent;
   transition: box-shadow 0.2s, border-color 0.2s;
}
/* Zabrání natažení osamoceného prvku na celou šířku */
.tags-menu::after {
   content: '';
   flex: 999 1 auto;
}
.tags-menu .dot-count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--themeht-primary-color);
   color: #fff;
   font-size: 10px;
   font-weight: 400;
   min-width: 11px;
   border-radius: 9px;
   padding: 3.5px 3px 2.5px 3px;
   line-height: 1;
   margin-top: 1px;
}
.tags-menu a.active .dot-count {
   background: rgba(255,255,255,.85);
   color: var(--themeht-primary-color);
}
.tags-menu a:hover {
   box-shadow: 0 2px 12px color-mix(in srgb, var(--themeht-primary-color) 18%, transparent);
   border-color: var(--themeht-primary-color);
}
.tags-menu a.active {
   background: var(--themeht-primary-color);
   color: #fff;
}
.tags-menu a b {
   display: block;
   width: 100%;
}

/* Podfiltr technologií (.tags-submenu) */
.tags-menu.tags-submenu {
   display: block;
   margin-block-start: 0;
   margin-top: 10px;
}
.tags-menu.tags-submenu a {
   display: inline-block;
   width: auto;
   height: 23px;
   line-height: 1.5;
   padding: 3px 10px;
   margin: 0 9px 2px 0;
   min-width: 1px;
}
.tags-menu a b {
   display: inline;
}
.tags-menu + p {
   margin-block-start: 0;
}


/* ---------------------------------------------------------------------
   4) Filtr Země / Region (.tags-region)
   --------------------------------------------------------------------- */
.tags-region {
   margin-bottom: 15px;
   padding-bottom: 14px;
   border-bottom: 1px solid color-mix(in srgb, var(--themeht-primary-color) 22%, white);
   margin-block-start: 0;
}
.tags-region label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: #333;
   margin-right: 20px;
}
.tags-region label b {
   color: var(--themeht-primary-color);
   white-space: nowrap;
}
.tags-region select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F80' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
   border: 1.5px solid color-mix(in srgb, var(--themeht-primary-color) 22%, white);
   border-radius: 8px;
   padding: 8px 36px 8px 14px;
   font-size: 14px;
   font-family: inherit;
   color: #333;
   min-width: 200px;
   cursor: pointer;
   transition: border-color 0.2s, box-shadow 0.2s;
   outline: none;
}
.tags-region select:hover {
   border-color: var(--themeht-primary-color);
}
.tags-region select:focus {
   border-color: var(--themeht-primary-color);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--themeht-primary-color) 15%, transparent);
}
.tags-region select option:disabled {
   color: #bbb;
}


/* ---------------------------------------------------------------------
   5) Aktivní filtr + zrušení (.filter-active / .filter-cancel)
   --------------------------------------------------------------------- */
.filter-active {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 14px 0 6px;
   padding: 10px 16px;
   background: color-mix(in srgb, var(--themeht-primary-color) 6%, white);
   border-left: 4px solid var(--themeht-primary-color);
   border-radius: 4px;
   font-size: 15px;
}
.filter-active h2 {
   font-weight: 600;
   color: #333;
   font-size: 15px;
   margin: 0;
}
.filter-cancel {
   margin-left: auto;
   color: #d63638;
   text-decoration: none;
   font-size: 13px;
   font-weight: 500;
   padding: 4px 10px;
   border: 1px solid #d63638;
   border-radius: 4px;
   transition: background 0.2s, color 0.2s;
   white-space: nowrap;
}
.filter-cancel:hover {
   background: #d63638;
   color: #fff;
}


/* ---------------------------------------------------------------------
   6) Klikací karta pozice (a.item-link) + odkaz na detail (.item-detail)
   --------------------------------------------------------------------- */
a.item-link {
   text-decoration: none;
   color: inherit;
   display: block;
}
/* Mezera nad výpisem — odsadí první kartu od filtrů.
   (:first-of-type nelze, protože prvním <a> sourozencem je kotva #projects) */
.tags-menu + a.item-link,
.filter-active + a.item-link {
   margin-top: 30px;
}
a.item-link:hover .item {
   box-shadow: 0 2px 12px color-mix(in srgb, var(--themeht-primary-color) 18%, transparent);
   border-color: var(--themeht-primary-color);
}
a.item-link .item {
   transition: box-shadow 0.2s, border-color 0.2s;
   /* Jemný šedý rámeček v klidu, na hover se obarví primární barvou níže */
   border: 1.5px solid #e6e7e9;
   cursor: pointer;
}
a.item-link .item h3 {
   color: var(--themeht-primary-color);
   transition: text-decoration-color 0.2s;
   text-decoration: underline transparent;
}
a.item-link:hover .item h3 {
   text-decoration-color: var(--themeht-primary-color);
}
a.item-link .item b {
   color: var(--themeht-primary-color);
}
.item-detail {
   display: block;
   margin-top: 10px;
   font-size: 14px;
   font-weight: 700;
   color: var(--themeht-primary-color);
   opacity: 0.7;
   text-align: right;
   transition: opacity 0.2s;
}
a.item-link:hover .item-detail {
   opacity: 1;
}


/* ---------------------------------------------------------------------
   7) Inline SVG ikonky v kartě (.qs-icon)
   POZN.: vyžaduje SVG sprite se <symbol id="qs-i-contract|calendar|home">.
   --------------------------------------------------------------------- */
.qs-icon {
   width: 15px;
   height: 15px;
   vertical-align: -2px;
   display: inline-block;
   color: var(--themeht-primary-color);
   flex-shrink: 0;
}