/* ============================================== */
/* Definice vlastních fontů                       */
/* ============================================== */

/* --- BR Firma --- */
/* Poznámka: Předpokládám příponu .otf, pokud máš jinou, uprav format() i název souboru */
/* Cesta '../fonts/' je relativní k umístění custom.css v base/ */

@font-face {
    font-family: 'BR Firma'; /* Jednotné jméno pro celou rodinu */
    src: url('../fonts/BR\ Firma\ Regular.otf') format('opentype'); /* Cesta a formát! */
    font-weight: 400;  /* 400 = Normal/Regular */
    font-style: normal;
    font-display: swap; /* Pro rychlejší zobrazení textu */
  }
  
  @font-face {
    font-family: 'BR Firma';
    src: url('../fonts/BR Firma Regular Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'BR Firma';
    src: url('../fonts/BR\ Firma\ Bold.otf') format('opentype');
    font-weight: 700;  /* 700 = Bold */
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'BR Firma';
    src: url('../fonts/BR Firma Bold Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'BR Firma';
    src: url('../fonts/BR Firma Light.otf') format('opentype');
    font-weight: 300;  /* 300 = Light */
    font-style: normal;
    font-display: swap;
  }
  
  /* --- Přidej @font-face pro další potřebné řezy BR Firma (Medium, Black, atd.) --- */
  /* Např. BR Firma Black: font-weight: 900; */
  /* Např. BR Firma Thin: font-weight: 100; */
  
  
  /* --- Merriweather --- */
  /* Poznámka: Předpokládám příponu .ttf podle obrázku */
  
  @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/MERRIWEATHER-REGULAR.ttf') format('truetype'); /* Cesta a formát! */
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/MERRIWEATHER-ITALIC.ttf') format('truetype');
    font-weight: 400; /* Regular Italic */
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/MERRIWEATHER-BOLD.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/MERRIWEATHER-BOLDITALIC.ttf') format('truetype');
    font-weight: 700; /* Bold Italic */
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Merriweather';
    src: url('../fonts/MERRIWEATHER-LIGHT.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
    font-display: swap;
  }
  
  /* --- Přidej @font-face pro další potřebné řezy Merriweather (Black atd.) --- */
  /* Např. MERRIWEATHER-BLACK: font-weight: 900; */
  
  
  /* ============================================== */
  /* Použití fontů ve stylech                       */
  /* ============================================== */
  
  /* Příklad: Nastavení výchozího fontu pro celý text stránky */
  body {
    font-family: 'BR Firma', sans-serif; /* Výchozí je BR Firma Regular */
    font-weight: 400; /* Explicitně nastavíme váhu */
    font-style: normal;
    /* Další styly pro body... */
  }
  
  p {
    color:#000000;
    font-family: 'BR Firma', sans-serif;
  }
  
  a {
    color:#000000;
    font-family:  'BR Firma', sans-serif;
    font-weight: 700;
  }

  .linkedinp {
    font-size: 18px;
  }
  /* Příklad: Nastavení fontu pro hlavní nadpisy */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'BR Firma', sans-serif; /* Nadpisy také BR Firma */
    font-weight: 700; /* Ale tučnou variantou (Bold) */
    font-style: normal;
    /* Další styly pro nadpisy... */
  }
  
  /* Příklad: Použití Merriweather pro specifický element */
  .nejaky-specialni-text {
    font-family: 'Merriweather', serif; /* Použijeme Merriweather */
    font-weight: 300; /* Například Light řez */
    font-style: normal;
  }
  
  /* Příklad: Použití kurzívy Merriweather Bold */
  .dalsi-text {
      font-family: 'Merriweather', serif;
      font-weight: 700; /* Bold */
      font-style: italic; /* Italic */
  }

body {background-color: #ffed00;}

.logo {
    text-align: center;
    width: 50%;
}
@media (max-width: 767.98px) {
      
  .logo {
    width: 100%;
}
}

 /* Volitelné: Můžeme přidat vlastní styly sem nebo do externího CSS */
 body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Zajistí, že patička bude dole i na krátkých stránkách */
}
.main-content {
    flex: 1; /* Zajistí, že hlavní obsah zabere dostupný prostor */
    display: flex;
    align-items: center; /* Vertikální centrování obsahu */
    justify-content: center; /* Horizontální centrování obsahu */
    text-align: center; /* Centrování textu uvnitř */
    padding-top: 50px; /* Odsazení shora */
    padding-bottom: 50px; /* Odsazení zdola */
}
.logo-placeholder {
    /* Zde můžete vložit své SVG nebo <img /> tag */
    margin-bottom: 88px; /* Odpovídá zhruba mb-4, pro odsazení cca 20px+ */
    /* Pokud je SVG vloženo přímo, můžete mu nastavit šířku/výšku */
    /* např.: svg { width: 150px; height: auto; } */
    font-weight: bold;
    font-size: 1.5rem;
    color: #6c757d; /* Šedá barva pro placeholder */
}
/* Styl pro separátor můžeš také upravit */
.separator {
    margin: 0 0.75rem; /* Horizontální mezera kolem lomítka */
    color: #6c757d;   /* Barva lomítka */
    font-weight: normal; /* Zajisti, aby lomítko nebylo tučné, pokud je text kolem tučný */
    vertical-align: middle; /* Opakování z HTML pro jistotu */
}
 .pilire {
    margin-bottom: 60px;
 }

/* Na menších obrazovkách (pod md breakpointem) schováme lomítka a sloupce budou pod sebou */
@media (max-width: 767.98px) {
    .separator {
        display: none;
    }
    .col-md-4 {
         margin-bottom: 0.5rem; /* Malá mezera mezi položkami pod sebou */
    }
}

.linkedin-section {
     padding-top: 3rem;
     padding-bottom: 3rem;
}

footer {
    background-color: #f8f9fa; /* Světle šedé pozadí pro patičku */
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: auto; /* Odtlačí patičku na spodek stránky */
}
/* Styl pro text v hlavních sloupcích */
.pilire .col-auto.text-center { /* Cílíme jen textové sloupce */
    line-height: 1.1; /* Uprav dle potřeby pro mezeru mezi řádky */
    font-size: 22px; 
  }
  
  /* Styl pro tučné slovo, pokud je potřeba specifický */
  .pilire strong {
      font-weight: 800; /* Nebo jiná váha z tvého fontu BR Firma */
      color: #000000;
      font-size: 22px;
  }
  
  /* Styl pro separátorový sloupec a znak '/' */
  .separator-column {
    color: #000000;   /* Barva lomítka */
    font-weight: 500; /* Normální váha písma pro lomítko */
    font-size: 1.7rem; /* Mírně větší lomítko? Uprav dle potřeby */
    /* Vertikální zarovnání řeší align-items-center v HTML */
    /* Horizontální odsazení řeší px-2 v HTML */
  }
  
  
  /* === Styly pro MOBILNÍ ZOBRAZENÍ (pod sebou + separátor) === */

  @media (max-width: 767.98px) {

    .pilire {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Cílíme na textové sloupce */
    .pilire .col-auto.text-center {
        flex-basis: 100%;
        width: 100%;
        /* Přidáme mezeru jen pod blokem, za posledním ji odstraníme níže */
        margin-bottom: 1rem;
        /* Odstranili jsme border-bottom a padding-bottom */
    }

    /* Odebereme mezeru pod posledním textovým blokem */
    .pilire .col-auto.text-center:last-child {
        margin-bottom: 0;
    }

    /* === NOVÁ ČÁST: Přidání "/" pomocí ::after === */
    /* Cílíme na všechny textové bloky kromě posledního */
    .pilire .col-auto.text-center:not(:last-child)::after {
        content: '/';           /* Vložený obsah - znak lomítka */
        display: block;         /* Zobrazí se jako blok pod textem */
        text-align: center;     /* Vycentruje lomítko horizontálně */
        margin-top: 1rem;       /* Mezera mezi textem a lomítkem */
                                /* Mezera pod lomítkem je dána margin-bottom rodičovského .col-auto */

        /* Stylování samotného lomítka */
        color: #6c757d;           /* Barva (stejná jako desktopový separátor?) */
        font-weight: normal;       /* Váha písma */
        font-size: 1.2rem;         /* Velikost (může být jiná než desktop) */
        line-height: 1;          /* Výška řádku - pro jistotu */
    }
  }